<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<base href="https://pablomonteserin.com/res/html5/ex/paginas/apple/index.html">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="noindex, follow">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#" class="icon manzanita"></a></li>
<li><a href="#">Mac</a></li>
<li><a href="#">Ipad</a></li>
<li><a href="#">Iphone</a></li>
<li><a href="#">Wath</a></li>
<li><a href="#">TV</a></li>
<li><a href="#">Music</a></li>
<li><a href="#">Soporte</a></li>
<li><a href="#" class="icon lupa"></a></li>
<li><a href="#" class="icon carrito"></a></li>
</ul>
</nav>
<p class="small_txt">Compra online y te lo enviamos gratis, rápido y sin contacto físico. Llámanos al 900 150
503 o visita nuestro soporte técnico.</p>
<div class="mainFoto">
<h2 class="t1">IPhone SE</h2>
<p class="t2">Mucho Iphone x menos :D</p>
<p class="t3">Es caro pero barato</p>
<p class="enlacesFinales"><a href="#">Vete aquí</a> <a href="#">Vete allí</a></p>
</div>
</header>
<div class="mainFotoWhite">
<h2 class="t1 black">IPhone SE</h2>
<p class="t2 black">Mucho Iphone x menos :D</p>
<p class="t3 black">Es caro pero barato</p>
<p class="enlacesFinales"><a href="#">Vete aquí</a> <a href="#">Vete allí</a></p>
</div>
<div class="mainFoto3">
<h2 class="t1">IPhone SE</h2>
<p class="t2">Mucho Iphone x menos :D</p>
<p class="t3">Es caro pero barato</p>
<p class="enlacesFinales"><a href="#">Vete aquí</a> <a href="#">Vete allí</a></p>
</div>
<div class="grid">
<div class="c1">
<h2 class="t1 black"><img src="./img/logo_tile__ex0pdbqxuuuu_large_2x.png" style="width:160px"></h2>
<p class="t2 black">Mucho Iphone x menos :D</p>
<p class="t3 black">Es caro pero barato</p>
<p class="enlacesFinales"><a href="#">Vete aquí</a> <a href="#">Vete allí</a></p>
</div>
<div class="c2">
<h2 class="t1">IPhone SE</h2>
<p class="t2">Mucho Iphone x menos :D</p>
<p class="t3">Es caro pero barato</p>
<p class="enlacesFinales"><a href="#">Vete aquí</a> <a href="#">Vete allí</a></p>
</div>
<div class="c3">
<h2 class="t1"><img style="width:100px" src="./img/logo__dcojfwkzna2q_large_2x0.png" alt="">
</h2>
<img style="width:260px" src="./img/defending_jacob_logo__b1e1tn1yev9e_large_2x.png" alt="">
<p class="t2">Mucho Iphone x menos :D</p>
<p class="t3">Es caro pero barato</p>
<p class="enlacesFinales"><a href="#">Vete aquí</a> <a href="#">Vete allí</a></p>
</div>
<div class="c4">
<h2 class="t1 black">IPhone SE</h2>
<p class="enlacesFinales"><a href="#">Vete aquí</a> <a href="#">Vete allí</a></p>
</div>
<div class="c5">
<h2 class="t1">IPhone SE</h2>
<p class="t2">Mucho Iphone x menos :D</p>
<p class="t3">Es caro pero barato</p>
<p class="enlacesFinales"><a href="#">Vete aquí</a> <a href="#">Vete allí</a></p>
</div>
<div class="c6">
<h2 class="t1">IPhone SE</h2>
<p class="t2">Mucho Iphone x menos :D</p>
<p class="t3">Es caro pero barato</p>
<p class="enlacesFinales"><a href="#">Vete aquí</a> <a href="#">Vete allí</a></p>
<img src="./img/subhead__cbpi9w6ev4aa_large_2x.png" style="width:80%; margin-top:60px" alt="">
</div>
</div>
<div class="parrafada">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias exercitationem impedit atque laboriosam
repellendus numquam id earum, rerum at maxime facilis saepe beatae voluptatibus culpa cum quod, illum
aliquam nisi?</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias exercitationem impedit atque laboriosam
repellendus numquam id earum, rerum at maxime facilis saepe beatae voluptatibus culpa cum quod, illum
aliquam nisi?</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias exercitationem impedit atque laboriosam
repellendus numquam id earum, rerum at maxime facilis saepe beatae voluptatibus culpa cum quod, illum
aliquam nisi?</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias exercitationem impedit atque laboriosam
repellendus numquam id earum, rerum at maxime facilis saepe beatae voluptatibus culpa cum quod, illum
aliquam nisi?</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias exercitationem impedit atque laboriosam
repellendus numquam id earum, rerum at maxime facilis saepe beatae voluptatibus culpa cum quod, illum
aliquam nisi?</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias exercitationem impedit atque laboriosam
repellendus numquam id earum, rerum at maxime facilis saepe beatae voluptatibus culpa cum quod, illum
aliquam nisi?</p>
</div>
<footer>
<div class="footerGrid">
<div>
<p class="titulo">titulo</p>
<ul>
<li><a href="#">amor</a></li>
<li><a href="#">amor</a></li>
<li><a href="#">amor</a></li>
<li><a href="#">amor</a></li>
<li><a href="#">amor</a></li>
</ul>
</div>
<div>
<p class="titulo">titulo</p>
<ul>
<li><a href="#">amor</a></li>
<li><a href="#">amor</a></li>
<li><a href="#">amor</a></li>
<li><a href="#">amor</a></li>
<li><a href="#">amor</a></li>
</ul>
</div>
<div>
<p class="titulo">titulo</p>
<ul>
<li><a href="#">amor</a></li>
<li><a href="#">amor</a></li>
<li><a href="#">amor</a></li>
<li><a href="#">amor</a></li>
<li><a href="#">amor</a></li>
</ul>
</div>
<div>
<p class="titulo">titulo</p>
<ul>
<li><a href="#">amor</a></li>
<li><a href="#">amor</a></li>
<li><a href="#">amor</a></li>
<li><a href="#">amor</a></li>
<li><a href="#">amor</a></li>
</ul>
</div>
<div>
<p class="titulo">titulo</p>
<ul>
<li><a href="#">amor</a></li>
<li><a href="#">amor</a></li>
<li><a href="#">amor</a></li>
<li><a href="#">amor</a></li>
<li><a href="#">amor</a></li>
</ul>
</div>
</div>
<p class="mb-0"> Más formas de comprar: encuentra un Apple Store o un distribuidor cerca de ti. O llama al 900
150 503. </p>
<div class="footer_final">
<div>
<p class="mt-1">Copyright © 2020 Apple Inc. Todos los derechos reservados.</p>
<ul>
<li><a href="#">enlace</a></li>
<li><a href="#">enlace</a></li>
<li><a href="#">enlace</a></li>
<li><a href="#">enlace</a></li>
<li><a href="#">enlace</a></li>
</ul>
</div>
<div class="yaCasiEstamos">
<img src="./img/32.png" alt="">España
</div>
</div>
</footer>
</body>
</html>
@font-face{
font-family: 'SF Pro Text';
src:url('./FontsFree-Net-SFProText-Regular.ttf')
}
*{
font-family: 'SF Pro Text';
}
body{
margin:0
}
a{
text-decoration:none
}
nav{
background-color: rgba(0,0,0,0.95);
padding:12px 0 12px 0;
}
nav ul{
list-style: none;
display: flex;
justify-content: center;
margin:0
}
nav ul a{
color:rgba(255,255,255,0.7);
text-decoration: none;
margin: 0 37px 0 37px;
font-size: 0.9rem;
}
.icon{
width:20px;
height: 20px;
background-size: 230% 230%;
display: block;
background-position: -13px -11px;
background-repeat: no-repeat;
}
.manzanita{
background-image: url('./img/globalnav_apple_image__cxwwnrj0urau_large.svg');
}
.lupa{
background-image: url('./img/globalnav_search_image__fca9mfoh8a2q_large.svg');
background-position: -33px -9px;
background-size: 410% 410%;
}
.carrito{
background-image: url('./img/globalnav_bag_image__bmix8075eg4i_large.svg');
}
.small_txt{
font-size:0.8rem;
text-align: center;
}
.mainFoto{
text-align: center;
background-image: url('./img/hero__dvsxv8smkkgi_largetall_2x.jpg');
min-height: 650px;
background-position: center 70px;
background-size: 1200px auto;
background-repeat: no-repeat;
background-color: #131313;
padding-top: 15px
}
.t1{
font-size: 3.2rem;
color:white;
margin-bottom: 0;
}
.t2{
font-size: 1.7rem;
color:white;
margin: 7px 0 0 0;
}
.t3{
font-size: 1.2rem;
color:rgba(255,255,255,0.7);
margin-top:7px
}
.enlacesFinales a{
color:#1e89ff;
margin: 0 30px 0 30px;
font-size:1.2rem
}
.black{
color:black
}
.mainFotoWhite{
text-align: center;
background-image: url('./img/hero__dvsxv8smkkgi_largetall_2x0.jpg');
min-height: 630px;
background-position: center bottom;
background-size: 2300px auto;
background-repeat: no-repeat;
padding-top: 15px;
background-color: #FAFAFA;
}
.mainFoto3{
text-align: center;
background-image: url('./img/hero__dvsxv8smkkgi_largetall_2x1.jpg');
min-height: 680px;
background-position: center bottom;
background-size: 3000px auto;
background-repeat: no-repeat;
padding-top: 15px;
background-color: black;
}
.grid{
display: grid;
grid-template-columns: 1fr 1fr;
row-gap: 14px;
column-gap:14px;
text-align: center;
}
.grid > div{
height:500px;
background-position:center center;
background-size:cover
}
.gird > div img{
display: block;
}
.c1{
background-image: url('./img/tile__cauwwcyyn9hy_large_2x1.jpg');
}
.c2{
background-image: url('./img/tile__cauwwcyyn9hy_large_2x0.jpg');
}
.c3{
background-image: url('./img/tile__cauwwcyyn9hy_large_2x2.jpg');
}
.c4{
background-image: url('./img/tile__cauwwcyyn9hy_large_2x.jpg');
}
.c5{
background-image: url('./img/rising_stars_large_2x.jpg');
}
.c6{
background-image: url('./img/tile__cauwwcyyn9hy_large_2x3.jpg');
}
.parrafada p{
max-width:900px;
margin: 20px auto;
color:gray;
font-size:0.8rem;
}
footer{
font-size:0.7rem;
width:900px;
margin:auto;
}
footer .footerGrid{
display:grid;
grid-template-columns: repeat(5, 1fr);
border-top: 1px solid gray;
}
footer a{
color:black;
display:block;
padding: 5px 0 5px 0
}
footer ul{
list-style: none;
padding-left:0;
margin:0
}
footer .titulo{
font-weight:bold
}
.footer_final{
display: grid;
grid-template-columns: 1fr 200px;
}
.footer_final ul li{
display: inline-block;
}
.footer_final ul li:not(:last-child) a{
border-right:1px solid gray
}
.footer_final ul li a{
padding: 5px 20px;
display: block;
}
.footer_final ul li:first-child a{
padding-left:0;
}
.mb-0{
margin-bottom:0
}
mt-1{
margin-top:5px;
}
.yaCasiEstamos img{
width:22px;
margin-right:10px
}
.yaCasiEstamos{
display: flex;
align-items: center;
}