Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
141 lines (135 loc) · 9.92 KB
/
Copy pathindex.html
File metadata and controls
141 lines (135 loc) · 9.92 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Apple (España)</title>
<link rel="icon" href="assets/favicon.ico" type="image/x-icon">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<link href="styles.css" rel="stylesheet">
</head>
<body class="bg-light">
<nav class="navbar navbar-dark navbar-expand-md bg-black">
<div class="container-fluid">
<a class="navbar-brand d-md-none" href="#">
<img src="assets/apple-logo.svg" alt="Apple Logo" class="d-inline-block align-text-top">
</a>
<div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent">
<a class="navbar-brand d-none d-md-block" href="#">
<img src="assets/apple-logo.svg" alt="Apple Logo" class="d-inline-block align-text-top">
</a>
<ul class="navbar-nav mb-2 mb-lg-0 d-flex justify-content-center">
<li class="nav-item">
<a class="nav-link active mx-2" aria-current="page" href="">Tienda</a>
</li>
<li class="nav-item">
<a class="nav-link mx-2" aria-current="page" href="">Mac</a>
</li>
<li class="nav-item">
<a class="nav-link mx-2" aria-current="page" href="">iPad</a>
</li>
<li class="nav-item">
<a class="nav-link mx-2" aria-current="page" href="">iPhone</a>
</li>
<li class="nav-item">
<a class="nav-link mx-2" aria-current="page" href="">Watch</a>
</li>
<li class="nav-item">
<a class="nav-link mx-2" aria-current="page" href="">Airpods</a>
</li>
<li class="nav-item">
<a class="nav-link mx-2" aria-current="page" href="">TV y Casa</a>
</li>
<li class="nav-item">
<a class="nav-link mx-2" aria-current="page" href="">Entretenimiento</a>
</li>
<li class="nav-item">
<a class="nav-link mx-2" aria-current="page" href="">Accesorios</a>
</li>
<li class="nav-item">
<a class="nav-link mx-2" aria-current="page" href="">Soporte</a>
</li>
</ul>
<button class="btn" type="submit">
<i class="bi bi-search" style="color:white"></i>
</button>
<button class="btn" type="submit">
<i class="bi bi-bag" style="color:white"></i>
</button>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="d-flex ms-auto align-items-center d-md-none">
<button class="btn" type="submit">
<i class="bi bi-search" style="color:white"></i>
</button>
<button class="btn" type="submit">
<i class="bi bi-bag" style="color:white"></i>
</button>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
</nav>
<div class="d-flex greyishColor align-items-center justify-content-center py-2 px-5">
<p class="text-light m-0 fs-6 biggerPadding text-center">Llévate una tarjeta regalo de hasta 140 € al comprar un Mac o iPad con los descuentos para educación. La oferta termina el 21/10.*
<a class="text-decoration-none" href="https://www.apple.com/es/shop/goto/edu_store">Comprar ></a>
</p>
</div>
<div class="d-flex flex-column">
<div class="container-fluid px-0 position-relative mb-3" >
<img class="img-fluid w-100 object-fit-cover h-50vh" src="assets/iphone_16_pro_v2.jpg" alt="iPhone 16 Pro">
<h1 class="text-white text-nowrap position-absolute fs-xl top-0 start-50 translate-middle-x mb-5 mt-5 ">iPhone 16 Pro</h1>
<div class="position-absolute top-85 start-50 translate-middle d-flex justify-content-center gap-3">
<a href="https://www.apple.com/es/iphone-16-pro/" class="btn btn-primary rounded-pill px-3 py-2 mx-2" role="button">Mas información</a>
<a href="https://www.apple.com/es/shop/buy-iphone/iphone-16" class="btn btn-outline-primary rounded-pill px-3 py-2 mx-2" role="button">Comprar</a>
</div>
</div>
<div class="container-fluid px-0 position-relative mb-3">
<img class="img-fluid w-100 object-fit-cover object-fit-cover h-50vh" src="assets/iphone_16.jpg" alt="iPhone 16">
<h1 class="text-white text-nowrap fs-xl position-absolute fs-xl top-0 start-50 translate-middle-x mb-5 mt-5 ">iPhone 16</h1>
<div class="position-absolute top-85 start-50 translate-middle d-flex justify-content-center gap-3">
<a href="https://www.apple.com/es/iphone-16/" class="btn btn-primary rounded-pill px-3 py-2 mx-2" role="button">Mas información</a>
<a href="https://www.apple.com/es/shop/buy-iphone/iphone-16-pro" class="btn btn-outline-primary rounded-pill px-3 py-2 mx-2" role="button">Comprar</a>
</div>
</div>
<div class="container-fluid px-0 position-relative mb-3">
<img class="img-fluid w-100 object-fit-cover h-50vh" src="assets/apple_watch_series_10.jpg" alt="Apple Watch Series 10">
<img class="position-absolute top-0 start-50 translate-middle translate-middle-x mb-2 mt-4" src="assets/logo_series_10.png">
<p class="lead position-absolute top-23 fw-normal start-50 translate-middle-x">La nueva línea del tiempo.</p>
<div class="position-absolute top-35 start-50 translate-middle d-flex justify-content-center gap-3">
<a href="https://www.apple.com/es/apple-watch-series-10/" class="btn btn-primary rounded-pill px-3 py-2 mx-2 min-width-150" role="button">Mas información</a>
<a href="https://www.apple.com/es/shop/buy-watch/apple-watch" class="btn btn-outline-primary rounded-pill px-3 py-2 mx-2 min-width-150" role="button">Comprar</a>
</div>
</div>
<div class="container-fluid px-0 position-relative mb-3 px-3">
<div class="row">
<div class="col-sm position-relative vh-100">
<img class="img-fluid w-100 object-fit-cover h-80" src="assets/apple_watch_ultra_2.jpg" alt="Apple Watch Ultra 2">
<img class="position-absolute top-0 start-50 translate-middle mb-2 mt-15" src="assets/watch_ultra_2_text.png">
<p class="lead text-white text-nowrap position-absolute top-15 fw-normal start-50 translate-middle-x">Nuevo acabado. Empieza la aventura.</p>
<div class="position-absolute top-23 start-50 translate-middle-x d-flex justify-content-center gap-3">
<a href="https://www.apple.com/es/apple-watch-series-10/" class="btn btn-primary rounded-pill min-width-150">Mas información</a>
<a href="https://www.apple.com/es/shop/buy-watch/apple-watch" class="btn btn-outline-primary rounded-pill min-width-150">Comprar</a>
</div>
</div>
<div class="col-sm position-relative vh-100">
<img class="img-fluid w-100 object-fit-cover h-80" src="assets/airpods_4.jpg" alt="Airpods 4">
<p class="display-6 text-white position-absolute top-30 fw-normal start-50 translate-middle-x">AirPods 4</p>
<p class="text-white text-nowrap position-absolute top-38 fw-normal start-50 translate-middle-x text-center">
Icónicos. Supersónicos.<br>Disponibles con cancelación<br>activa de ruido.
</p>
<div class="position-absolute top-50 start-50 translate-middle-x d-flex justify-content-center gap-3">
<a href="https://www.apple.com/es/airpods-4/" class="btn btn-primary rounded-pill min-width-150">Mas información</a>
<a href="https://www.apple.com/es/shop/buy-airpods/airpods-4" class="btn btn-outline-primary rounded-pill min-width-150">Comprar</a>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>