-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
155 lines (143 loc) · 5.95 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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FAUGET COFFEE</title>
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"><!-- para redes -->
<link rel="icon" href="Media/logo2.png" type="image/x-icon">
</head>
<body>
<!-- menu Desplegable -->
<nav id="nav-menu">
<a href="#home" onclick="cerrarMenu()">Home</a>
<a href="#carta" onclick="cerrarMenu()">About</a>
<a href="#alimentos" onclick="cerrarMenu()">Menu</a>
<a href="#contacto" onclick="cerrarMenu()">Contact</a>
<a href="#" onclick="cerrarMenu()"><div id="cerrarMenu">x</div></a>
</nav>
<!-- Home -->
<section class="home" id="home">
<header>
<div class="container" id="headerContainer">
<div id="logo">
<img src="Media/logo2.png" alt="logo">
<h1>FAUGET<br/>COFFEE</h1>
</div>
<div id="menu">
<div class="divisorLogoMenu"></div>
<nav>
<a href="#home">Home</a>
<a href="#AbouSection">About</a>
<a href="#alimentos">Menu</a>
<a href="#contacto">Contact</a>
</nav>
<div class="menuLateral" onclick="verMenu()">
<span>MENU</span>
<div class="barras">
<div class="linea-efecto"></div>
<div class="linea"></div>
<div class="linea-efecto"></div>
</div>
</div>
</div>
</div>
</header>
<div id="divisorHorizontal"></div>
<div id="homeContenido">
<div id="bg1" class="bg">
<div id="bg2" class="bg">
<div id="bg3" class="bg">
<div id="texto">
<h2>You can choose your <br/>favorite coffee here.</h2>
<ul id="caracteristicas">
<li><img src="Media/List.png"><span class="liSeparador">The best selection of beans</span></li>
<li><img src="Media/List.png"><span class="liSeparador">Roasted with the best method</span></li>
<li><img src="Media/List.png"><span class="liSeparador">Served with the best taste</span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="AbouSection" id="AbouSection">
<div id="divisorHorizontal" class="divisorAbout"></div>
<section id="About">
<div class="texto">
<h2>About US</h2>
<div class="divisor"></div>
<P>Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Dolore rem incidunt sit
provident inventore natus laudantium quidem
dolorum beatae magnam consequatur corrupti
harum maxime, atque iste hic in numquam illo?
</P>
</div>
<div id="carusselCoffe">
<div class="carta" id="carta">
<h3>Nuestra Historia</h3>
</div>
<div class="carta">
<h3>Nuestros Valores</h3>
</div>
<div class="carta">
<h3>Nuestro Equipo</h3>
</div>
</div>
</section>
<div id="divisor2"></div>
</section>
<section class ="alimentos" id="alimentos">
<h2>NUESTRO MENU</h2>
<div class="container">
<div class="conteinerArrow">
<div class="arrow" id="arrowL" onclick="arrow()"><</div>
</div>
<div class="content">
<h3 id="tituloAlimentos">Bebidas Calientes</h3>
<div id="divisorHorizontal"></div>
<div class="bebidas">
<div id="bebida1" class="imagenesbebidas">
LATTE MACCHIATO
</div>
<div id="bebida2" class="imagenesbebidas">
FLAT WHITE
</div>
<div id="bebida3" class="imagenesbebidas">
MOCHA
</div>
<div id="bebida4" class="imagenesbebidas">
MACHIATTO
</div>
<div id="bebida5" class="imagenesbebidas">
CAPPUCINO
</div>
<div id="bebida6" class="imagenesbebidas">
LATTE
</div>
</div>
</div>
<div class="conteinerArrow">
<div class="arrow" id="arrowR" onclick="arrow()">></div>
</div>
</div>
</section>
<section id="contacto" class="contacto">
<div id="lineaH"></div>
<div class="container">
<h2>Contacto</h2>
<div id="redes">
<a href="https://www.instagram.com/jonatandlr/"><i class="fab fa-instagram"></i></a>
<a href="https://www.linkedin.com/in/jonatan-david-de-la-rosa-patlan-bb0750275/"><i class="fab fa-linkedin"></i></a>
</div>
</div>
</section>
<footer>
<p>Esta pagina fue creada solo usando HTML, CSS y JS</p>
<p class="copy"> ©jonatandlr</p>
</footer>
<script src="app.js"></script>
</body>
</html>