si como no te pongo el mio:
index
<!DOCTYPE html>
<html>
<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>Home | Apeperia</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/head.css">
<link rel="stylesheet" href="css/llamada.css">
<link rel="stylesheet" href="css/bases.css">
<link rel="stylesheet" href="https://fonts.google.com/share?selection.family=Montserrat:wght@300;400;700%7COpen%20Sans:wght@300;400;700">
</head>
<body>
<header class="head">
<img class="head_logo"src="img/logo-apeperia.svg" alt="Logo de Apeperia">
<nav class="head__navegacion">
<ul>
<li class="head_enlace"><a href="#">Sobre</a></li>
<li class="head_enlace"><a href="#">Planes</a></li>
<li class="head_enlace"><a href="#">Blog</a></li>
<li class="head_enlace"><a href="#">Destacados</a></li>
<li class="head_enlace"><a href="#">Institucional</a></li>
<li class="head_enlace"><a href="#">Contacto</a></li>
</ul>
</nav>
</header>
<main>
<section class="llamada">
<h1 class="llamada_titulo">Aplicaciones en la medida</h1>
<p class="llamada_texto">Apeperia es una empresa emergente con una manera inovadora de comprar y crear aplicaciones móviles y web.</p>
<a class="llamada_boton" href="#">Conozca los planes</a>
</section>
</main>
</body>
bases
body{
font-family: "Open Sans", sans-serif;
}
reset
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
a {
color: inherit;
text-decoration: none;
}
llamada
.llamada {
display: flex;
flex-direction: column;
align-items: center;
color: #FFFFFF;
text-align: center;
background-color: #00161C;
padding-top: 12.25rem;
padding-bottom: 2.5rem;
}
.llamada_titulo {
font-family: 'Montserrat', serif;
font-size: 2rem;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 1.5rem;
}
.llamada_texto {
font-size: 1.25rem;
line-height: normal;
margin: 0 auto 2.5rem;
}
.llamada_boton {
width: 100%;
}
head
.head {
color: #FFFFFF;
width: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
padding-top: .75rem;
padding-bottom: .75rem;
border-bottom: 1px solid #103D4A;
position: absolute;
}
.head_logo {
margin-bottom: 1rem;
}
.head_navegacion {
text-align: center;
}
.head_enlace {
font-size: 1.1rem;
display: inline-block;
margin-right: .7rem;
margin-bottom: 1.25rem;
margin-left: .7rem;
}
