****COMO CREAR UNA TARJETA DE PRESENTACIÓN CON HTML Y CSS
****¿Estás cansado de que nadie te conozca? ¿Quieres ampliar tu experiencia en el mundo laboral pero no sabes cómo empezar?
En este sencillo tutorial veremos un elemento primordial para darte a conocer en el mundo laboral. Y esto es:
**¡UNA TARJETA DE PRESENTACIÓN!
**
**¿Qué es una tarjeta de presentación y para qué sirve?
** Una tarjeta de presentación no es más que un documento práctico que se utiliza para difundir la información de contacto o la de la empresa. Esta se distribuye a las empresas o personas que quieres que conozcan tus Servicios y contacten contigo en un futuro.
En la era de la tecnología que vivimos hoy en día, dar una simple tarjeta sería muy limitante, por lo que en este sencillo tutorial veremos cómo crear una tarjeta con HTML y CSS.
¡RECUERDA!
Cada una de ellas es una representación de nuestra persona y nuestras habilidades, por lo que es fundamental que le pongas empeño y que ésta sea capaz de representarte bien y difundir tu trabajo para darte a conocer de cara al público y posibles clientes.
Requisitos:
Visual Studio Code.
Maquetación. Para esto puedes usar diferentes fuentes. Este paso es opcional, pero creeme que te ayudará mucho.
Fuentes. Para ello puedes usar Google Fonts. https://fonts.google.com/ (opcional)
Imaginación y paciencia
Pero… ¿Cómo comienzo?
1- HTML
Primero crearemos una nueva carpeta. Esta puede estar ubicada en el escritorio o en tu carpeta principal.
Posteriormente a esto abriremos Visual Studio Code, donde abriremos la misma.
Dentro de la misma ya podemos comenzar a crear el contenido. Para ello crearemos un nuevo archivo que se llame “Index.html”
Luego, deberíamos crear el esqueleto de nuestro proyecto, es decir, el contenido básico de HTML para comenzar.
¡Tranquilo! Luego le agregaremos más cosas.
Debería quedar así:
<code><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Tarjeta de Presentacióntitle>
<style></style></head><body></body></html>2- Contenido
Ahora que ya tenemos la base, vamos a los detalles. En la etiqueta crearemos una sección
Las secciones son las partes temáticas en las que se puede dividir el contenido de una página web.
También le añadiremos una tarjeta
<div> `Este div contendrá la totalidad de la tarjeta, por lo que podremos agregarle otros internamente para ampliar y dividir los contenidos.
Le pondremos una clase, que nos servirá mas adelante para asignarle estilos.
También es importante ponerle una imagen a la tarjeta. Lo haremos con la etiqueta
Ahora crearemos un
<div>que contendrá el contenido escrito de la tarjeta, por lo que ahora tendremos dos divs que actuarán como cajas grandes y dividirán el contenido en 2: Tarjeta con Imagen y texto.
Dentro del
<div>de texto es donde crearemos más divs que dividan esta “caja” en sectores.
En mi caso quiero que Haya un div que contenga el título, uno que contenga las actividades que realizará el dueño de la tarjeta, otro que contenga el contacto y finalmente uno para un lema final.
Por ende, añadiremos 4 divs más.
<code><body><section><divclass="card"><imgsrc="./Croquetas.jpg"alt="Croquetas"><divclass="contenido"><divclass="titulo"><h1>Nombreh1>
<p>Profesionp>
</div><divclass="actividades"><p>Acá añadiremos actividades que realizamosp>
</div><divclass="contacto"><h1>Contactoh1>
<ul><li>Numero telefonicoli>
<li>Numero telefonicoli>
<li>Direccionli>
</ul></div><divclass="lema"><p>Lema</p></div></div></div></section></body>Recuerda colocarle una class a cada div ya que esto será importante a la hora de estilizar.
3- Css
¿Recuerdas que en el cuerpo del HTML pusimos una sección que se llamaba <styles>? Pues este es el momento donde descubrirás para qué se usa y comenzarás a darle forma y color al proyecto.
Comenzaremos dándole una base a la sección. Ya que vamos a estar jugando con formas y distintas distribuciones usaremos una propiedad llamada “Flexbox”.
Para utilizarla usaremos un display:flex para activarla. Luego jugaremos con diferentes propiedades para darle la forma adecuada.
Justify-content: center -> Usamos esta propiedad para centrar los contenidos de forma central. Es decir, en los dos divs que tenemos estará todo centrado.
Flex-direction: row; lo usaremos para mostrar los contenidos uno al lado del otro.
También es importante colocarle un ancho total, para establecer los límites de la sección.</styles>
<code>
section {
width: 100%;
display: flex;
justify-content: center;
flex-direction: row;
}
Así debería de quedar por el momento:
… Nada mal pero un tanto aburrido. Por eso mismo ahora añadiremos el resto.
Comenzaremos por los dos divs grandes: Imagen y Contenido.
Imagen:
Primero le daremos estilos a Card, para darle un estilo general a la tarjeta.
<code>
.card {
width: 650px;
background: rgb(9, 6, 0);
border-radius: 20px;
overflow: hidden;
display: flex;
flex-direction: row;
}
Estableceremos un ancho total, un color de fondo, un borde redondeado, activaremos el flex y le diremos que se vean los elementos alineados horizontalmente.
También le daremos estilo a la imagen. Algo tan simple como un borde y un ancho.
<code>
.cardimg {
width: 50%;
border-radius: 20px0020px;
}
Contenido:
En el div contenido le añadiremos los siguientes estilos
<code>
.contenido {
display: flex;
flex-direction: column;
flex: 1;
background: rgb(108, 99, 44);
}
Eso será una base ya que luego modificaremos el titulo(
<h1>) y el texto (</h1>)
<code>
.tituloh1, .titulop {
text-align: center;
padding: 20px;
margin:0px;
color: #362707;
font-family: 'Cinzel', serif;
font-weight: bold;
}
.tituloh1{
font-size: 40px;
color: #362707;
padding-bottom: 0px;
font-family: 'Cinzel', serif;
}
.titulop{
font-size: 20px;
padding-top: 4px;
padding-bottom: 0px;
}
Actividades
En esta parte simplemente añadiremos estilos a las letras, cambiaremos su tamaño, lo centraremos, coloreado y le quitaremos el margen superior para que se vea mas cerca de la etiqueta título.
<code>
.campos {
font-size: 18px;
text-align: center;
color: #bca5a5;
margin-top: 4px;
}
Contacto:
A este div le añadiremos un fondo distinto para que haya una variación en la tarjeta y se destaquen los diferentes elementos al haber una alternancia de colores.
<code>
.contacto {
background-color: #090400;
padding:20px;
}
Ahora nos centraremos en el título. Lo centraremos, le cambiaremos el tamaño de la letra, el color. Le quitaremos un poco de margen superior y lo pondremos en negrita.
<code>
.contactoh1{
text-align: center;
font-size: 20px;
color: #bca5a5;
margin-bottom: 0px;
font-weight: bold;
}
Ahora es el turno de la lista desordenada donde pusimos el cuerpo.
Le daremos un estilo general a la lista: lo alinearemos, le quitaremos el espaciado, los márgenes, los item de la lista y el color de letra.
Luego haremos lo mismo para especificar que cada item esté separado por 5px.
<code>
.contactoul {
text-align: center;
list-style: none; /* Elimina los estilos de la lista */padding: 0;
margin: 0;
color:#bca5a5;
}
.contactoli {
padding: 5px; /* Añade un pequeño espacio entre los elementos de la lista */
}
Lema
Este es el último div, el cual dirá unas palabras finales que sirvan para enganchar a la gente. Le da un toque de gracia (opinión personal)
<code>
.lema {
text-align:center;
font-size: 24px;
padding: 10px000;
color: #362707;
margin-bottom:50px;
font-weight: bold;
font-family: 'Cinzel', serif;
}
Lo centraremos, cambiaremos el tamaño de la letra, el espaciamiento, color, márgenes, negritas, y el estilo de letra.
Nota: Para cambiar el estilo de letra debemos importar un estilo de fuente.
1- Ingresar a https://fonts.google.com/
2- Elegir la fuente
3- Importarla en
<code><style>
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600&display=swap');
section{…
Luego en cada etiqueta que creemos en styles y queramos utilizar la fuente, la llamaremos:
<code>
.tituloh1, .titulop {
text-align: center;
padding: 20px;
margin:0px;
color: #362707;
font-family: 'Cinzel', serif;
font-weight: bold;
}
**¡Ya hemos acabado! Recuerda ir revisando en el navegador el avance de tu proyecto y puedes modificarlo usando el inspector, agregarle cosas y mejorarlo.
