Propiedades CSS más utilizadas en diseño web

Contenido del curso

Introducción al desarrollo frontend

Maquetación con HTML

Maquetación con CSS

Diseño responsivo

Arquitecturas en CSS

Próximos pasos

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:008:13

Propiedades CSS más utilizadas en diseño web

Curso de Frontend Developer

Clase 17 de 24

Clase 17 / 24

Recursos

Luis Enrique Carrera Valle

Hace 5 años

Hice mi mejor esfuerzo 😅 ¿Qué opinan?

. Me inspire en este diseño: . Les dejo mi codigo:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/styles.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;500;700&display=swap" rel="stylesheet">
  <title>Document</title>
</head>
<body>
  <main>
    <section class="card-container">
      <div class="img-background">
      </div>
      <div class="card-img-profile">
      </div>
      <div class="card_profile">
        <h2>Luis Carrera</h2>
        <p>De manejar armas de fuego, a programar paginas web.</p>
      </div>
      <div class="card_information">
        <a class="country" href=""><img src="./place.png" alt="">Guatemala</a>
        <a class="mail" href=""><img src="./email.png" alt="">Send E-mail</a>
      </div>
      <div class="Follow">
        <p class="followers"><span>8,000</span> Followers</p>
        <p class="following"><span>3,000</span> Following</p>
      </div>
      <a class="button" href="/">Follow</a>
    </section>
  </main>
</body>
</html>

CSS

* {
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
}

body {
    font-family: 'Roboto Mono', monospace;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: black;
}

/* ------------------------------------------------------ */

main {
    display: flex;
    width: 100vw;
    height: 100vh;
    align-items: center;
    justify-content: center;
    background-color: rgb(12, 61, 134);
}

.card-container {
    width: 350px;
    height: 480px;
    display: inline-block;
    position: relative;
    background-color: white;
    text-align: center;
    overflow: hidden;
    border-radius: 20px;
    border: 5px solid white;
    box-shadow: 5px 10px 50px #0d007e65;
}

.img-background {
    display: inline-block;
    width: 100%;
    height: 160px;
    background: url("/vector-tecnologia-background-template.jpg") center/cover no-repeat;
    z-index: 10;
}

.card-img-profile {
    display: inline-block;
    position: absolute;
    top: 90px;
    left: 104px;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    border: 5px solid white;
    z-index: 20;
    background: url("/gD7QM_0-_400x400.jpg") center/cover no-repeat;
}

/* ------------------------------------------------------ */

.card_profile {
    display: flex;
    width: 100%;
    margin: 45px auto 20px;
    flex-direction: column;
}

.card_profile h1 {
    width: 65%;
    margin: 10px auto 7px;
    font-size: 2.5rem;
    font-weight: 700;
    border-bottom: 1px solid rgba(211, 211, 211, 0.65);
    color: #025395;
}

.card_profile p {
    padding: 0 30px;
    font-size: 1.2rem;
    letter-spacing: 1px;
    font-weight: 500;
    margin: 0;
}

/* ------------------------------------------------------ */

.card_information {
    display: flex;
    width: 100%;
    height: 40px;
    grid-template-columns: 1fr 1fr;
    justify-content: space-evenly;
    margin-top: 35px;
    font-size: 1.2rem;
}

.country {
    display: grid;
    grid-template-columns: 20px 60px;
}


.card_information img {
    width: 15px;
}

.mail {
    display: grid;
    grid-template-columns: 20px 85px;
}

/* ------------------------------------------------------ */

.Follow {
    display: grid;
    grid-template-columns: 60px 60px;
    justify-content: space-evenly;
    background-color: rgb(214, 214, 214);
    color: black;
    border-top: 2px solid rgba(248, 248, 248, 0.876);
}

span {
    font-size: 1.3rem;
    font-weight: 700;
}

.followers {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.following {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* ------------------------------------------------------ */

.button {
    display: flex;
    width: 100%;
    padding: 20px;
    padding-top: 13px;
    justify-content: center;
    align-items: center;
    font-size: 1.9rem;
    background-color: #025395;
    color: white;

AGRADECERIA SU FEEDBACK 😎

YEISON FERNANDO CASTAÑO UBILLUS

Hace 5 años

Hola Luis, Excelente.... gracias por compartir

Vicente Xavier Martínez Fernández

Hace 4 años

Está wonito

Comentarios (1206)1206 comentarios

Luis Gabriel Piña Gonzalez

Mauricio Jose Rivero Padilla

Brian ⠀

Sergio Alejandro González Sánchez

Max Andy Diaz Neyra

Joel Dominguez Merino

Leonard L

Luis Alberto Patti Choque

Ivan Salinas

Josue Tapia Linarez

Andrés López

christian rojas

Orangel Gonzalez

Luis miguelangel alvarez

John Edward Ospina Ladino

Carlos Rubén Díaz Gutiérrez

Andres Miguel De La Ossa Parra

Alejandro Chaparro

Mildred Zaragoza

Lautaro La Falce

Carlos Rodela

Alvaro H. Ruiz V.

Marcos Rafael Polanco Aracena

Isabel Villanueva Romero

Ariadna Maldonado

Roberto Contrera

Jose Carlos Acosta Arreola

Fidel Evangelista

Jose Solis

Josué Ramírez Hernández

Oscar Rabadan Martinez

Marco Ezequiel Morales

morphy code

Hace 3 años

Javier Leonardo Pinto Vásquez

Luis Fernando León Esqueda

Óscar Andrés Ugarte De La Fuente

Diego Fabian Rico Castro

José Alexander Sey Sirin

Paulo Roberto Vazquez Nuñez

Diego Alejandro Moreno Pedroza

Joseph Alexander Whacheng Barreto

Hiram Rodriguez Gomez

Jesus Alonso Salinas Bellido

Diego Esteban Diaz Vivas

BRYAN ANDRES PAUCAR

Manuel Ochoa

Juliana Vega

Saúl Alexander Yaguana Cruz

Introducción al desarrollo frontend

Fundamentos de HTML y CSS para Desarrolladores Frontend

¿Qué es HTML?

Motores de Renderizado en Navegadores: Funcionamiento y Etapas

Maquetación con HTML

Anatomía y Estructura de Documentos HTML

HTML Semántico: Mejora la Accesibilidad y SEO de tu Web

Etiquetas HTML esenciales para estructurar una página web

Maquetación con CSS

Anatomía de una Declaración CSS: Selectores y Sintaxis Básica

Selectores CSS: básicos y combinadores

Selectores CSS: Pseudo Clases y Pseudo Elementos

Cascada y Especificidad en CSS: Domina el Orden y Prioridad de Estilos

Tipos de Display en CSS: Inline, Bloque e Inline-Block

Flexbox y CSS Grid: Fundamentos y Aplicaciones Prácticas

Modelo de Caja en CSS: Propiedades y Uso Práctico

Colapso de márgenes en CSS: Bloques, Flexbox y Grid

Tipos de posicionamiento en CSS: Relative, Absolute, Fixed y Sticky

Z-Index y Contexto de Apilamiento en HTML/CSS

Propiedades CSS más utilizadas en diseño web

Diseño responsivo

Unidades de Medida en CSS: Absolutas y Relativas

Creación de Tutoriales para Compartir Conocimientos

Media Queries y Diseño Responsivo en CSS

Arquitecturas en CSS

Arquitecturas CSS: Mejora de Legibilidad y Mantenibilidad del Código

Metodologías de CSS: OOCSS, VEM, SMACS y Atomic Design

Próximos pasos

CSS para Entrevistas y Mundo Laboral

HTML y CSS: Fundamentos Esenciales para Frontend Developer

Propiedades CSS más utilizadas en diseño web

Progreso del curso

Introducción al desarrollo frontend

Maquetación con HTML

Maquetación con CSS

Diseño responsivo

Arquitecturas en CSS

Próximos pasos

Recursos

Recursos