index.html
<!DOCTYPE html>
<html lang="es"> <!La tag lang sirve para especificar el lenguaje que se va a utilizar para la página>
<head>
<meta charset="UTF-8"> <!Esta tag para el formato UTF-8 defino uno de los estandares mas usados de simbolos para las páginas web>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!viewport se utiliza para la visualización de la pantalla>
<!content="width=device-width esta tag sirve para que la página se adapte al tipo de pantalla del dispositivo en el que se la este visualizando>
<!initial-scale=1.0 sirve para iniciar sin ningun tipo de zoom en la página>
<title>Portafolio</title>
<link rel="stylesheet" href="style.css">
</head>
<body> <! La etiqueta body es en donde se definirara todo el diseño de la página web, por lo que al contar con un archivo css, los cambios que se hagan
en este archivo se veran reflejados en esta sección del código y por lo tanto definirar el estilo que tendra la página web a desarrollar>
<header></header>
<main class="presentacion">
<section class="presentacion__contenido">
<h1 class="presentacion__contenido__titulo">
Eleve tu negocio digital a otro nivel <strong class="titulo-destaque">con un Front-end de calidad!</strong>
</h1>
<p class="presentacion__contenido_texto">
¡Hola! Soy Ana García, desarrolladora Front-end con especialización en React,
HTML y CSS. Ayudo a pequeños negocios y diseñadores a llevar a cabo buenas ideas. ¿Hablamos?
</p>
<a href="https://www.instagram.com/" class="button">Instagram</a>
<a href="https://www.github.com/" class="button">Github</a>
<img src="Imagem.png" alt="Imagen de Ana García trabajando">
</section>
</main>
<footer></footer>
</body>
</html>
Desarrollo en el script CSS:
style.css
@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
.presentacion{
display: flex;
align-items: center;
margin: 10%;
justify-content: space-between;
}
.presentacion__contenido__titulo{
font-size: 36px;
font-family: "Krona One", sans-serif;
}
.presentacion__contenido_texto{
font-size: 24px;
font-family: "Montserrat", sans-serif;
}
