Lo hice con todo lo aprendido hasta ahora:
Me basé en este diseño
Introducción
Inicia tu camino como frontend developer
¿Qué es HTML y CSS? ¿Para qué sirven?
Motores de render: de archivos a píxeles
Maquetación con HTML
Anatomía de un documento HTML y sus elementos
¿Qué es HTML semántico?
Etiquetas de HTML más usadas
Maquetación con CSS
Anatomía de una declaración CSS: selectores, propiedades y valores
Tipos de selectores: básicos y combinadores
Tipos de selectores: pseudoclases y pseudoelementos
Cascada y especificidad en CSS
Tipos de display más usados: block, inline e inline-block
Tipos de display más usados: flexbox y CSS grid
Modelo de caja
Colapso de márgenes
Posicionamiento en CSS
Z-index y el contexto de apilamiento
Propiedades y valores de CSS más usados
Diseño responsivo
Unidades de medida
Responsive Design
Arquitectura CSS
¿Qué son las arquitecturas CSS? ¿Para qué sirven?
OOCSS, BEM, SMACSS, ITCSS y Atomic Design
Próximos pasos
CSS para entrevistas y mundo laboral
Continúa con el Curso Práctico de Frontend Developer
Aún no tienes acceso a esta clase
Crea una cuenta y continúa viendo este curso
Crear cuenta
Si ya tienes una cuenta,
Iniciar sesión
Propiedades y valores de CSS más usados
17/23Recursos
Aportes 469
Preguntas 22
Ordenar por:
hice una de SpaceX 👨🚀
Esta es mi card 😃))
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.
Yu-Gi-Oh!
😅
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:[email protected];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">
<h1>Luis Carrera</h1>
<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 😎
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.
¡Hola! les comparto la card que realice 😄
Si dicen “haz tu card” pues qué mejor que una “Poker Card” 😅
Aquí mi card. 😁
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:[email protected];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="">
<h1>Luis Fernando León Esqueda</h1>
<h2>Frontend Developer</h2>
<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;
}
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>
<h1>The Rolling Stones</h1>
<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;
}
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
Esta fue la tarjeta que elabore, me inspire de las tarjetas que han compartido y espero que les guste.
Fue muy entretenido hacerla :3
Hola, acá dejare mi card, lo hice con lo aprendido hasta ahora y una que otra cosita más vista en otros cursos 😁
Mi tarjeta 😏
Mi humilde aporte
Esta es mi tarjeta, lo puse en gif para probar la versatilidad del glassmorphism, que ahora mismo es tendencia en diseño web, sigueme en insta! 😄 ❤️ @mariposara__
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">
<h4>Dark Magician</h4>
<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>
esta es mi card :3
Hay que empezar a practicar UX/UI porque en creatividad andamos mal xD
Holaa, este es mi trabajo. Me gustó porque aprendí a manejar mejor las posiciones.
Me guié por este diseño
Diseño guía
Muy interesante el contendio del curso hasta el momento. Le agregue _js _para hacerlo algo interactivo con el usuario. Aca les dejo el link.
Aquí esta mi tarjeta😁😎
Hice mi tarjeta de estudiante Platzi:
Me costó, pero logré por lo menos un comienzo! Un consejo: es fundamental practicar, pensé que me había quedado clarísimo con las clases, pero al tratar de hacerlo se generan muchas dudas que solo se resuelven probando.
Pidieron una “card” asi que hice una “card” 😜
Primera experiencia con flexbox.
Dejo el codigo por si a alguien le interesa y estoy abierto a comentarios y sugerencias.
Saludos
Mi card💚
Primer intento 😄
Buenas noches familia, les comparto mi card con todo lo aprendido en este excelente curso.
Algo reservado pero lindo, espero les sirva, les dejo el repo por si gustan darle una checada https://github.com/monthack/tarjeta-presentacion.git
yo hice un login 😃
https://daniel13121.github.io/login.github.io/
Esto fue lo que hice!
Los 4 Retos que resolví para hacer esto
.
Para lograr hacer esta tarjeta tuve que repasar algunas cosas que aprendí en otros cursos y lugares. Aquí te los cuento:
Si quieres ver el código, aquí te dejo el repo de mi Github.
N°1: Para conectar un repo Local con un Repo de GitHub
Uno de los métodos que ahorra muchos pasos es crear el repositorio en Github primero y luego en tu carpeta local usar
git clone <url-del-repo>
N°2: Para implementar iconos
Hay varias formas, una que me parece muy sencilla es importando la “Fuente de Iconos” que te proporciona Google Fonts gratuítamente.
Para implementarlo en HTML se usa <span> o <i> junto con la clase .material-icons y como contenido el nombre del ícono que puedes encontrar en su biblioteca. Importante: Si quieres usar los íconos que no son rellenos “outlined” debes modificar la clase a .material-icons-outlined el link de importación de Fonts a
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined"
rel="stylesheet">
N°3 Como sobreponer un elemento entre otros 2
Aunque se trate de un item flex se puede usar
position: absolute ;
top: 250px;
N°4 Como alinear los iconos al texto
Un truco para las etiquetas inline como <i> es la propiedad de CSS:
vertical-align: text-bottom ;
Espero que te sea útil!
Aquí les dejo mi card
Así quedo mi tarjeta utilizando lo aprendido en el curso y también gracias a la comunidad por sus ejemplos me ayudaron mucho 😄
Me costo mucho hacer la card, pero se pudo después de un par de días, además creo que puedo mejorar el codigo.
este es un card que hice de los challenges de frontendmentor
Quise intentar replicar el reproductor de spotify, anteriormente había publicado un versión que no era interactuable, pero esta ya lo es.
Para los que quieran probarlo:
https://hector14oo.github.io/ReproductorSpoti/#
Hola este es mi Card😊😣
En vez de realizar una tarjeta, inspirado en One Piece, decidí clonar el Cartel de Recompensa de Sanji, pero reemplazando el retrato.
¿Te gustaría ver el código del proyecto? Visita el siguiente enlace de Glitch para ver el Código Fuente. También está disponible una visualización en Live Site.
Agradezco cualquier retroalimentación. 👏
No me salio muy bien pero creo que para ser uno de mis primeros intentos esta bien
Mi aporte 😃, aún tengo mucho que aprender.
Juro que algún día voy a aprender frontend.
Terminé mi card, les dejo el enlace si quieren revisar el código
comparto mi diseño
lo intente:)
Hice mi card pero uff qué difícil aún no entiendo bien el posicionamiento pero sigo con el ánimo arriba para aprender todo lo que pueda
Este es mi trabajo. Muchas gracias por el aprendizaje y continuamos!
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>
</head>
<script src="https://kit.fontawesome.com/aa315c0e6f.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<body>
<section>
<div id="card-container">
<div class="cover">
<img src="https://images.pexels.com/photos/2115217/pexels-photo-2115217.jpeg?cs=srgb&dl=pexels-eduardo-dutra-2115217.jpg&fm=jpg" alt="Computing">
<div class="profile-pic">
<img src="https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="profile picture">
</div>
<section id="information">
<div class="name">
<h1>Fabián Hoyos</h1><br>
<h4>Frontend Developer</h4>
</div>
<div class="social-media">
<a href="/"><i class="fab fa-facebook"></i></a>
<a href="/"><i class="fab fa-linkedin"></i></a>
<a href="/"><i class="fab fa-github"></i></a>
<a href="/"><i class="fab fa-twitter-square"></i></a>
<a href="/"><i class="fas fa-envelope-square"></i></a>
</div>
</section>
</div>
<footer>
<p>
<i class="fas fa-map-marker-alt"></i>
Cali, Colombia
</p>
</footer>
</div>
</section>
</body>
</html>
CSS
* {
margin: 0;
box-sizing: border-box;
padding: 0;
}
body {
background-image: url("https://images.pexels.com/photos/4871011/pexels-photo-4871011.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
font-family:'Mukta';
font-size: 1.2rem;
color: rgba(32, 32, 34, 0.993);
line-height: 1.2rem;
}
section {
display: flex;
width: 100%;
justify-content: center;
}
#card-container {
background: rgb(229, 230, 148);
width: 400px;
height: 600px;
margin: 70px;
border-radius: 20px;
overflow: hidden;
z-index: 2;
position: relative;
}
.cover img {
width: 100%;
}
.profile-pic {
width: 150px;
height: 150px;
border-radius: 50%;
background: white;
position: absolute;
top: 32%;
left: 32%;
overflow: hidden;
border-style: solid;
border-color: beige;
}
.profile-pic img {
width: 100%;
}
#information {
display: flex;
text-align: center;
margin-top: 26%;
position: relative;
}
.social-media {
position: absolute;
top: 80px;
font-size: 4rem;
color: rgba(39, 39, 41, 0.993);
}
.social-media i {
padding: 10px;
}
.social-media a {
text-decoration: none;
color:rgba(39, 39, 41, 0.993);
}
.social-media i:hover {
color: rgb(11, 11, 58);
}
footer {
position: absolute;
bottom: 20px;
left: 33%;
font-size: 1.2rem;
font-weight: bold;
text-align: center;
}
footer i {
font-size: 2rem;
}
La mía se ve así.
Les dejo el vínculo al repositorio también:
https://github.com/miguelhernandezk/card-presentation
Mi card! Alguien por favor me podría ayudar? No puedo creer que me tomara 169 líneas de CSS hacer esto. Muchas gracias.
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>Flexbox</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<article>
<div class="top-img" alt=""></div>
<img class="profile" src="JUAN DIEGO.jpg" alt="">
<div class="info">
<div class="text">
<div class="text-row-upper">
<h2>Juan Diego Castaño</h2>
<h4>Full Stack Developer</h4>
</div>
<div class="text-row-lower">
<div class="location">
<img src="location-svgrepo-com.svg" alt="">
<p>Pereira, Colombia</p>
</div>
<div class="email">
<img src="email-svgrepo-com.svg" alt="">
<p >[email protected]</p>
</div>
</div>
</div>
<!-- <div class="item"></div> -->
<div class="bottom-item">
<div class="bottom-left">
<p class="num">7,200</p>
<p class="followers">Followers</p>
</div>
<div class="bottom-right">
<p class="num">3,200</p>
<p class="followers">Following</p>
</div>
<div class="bottom-bottom">
Follow
</div>
</div>
</div>
</article>
</section>
</body>
</html>
CSS:
section {
display: flex;
justify-content: center;
}
article {
display: grid;
grid-template-rows: 20% 20% 1fr 1fr 1fr 20% 20%;
grid-template-columns: 20% 1fr 20%;
height: 500px;
width: 350px;
background: white;
border-radius: 45px;
overflow: hidden;
border: 2px solid #5e5656 ;
}
.top-img {
grid-column: 1 / 4;
grid-row: 1 / 4;
background-image: url("montaña.jpg");
width: 100%;
background-size: cover;
}
.info {
grid-column: 1 / 4;
grid-row: 6 / 8;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
padding: 0px 0px 0px 0px ;
}
h2 {
font-family: sans-serif;
font-weight: lighter;
margin: 0px;
margin-bottom: 4px;
color: #1d1d1d;
width: 100%;
}
h4 {
margin: 0%;
font-size: 85%;
width: 100%;
text-align: center;
color: #424242;
}
.location, .email {
width: 50%;
display: grid;
grid-template-columns: 10% 15% 1fr 10%;
align-items: center;
}
.text {
height: 80%;
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
}
.text-row-upper {
width: 100%;
text-align: center;
grid-row: 1 / 3;
grid-column: 1 / 3;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.text-row-lower {
width: 100%;
text-align: center;
grid-row: 3 / 4;
grid-column: 1 / 3;
display: flex;
justify-content: center;
align-items: center;
padding: 1%;
}
.location > img, .email > img {
height: 1rem;
grid-column: 2 / 3;
grid-row: 1;
}
.location > p, .email > p {
grid-column: 3 / 4;
grid-row: 1;
}
.bottom-item {
border-bottom-left-radius: 45px;
border-bottom-right-radius: 45px;
height: 70%;
width: 100%;
background-color: white;
display: grid;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr;
}
.bottom-left {
border-bottom: 2px solid #5e5656 ;
border-top: 2px solid #5e5656 ;
grid-row: 1 / 2;
grid-column: 1 / 2;
}
.bottom-right {
border-left: 2px solid #5e5656 ;
border-bottom: 2px solid #5e5656 ;
border-top: 2px solid #5e5656 ;
grid-row: 1 / 2;
grid-column: 0 / 1;
}
.bottom-right, .bottom-left {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #e9e9e9;
}
p {
width: 100%;
margin: 0%;
text-align: center;
font-family: sans-serif;
color: #252525;
font-size: 80%;
}
.num {
font-weight: 550;
}
.bottom-bottom {
background-color: forestgreen;
color: white;
grid-row: 2 / 3;
grid-column: 1 / 3;
display: flex;
align-items: center;
justify-content: center;
font-family: sans-serif;
font-weight: bold;
}
.profile {
grid-column: 2 / 3;
grid-row: 3 / 6;
justify-self: center;
height: 100px;
width: 100px;
object-fit: cover;
object-position: 20%;
border-radius: 50%;
border: 2px solid #3b3b3b;
}
Hola amigos, ¡aquí está mi carta!
El código con el que la hice 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>My card</title>
<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=Nunito+Sans:ital,[email protected],200;0,700;1,400&display=swap" rel="stylesheet">
<style>
* {
margin : 0;
padding : 0;
background: #082032;
}
p {
background-color: transparent;
font-family : 'Nunito Sans', sans-serif;
}
section {
display : flex;
position : relative;
top : 20px;
width : 100%;
justify-content: center;
}
.card {
display : flex;
flex-direction : column;
align-items : center;
background-color: #2C394B;
position : absolute;
width : 200px;
height : 300px;
border-radius : 10px;
overflow : hidden;
}
#cover-container {
position: relative;
width : 200px;
height : 150px;
overflow: hidden;
}
#cover {
position: absolute;
top : -150px;
width : 200px;
height : auto;
}
#profile-container {
box-sizing : border-box;
position : relative;
top : -40px;
width : 80px;
height : 80px;
overflow : hidden;
border-radius: 50%;
border : 4px solid #2C394B;
z-index : 5;
}
#profile {
width : 100%;
}
.follows {
background-color : transparent;
display : grid;
grid-template-rows : 1fr;
grid-template-columns: repeat(3, 1fr);
position : absolute;
width : 100%;
top : 150px;
height : 40px;
}
.follows div {
display : flex;
flex-direction : column;
background-color: transparent;
justify-content : center;
align-items : center;
}
.follows p {
font-size: 8px;
color : #D2D2D2;
}
#followers-number, #following-number {
font-size : 12px;
font-weight: 700;
color : white;
}
.followers {
grid-column : 1 / 2;
justify-self: center;
}
.following {
grid-column : 3 / 4;
justify-self: center;
}
.description {
background: transparent;
position : absolute;
top : 190px;
}
.description p:nth-child(1) {
font-size : 12px;
font-weight: 800;
color : #D2D2D2;
text-align: center;
}
.description p:nth-child(2) {
font-size : 8px;
color : #D2D2D2;
text-align: center;
}
.networks {
position : absolute;
top : 190px;
display : flex;
width : 100%;
justify-content : space-evenly;
padding : 15px;
background-color: transparent;
}
.networks img {
margin-top : 25px;
width : 25px;
height : 25px;
background-color: transparent;
}
button {
position : absolute;
bottom : 0px;
background-color: #FF4c29;
color : #D2D2D2;
font-size : 10px;
width : 100%;
height : 30px;
border : none;
}
</style>
</head>
<body>
<section>
<div class="card">
<div id="cover-container">
<img id="cover" src="https://images.pexels.com/photos/3052361/pexels-photo-3052361.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="cover-img"/>
</div>
<div id="profile-container">
<img id="profile" src="https://images.pexels.com/photos/771742/pexels-photo-771742.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt="cover-img"/>
</div>
<div class="follows">
<div class="followers">
<p id="followers-text">Followers</p>
<p id="followers-number">2091</p>
</div>
<div class="following">
<p id="following-text">Following</p>
<p id="following-number">578</p>
</div>
</div>
<div class="description">
<p>Antonio Acuña</p>
<p>Front End Developer</p>
</div>
<div class="networks">
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaWQ9IkxheWVyXzEiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDEwMDAgMTAwMDsiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDEwMDAgMTAwMCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojM0I1NzlEO30KCS5zdDF7ZmlsbDojRkZGRkZGO30KPC9zdHlsZT48dGl0bGUvPjxnPjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik01MDAsMTAwMEw1MDAsMTAwMEMyMjMuOSwxMDAwLDAsNzc2LjEsMCw1MDB2MEMwLDIyMy45LDIyMy45LDAsNTAwLDBoMGMyNzYuMSwwLDUwMCwyMjMuOSw1MDAsNTAwdjAgICBDMTAwMCw3NzYuMSw3NzYuMSwxMDAwLDUwMCwxMDAweiIvPjxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik02MzAsMTAwMFY2MTIuN2gxMzBsMTkuNS0xNTAuOUg2MzB2LTk2LjRjMC00My43LDEyLjEtNzMuNSw3NC44LTczLjVsNzkuOSwwVjE1NyAgIGMtMTMuOC0xLjgtNjEuMy01LjktMTE2LjUtNS45Yy0xMTUuMiwwLTE5NC4xLDcwLjMtMTk0LjEsMTk5LjV2MTExLjNIMzQzLjh2MTUwLjloMTMwLjNWMTAwMEg2MzB6IiBpZD0iZiIvPjwvZz48L3N2Zz4=" alt="facebook">
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaWQ9IkxheWVyXzEiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDEwMDAgMTAwMDsiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDEwMDAgMTAwMCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDp1cmwoI1NWR0lEXzFfKTt9Cgkuc3Qxe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU+PGxpbmVhckdyYWRpZW50IGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBpZD0iU1ZHSURfMV8iIHgxPSIxNDYuNDQ2NSIgeDI9Ijg1My41NTM1IiB5MT0iODUzLjU1MzUiIHkyPSIxNDYuNDQ2NSI+PHN0b3Agb2Zmc2V0PSIwIiBzdHlsZT0ic3RvcC1jb2xvcjojRkZENTIxIi8+PHN0b3Agb2Zmc2V0PSI1LjUxMDQ4MWUtMDIiIHN0eWxlPSJzdG9wLWNvbG9yOiNGRkQwMjAiLz48c3RvcCBvZmZzZXQ9IjAuMTI0MSIgc3R5bGU9InN0b3AtY29sb3I6I0ZFQzAxRSIvPjxzdG9wIG9mZnNldD0iMC4yMDA0IiBzdHlsZT0ic3RvcC1jb2xvcjojRkNBNzFCIi8+PHN0b3Agb2Zmc2V0PSIwLjI4MjEiIHN0eWxlPSJzdG9wLWNvbG9yOiNGQTgzMTYiLz48c3RvcCBvZmZzZXQ9IjAuMzY4MSIgc3R5bGU9InN0b3AtY29sb3I6I0Y4NTUxMCIvPjxzdG9wIG9mZnNldD0iMC40NTYzIiBzdHlsZT0ic3RvcC1jb2xvcjojRjUxRTA5Ii8+PHN0b3Agb2Zmc2V0PSIwLjUiIHN0eWxlPSJzdG9wLWNvbG9yOiNGMzAwMDUiLz48c3RvcCBvZmZzZXQ9IjAuNTAzNSIgc3R5bGU9InN0b3AtY29sb3I6I0YyMDAwNyIvPjxzdG9wIG9mZnNldD0iMC41OTY2IiBzdHlsZT0ic3RvcC1jb2xvcjojRTEwMDNCIi8+PHN0b3Agb2Zmc2V0PSIwLjY4NzkiIHN0eWxlPSJzdG9wLWNvbG9yOiNEMzAwNjciLz48c3RvcCBvZmZzZXQ9IjAuNzc1NyIgc3R5bGU9InN0b3AtY29sb3I6I0M3MDA4OCIvPjxzdG9wIG9mZnNldD0iMC44NTg5IiBzdHlsZT0ic3RvcC1jb2xvcjojQkYwMEEwIi8+PHN0b3Agb2Zmc2V0PSIwLjkzNTciIHN0eWxlPSJzdG9wLWNvbG9yOiNCQjAwQUYiLz48c3RvcCBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOiNCOTAwQjQiLz48L2xpbmVhckdyYWRpZW50PjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik01MDAsMTAwMEw1MDAsMTAwMEMyMjMuOSwxMDAwLDAsNzc2LjEsMCw1MDB2MEMwLDIyMy45LDIyMy45LDAsNTAwLDBoMGMyNzYuMSwwLDUwMCwyMjMuOSw1MDAsNTAwdjAgIEMxMDAwLDc3Ni4xLDc3Ni4xLDEwMDAsNTAwLDEwMDB6Ii8+PGc+PHBhdGggY2xhc3M9InN0MSIgZD0iTTUwMCwyMjAuMmM5MS4xLDAsMTAxLjksMC4zLDEzNy45LDJjMzMuMywxLjUsNTEuNCw3LjEsNjMuNCwxMS44YzE1LjksNi4yLDI3LjMsMTMuNiwzOS4yLDI1LjUgICBjMTEuOSwxMS45LDE5LjMsMjMuMywyNS41LDM5LjJjNC43LDEyLDEwLjIsMzAuMSwxMS44LDYzLjRjMS42LDM2LDIsNDYuOCwyLDEzNy45cy0wLjMsMTAxLjktMiwxMzcuOSAgIGMtMS41LDMzLjMtNy4xLDUxLjQtMTEuOCw2My40Yy02LjIsMTUuOS0xMy42LDI3LjMtMjUuNSwzOS4yYy0xMS45LDExLjktMjMuMywxOS4zLTM5LjIsMjUuNWMtMTIsNC43LTMwLjEsMTAuMi02My40LDExLjggICBjLTM2LDEuNi00Ni44LDItMTM3LjksMnMtMTAxLjktMC4zLTEzNy45LTJjLTMzLjMtMS41LTUxLjQtNy4xLTYzLjQtMTEuOGMtMTUuOS02LjItMjcuMy0xMy42LTM5LjItMjUuNSAgIGMtMTEuOS0xMS45LTE5LjMtMjMuMy0yNS41LTM5LjJjLTQuNy0xMi0xMC4yLTMwLjEtMTEuOC02My40Yy0xLjYtMzYtMi00Ni44LTItMTM3LjlzMC4zLTEwMS45LDItMTM3LjkgICBjMS41LTMzLjMsNy4xLTUxLjQsMTEuOC02My40YzYuMi0xNS45LDEzLjYtMjcuMywyNS41LTM5LjJjMTEuOS0xMS45LDIzLjMtMTkuMywzOS4yLTI1LjVjMTItNC43LDMwLjEtMTAuMiw2My40LTExLjggICBDMzk4LjEsMjIwLjUsNDA4LjksMjIwLjIsNTAwLDIyMC4yIE01MDAsMTU4LjdjLTkyLjcsMC0xMDQuMywwLjQtMTQwLjcsMi4xYy0zNi4zLDEuNy02MS4xLDcuNC04Mi45LDE1LjkgICBDMjU0LDE4NS4zLDIzNC45LDE5NywyMTYsMjE2Yy0xOSwxOS0zMC42LDM4LTM5LjQsNjAuNWMtOC40LDIxLjctMTQuMiw0Ni41LTE1LjksODIuOWMtMS43LDM2LjQtMi4xLDQ4LTIuMSwxNDAuNyAgIGMwLDkyLjcsMC40LDEwNC4zLDIuMSwxNDAuN2MxLjcsMzYuMyw3LjQsNjEuMSwxNS45LDgyLjlDMTg1LjMsNzQ2LDE5Nyw3NjUuMSwyMTYsNzg0YzE5LDE5LDM4LDMwLjYsNjAuNSwzOS40ICAgYzIxLjcsOC40LDQ2LjUsMTQuMiw4Mi45LDE1LjljMzYuNCwxLjcsNDgsMi4xLDE0MC43LDIuMXMxMDQuMy0wLjQsMTQwLjctMi4xYzM2LjMtMS43LDYxLjEtNy40LDgyLjktMTUuOSAgIEM3NDYsODE0LjcsNzY1LjEsODAzLDc4NCw3ODRjMTktMTksMzAuNi0zOCwzOS40LTYwLjVjOC40LTIxLjcsMTQuMi00Ni41LDE1LjktODIuOWMxLjctMzYuNCwyLjEtNDgsMi4xLTE0MC43ICAgcy0wLjQtMTA0LjMtMi4xLTE0MC43Yy0xLjctMzYuMy03LjQtNjEuMS0xNS45LTgyLjlDODE0LjcsMjU0LDgwMywyMzQuOSw3ODQsMjE2Yy0xOS0xOS0zOC0zMC42LTYwLjUtMzkuNCAgIGMtMjEuNy04LjQtNDYuNS0xNC4yLTgyLjktMTUuOUM2MDQuMywxNTkuMSw1OTIuNywxNTguNyw1MDAsMTU4LjdMNTAwLDE1OC43eiIvPjxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik01MDAsMzI0LjdjLTk2LjgsMC0xNzUuMyw3OC41LTE3NS4zLDE3NS4zUzQwMy4yLDY3NS4zLDUwMCw2NzUuM1M2NzUuMyw1OTYuOCw2NzUuMyw1MDAgICBTNTk2LjgsMzI0LjcsNTAwLDMyNC43eiBNNTAwLDYxMy44Yy02Mi44LDAtMTEzLjgtNTAuOS0xMTMuOC0xMTMuOFM0MzcuMiwzODYuMiw1MDAsMzg2LjJjNjIuOCwwLDExMy44LDUwLjksMTEzLjgsMTEzLjggICBTNTYyLjgsNjEzLjgsNTAwLDYxMy44eiIvPjxjaXJjbGUgY2xhc3M9InN0MSIgY3g9IjY4Mi4yIiBjeT0iMzE3LjgiIHI9IjQxIi8+PC9nPjwvc3ZnPg==" alt="instagram">
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMC8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvVFIvMjAwMS9SRUMtU1ZHLTIwMDEwOTA0L0RURC9zdmcxMC5kdGQnPjxzdmcgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMzIgMzIiIGhlaWdodD0iMzJweCIgaWQ9IkxheWVyXzEiIHZlcnNpb249IjEuMCIgdmlld0JveD0iMCAwIDMyIDMyIiB3aWR0aD0iMzJweCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGc+PGNpcmNsZSBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGN4PSIxNiIgY3k9IjE2IiBmaWxsPSIjMDA3QkI1IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHI9IjE2Ii8+PGc+PHJlY3QgZmlsbD0iI0ZGRkZGRiIgaGVpZ2h0PSIxNCIgd2lkdGg9IjQiIHg9IjciIHk9IjExIi8+PHBhdGggZD0iTTIwLjQ5OSwxMWMtMi43OTEsMC0zLjI3MSwxLjAxOC0zLjQ5OSwydi0yaC00djE0aDR2LThjMC0xLjI5NywwLjcwMy0yLDItMmMxLjI2NiwwLDIsMC42ODgsMiwydjhoNHYtNyAgICBDMjUsMTQsMjQuNDc5LDExLDIwLjQ5OSwxMXoiIGZpbGw9IiNGRkZGRkYiLz48Y2lyY2xlIGN4PSI5IiBjeT0iOCIgZmlsbD0iI0ZGRkZGRiIgcj0iMiIvPjwvZz48L2c+PGcvPjxnLz48Zy8+PGcvPjxnLz48Zy8+PC9zdmc+" alt="linkedin">
</div>
<button>
¡Hey!
</button>
</div>
</section>
</body>
</html>
A 7 meses de que saliera el curso, pero haciendo las tareas jaja, sigamos aprendiendo comunidad! Vamos a cumplir nuestras metas!
.
Así quedo mi card ¿Qué opinan?
.
.
Si alguien necesita o solo quiere el código puede pedirmelo y con mucho gusto se lo hago llegar, nunca paremos de aprender 💚
Este es mi aporte para clase. 😃
De fondo apliqué: Z-index
La propiedad background es un shorthand de
background-attachment, color, image, position, repeat.
https://developer.mozilla.org/es/docs/Web/CSS/background
Card realizada con layout compartido en aportes anteriores. Espero comentarios.gracias
<section>
<div class="card2">
<img src="img/img_bg.jpg" alt="" />
<div class="profile">
<img src="/img/profile_img.jpg" alt="">
<div class="info">
<p>Ariel Plaza</p>
<p>Tecnico informatica, Estudiante Desarrollador Web FrontEnd</p>
</div>
<div class="contact">
<p>
<i class="fa-solid fa-location-dot"></i>Chile
</p>
<a href="">
<i class="fa-solid fa-envelope "></i>Enviar Correo
</a>
</div>
<div class="fow">
<div class="follower">
8100 <hr>Follower
</div>
<div class="following">
3650 <hr>Follow
</div>
</div>
<div class="btnFoll">
<H1>Follow</H1>
</div>
</div>
</div>
</section>
CSS
.card2 {
margin: 30px;
position: relative;
width: 375px;
height: 550px;
overflow: hidden;
border-radius: 10px;
box-shadow: 10px 7px 5px rgba(0, 0, 0, 0.137);
}
.card2 img {
width: 100%;
height: 185px;
}
.profile {
display: flex;
flex-direction: column;
align-items: center;
}
.profile img {
width: 120px;
height: 120px;
position: absolute;
top: 120px;
border-radius: 60px;
}
.info {
width: 90%;
height: 95px;
margin-top: 55px;
text-align: center;
}
.info p:first-child {
margin: 10px;
font-weight: 700;
font-size: 20pt;
}
.info p:nth-child(2) {
font-weight: 300;
font-size: 12pt;
}
.contact {
display: flex;
justify-content: space-evenly;
width: 100%;
padding: 30px 0px;
border-bottom: 1px rgb(121, 118, 118) solid;
font-weight: 400;
}
.contact .fa-solid {
margin-right: 10px;
}
.fow {
display: flex;
width: 100%;
height: 65px;
}
.follower {
border-right: 1px solid rgb(121, 118, 118);
text-align: center;
padding: 3%;
width: 50%;
}
.following {
width: 50%;
text-align: center;
padding: 3%;
}
.btnFoll {
width: 100%;
height: 70px;
padding: 20px;
text-align: center;
background-color: #64bc7f;
}
.btnFoll h1 {
color: white;
}
Reto terminado
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>Card</title>
<link rel="stylesheet" href="./styles/normalize.css">
<link rel="stylesheet" href="./styles/styles.css">
<link href="https://allfont.es/allfont.css?fonts=raleway-bold" rel="stylesheet" type="text/css" />
</head>
<body>
<section class="container">
<section class="section1">
<div class="imagen--codigo">
<img src="./img/61366f5913db6.jpg" alt="imagen--codigo">
</div>
<div class="imagen--inicio">
<img src="./img/fotoPerfil.jpg" alt="imagen--inicio">
</div>
<div class="description">
<h1>JOSÉ LUIS RAMIREZ</h1>
<h2>Frontend developer</h2>
<P>Bogotá, Colombia</P>
</div>
<div class="section-skills">
<figure>
<img src=".//img/kisspng-html-web-design-scalable-vector-graphics-world-wid-html5-icon-hd-5ab0c85c377aa0.0639325615215350682273.png" alt="logo-html">
</figure>
<figure>
<img src="./img/CSS-Logo.png" alt="logo-css">
</figure>
<figure class="css">
<img src="./img/kisspng-javascript-logo-html-clip-art-javascript-logo-5b5188b1a2a1f9.2428698915320700656662.png" alt="logo-js">
</figure>
</div>
<p class="contact">
Contacto
</p>
<div class="social-media">
<div class="github">
<img src="./img/kisspng-github-logo-repository-computer-icons-5afa376c51ca94.387166531526347628335.png" alt="logo-github">
</div>
<div>
<img src="./img/twitter.png" alt="logo-twitter">
</div>
<div>
<img src="./img/linkedin.png" alt="logo-linkedin">
</div>
</div>
</section>
</section>
</body>
</html>
Css
.container {
display: flex;
justify-content: center;
margin-top: 12px;
}
.section1 {
width: 500px;
height: 600px;
background: linear-gradient(90deg, rgb(205 205 205) 0%, rgb(255 247 247) 44%, rgb(205 205 205) 100%);
border-radius: 20px;
}
.imagen--codigo img{
width: 500px;
height: 280px;
position: relative;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.imagen--inicio img{
width: 140px;
height: 160px;
position: absolute;
border-radius: 80px;
box-shadow: 0px 0px 5px 1px white;
margin-top: 20px;
margin-top: -87px;
left: calc(50% - 70px);
}
.description {
margin-left: 140px;
left: -7px;
margin-top: 77px;
font-family:Verdana, Geneva, Tahoma, sans-serif;
font-weight: bold;
}
.description h1 {
color:#083050c4;
}
.description h2 {
margin-left: 38px;
line-height: 0.5rem;
color: #cd7923;
font-family: 'Raleway Bold', arial;
}
.description p {
margin-left: 60px;
line-height: 3rem;
}
.section-skills img {
height: 50px;
}
.section-skills {
display: flex;
gap: 5px;
justify-content: center;
}
.social-media {
display: flex;
justify-content: center;
margin-top: -5px;
gap: 20px;
background-color: #c4d1f7;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
}
.social-media img {
width: 40px;
height: 40px;
}
.contact {
font-family:Verdana, Geneva, Tahoma, sans-serif;
font-weight: bold;
display: flex;
justify-content: center;
font-size: 1.2rem;
}
Mi tarjetita
<!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>My card</title>
<style>
/*
#5dd5cf
#ff637d
#f8bf4f
#70b5ff
#f47e3e
*/
body{
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.card{
width: 400px;
height: 600px;
background-color:#f47e3e;
border-radius: 5rem;
overflow: hidden;
display: flex;
flex-direction: column;
}
.background{
width: 100%;
opacity: 0.8;
}
.avatar{
display: flex;
align-items: center;
justify-content: center;
position: relative;
top: -5rem;
}
.avatar img{
border-radius: 100%;
border: 5px solid white;
width: 30%;
}
.personalInfo{
font-size: 2rem;
font-weight: 700;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
top: -5rem;
}
.personalInfo p{
margin: 0;
padding: 0;
}
.personalInfo p:nth-child(2){
font-size: 1rem;
}
.personalInfo img{
width: 10%;
justify-content: center;
padding-top: 0.5em;
}
.socialInfo{
display: flex;
justify-content: center;
position: relative;
bottom: 2em;
}
.socialInfo img{
display: inline-block;
align-items: center;
justify-content: center;
height: 2em;
padding: 8px;
}
</style>
</head>
<body>
<div class="card">
<div class="background">
<img src="https://images.pexels.com/photos/424154/pexels-photo-424154.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Background">
</div>
<div class="avatar">
<img src="https://cdn-icons-png.flaticon.com/512/194/194938.png" alt="Avatar">
</div>
<div class="personalInfo">
<p>Aidoia Rivas</p>
<p>Sorcerer's Apprentice</p>
<img src="https://cdn.countryflags.com/thumbs/venezuela/flag-400.png" alt="Venezuela flag">
</div>
<div class="socialInfo">
<a href="https://twitter.com/idoiarp" ><img src="https://cdn1.iconfinder.com/data/icons/social-media-circle-7/512/Circled_Twitter_svg-128.png" alt="Twitter"></a>
<a href="https://linkedin.com/idoiarivas"><img src="https://cdn1.iconfinder.com/data/icons/social-media-circle-7/512/Circled_Linkedin_svg-128.png" alt="Linkedin"></a>
<a href="https://instagram.com/idoiarivas"><img src="https://cdn1.iconfinder.com/data/icons/social-media-circle-7/512/Circled_Instagram_svg-128.png" alt="Instagram"></a>
</div>
</div>
</body>
</html>
Hice esto con todo lo aprendido hasta ahora:
El codigo es este:
<!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">
<link rel="stylesheet" href="Sytle.css">
<title>Challenge</title>
</head>
<body>
<div class="contenedor-card">
<!--Tarjeta 1-->
<div class="contenedor-card_1">
<div class="logo">
<img src="icon-sedans.svg">
</div>
<section class="section">
<h1>SEDANS</h1>
<p> Choose a sedan for its affordability and excellent fuel economy. Ideal for cruising in the city or on your next road trip.</p>
<input type="button" value="Learn More" class="input-1">
</section>
</div>
<!--Tarjeta 2-->
<div class="contenedor-card_2">
<div class="logo">
<img src="icon-suvs.svg">
</div>
<section class="section">
<h1>SUVS</h1>
<p> Take an SUV for its spacious interior, power, and versatility. Perfect for your next family vacation and off-road adventures.</p>
<input type="button" value="Learn More" class="input-2">
</section>
</div>
<!--Tarjeta 3-->
<div class="contenedor-card_3">
<div class="logo">
<img src="icon-luxury.svg">
</div>
<section class="section">
<h1>LUXURY</h1>
<p> Cruise in the best car brands without the bloated prices. Enjoy the enhanced comfort of a luxury rental and arrive in style.</p>
<input type="button" value="Learn More" class="input-3">
</section>
</div>
</div>
</body>
</html>
html , body {
margin: 0;
padding: 0;
font-size: 15px;
box-sizing: border-box;
}
/* MODIFICAN LAS CARACTERISTICAS DE LAS TARJETAS*/
.contenedor-card {
display: flex;
justify-content: center;
margin-top: 40px;
}
.contenedor-card > div {
width: 290px;
height: 430px;
border-radius: 5px;
padding: 30px;
}
/* MODIFICACION LOS COLORES DE LAS TARJETAS */
.contenedor-card_1 {
background-color: hsl(31, 77%, 52%);
}
.contenedor-card_2 {
background-color: hsl(184, 100%, 22%);
}
.contenedor-card_3 {
background-color: hsl(179, 100%, 13%);
}
/* MODIFICACION DE LA LETRA */
.section h1 {
line-height: 1;
font-size: 2em;
font-family: 'Big Shoulders Display', cursive;
color: hsl(0, 0%, 95%)
}
.section p {
line-height: 2;
position: relative;
font-family: 'Big Shoulders Display', cursive;
color: hsla(0, 0%, 100%, 0.75)
}
/* MODIFICACION DEL INPUT */
.section .input-1 {
background-color: white;
border-radius: 25px;
height: 45px;
width: 140px;
color: hsl(31, 77%, 52%);
border: 3px solid hsl(31, 77%, 52%);
}
.section .input-2 {
background-color: white;
border-radius: 25px;
height: 45px;
width: 140px;
color: hsl(184, 100%, 22%);
border: 3px solid hsl(184, 100%, 22%);
}
.section .input-3 {
background-color: white;
border-radius: 25px;
height: 45px;
width: 140px;
color: hsl(179, 100%, 13%);
border: 3px solid hsl(179, 100%, 13%);
}
/* POSICIONAMIENTO INTERNO */
.section input {
position: relative;
top: 90px;
left: -5px;
}
.section h1 {
position: relative;
top: 10px;
}
.section p {
position: relative;
top: 15px;
}
Se me dificulto un poco pero se logro
jejjee que les parece?
Me inspire en un diseño que vi aqui en los comentarios, me tomo 3 dias haha, quiza para algunos ya es facil pero a mi me costo. Lo mas importante es que aprendi muchisimo en estos dias de sufrimiento para hacer esta simple carta hahah.
Espero les guste mi card, puse lo necesario
Me falta mucho por aprender pero Pronto se vera mejor y lo compartire en estte mismo post 😃
Ahi va mi resultado, queria hacerlo lo más limpio posible… luego le agregaré JS (cuando aprenda 😛) para darle vida! Saludos
- Card de los michis 🖤💛
Aquí va mi card:
los botones funcionan, usando lo aprendido, html y css only.
No pensé que se me iba hacer MUY difícil realizarlo pero gracias al ejercicio identifique en que estoy fallando, toca seguir practicando para mejorar mis habilidades.
y asi me quedo me gusto mucho la practica
Este es el mio 😄
Paso a paso.
Me llevo un poco más de tiempo, pero me sirvió para refrescar mis conocimientos. Me basé en la interfaz de twitter 😄
Genial!
Comparto mi card 😉
Saludos,
Me quedo de esta forma!
<!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>Valores mas usados de CSS</title>
<style>
body{
background: linear-gradient(black,gray);
min-height: calc(100vh - 10px);
}
section{
width: 100%;
display: flex;
justify-content: center;
}
.card{
width: 500px;
height: 800px;
background: black;
border: 2px solid white;
border-radius: 20px;
overflow: hidden;
}
.card img {
width: 100%;
height: 70%;
}
.card p:nth-child(2){
text-align: center;
color: turquoise;
}
.card p:nth-child(3) {
text-align: justify;
color: rgb(245, 245, 55);
margin: 10px;
}
</style>
</head>
<body>
<section>
<div class="card">
<img src="https://images.pexels.com/photos/421927/pexels-photo-421927.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="ciudad">
<p>Ciudad de NewYork</p>
<p>Nueva York incluye 5 distritos que se ubican donde el río Hudson desemboca en el océano Atlántico.
En su centro se encuentra Manhattan, un distrito densamente poblado que se encuentra entre los principales centros comerciales, financieros y culturales del mundo.
Sus sitios icónicos incluyen rascacielos, como el Empire State Building, y el amplio Central Park.
El teatro Broadway se ubica en la zona del Times Square iluminada con neones.</p>
</div>
</section>
</body>
</html>
My Card:
Aqui dejo Mi reto 😄
Parece sencillo pero no me fue tan fácil. Espero que les guste.
pueden ver el repositorio en Github https://danielsalazarbo.github.io/card-about-me/
Me inspiré en el trabajo del compañero Ronaldo Segundo. Espero les guste:
Gracias al compañero Ronaldo Segundo Apolinar que compartió su tarjeta y puso la fuente de donde la sacó me inspiré para crear mi tarjeta con lo aprendido con los dos cursos de HTML y CSS del profe Diego y ya habiendo terminado el de Frontend de la profe Estefany.
Dejo por aquí el repositorio donde se encuentra el código por si quieren echarle un ojo e incluso sugerirme mejoras Link al repositorio del proyecto
Hice una card de una entrada de un blog
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.