Lab 5

Ruvalpreet · Mar 15, 2023 · 00c83ac · 00c83ac
commit 00c83ac
Show file tree

Hide file tree

Showing 4 changed files with 149 additions and 0 deletions.
diff --git a/contact.html b/contact.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="styles/styles.css" rel="stylesheet">
+    <title>Contact page</title>
+</head>
+<body>
+    <header>
+        <div class="logo">
+            <a href="https://pixabay.com/photos/cheese-pizza-olives-mushrooms-1869708/" target="_blank"><img src="images\Pizza.jpg" alt="Site logo"></a>
+            <h1>Pizza King</h1>
+        </div>
+        <nav>
+            <a href="index.html">Home Page</a>
+            <a href="contact.html" id="contact">Contact us</a>
+        </nav>
+    </header>
+    <main class="main"> 
+        <form>
+            <div class="name">
+                <label for="your_name">Your Name
+                    <input type="text" id="your_name" required placeholder="Harry Quastle">
+                </label>
+            </div>
+            <div class="email">
+                <label for="your_email">Your Email<input type="email" required id="your_email" placeholder="[email protected]"></label>
+            </div>
+            <div class="message">
+                <label for="your_message">Your Message
+                    <textarea id="your_message" placeholder="Your Message"></textarea>
+                </label>
+            </div>
+            <div class="button">
+                <button id="submit" type="submit" onclick="alert('We Got Your Informaton!')">Submit</button>
+            </div>
+        </form>
+    </main>
+    <footer>
+        <address>Created by Ruvalpreet</address>
+        <address>Follow us on <a href="https://pixabay.com/photos/cheese-pizza-olives-mushrooms-1869708/" target="_blank"> Click Here</a> </address>
+    </footer>
+
+</body>
+</html>
diff --git a/images/Pizza.jpg b/images/Pizza.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Home Page</title>
+    <link href="styles/styles.css" rel="stylesheet">
+</head>
+<body class="page_contact">
+    <header>
+        <section class="logo">
+            <a href="https://pixabay.com/photos/cheese-pizza-olives-mushrooms-1869708/" target="_blank"><img src="images\Pizza.jpg" alt="Site logo"></a>
+            <h1>Pizza King</h1>
+        </section>
+        <nav>
+            <a href="index.html" id="index">Home Page</a>
+            <a href="contact.html">Contact us</a>
+        </nav>
+    </header>
+    <main>
+        <h2>Our Story</h2>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <h2>Our Products</h2>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    </main>
+    <footer>
+        <address>Created by Ruvalpreet</address>
+        <address>Follow us on <a href="https://pixabay.com/photos/cheese-pizza-olives-mushrooms-1869708/" target="_blank">Click Here</a></address>
+    </footer>
+
+</body>
+</html>
diff --git a/styles/styles.css b/styles/styles.css
@@ -0,0 +1,69 @@
+header img{
+    width: 50px;
+    height: 50px;
+}
+header img:hover{
+    filter: brightness(50%);
+    transition: all 1s ease;
+}
+.logo{
+    display: flex;
+    flex-direction: row;
+    gap: 30px;
+}
+
+.main {
+    margin: auto;
+    width: 30%;
+}
+.main label{
+    display: flex;
+    margin: 20px;
+}
+input, textarea{
+    width: 250px;
+    margin-left: 10px;
+}
+
+#submit:hover{
+    background-color: aqua;
+}
+footer{
+    margin-top: 20px;
+    text-align: center;
+}
+.button {
+    text-align: center;
+}
+nav{
+    display: flex;
+    flex-direction: column;
+    border: solid black 2px;
+    width: 10%;
+}
+nav a{
+    text-decoration: none;
+    width: auto;
+}
+
+nav a:hover{
+    background-color: pink;
+    transition: all 5s ease;
+}
+
+#contact, #index{
+    background-color: lightblue;
+}
+.email,.name{
+    margin-left: 19px;
+}
+body{
+    padding: 30px;
+}
+input:active, textarea:active{
+    background-color:  rgb(228, 14, 14);
+    transition: all 0.1s ease;
+}
+h1{
+    font-size: 30px;
+}