Scribd
Cargar
2 vistas2 páginas

Codigo

El documento es un código HTML que describe una página web sobre un equipo, utilizando CSS para el diseño con Grid y Flexbox. Incluye secciones como un título, subtítulo, imágenes y botones de perfil y chat, además de estilos para dar formato a los elementos. La estructura está diseñada para ser responsiva y visualmente atractiva.

Cargado por

Edwin Velarde
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
2 vistas2 páginas

Codigo

El documento es un código HTML que describe una página web sobre un equipo, utilizando CSS para el diseño con Grid y Flexbox. Incluye secciones como un título, subtítulo, imágenes y botones de perfil y chat, además de estilos para dar formato a los elementos. La estructura está diseñada para ser responsiva y visualmente atractiva.

Cargado por

Edwin Velarde
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd

<!

DOCTYPE html>

<html lang="es">

<head>
*{ <meta charset="UTF-8">

padding: 0; <meta name="viewport" content="width=device-width, initial-scale=1.0">

margin: 0; <title>Document</title>

box-sizing: border-box; <link rel="stylesheet" href="[Link]">

} </head>

<body>
body{
<div class="containero">

<div class="titulo">NUESTRO EQUIPO</div>


display: flex;
<div class="subtitulo">Diseño futurista con CSS Grid y Flexbox</div>
justify-content: center;
</div>
align-items: center;
<div class="container dos">
flex-direction: column;
<div class="caja uno">
background-image: url(img/[Link]);
<div class="imagen"><img src="./[Link]" alt=""></div>
background-size: auto; <div class="sistema">sistemas</div><div class="sofia">SOFIA MARTINEZ</div>
} <div class="text">Creativa visual experta en sistemas de diseño y accesibilidad WEB.</

.containero{

margin: ; <div class="botones">

width: 50%; <div class="cajita uno">perfil</div>

border: 3px rgb(161, 153, 153); <div class="cajita dos ">chat</div>


</div>
display: flex;
</div>
flex-direction:center;
<div class="caja dos">
align-items:center;
<div class="imagen"><img src="./[Link]" alt=""></div>
flex-direction: column;
<div class="sistema">sistemas</div><div class="sofia">SOFIA MARTINEZ</div>
}
<div class="text">Creativa visual experta en sistemas de diseño y accesibilidad WEB.</
.titulo{
<div class="botones">
font-size: 50px;
<div class="cajita uno">perfil</div>
font-family: sans-serif; <div class="cajita dos ">chat</div>
text-align: center; </div>

} </div>

.subtitulo{ <div class="caja tres">

font-size: 20px; <div class="imagen"><img src="./[Link]" alt=""></div>

font-family: sans-serif; <div class="sistema">sistemas</div><div class="sofia">SOFIA MARTINEZ</div>

<div class="text">Creativa visual experta en sistemas de diseño y accesibilidad WEB.</


text-align: center;

}
<div class="botones">
.container {
<div class="cajita uno">perfil</div>
width: 100%;
<div class="cajita dos ">chat</div>
width: 150px;
</div>
height: 150px;
</div>
display: flex;
</body>
justify-content: center;
</html>
border: 3px rgb(161, 153, 153);

display: flex;

flex-direction:center;

align-items:center;

flex-direction: row;

.caja{

width: 360px;

height: 380px;

background-color: cornflowerblue;

color: white;

display: flex;

justify-content:space-around;

align-items:center;

flex-direction: column;

font-size: 15px;

font-family: sans-serif;

border: solid white 1px;

border-radius: 30px;

.text{

justify-content:center;

align-items:center;

flex-direction: column;

text-align: center;

font-size: 15px;

.sofia{

font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;

font-size: 20px;

.imagen{

También podría gustarte