-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
123 lines (118 loc) · 5.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Great Coffee</title>
<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@500&display=swap" rel="stylesheet">
<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&display=swap" rel="stylesheet">
<link rel="stylesheet" media="" href="responsive.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav id="nav-bar">
<div class="logo">
<h1><b>GreatCoffee</b></h1>
</div>
<ul class="manu">
<li class="items"><a href="#home">Home</a></li>
<li class="items"><a href="#AboutUS">About Us</a></li>
<li class="items"><a href="#gallery">Gallery</a></li>
<li class="items"><a href="#Services">Services</a></li>
<li class="items"><a href="#contact-us">Contact Us</a></li>
</ul>
</nav>
<section id="home">
<div class="home-container">
<div class="home-text">
<div class="heading">
<h1 style="color: rgb(48, 46, 46)">Out Standing</h1>
<h1>Coffee Shop</h1>
</div>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Asperiores rerum porro ut repudiandae nihil
similique, error quas, quidem inventore cumque veritatis! Tenetur, neque!</p>
<button class="btn">
Learn More
</button>
</div>
</div>
</section>
<section id="AboutUS">
<div class="about-container">
<div class="about-text">
<h1>
About Us
</h1>
<p style="text-align: justify;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate
quisquam possimus similique praesentium Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Inventore, sint natus laborum!</p>
<button class="btn">
Read More
</button>
</div>
<img src="/img/about-img.jpg" alt="This is an image" class="about-img">
</div>
</section>
<section id="gallery">
<div class="gallery-container">
<h1>Gallery</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos hic voluptate praesentium, commodi
consequatur eum iure ratione, doloremque repellat eligendi, laborum cum saepe aut non consequuntur
explicabo id cumque impedit! Suscipit exercitationem dolore illum.</p>
<div class="box-container">
<div class="box"><img src="/img/coffee1.jpg" alt="This is an img"></div>
<div class="box"><img src="/img/coffee2.jpg" alt="This is an img"></div>
<div class="box"><img src="/img/coffee3.jpg" alt="This is an img"></div>
<div class="box"><img src="/img/coffee4.jpg" alt="This is an img"></div>
<div class="box"><img src="/img/coffee5.jpg" alt="This is an img"></div>
<div class="box"><img src="/img/coffee6.jpg" alt="This is an img"></div>
</div>
<button class="btn">See More</button>
</div>
</section>
<section id="Services">
<div class="services-container">
<h1>Services</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vero, quibusdam.</p>
<div class="services-box-container">
<div class="services-box"><img src="/img/services-cup.png" alt="This is an img">
<div class="Ser-box-heading">Original Coffee</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, distinctio!</p>
<button class="btn">Read More</button>
</div>
<div class="services-box"><img src="/img/services-cup.png" alt="This is an img">
<div class="Ser-box-heading">20 Coffee Flavour</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, distinctio!</p>
<button class="btn">Read More</button>
</div>
<div class="services-box"><img src="/img/services-cup.png" alt="This is an img">
<div class="Ser-box-heading">Pleasent Abient</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, distinctio!</p>
<button class="btn">Read More</button>
</div>
</div>
</div>
</section>
<section id="contact-us">
<h1>Contact Us</h1>
<div class="contactUs-container">
<div class="contact-form">
<form action="#">
<input type="text" name="name" id="name" placeholder="Enter Your Name">
<input type="email" name="email" id="email" placeholder="Enter Your Email">
<input type="number" name="number" id="number" placeholder="Enter your Number">
<textarea name="massege" id="massede" cols="30" rows="10" placeholder="Massage"></textarea>
<input type="button" value="Send" class="btn">
</form>
</div>
</div>
</section>
</body>
<footer>
© 2023 All Rights Reserved. Design by Hamza Ghaffar
</footer>
</html>