-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
159 lines (149 loc) · 7.88 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<title>Utensil Website</title>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-sm">
<div class="container-fluid bg-secondary p-3">
<a class="navbar-brand text-white" href="javascript:void(0)">Utensils</a>
<button class="navbar-toggler bg-white" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mynavbar">
<ul class="navbar-nav me-3">
<li class="nav-item">
<a class="nav-link " href="#home" style="color: #C21807;">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#aboutus" style="color: #C21807;">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#service" style="color: #C21807;">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contactus" style="color: #C21807;">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Home -->
<div class="container" id="home">
<h1>The Art of Utensils: Where Function Meets Elegance</h1>
<p>
Utensils may seem like the unsung heroes of our kitchens, but their design is a testament to the harmonious
blend of functionality and aesthetic appeal. From the gleaming, precision-forged knives that make effortless
slicing a reality to the elegantly curved wooden spoons that stir with a touch of grace, each utensil is
crafted to enhance both our culinary creations and our dining experiences. The choice of materials—whether
it's the gleaming stainless steel of a set of forks or the smooth, durable silicone of a spatula—plays a
pivotal role in ensuring that each tool performs its task with impeccable efficiency. Furthermore, the
artistry in utensil design extends to ergonomics, where comfort and ease of use are prioritized to make
cooking and serving as enjoyable as the meal itself. In this intersection of form and function, utensils
transcend their basic roles, becoming both practical essentials and beautiful, enduring elements of our
kitchen repertoire.
</p>
</div>
<!-- About Us -->
<div class="container-fluid mt-3" id="aboutus">
<h1>ABOUT US</h1>
<div class="row">
<div class="col-sm-4 A1 p-3 bg-primary text-white">
<img src="2.jpg" alt="Info1">
</div>
<div class="col-sm-8 A2 p-3 bg-dark text-white">
<h3>HI! THIS IS AJAY</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex reiciendis earum voluptatem in est,
suscipit impedit cumque ad, dicta sint labore recusandae. Iusto, amet.
</p>
<button type="button" class="btn btn-info">About me?</button>
</div>
</div>
</div>
<!-- Services -->
<div class="container-fluid mt-3" id="service">
<h1>Our Services</h1>
<div class="row-2">
<div class="col-sm-3">
<div class="card" style="width:350px; height: 350px">
<img class="card-img-top" src="3.jpg" alt="Card image">
<div class="card-body">
<h4 class="card-title">Special Kitchen items</h4>
<p class="card-text">Some example text.</p>
<a href="#" class="btn btn-secondary">See Profile</a>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="card" style="width:350px; height: 350px">
<img class="card-img-top" src="4.jpg" alt="Card image">
<div class="card-body">
<h4 class="card-title">Special Mug</h4>
<p class="card-text">Some example text.</p>
<a href="#" class="btn btn-secondary">See Profile</a>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="card" style="width:350px;height: 350px">
<img class="card-img-top" src="5.jpg" alt="Card image">
<div class="card-body">
<h4 class="card-title">Crockery Set</h4>
<p class="card-text">Some example text.</p>
<a href="#" class="btn btn-secondary">See Profile</a>
</div>
</div>
</div>
</div>
</div>
<!------Contact us--->
<div class="contact_saction_layout_Padding">
<div class="container-1">
<div class="col-md-6" id="contactus">
<br><br>
<h2>CONTACT US!</h2>
<p>Fill up the form:</p>
<form action="/action_page.php">
<div class="form-floating mb-3 mt-3">
<input type="text" class="form-control" id="email" placeholder="Enter email" name="email">
<label for="name">Enter Name:</label>
</div>
<div class="form-floating mt-3 mb-3">
<input type="text" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
<label for="phone">Phone</label>
</div>
<div class="form-floating mt-3 mb-3">
<input type="text" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
<label for="email">Email</label>
</div>
<div class="form-floating mt-3 mb-3">
<input type="text" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
<label for="message">Message</label>
</div>
<button type="submit" class="btn btn-warning">Submit</button>
</form>
</div>
</div>
</div>
<footer class="py-3 my-4 text-bg-secondary">
<ul class="nav justify-content-center border-bottom pb-3 mb-3">
<li class="nav-item"><a href="#home" class="nav-link px-2 " style="color: #C21807;">Home</a></li>
<li class="nav-item"><a href="#aboutus" class="nav-link px-2 " style="color: #C21807;">About Us</a></li>
<li class="nav-item"><a href="#services" class="nav-link px-2 " style="color: #C21807;">Services</a></li>
<li class="nav-item"><a href="#contactus" class="nav-link px-2 " style="color: #C21807;">Contact Us</a></li>
</ul>
<p class="text-center">@ 2024 Kitchen-utensils Company,(PVT)Inc</p>
<p class="text-center">Created with <span>♥</span> by Dawood M.Shoaib</p>
</footer>
</body>
</html>