-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
141 lines (131 loc) · 8.77 KB
/
index.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
131
132
133
134
135
136
137
138
139
140
141
<!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 rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400&family=Urbanist:wght@300;600&display=swap" rel="stylesheet">
<script src="https://use.fontawesome.com/830227f1b8.js"></script>
<link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free/css/all.css">
<script defer src="node_modules/@fortawesome/fontawesome-free/js/solid.js"></script>
<title>App fullstack</title>
</head>
<body style="margin:0">
<header class='navbar' >
<nav style="z-index:3">
<div class='s1'>
<div style="font-size: 32px;margin-top: 5px;margin-right: 5px;"><i class="fa fa-tint" aria-hidden="true"></i></div> <h1> FULLSTACK</h1>
</div>
<div class='s2'><input placeholder="BUSCAR por vehiculo" style="height:90%;width:85%;color:grey;background-color:#2a3138;border: none ;padding-right: 35px;"></div>
</nav>
</header>
<div class='container' style="z-index:0;">
<div>
<button class='agrega' style="float: right;border-radius: 50%;font-size: 20px;">+</button>
<h2>Vehiculos</h2>
</div>
<hr>
<div class='listaDetalles' >
<!--- LISTA DE VEHICULOS -->
<div class='listaVehiculos'>
<h3>Lista de vehiculos</h3>
<div style="background-color: #e2e4e1;" class='autos'>
<ul>
<li>
<div class='opciones' style="position:relative">
<div style="position:absolute;right:6%;top:35%"><i class="fa fa-tag fa-lg" aria-hidden="true"></i></div>
<h3 class='marca'>FIAT</h3>
<h4 class='modelo' style="margin-bottom:3px;color:#33b77e">
Palio GP SP 1.6 Flex</h4>
<h5 class='año' style="color: grey;">2016</h5>
</div>
</li>
<li>
<div class='opciones seleccionado' style="size:100%; position:relative">
<div style="position:absolute;right:6%;top:35%"><i class="fa fa-tag vendido fa-lg" aria-hidden="true"></i></div>
<h3 class='marca'>FIAT</h3>
<h4 class='modelo' style="margin-bottom:3px;color:#33b77e">
Palio GP SP 1.6 Flex</h4>
<h5 class='año' style="color: grey;">2016</h5>
</div>
</li>
<li>
<div class='opciones' style="background-color: white; position:relative">
<div style="position:absolute;right:6%;top:35%"><i class="fa fa-tag fa-lg" aria-hidden="true"></i></div>
<h3 class='marca'>FIAT</h3>
<h4 class='modelo' style="margin-bottom:3px;color:#33b77e">
Palio GP SP 1.6 Flex</h4>
<h5 class='año' style="color: grey;">2016</h5>
</div>
</li>
<li>
<div class='opciones' style="background-color: white; position:relative">
<div style="position:absolute;right:6%;top:35%"><i class="fa fa-tag fa-lg" aria-hidden="true"></i></div>
<h3 class='marca'>FIAT</h3>
<h4 class='modelo' style="margin-bottom:3px;color:#33b77e">
Palio GP SP 1.6 Flex</h4>
<h5 class='año' style="color: grey;">2016</h5>
</div>
</li>
<li>
<div class='opciones' style="background-color: white; position:relative">
<div style="position:absolute;right:6%;top:35%"><i class="fa fa-tag fa-lg" aria-hidden="true"></i></div>
<h3 class='marca'>FIAT</h3>
<h4 class='modelo' style="margin-bottom:3px;color:#33b77e">
Palio GP SP 1.6 Flex</h4>
<h5 class='año' style="color: grey;">2016</h5>
</div>
</li>
</ul>
</div>
</div>
<!--- /LISTA DE VEHICULOS -->
<!--- DETALLE DE VEHICULO -->
<div class='infoVehiculo' style='position:relative'>
<h3>Detalle del vehiculo</h4>
<div style="min-height:auto;background-color: #F1F2F0;height: 80%;padding:2%;">
<div>
<strong>
<h4 style="margin-bottom:3px;color:#33b77e">
Palio GP SP 1.6 Flex</h4>
</strong>
</div>
<br>
<div style='display:grid;grid-template-columns: 1fr 1fr;gap:10px'>
<div class="s5">
<h4 style="margin:0">Marca</h4>
<h5 style="margin:0; margin-top:3px;color: grey;">FIAT</h5>
</div>
<div class="s6">
<h4 style="margin:0">Año</h4>
<h5 style="margin:0; margin-top:3px;color: grey;">2016</h5>
</div>
</div>
<div class="descripcion" >
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, perspiciatis aperiam! Nisi pariatur natus facilis recusandae, provident ab temporibus quaerat ipsam molestias maxime. Vero, commodi iste quae magni dolores error.
Rem distinctio, excepturi vero voluptate facere doloribus mollitia magnam corporis soluta asperiores magni minima, maiores nemo nulla neque quam fuga. Repellat voluptas iste officia deleniti animi? Sapiente nam recusandae ducimus?
Fugiat, dolor quae.
</p>
<p>
Accusamus vitae exercitationem quod nisi fugit atque consequuntur ipsum, molestias beatae eveniet cumque sunt error a, neque nesciunt culpa voluptates aspernatur quasi velit nam quam reiciendis expedita.</p>
</div>
</div>
<div style="background-color:#F1F2F0;border-top: 1px solid grey; height: 3rem;width: 100%;position:relative;">
<!--- style="position: absolute;top:15%;left:3%;padding:2%;padding-right: 3%;"--->
<button style="position:absolute;left:3%;top:15%;bottom:15%;padding:auto;padding-left:15px;padding-right: 15px;"><i class="fa fa-pencil fa-lg" aria-hidden="true"></i> EDITAR</button>
<i class="fa fa-tag vendido fa-lg" style="position:absolute;right:5%;top:25%;" aria-hidden="true"></i>
</div>
<!--- /DETALLE DE VEHICULO -->
</div>
</div>
</body>
</body>
</html>