Cursos Empresas Blog Live Conf Eventos Precios

0:008:13

Recursos

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).

Propiedades CSS más utilizadas en diseño web

Curso de Frontend Developer

Clase 17 de 24

Clase 17 / 24

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

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

McLoving!!! WTF? jejejej Superbad

Brian ⠀

Sergio Alejandro González Sánchez

Max Andy Diaz Neyra

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

Joel Dominguez Merino

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

Leonard L

Luis Alberto Patti Choque

jajajjajaaj!!!

Ivan Salinas

buenisimo!

Josue Tapia Linarez

hice una de SpaceX 👨‍🚀

Andrés López

Esta es la mejor!!

christian rojas

Buenísima, me encanta space X

Orangel Gonzalez

Yu-Gi-Oh!

😅

Luis miguelangel alvarez

tenemos un ganador

John Edward Ospina Ladino

Maravilloso

Carlos Rubén Díaz Gutiérrez

Aquí mi card. 😁

Andres Miguel De La Ossa Parra

siuuuuu

Alejandro Chaparro

SIUUUUUUUUUUUUUUUU

Mildred Zaragoza

Esta es mi card :)))

Esta hermosa! ✨ Excelente trabajo @Mildred

Lautaro La Falce

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

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.

Oye muchas gracias! <3

Marcos Rafael Polanco Aracena

Asombroso gracias por compartirlo !

Isabel Villanueva Romero

Ariadna Maldonado

hahahahaha esta fantastica tu tarjeta!

Roberto Contrera

este es el mejor

Jose Carlos Acosta Arreola

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

Fidel Evangelista

que gracioso

Jose Solis

._.XD

Josué Ramírez Hernández

¡Hola! les comparto la card que realice :D

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

Yo también la hice en Frontend Mentor!

Marco Ezequiel Morales

Mi humilde aporte

morphy code

Demasiado bonito amigo

Javier Leonardo Pinto Vásquez

Hace 3 años

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

Óscar Andrés Ugarte De La Fuente

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

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

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

JAJAJAJAJAA, ESTA GENIAL

Diego Alejandro Moreno Pedroza

Noooo, es asistente del gerente regional jaja

Joseph Alexander Whacheng Barreto

Hiram Rodriguez Gomez

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

Jesus Alonso Salinas Bellido

excelente trabajo!

Diego Esteban Diaz Vivas

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

![](

Sí, buenísima

BRYAN ANDRES PAUCAR

Hice mi tarjeta de estudiante Platzi:

Manuel Ochoa

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

Juliana Vega

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

Saúl Alexander Yaguana Cruz

Recursos

Resumen

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