Add files via upload

dawoodkhatri1 · Nov 9, 2024 · 21e58d4 · 21e58d4
1 parent b767ce0
commit 21e58d4
Show file tree

Hide file tree

Showing 7 changed files with 295 additions and 0 deletions.
diff --git a/1.jpg b/1.jpg
diff --git a/2.jpg b/2.jpg
diff --git a/3.jpg b/3.jpg
diff --git a/4.jpg b/4.jpg
diff --git a/5.jpg b/5.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+          integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>&hearts;</span> by Dawood M.Shoaib</p>
+    </footer>
+</body>
+
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,136 @@
+/* Navbar Style */
+.form-control::placeholder {
+    color: green;
+}
+
+/* Home */
+.container{
+    display: flex;
+    height: 817px;
+    background-image: url(1.jpg);
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    justify-content: center;
+    align-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+h1{
+    color: black;
+    font-family: "arial";
+    margin: 10px 0 0 10px;
+    display: flex;
+    white-space: nowrap;
+    overflow: hidden;
+    width: 100%;
+    animation: animtext 4s steps(80, end);
+    transition: all cubic-bezier(0.1, 0.7, 1.0, 0.1);
+    flex-direction: row;
+    justify-content: center;
+}
+@keyframes animtext { 
+ from {
+     width: 0;
+    transition: all 2s ease-in-out;
+ } 
+}
+
+.p{
+    font-size: 18px;
+}
+
+/* About Us */
+img {
+    width: 385px;
+    height: 401px;
+    opacity: 1;
+    border-radius: 9px;
+    object-fit: contain;
+}
+.A1{
+    display: flex;
+    flex-direction: column-reverse;
+    align-items: center;
+}
+
+
+button{
+    width: 130px;
+}
+
+/* Out Services */
+.card{
+    display: flex;
+    flex-direction: column;
+}
+.row{
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+}
+
+h2{
+    color: black;
+    font-family: "arial";
+    font-size: 3em;
+    margin: 10px 0 0 10px;
+    display: flex;
+    white-space: nowrap;
+    overflow: hidden;
+    width: 100%;
+    animation: animtext 5s steps(80, end);
+    transition: all cubic-bezier(0.1, 0.7, 1.0, 0.1);
+    flex-direction: row;
+    justify-content: center;
+}
+@keyframes animtext { 
+ from {
+     width: 0;
+    transition: all 2s ease-in-out;
+ } 
+}
+
+
+.contact_saction_layout_Padding{
+    display: flex;
+    flex-direction: column-reverse;
+    align-items: center;
+}
+.row-2{
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    justify-content: space-evenly;
+}
+
+
+.container-1{
+    display: contents;
+
+}
+
+@media (max-width: 1200px) {
+    .row-2{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
+    .col-sm-3 {
+        height: 386px;
+    }
+    .container h1{
+        font-size: 1.5em;
+    }
+}
+#mynavbar{
+    display: flex;
+    flex-direction: column;
+    color: darkcyan;
+}
+
+span {
+    color: red;
+    font-size: 25px;
+}