Skip to content

Commit 9f26a14

Browse files
ClaraJosephPacktClaraJosephPackt
committed
Code files uploaded
1 parent 732476a commit 9f26a14

File tree

35 files changed

+1193
-0
lines changed

35 files changed

+1193
-0
lines changed

‎Project 4 - Interior Designer Website/Final/Interior Designer Website - Final/.vscode/settings.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"liveServer.settings.port": 5501
3+
}

‎Project 4 - Interior Designer Website/Starter/Interior Designer Website/script.js

Whitespace-only changes.

‎Project 4 - Interior Designer Website/Starter/Interior Designer Website/style.css

Whitespace-only changes.

‎Project 5 - Coffee House Website/Final/Coffee House Website/images/client1.jpg

68.9 KB
Loading

‎Project 5 - Coffee House Website/Final/Coffee House Website/images/client2.jpg

155 KB
Loading

‎Project 5 - Coffee House Website/Final/Coffee House Website/images/client3.jpg

36.5 KB
Loading

‎Project 5 - Coffee House Website/Final/Coffee House Website/images/client4.jpg

99.1 KB
Loading

‎Project 5 - Coffee House Website/Final/Coffee House Website/images/client5.jpg

31.4 KB
Loading

‎Project 5 - Coffee House Website/Final/Coffee House Website/images/image1.jpg

307 KB
Loading

‎Project 5 - Coffee House Website/Final/Coffee House Website/images/image2.jpg

240 KB
Loading

‎Project 5 - Coffee House Website/Final/Coffee House Website/images/image3.jpg

200 KB
Loading

‎Project 5 - Coffee House Website/Final/Coffee House Website/images/image4.jpg

202 KB
Loading

‎Project 5 - Coffee House Website/Final/Coffee House Website/images/image5.jpg

204 KB
Loading

‎Project 5 - Coffee House Website/Final/Coffee House Website/images/image6.jpg

211 KB
Loading

‎Project 5 - Coffee House Website/Final/Coffee House Website/images/image7.jpg

186 KB
Loading

‎Project 5 - Coffee House Website/Final/Coffee House Website/images/image8.jpg

914 KB
Loading

‎Project 5 - Coffee House Website/Final/Coffee House Website/index.html

Lines changed: 308 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,308 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Coffee House</title>
8+
<link rel="stylesheet" href="style.css" />
9+
<link
10+
rel="stylesheet"
11+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
12+
/>
13+
<link rel="preconnect" href="https://fonts.googleapis.com" />
14+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
15+
<link
16+
href="https://fonts.googleapis.com/css2?family=Great+Vibes&family=Josefin+Sans:wght@300;400;700&family=Poppins:wght@300;400;700&display=swap"
17+
rel="stylesheet"
18+
/>
19+
<link
20+
rel="stylesheet"
21+
href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"
22+
/>
23+
</head>
24+
<body>
25+
<!-- Container -->
26+
<div class="container">
27+
<!-- Navigation -->
28+
<nav class="navbar">
29+
<div class="logo">
30+
<i class="fa-solid fa-mug-saucer"></i>
31+
<div class="logo-text">
32+
<span>Coffee</span>
33+
<span>House</span>
34+
</div>
35+
</div>
36+
<div class="navigation">
37+
<a href="#">Home</a>
38+
<a href="#">Menu</a>
39+
<a href="#">Blog</a>
40+
<a href="#">About</a>
41+
<a href="#">Shop</a>
42+
<a href="#">Contact</a>
43+
<a href="#"><i class="fa-solid fa-cart-shopping"></i></a>
44+
</div>
45+
</nav>
46+
<!-- End of Navigation -->
47+
48+
<!-- Landing -->
49+
<section class="landing">
50+
<div class="banner">
51+
<h3 class="main-heading">Welcome</h3>
52+
<h1>Amazing taste & beautiful place</h1>
53+
<p>
54+
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Recusandae
55+
ipsa harum minima repellat nostrum consequatur!
56+
</p>
57+
<button type="button" class="banner-btn banner-btn-1">
58+
Order Now
59+
</button>
60+
<button type="button" class="banner-btn banner-btn-2">
61+
View Menu
62+
</button>
63+
</div>
64+
<div class="swiper">
65+
<div class="swiper-wrapper">
66+
<div class="swiper-slide"><img src="images/image1.jpg" /></div>
67+
<div class="swiper-slide"><img src="images/image2.jpg" /></div>
68+
<div class="swiper-slide"><img src="images/image3.jpg" /></div>
69+
</div>
70+
<div class="swiper-pagination"></div>
71+
</div>
72+
<div class="landing-contact">
73+
<div class="details">
74+
<i class="fa-solid fa-phone"></i>
75+
<div>
76+
<span>000 (123) 456 7890</span>
77+
<span
78+
>Lorem ipsum, dolor sit amet consectetur adipisicing elit.
79+
Itaque, sed.</span
80+
>
81+
</div>
82+
</div>
83+
<div class="details">
84+
<i class="fa-solid fa-location-dot"></i>
85+
<div>
86+
<span>123 Main Street</span>
87+
<span
88+
>203 Fake St. Mountain View, San Francisco, California,
89+
USA</span
90+
>
91+
</div>
92+
</div>
93+
<div class="details">
94+
<i class="fa-solid fa-clock"></i>
95+
<div>
96+
<span>Open Monday-Friday</span>
97+
<span>Please Join Us, We are Available --> 8:00am - 9:00pm</span>
98+
</div>
99+
</div>
100+
</div>
101+
</section>
102+
<!-- End of Landing -->
103+
104+
<!-- About -->
105+
<section class="about">
106+
<div>
107+
<i class="fa-solid fa-mobile"></i>
108+
<h1>Easy to Order</h1>
109+
<p>
110+
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam ut
111+
suscipit, quod quidem cumque rerum.
112+
</p>
113+
</div>
114+
<div>
115+
<i class="fa-solid fa-truck"></i>
116+
<h1>Fastest Delivery</h1>
117+
<p>
118+
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam ut
119+
suscipit, quod quidem cumque rerum.
120+
</p>
121+
</div>
122+
<div>
123+
<i class="fa-solid fa-mug-hot"></i>
124+
<h1>Quality Coffee</h1>
125+
<p>
126+
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam ut
127+
suscipit, quod quidem cumque rerum.
128+
</p>
129+
</div>
130+
</section>
131+
<!-- End of About -->
132+
133+
<!-- Menu -->
134+
<section class="menu">
135+
<div class="menu-left">
136+
<h3 class="main-heading">Discover</h3>
137+
<h1>Our Menu</h1>
138+
<p>
139+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis
140+
accusantium vitae fugiat perferendis. Inventore rem debitis
141+
consequatur dolorum voluptatum. Repudiandae?
142+
</p>
143+
<button type="button" class="menu-btn">View Full Menu</button>
144+
</div>
145+
<div class="menu-right">
146+
<div class="menu-right-images">
147+
<div class="menu-img-wrapper">
148+
<img src="images/image4.jpg" />
149+
</div>
150+
<div class="menu-img-wrapper">
151+
<img src="images/image5.jpg" />
152+
</div>
153+
<div class="menu-img-wrapper">
154+
<img src="images/image6.jpg" />
155+
</div>
156+
<div class="menu-img-wrapper">
157+
<img src="images/image7.jpg" />
158+
</div>
159+
</div>
160+
</div>
161+
</section>
162+
<!-- End of Menu -->
163+
164+
<!-- Data -->
165+
<section class="data">
166+
<div>
167+
<div class="icon-wrapper">
168+
<i class="fa-solid fa-mug-hot"></i>
169+
<span class="icon-bg"></span>
170+
</div>
171+
<span class="num" data-val="350">0</span>
172+
<span class="info">Coffee Branches</span>
173+
</div>
174+
<div>
175+
<div class="icon-wrapper">
176+
<span class="icon-bg"></span>
177+
<i class="fa-solid fa-mug-hot"></i>
178+
</div>
179+
<span class="num" data-val="90">0</span>
180+
<span class="info">Number of Awards</span>
181+
</div>
182+
<div>
183+
<div class="icon-wrapper">
184+
<span class="icon-bg"></span>
185+
<i class="fa-solid fa-mug-hot"></i>
186+
</div>
187+
<span class="num" data-val="2540">0</span>
188+
<span class="info">Happy Customers</span>
189+
</div>
190+
<div>
191+
<div class="icon-wrapper">
192+
<span class="icon-bg"></span>
193+
<i class="fa-solid fa-mug-hot"></i>
194+
</div>
195+
<span class="num" data-val="750">0</span>
196+
<span class="info">Staff</span>
197+
</div>
198+
</section>
199+
<!-- End of Data -->
200+
201+
<!-- Customers -->
202+
<section class="customers">
203+
<div class="customers-banner">
204+
<h3 class="main-heading">Testimony</h3>
205+
<h1>Customers Say</h1>
206+
<p>
207+
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Assumenda
208+
doloribus qui nemo earum perspiciatis fugiat quae a numquam
209+
quibusdam asperiores.
210+
</p>
211+
</div>
212+
<div class="clients">
213+
<div class="client">
214+
<p>
215+
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
216+
Veritatis eos, maiores commodi sint voluptatum atque iusto itaque.
217+
Voluptates, asperiores delectus!
218+
</p>
219+
<div>
220+
<img src="images/client1.jpg" />
221+
<span>John Smith</span>
222+
</div>
223+
</div>
224+
<div class="client">
225+
<p>
226+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil et,
227+
quam repudiandae facere nulla nobis rerum quasi commodi ratione,
228+
ducimus sapiente debitis illum similique eveniet numquam provident
229+
tempore sed architecto!
230+
</p>
231+
<div>
232+
<img src="images/client2.jpg" />
233+
<span>Nick Brown</span>
234+
</div>
235+
</div>
236+
<div class="client">
237+
<p>
238+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Labore,
239+
illo! Architecto autem voluptatibus eum iste neque dolores vitae.
240+
Animi, eius?
241+
</p>
242+
<div>
243+
<img src="images/client3.jpg" />
244+
<span>david Jones</span>
245+
</div>
246+
</div>
247+
<div class="client">
248+
<p>
249+
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Libero,
250+
recusandae.
251+
</p>
252+
<div>
253+
<img src="images/client4.jpg" />
254+
<span>Ann Smith</span>
255+
</div>
256+
</div>
257+
<div class="client">
258+
<p>
259+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Labore,
260+
illo! Architecto autem voluptatibus eum iste neque dolores vitae.
261+
Animi, eius?
262+
</p>
263+
<div>
264+
<img src="images/client5.jpg" />
265+
<span>Mary Brown</span>
266+
</div>
267+
</div>
268+
</div>
269+
</section>
270+
<!-- End of Customers -->
271+
272+
<!-- Contact -->
273+
<section class="contact">
274+
<div class="contact-left"></div>
275+
<div class="contact-right">
276+
<form>
277+
<h1>Book a Table</h1>
278+
<div class="input-group">
279+
<input type="text" placeholder="First Name" />
280+
<input type="text" placeholder="Last Name" />
281+
</div>
282+
<div class="input-group">
283+
<input type="email" placeholder="Email Address" />
284+
<input type="text" placeholder="Phone" />
285+
</div>
286+
<div class="input-group">
287+
<textarea placeholder="Message"></textarea>
288+
<button type="button" class="contact-btn">Appointment</button>
289+
</div>
290+
</form>
291+
</div>
292+
</section>
293+
<!-- End of Contact -->
294+
295+
<!-- Footer -->
296+
<footer>
297+
<p class="copyright">
298+
&copy; All Rights Reserved. 2023. Made by Code And Create
299+
</p>
300+
</footer>
301+
<!-- End of Footer -->
302+
</div>
303+
<!-- End of Container -->
304+
305+
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
306+
<script src="script.js"></script>
307+
</body>
308+
</html>

‎Project 5 - Coffee House Website/Final/Coffee House Website/script.js

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
const swiper = new Swiper(".swiper", {
2+
autoplay: {
3+
delay: 4000,
4+
disableOnInteraction: false,
5+
},
6+
effect: "fade",
7+
loop: true,
8+
9+
pagination: {
10+
el: ".swiper-pagination",
11+
clickable: true,
12+
},
13+
});
14+
15+
let menu = document.querySelector(".menu");
16+
let nums = document.querySelectorAll(".num");
17+
let start = false;
18+
19+
window.addEventListener("scroll", () => {
20+
const navbar = document.querySelector(".navbar");
21+
navbar.classList.toggle("sticky", window.scrollY > 0);
22+
23+
if (window.scrollY >= menu.offsetTop) {
24+
if (!start) {
25+
nums.forEach((num) => {
26+
startCount(num);
27+
});
28+
}
29+
start = true;
30+
}
31+
});
32+
33+
const startCount = (el) => {
34+
let max = el.dataset.val;
35+
let count = setInterval(() => {
36+
el.textContent++;
37+
if (el.textContent === max) {
38+
clearInterval(count);
39+
}
40+
}, 2000 / nums);
41+
};

0 commit comments

Comments
 (0)