InicioCurso de Frontend Developer
Curso de Frontend Developer
2

馃く C贸mo crear un tarjeta de presentaci贸n con HTML y CSS

Abraham
abrahamalanya
3590

Resultado Final:

Screenshot 2023-06-24 15.47.38.png
Screenshot 2023-06-24 15.49.11.png

C贸digo:
Primero comenzamos creando los archivos, profile.html y profile.css.

Ahora configuramos el archivo html

  • Enlazamos el archivo css, el c贸digo debe ir dentro de la etiqueta head
<linkrel="stylesheet"href="./profile.css">
  • Creamos la estructura dentro de la etiqueta body. Usaremos un contenedor para eso usamos la etiqueta main con la clase container
<body><mainclass="container"></main></body>
  • Luego dentro del contenedor creamos 2 elementos div, con la clase card
    • en el primer div agregamos nuestra foto
    • en el segundo div colocamos nuestra descripci贸n
<body><mainclass="container"><divclass="card"><imgsrc="./perfil.jpg"alt="AbrahamAlanya"></div><divclass="card"><p>desarrollador web</p><p>@abrahamalanya</p><ahref="https://github.com/abrahamalanya"target="_blank"><svg>...</svg></a></div></main></body>

Ahora configuramos el archivo css

  • Importaremos una fuente de google fonts
@import url('https://fonts.googleapis.com/css2?family=Ysabeau+Office&display=swap');
  • definimos las estilos generales
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; 
}
html {
  font-size: 62.5%; // equivale a 10pxfont-family: 'Ysabeau Office', sans-serif; 
}

// Con este c贸digo centramos nuestro contenedorbody {
  width: 100vw;
  height: 100vh;
  background: #dadada;
  display: flex;
  justify-content: center;
  align-items: center;
}
  • Ahora configuramos nuestro contenedor, usando css grid
.container {
  display: grid;
  grid-template-columns: 350px;
  grid-template-rows: repeat(2, 200px);
}
  • Declaramos reglas generales en nuestro card
.card {
  position: relative; //nos permitir谩 manipular la posici贸ndisplay: flex; //con esto podremos centrar nuestros elementos
}
  • Ahora configuremos el primer div que tiene nuestro container
.containerdiv:nth-child(1) {
  background: gold;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.containerdiv:nth-child(1) img {
  width: 100px;
  height: 100px;
  filter: grayscale(1); //blanco y negroborder-radius: 50%;
  box-shadow: 0020px1px gray; //sombra
}
  • Configuramos el segundo div que tiene nuestro container
.containerdiv:nth-child(2) {
  background: whitesmoke;
  color: gray;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 020px20px0 gray;
  transition: 1s;
  top: -200px;
  z-index: 1;
}

.containerdiv:nth-child(2)p:nth-child(1) {
  color: black;
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: 1px;
}

.containerdiv:nth-child(2)p:nth-child(2) {
  font-size: 1.5rem;
  margin-bottom: 2rem;
}

.containerdiv:nth-child(2)svg {
  width: 50px;
}
  • Le damos animaci贸n al pasar el cursor
.container:hoverdiv:nth-child(2) {
  top: 0px;
}

C贸digo completo

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>profile</title>
  <link rel="stylesheet" href="./profile.css">
  <link rel="shortcut icon" href="./img/perfil.png" type="image/x-icon">
</head>
<body>
  <main class="container">
    <div class="card">
      <img src="./img/logo.jpg" alt="AbrahamAlanya">
    </div>
    <div class="card">
      <p>desarrollador web</p>
      <p>@abrahamalanya</p>
      <a href="https://github.com/abrahamalanya" target="_blank">
        <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path
            d="M12 .297c-6.63 0-125.373-12120 5.3033.438 9.8 8.205 11.385.6.113.82-.258.82-.5770-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.42218.07 3.63317.7 3.63317.7c-1.087-.744.084-.729.084-.729 1.205.0841.838 1.236 1.8381.236 1.071.835 2.8091.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.930-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 00 1.005-.322 3.31.23.96-.267 1.98-.3993-.405 1.02.006 2.04.1383 .405 2.28-1.552 3.285-1.233.285-1.23.645 1.653.24 2.873.12 3.176.765.841.23 1.911.23 3.220 4.61-2.8055.625-5.475 5.92.42.36.81 1.096.81 2.220 1.606-.0152.896-.0153.286 0 .315.21.69.825.57C20.56522.092 2417.592 2412.297c0-6.627-5.373-12-12-12" />
        </svg>
      </a>
    </div>
  </main>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Ysabeau+Office&display=swap');

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

html {
  font-size: 62.5%;
  font-family: 'Ysabeau Office', sans-serif;
}

body {
  width: 100vw;
  height: 100vh;
  background: #dadada;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  display: grid;
  grid-template-columns: 350px;
  grid-template-rows: repeat(2, 200px);
}

.card {
  position: relative;
  display: flex;
}

.containerdiv:nth-child(1) {
  background: gold;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.containerdiv:nth-child(1)img {
  width: 100px;
  height: 100px;
  filter: grayscale(1);
  border-radius: 50%;
  box-shadow: 0020px1px gray;
}

.containerdiv:nth-child(2) {
  background: whitesmoke;
  color: gray;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 020px20px0 gray;
  transition: 1s;
  top: -200px;
  z-index: 1;
}

.containerdiv:nth-child(2)p:nth-child(1) {
  color: black;
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: 1px;
}

.containerdiv:nth-child(2)p:nth-child(2) {
  font-size: 1.5rem;
  margin-bottom: 2rem;
}

.containerdiv:nth-child(2)svg {
  width: 50px;
}

.container:hoverdiv:nth-child(2) {
  top: 0px;
}
0
hace un a帽o
Escribe tu comentario
+ 2

Entradas relacionadas

1

C贸mo hacer un piano sencillo con dos teclas de color rosa usando HTML y CSS

En este tutorial te mostrar茅 c贸mo crear un piano b谩sico con dos teclas usando solo HTML y CSS. Las teclas ser谩n de color rosa y, cuando haga
carozamb
carozamb
9

Crea un Piano con Botones usando HTML y CSS

Hola! 馃槃 Acomp谩帽ame en este peque帽o tutorial a trav茅s del cual construiremos el aspecto gr谩fico de un piano usando botones de HTML y estilos
robledocorrea
robledocorrea
4

Domina la creaci贸n de tarjetas HTML y CSS: 隆Convi茅rtete en un maestro de las 馃儚 Cards en Frontend! 馃殌

En este emocionante tutorial, vamos a sumergirnos en el fascinante mundo de la creaci贸n de tarjetas HTML y CSS. Si eres como yo, un apasiona
cpedrozamesa
cpedrozamesa
1

Chat entre amigos

Bueno, para crear una figura de chat con html y CSS primero debes saber de que se tratar谩 el mensaje. Haz un borrador de lo que el mensaj
malexandrecrespo
malexandrecrespo