first commit

saurabh-shete · Mar 10, 2023 · dc5c70e · dc5c70e
commit dc5c70e
Show file tree

Hide file tree

Showing 3 changed files with 151 additions and 0 deletions.
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">
+  <link rel="stylesheet" href="styles/styles.css"> 
+  <title>Assessment Work</title>
+</head>
+<body>
+  <div class="nav">
+  <input type="checkbox" id="nav-check">
+  <div class="nav-header">
+    <div class="nav-title">
+      Hello
+    </div>
+  </div>
+  <div class="nav-btn">
+    <label for="nav-check">
+      <span></span>
+      <span></span>
+      <span></span>
+    </label>
+  </div>
+
+  <div class="nav-links">
+    <a href="index.html" >Enquiry Form</a>
+    <a href="index.html" >Listing</a>
+  </div>
+</div>
+<script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,16 @@
+// function toggleDropdown () {
+//   var dropdown = document.getElementById('myDropdown')
+//   dropdown.classList.toggle('show')
+// }
+// window.onclick = function (event) {
+//   // Get the dropdown element
+//   var dropdown = document.getElementById('myDropdown')
+//   //If the clicked element is not part of the dropdown, hide the dropdown
+//   if (
+//     !event.target.matches('a') ||
+//     (event.target.matches('a') != true &&
+//       dropdown.contains(event.target) != true)
+//   ) {
+//     dropdown.classList.remove('show')
+//   }
+// }
diff --git a/styles/styles.css b/styles/styles.css
@@ -0,0 +1,102 @@
+* {
+  box-sizing: border-box;
+}
+
+body{
+  margin:0px;
+  font-family: "segoe ui";
+  height: 900px;
+}
+
+.nav {
+  height:50px;
+  width: 100%;
+  background-color: #4d4d4d;
+  position: relative;
+  align-items: baseline;
+}
+
+.nav .nav-header{
+  display:inline;
+}
+.nav .nav-header .nav-title{
+  display:inline-block;
+  font-size: 22px;
+  color: #fff;
+  padding: 10px 10px;
+}
+
+ .nav > .nav-btn{
+  display:none;
+}
+
+
+.nav .nav-links{
+  position: absolute;
+  display: inline;
+  float: right;
+  font-size: 18px;
+}
+
+.nav .nav-links a{
+  display: inline-block;
+  padding: 12px 12px;
+  color: #efefef;
+  text-decoration: none;
+}
+
+.nav .nav-links a:hover{
+  background-color:  rgba(0, 0, 0, 0.3);
+}
+
+.nav #nav-check {
+  display: none;
+}
+
+@media (max-width:600px) {
+  .nav .nav-btn {
+    display: inline-block;
+    position: absolute;
+    right: 0px;
+    top: 0px;
+  }
+
+  .nav .nav-btn label{
+    display: inline-block;
+    width: 50px;
+    height: 50px;
+    padding: 13px;
+  }
+
+  .nav .nav-btn label:hover, .nav #nav-ckeck:checked  ~ .nav-btn label{
+    background-color: rgba(0, 0, 0, 0.3);
+  }
+
+  .nav .nav-btn label span{
+    display: block;
+    width: 25px;
+    height: 10px;
+    border-top: 2px solid #eee;
+  }
+
+  .nav .nav-links{
+    display: block;
+    width: 100%;
+    background-color: #333;
+    height: 100vh;
+    transition: all 0.3s ease;
+    overflow-y: hidden;
+  }
+
+  .nav .nav-links a {
+    width: 100%;
+  }
+  .nav #nav-check:not(:checked) ~ .nav-links {
+    height: 0px;
+    overflow-y: hidden;
+  }
+  .nav #nav-check:checked ~ .nav-links {
+    height: 100vh;
+    overflow-y: auto;
+  }
+}