Diseño de una card
Presentacion de una card
En nuestro editor de codigo visual estudio code vamos a crear nuetro archivo html
Un poco de Teoria
<h5>¿Qué es HTML?</h5>El Lenguaje de Marcado de Hipertexto o HTML por sus siglas en inglés (HyperText Markup Language) es el código para construir la estructura de una página web.
En otras palabras, HTML es el esqueleto con el cual definimos cada elemento que compone la página web, así como: enlaces, párrafos, títulos, botones, imágenes, formularios, entre otros.
Los elementos son cada una de las partes que conforman un archivo HTML. Su estructura contiene:
- Etiquetas: es la representación de un elemento HTML. Se dividen en etiquetas de apertura, representadas por <etiqueta> y etiquetas de cierre, representadas por </etiqueta>.
- Contenido: es el texto o elementos encerrados por la etiqueta, este valor es opcional en algunas de ellas.
Las etiquetas semánticas para definir una interfaz de una página web son:
- <header>: define el encabezado de la página (no confundir con <head>).
- <nav>: define una barra de navegación que incluye enlaces.
- <section>: define una sección de la página.
- <footer>: define un pie de página o de sección.
- <article>: define un artículo, el cual puede tener su propio encabezado, navegación, sección o pie de página.
- <body> para el contenido
- <head> para información sobre el documento
- <div> división dentro del contenido
- <a> para enlaces
- <strong> para poner el texto en negrita
- <br> para saltos de línea
- <H1>…<H6> para títulos dentro del contenido
- <img> para añadir imágenes al documento
- <ol> para listas ordenadas, <ul> para listas desordenadas, <li> para elementos dentro de la lista
- <p> para parágrafos
- <span> para estilos de una parte del texto
El lenguaje de Hojas de Estilos en Cascada o CSS por sus siglas en inglés (Cascade Style Sheets) es el código para describir la presentación de los elementos de la página web, los que definimos con HTML.
Propiedades y valores de CSS más usados
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
Posicionamiento en CSS
El posicionamiento en CSS consiste en cómo un elemento se situará, con respecto a su elemento padre y al flujo normal del documento. El flujo normal del documento es el orden de los elementos establecidos en el HTML.
La posición del elemento se la define con la propiedad position, mediante los siguientes valores:
- static
- relative
- absolute
- sticky
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 del elemento HTML
El border consiste en el perfil o borde de un elemento HTML. Si imaginamos una caja, sería la caja en sí. Para definir un borde es necesario utilizar las siguientes tres propiedades:
- border-color: establece el color del borde.
- border-style: establece el estilo propio del borde, estos pueden ser: none (sin borde), dotted (puntos), dashed (guiones), solid (continuo), double (doble continuo), groove (recuadro).
- border-width: estable la anchura del borde.
Los pseudoelementos nos permiten acceder a elementos de HTML que no son accesibles con los selectores ya vistos.
- ::after
- ::before
- ::first-letter
- ::placeholder
Nuestro diseño
Ya teniendo un poco de teoria podemos diseñar nuetro proyecto en html en nuestro editor de codigo VSCODE
Establecermos la plantilla inicial de HTML escribiendo html:5 y oprimiendo TAB.
<!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>
<body>
<!-- aqui va a ir nuestro seccion -->
</body>
</html>
Seccion donde vamos a diseñar nuetra presentacion con algunas etiqutas dentro del <body>
<section>
<div class="card">
<img src="https://images.pexels.com/photos/2115217/pexels-photo-2115217.jpeg?cs=srgb&dl=pexels-eduardo-dutra-2115217.jpg&fm=jpg" alt="Computing">
<img src="https://images.pexels.com/photos/1056251/pexels-photo-1056251.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" alt="cat">
<h2>Michin Energico</h2>
<div class="info">
<p class="info__item">
<i class="material-icons-outlined">place</i>
Bogota, Colombia
</p>
<p class="info__item">
<i class="material-icons-outlined">mail</i>
Send e-mail
</p>
</div>
<nav>follow up</nav>
</div>
</section>
los estilos CSS que le vamos a gregar a nuetra trajeta para personalizar, En nuestro caso lo haremos dentro del mismo HTML creando una nueva etiqueta llamada <style> y hemos descargado una api de icons para agregar a nuetra tarjeta
fonts.googleapis.com
<style>
section {
width: 100%;
display: flex;
justify-content: center;
font-family: fantasy;
}
.card{
height: 500px;
width: 400px;
background: gainsboro;
border-radius: 20px;
overflow: hidden;
position: relative;
}
.card img{
width: 100%;
}
.card img:nth-child(2) {
width: 150px;
height: 150px;
position: absolute;
border-radius: 50%;
left: 130px;
top: 170px;
border-color: white;
border: 4px solid rgb(242, 244, 245);
}
.card h2 {
position: absolute;
left: 100px;
bottom: 100px;
}
.card h5 {
position: absolute;
bottom: 80px;
color: dodgerblue;
margin-right: 5px;
vertical-align: text-bottom;
display: flex;
flex-direction: row;
justify-content: space-around;
}
.card nav {
position: absolute;
bottom: 0px;
width: 100%;
text-align: center;
background: rgb(202, 202, 240);
display: flex;
flex-direction: column;
}
.card .info {
position: absolute;
bottom: 80px;
display: flex;
flex-direction: row;
justify-content: space-around;
width: 100%;
height: 7%;
}
.card .info__item i {
color: dodgerblue;
margin-right: 5px;
vertical-align: text-bottom;
}
</style>
Paso final ya tenemos nuestra presentacion en una card
Curso de Frontend Developer
