Propiedades CSS más utilizadas en diseño web

Clase 17 de 24 • Curso de Frontend Developer

Clase anteriorSiguiente clase

Resumen

Las propiedades CSS más usadas son las siguientes, separadas en secciones comunes, algunas ya las conocemos:

Display
Margin
Padding
Border
Width
Height
Color
Background

También, si deseas conocer todas las etiquetas existentes, puedes revisar el sitio web CSS Reference.

Propiedades de textos

Las propiedades para manipular los textos y tipografía son los siguientes:

font-size: establece un tamaño de fuente.
font-weight: establece el resaltado del texto, con valores de 100 a 900 en intervalos de 100; donde 100 es delgada y 900 es negrita.
font-family: establece el tipo de fuente.
text-align: establece la posición del texto: right, left, center y justify.
color: establece el color del texto.

Bordes redondeados

La propiedad que establece bordes redondeados es: border-radius.

Ejemplo de bordes redondeados

Desafío

Intenta construir una tarjeta de presentación, puedes basarte en los trabajos de tus compañeros de la sección de “Aportes”.

Puedes utilizar el siguiente código como referencia.

Ejemplo

¡Comparte tu trabajo en la sección de aportes!

Contribución creada por Andrés Guano (Platzi Contributor).

Luis Gabriel Piña Gonzalez

student•

Este es mi aporte, tuve inspiracion de mi heroe McLovin. Si quieren el codigo css con gusto se los puedo pasar y nuca pares de aprender.

Mauricio Jose Rivero Padilla

student•

McLoving!!! WTF? jejejej Superbad

Brian ⠀

student•

Sergio Alejandro González Sánchez

student•

Max Andy Diaz Neyra

student•

Genial forma de decir:"muchas gracias por tan buen curso"

Joel Dominguez Merino

student•

Si se hiciera un concurso definitivamente te llevas ek primer lugar jeje Muy buen trabajo @Sergio!

Leonard L

student•

Luis Alberto Patti Choque

student•

jajajjajaaj!!!

Ivan Salinas

student•

buenisimo!

Josue Tapia Linarez

student•

hice una de SpaceX 👨‍🚀

Andrés López

student•

Esta es la mejor!!

christian rojas

student•

Buenísima, me encanta space X

Luis Enrique Carrera Valle

student•

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

student•

Hola Luis, Excelente.... gracias por compartir

Vicente Xavier Martínez Fernández

student•

Está wonito

Orangel Jose Gonzalez Urbina

student•

Yu-Gi-Oh!

😅

Luis miguelangel alvarez

student•

tenemos un ganador

John Edward Ospina Ladino

student•

Maravilloso

Carlos Rubén Díaz Gutiérrez

student•

Aquí mi card. 😁

Andres Miguel De La Ossa Parra

student•

siuuuuu

Alejandro Chaparro

student•

SIUUUUUUUUUUUUUUUU

Mildred Zaragoza

student•

Esta es mi card :)))

Joel Dominguez Merino

student•

Esta hermosa! ✨ Excelente trabajo @Mildred

Lautaro La Falce

student•

Que genial!!! Me inspire un poco en tu card. Más abajo está la mía jajaj no quedo tan genial como la tuya pero me queda un camino largo todavía

Carlos Rodela

student•

Hola que tal compañeros les dejo el resultado de mi card:

La link para que lo puedan ver es este: https://car10srodela.github.io/card-presentacion/ Y ademas les dejo el repositorio del proyecto por si alguien quiere utilizarlo: https://github.com/car10srodela/card-presentacion

Todavia le hace falta que sea resposive, pero queria compartirlo con ustedes.

Alvaro H. Ruiz V.

student•

Oye muchas gracias! <3

Marcos Rafael Polanco Aracena

student•

Asombroso gracias por compartirlo !

Isabel Villanueva Romero

student•

Ariadna Maldonado

student•

hahahahaha esta fantastica tu tarjeta!

Roberto Contrera

student•

este es el mejor

Jose Carlos Acosta Arreola

student•

Si dicen "haz tu card" pues qué mejor que una "Poker Card" 😅

Fidel Evangelista

student•

que gracioso

Jose Solis

student•

._.XD

Josué Ramírez Hernández

student•

¡Hola! les comparto la card que realice :D

Joel Dominguez Merino

student•

Te ha quedado excelente @Josué! Para quien desee le paso el enlace donde puede encontrar los recursos para hacerla de igual manera. Es un muy buen ejercicio para poner en practica lo aprendido.

Oscar Rabadan Martinez

student•

Yo también la hice en Frontend Mentor!

Marco Ezequiel Morales

student•

Mi humilde aporte

morphy code

student•

Demasiado bonito amigo

Javier Leonardo Pinto Vásquez

student•

Luce genial! Un reto muy bueno de Frontend Mentor jeje lo reconocí! Genial que pongas en practica tus conocimientos en retos como esté! Muy cool!

Luis Fernando León Esqueda

student•

Que onda amigos, les dejo mi tarjeta.

Aquí dejo el código:

<!--HTML-->
<code> 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Profile Card</title>
    <link rel="stylesheet" href="./style.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=Open+Sans:wght@300;400;500;700&display=swap" rel="stylesheet">
</head>
<body>
    <article class="card">
        <div class="card-top">
            <p>Welcome</p>
        </div>
        <div class="profile-data">
            <img class="profile-data--img"src="./img/Verde.jpg" alt="">
            <h2>Luis Fernando León Esqueda</h2>
            <h3>Frontend Developer</h3>
            <p><span></span>México</p>
        </div>
        <div class="profile-links">
            <div class="projects">
                <a href="#">View projects</a>
            </div>
            <div class="email">
                <a href="#">Send email</a>
            </div>
        </div>
        <div class="social">
            <div>
                <p>592</p>
                <span>Followers</span>
            </div>
            <div>
                <p>139</p>
                <span>Follows</span>
            </div>
        </div>
        <a class="follow">
            <span href="#">FOLLOW</span>
        </a>
    </article>
</body>
</html>

CSS
*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

html{
    font-size: 62.5%;
}
body{
    background-color: #1C1C1C;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Open Sans', sans-serif;
}
.card{
    min-width: 280px;
    width: 390px;
    height: 600px;
    background-color: #242424;
    border-radius: 40px;
    box-shadow:0px 10px 10px 5px rgba(0,0,0,0.16);
    margin:20px;
    transition-duration: 200ms;
}
/* .card:hover{
    outline: 2px solid #474747;
    transition-duration: 100ms;
} */
.card .card-top{
    height: 223px;
    background: url("https://images.pexels.com/photos/358528/pexels-photo-358528.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260") center/cover no-repeat;
    border-radius: 40px 40px 0 0;
}
.card .card-top p{
    font-size: 2rem;
    text-align: center;
    font-weight: 300;
    padding-top: 50px;
    color: white;
}
.card .profile-data{
    width: 100%;
    height: 243px;
    padding: 0 10px;
}
.card .profile-data--img{
    display: flex;
    width: 145px;
    height: 145px;
    margin: 0px auto;
    margin-top: -75px;
    border-radius: 50%;
    border: 4px solid white;
}
.card .profile-data h1{
    font-size: 20px;
    font-weight: 500;
    color: white;
    text-align: center;
    margin-top: 30px;
}
.card .profile-data h2{
    text-align: center;
    margin-top: 0px;
    font-size: 1.8rem;
    font-weight: 300;
    color: #C2C2C2;
}
.card .profile-data p{
    width: 73px;
    display: flex;
    margin: 4px auto;
    font-size: 1.4rem;
    font-weight: 300;
    color: #C2C2C2;

}
.card .profile-data p span{
    background: url("./img/mexico-flag.png") center/cover no-repeat;
    width: 16px;
    height: 16px;
    margin-right: 3px;
    align-self: center;
}
.card .profile-links{
    display: inline-flex;
    width: 100%;
    height: 67px;
    margin-top: 15px;
    align-items: center;
    justify-content: space-around;
    text-align: center;
}
.card .profile-links a{
    font-size: 1.8rem;
    text-align: center;
    color: #C2C2C2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.card .profile-links a:hover{
    color: white;
}
.card .social{
    display: inline-flex;
    width: 100%;
    height: 67px;
    align-items: center;
    text-align: center;
    justify-content: space-around;
    background: #2E2E2E;
}
.card .social p{
    font-size: 2rem;
    font-weight: bold;
    color: white;
}
.card .social span{
    font-size: 1.4rem;
    color: #C2C2C2;
}
.card .follow{
    background-color: #060916;
    width: 100%;
    height: 63px;
    border-radius: 0 0 40px 40px;
    display: flex;
    cursor: pointer;
}
.card .follow span{
    font-size: 2rem;
    color: white;
    font-weight: bold;
    text-decoration: none;
    margin: 0 auto;
    align-self: center;
    transition-duration: 500ms;
}
.card .follow:hover{
    background-color: #0A0F24;
}
.card .follow:hover span{
    font-size: 2.2rem;
    transition-duration: 200ms;
}

Óscar Andrés Ugarte De La Fuente

student•

Hace poco termine este curso pero no deje mi aporte. Me siento un poco orgulloso ya que no pensé que lo podría hacer sin copiar y pegar código, pero lo hice solo. Si ayudan las clases la vdd

Diego Fabian Rico Castro

student•

Excelente, yo si logre hacer un aporte con lo que se hasta el momento, pero fue muy sencillo. Volveré mas adelante y dejare un aporte de mejor calidad.

José Alexander Sey Sirin

student•

Esta fue la tarjeta que elabore, me inspire de las tarjetas que han compartido y espero que les guste.

Fue muy entretenido hacerla :3

Paulo Roberto Vazquez Nuñez

student•

JAJAJAJAJAA, ESTA GENIAL

Diego Alejandro Moreno Pedroza

student•

Noooo, es asistente del gerente regional jaja

Joseph Alexander Whacheng Barreto

student•

Con todo lo que aprendi, pude realizar la siguiente carta de Yugioh!! Espero les guste.

El código es el siguiente:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p,
        h4 {
            margin: 0;
            padding: 0;
        }
        section {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 500px;
        }
        .card {
            background: #c17f2a;
            width: 300px;
            padding: 10px 0px;
            border-radius: 5px;
            border: 5px solid #2f1000;
        }
        .card div {
            width: 250px;
            margin: 0 auto;
            padding: 5px 10px;
            border-radius: 3px;
            overflow: hidden;
        }
        .card .title {
            text-transform: uppercase;
            display: flex;
            justify-content: space-between;
            box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.6);
            border-top: 2px solid rgba(255, 255, 255, 0.3);
            border-left: 2px solid rgba(255, 255, 255, 0.3);
        }
        .card .title img {
            height: 20px;
        }
        .card .stars {
            display: flex;
            justify-content: end;
            padding-top: 7px;
            padding-bottom: 0px;
        }
        .card .stars img {
            height: 15px;
            padding-left: 2px;
        }
        .card .stars img:nth-child(1) { 
            padding-left: 0px;
        }
        .card .image {
            width: 250px;
            height: 250px;
            border: 5px solid #2f1000;
            padding: 0;
            margin: 5px auto;
            box-sizing: border-box;
        }
        .card .image img {
            width: 100%;
        }
        .card .description {
            padding: 5px 0;
            border: 3px solid #bd5c27;
            background: #d8b564;
        }
        .card .description > p {
            font-size: 10px;
            padding: 0px 5px;
        }
        .card .description > p:nth-child(1) {
            font-size: 12px;
            text-transform: uppercase;
            font-weight: 600;
        }
        .card .description > p:nth-child(2) {
            font-size: 10px;
            font-style: italic;
        }
        .card .description .power {
            display: flex;
            justify-content: end;
            border-top: 1px solid black;
            padding: 0;
            border-radius: 0;
            margin-top: 30px;
            width: 95%;
        }
        .card .description .power p {
            font-size: 13px;
            font-weight: 600;
        }
        .card .description .power p:nth-child(1) {
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <section>
        <div class="card">
            <div class="title">
                <h5>Dark Magician</h5>
                <img src="https://static.wikia.nocookie.net/yugioh/images/d/de/DARK.svg/revision/latest/scale-to-width-down/77?cb=20120918053848" alt="dark">
            </div>
            <div class="stars">
                <img src="https://upload.wikimedia.org/wikipedia/commons/7/7b/Starball_Red.svg" alt="rank star">
                <img src="https://upload.wikimedia.org/wikipedia/commons/7/7b/Starball_Red.svg" alt="rank star">
                <img src="https://upload.wikimedia.org/wikipedia/commons/7/7b/Starball_Red.svg" alt="rank star">
                <img src="https://upload.wikimedia.org/wikipedia/commons/7/7b/Starball_Red.svg" alt="rank star">
                <img src="https://upload.wikimedia.org/wikipedia/commons/7/7b/Starball_Red.svg" alt="rank star">
                <img src="https://upload.wikimedia.org/wikipedia/commons/7/7b/Starball_Red.svg" alt="rank star">
                <img src="https://upload.wikimedia.org/wikipedia/commons/7/7b/Starball_Red.svg" alt="rank star">
            </div>
            <div class="image">
                <img src="https://static.wikia.nocookie.net/yugiohenespanol/images/5/58/Foto_mago_oscuro.jpg/revision/latest/scale-to-width-down/544?cb=20120121043211&path-prefix=es" alt="">
            </div>
            <div class="description">
                <p>[Spellcaster/Normal]</p>
                <p>The ultimate wizard in terms of attack and defense</p>
                <div class="power">
                    <p>ATK/2500</p>
                    <p>DEF/2100</p>
                </div>
            </div>
        </div>
    </section>
</body>
</html>

Hiram Rodriguez Gomez

student•

Te quedó de lujo y muy similar a las cartas originales.

Jesus Alonso Salinas Bellido

student•

excelente trabajo!

Diego Esteban Diaz Vivas

student•

Hola, acá dejare mi card, lo hice con lo aprendido hasta ahora y una que otra cosita más vista en otros cursos 😁

![](

christian rojas

student•

Sí, buenísima

BRYAN ANDRES PAUCAR

student•

Hice mi tarjeta de estudiante Platzi:

Manuel Ochoa

student•

Me gusto el concepto de esta tarjeta y me base en el para hacer la mía

Juliana Vega

student•

A mi también me gustó mucho, intenté hacer la mía usando tu idea

Saúl Alexander Yaguana Cruz

student•

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./styl.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=Luckiest+Guy&display=swap" rel="stylesheet">
</head>
<body>
    <section>
        <article class="section__article">
            <figure><img src="file:///C:/Users/Usuario%20iTC/Pictures/stones.jpg" alt="Stones"></figure>
            <h2>The Rolling Stones</h2>
            <p>Soon 60 years with us!</p>
        </article>
        
    </section>
</body>
</html>

CSS:

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    font-size: 62.5%;
}
section {
    width: 100%;
    min-height: 500px;
    display: flex;
    justify-content: center;
}
.section__article {
    text-align: center;
    margin-top: 40px;
    width: 700px;
    height: 500px;
    background-color: #cdb496; 
    overflow: hidden;
    border-radius: 25px;
}
.section__article p:nth-child(3) {
    color: #a14014;
}
.section__article img {
    width: 100%;
}
.section__article h1 {
    font-size: 4rem;
    font-family: 'Luckiest Guy', cursive;
}
.section__article p {
    font-size: 2rem;
    font-weight: bold;
}