-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
189 lines (175 loc) · 7.33 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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=K2D:400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300i,400,700" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz"
crossorigin="anonymous">
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<script src="main.js"></script>
<title>CafeHub</title>
</head>
<body>
<div class="main">
<header class="wrapper">
<nav class="landing_top">
<div class="branding">
<a href="./index.html">
<h1><span>Cafe</span>Hub</h1>
</a>
</div>
<div class="menu_text">
<h3>MENU</h3>
</div>
<a href="javavscript:void(0)" class="menu" >
<i class="fas fa-bars fa-1x"></i>
</a>
<div id="nav_items" class="nav_bar">
<ul>
<li><a href="javascript:void(0)" class="close_btn" >×</a></li>
<input type="text" placeholder="Search...">
<button><i class="fas fa-search"></i></button>
<div class="nav_links">
<li><a href="index.html">home</a></li>
<li><a href="blogs.html">blogs</a></li>
<li><a href="#">about me</a></li>
<li><a href="#">contact me</a></li>
</div>
</ul>
</div>
</nav>
<section class="landing_bottom">
<div class="showcase">
<div class="large_text">
<h1><span>Cafe</span>Hub</h1>
</div>
<div class="small_text">
<h3>We make the most <b>Tasty</b> blogs about <span class="coffee">coffee.</span></h3>
</div>
</div>
<div class="expresso">
<h3>Expresso</h3>
<a href="#slogan"><i class="fas fa-arrow-circle-down fa-3x"></i></a>
</div>
</section>
</header>
<section>
<div id="slogan">
<h1 class="slogan_coffee">Coffee...</h1>
<div class="line_break"></div>
<h3 class="slogan_text">A lot can happen over coffee</h3>
</div>
</section>
<!-- Blogs -->
<section class="featured_blogs">
<div class="blog_right">
<div><img src="https://source.unsplash.com/02MLReRp3I8/4180 × 2792" alt="" class="test"></div>
<div class="info">
<h2>This is the blog Heading</h2>
<p>Steamed to go latte filter shop sweet sugar robusta siphon. Strong half and half, coffee affogato, blue
mountain extraction cultivar strong brewed body. Single origin siphon that to go, aroma saucer fair trade
java turkish. And, fair trade, a flavour dark est body doppio[...]</p>
<a href="#" class="continue_btn">Continue Reading</a>
</div>
</div>
<div class="blog_left">
<div><img src="https://source.unsplash.com/_QfGWOtITaM/3264 × 4896" alt=""></div>
<div class="info">
<h2>This is the blog Heading</h2>
<p>Beans, filter medium percolator robusta turkish affogato viennese cinnamon half and half saucer. Cream,
flavour that siphon cappuccino caffeine robust. Ut that carajillo coffee, crema, con panna a grounds id
pumpkin
spice. Chicory grounds sweet plunger pot saucer wings crema steamed siphon[...]</p>
<a href="#" class="continue_btn">Continue Reading</a>
</div>
</div>
<div class="blog_right">
<div><img src="https://source.unsplash.com/obV_LM0KjxY/4096 × 2730" alt=""></div>
<div class="info">
<h2>This is the blog Heading</h2>
<p>Mug est so cultivar medium iced coffee. Half and half to go cinnamon galão grounds arabica chicory. Milk,
black, aged, arabica strong, ristretto brewed strong brewed barista and beans[...]</p>
<a href="#" class="continue_btn">Continue Reading</a>
</div>
</div>
<div class="blog_left">
<div><img src="https://source.unsplash.com/KgziKKUyJVA/5760 × 3840" alt=""></div>
<div class="info">
<h2>This is the blog Heading</h2>
<p>Cream grounds white, extraction chicory dripper aged ristretto so saucer. Plunger pot, siphon affogato
white,
milk instant ristretto doppio robusta[...]</p>
<a href="#" class="continue_btn">Continue Reading</a>
</div>
</div>
</section>
<!-- Fun Facts -->
<section class="fun_facts">
<h1>Fun Facts about <span>Coffee</span></h1>
<div class="facts">
<div class="fact">
<h2>Heading</h2>
<p>Extra cultivar grounds siphon single shot trifecta cultivar. Plunger pot strong, cream in, white grinder,
grounds, espresso cappuccino mocha redeye trifecta.</p>
</div>
<div class="fact">
<h2>Heading</h2>
<p>Extra cultivar grounds siphon single shot trifecta cultivar. Plunger pot strong, cream in, white grinder,
grounds, espresso cappuccino mocha redeye trifecta.</p>
</div>
<div class="fact">
<h2>Heading</h2>
<p>Extra cultivar grounds siphon single shot trifecta cultivar. Plunger pot strong, cream in, white grinder,
grounds, espresso cappuccino mocha redeye trifecta.</p>
</div>
<div class="fact">
<h2>Heading</h2>
<p>Extra cultivar grounds siphon single shot trifecta cultivar. Plunger pot strong, cream in, white grinder,
grounds, espresso cappuccino mocha redeye trifecta.</p>
</div>
<div class="fact">
<h2>Heading</h2>
<p>Extra cultivar grounds siphon single shot trifecta cultivar. Plunger pot strong, cream in, white grinder,
grounds, espresso cappuccino mocha redeye trifecta.</p>
</div>
<div class="fact">
<h2>Heading</h2>
<p>Extra cultivar grounds siphon single shot trifecta cultivar. Plunger pot strong, cream in, white grinder,
grounds, espresso cappuccino mocha redeye trifecta.</p>
</div>
</div>
</section>
<section>
<div class="login">
<h3>Login/Sign Up</h3>
<p><b>Login</b> or <b>Sign Up</b> to have full access to the site</p>
<div class="buttons">
<a class="login_btn button">Login</a></div>
<a class="sign_up button">Sign Up</a>
</div>
</div>
</section>
<footer>
<div class="box">
<div class="social_media">
<a href="#" target="_blank"><i class="fab fa-twitter"></i></a>
<a href="#" target="_blank"><i class="fab fa-facebook-f"></i></a>
<a href="#" target="_blank"><i class="fab fa-instagram"></i></a>
<a href="#" target="_blank"><i class="fab fa-github"></i></a>
<a href="#" target="_blank"><i class="fas fa-envelope"></i></a>
</div>
</div>
<div class="credits">
<h3>©Kamal Teja | Image source: <a href="https://source.unsplash.com" target="_blank">Unsplash</a></h3>
</div>
</footer>
</div>
</body>
</html>