-
Notifications
You must be signed in to change notification settings - Fork 0
/
pruebaHTML.html
131 lines (119 loc) · 6.58 KB
/
pruebaHTML.html
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
<!DOCTYPE html>
<html lang="en">
<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">
<link href="https://fonts.googleapis.com/css2?family=PT+Sans&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Castoro+Titling&family=Roboto+Slab&display=swap" rel="stylesheet">
<!-- Llamada a los iconos de googleicons-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,600,0,200" />
<link rel="stylesheet" href="pruebaCSS.css">
<title>Document</title>
</head>
<body>
<header >
<div class="header__tittle">
<h3>agoodshop</h3>
</div>
<nav class="header__nav">
<ul class="nav__list">
<li><a href="">Tienda</a></li>
<li><a href="#accesorios">Accesorios</a></li>
<li><a href="">Soporte</a></li>
<li><a href="" id="contactar">Contactar</a></li>
</ul>
</nav>
</header>
<hr class="separationOne"/>
<!-- PRIMERA SECCION -->
<main>
<section class="mainProduct">
<div class="mainProduct__picture pictureIfhone ">
<img src="/assets/pictures/iphone-13-pro-max-blue-select.webp" class="pictureIfhone__imagen" alt="">
<div class="pictureIfhone__green">128gb</div>
</div>
<div class="mainProduct__text text">
<p id="oferta"><strong>OFERTA</strong></p>
<h1 class="text__tittle">Compra un iFhone 13 Pro</h1>
<p class="text__one">iFhone 13: tu nuevo superpoder. Nuestro sistema de cámara dual más avanzado. El chip que hace morder el polvo a la competencia. Un subidón de autonomía que vaya si notarás. Ceramic Shield, más duro que cualquier vidrio de smartphone. </p>
<p class="text__two">Pantalla Super retina XDR de 6,1 pulgadas. Diseño robusto con bordes planos y resistente al agua.</p>
<div class="text__three buyPrice">
<p class="buyPrice__price">938.99$</p>
<button class="buyPrice__button">Comprar</button>
</div>
<!-- LAS ETIQUETAS CON LOS ICONOS-->
<div class="mainProduct__labels labels">
<div class="labels__label">
<img src="assets/icons/storefront_FILL0_wght600_GRAD200_opsz48.svg" alt="">
<p>Enevio rápido, gratuito y sin contacto</p>
</div>
<div class="labels__label">
<img src="assets/icons/restart_alt_FILL0_wght600_GRAD200_opsz48.svg" alt="">
<p>Devoluciones fáciles y gratuitas</p>
</div>
<div class="labels__label">
<img src="assets/icons/request_quote_FILL1_wght600_GRAD200_opsz48.svg" alt="">
<p>Posibilidad de pago a plazos</p>
</div>
</div>
</div>
</section>
<!-- ARTICULOS RECOMENDADOS-->
<section class="suggestions" id="accesorios">
<h1 class="suggestions__tittle" id="tittle__suggestion">ACCESORIOS RECOMENDADOS</h1>
<div class="suggestion__cards">
<div class="cards">
<img src="assets/pictures/cargador.png" class="cards__img" alt="">
<h2 class="cards__tittle">Cargador</h2>
<p class="cards__text">El adaptador de corriente USB-C de 20 W es muy rápidop y eficiente, así que va de perlas para cargar tus dispositivos en cualquier lugar.</p>
</div>
<div class="cards">
<img class="cards__img" src="/assets/pictures/fee_786_587_png.webp" alt="">
<h2 class="cards__tittle">Base de carga inalámbrica</h2>
<button class="cards__alert--red">Oferta</button>
<p class="cards__text">Sistema de soporte para que sigas usando tu smartphone cómodamente mientras lo cargas. Compatible con carga rápida de 20W.</p>
</div>
<div class="cards">
<img class="cards__img" src="/assets/pictures/MVFY2.jpg" id="cards__img4" alt="">
<h2 class="cards__tittle">Funda piel</h2>
<p class="cards__text">Fabricadas en piel europea curtida y teñida con un proceso especial, son suabes al tacto y adquieren un tono natural con el tiempo. Los botones de aluminio combinan a la perfección con el acabado de la piel.</p>
</div>
<div class="cards">
<img class="cards__img" src="assets/pictures/cargador.png"">
<h2 class="cards__tittle">Cargador</h2>
<button class="cards__alert--blue">Nuevo</button>
<p class="cards__text"> El adaptador de corriente USB-C de 20 W es muy rápidop y eficiente, así que va de perlas para cargar tus dispositivos en cualquier lugar.</p>
</div>
</div>
</section>
<!-- FORMULARIO-->
<aside class="form">
<div class="form__descripton description">
<h1 class="description__tittle"> Participa en el sorte de un iFhone 13</h1>
<p class="description__textOne">Este verano, ¡venimos cargados de premios! Así que antes de irte de vacaciones, ¡participa en nuestro sorteo! y podrás llevarte un regalo increíble como un nuevo iFhone13</p>
<p class="description__textTwo">Rellena este formualrio para ser uno de los afortunados.</p>
</div>
<form class="form__form" action="" method="get">
<div class="form__ladder">
<label id="idname" for="name">Nombre</label><br>
<input type="text" name="name" id="name" placeholder="Ari Gold">
</div>
<div class="form__ladder">
<label for="email">Email</label><br>
<input type="email" name="email" id="email" placeholder="[email protected]">
</div>
<div class="form__submit">
<input type="submit" placeholder="[email protected]">
</div>
</form>
</aside>
</main>
<footer>
<hr class="footer__hr">
<div class="footer__text">
<p><strong>© agoodshop</strong></p>
</div>
</footer>
</body>
</html>