Hack-It-Out-Technex-2024 · VARDAAN08 · Mar 16, 2024 · Mar 16, 2024 · Mar 16, 2024
diff --git a/index.html b/index.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Document</title>
+</head>
+
+<body>
+
+
+    <div id="ff">
+        <div id="box">
+            <div id="class">
+
+                <input type="text" placeholder="                            search your problem">
+                <button> <img width="10" src="photos/search.png" alt=""></button>
+
+
+            </div>
+        </div>
+    <h1>Rant Away
+
+    </h1>
+    <h4>Let Your Complaints Roar - Join the Revolution Against Waste Mismanagement!
+
+
+    </h4>
+    <a  href="#box3">
+    <button>Complaint</button>
+    </a>
+    </div>
+
+    <div id="box3">
+        <h3>Fill Your Information</h3>
+        <div id="box4">
+            <input type="text" placeholder="      Enter Your Name">
+            <input type="text" placeholder="      Enter Your Email">
+            <input type="text" placeholder="    Enter Your Complaint">
+            <a  href="#box6">
+            <button id="mybutton">
+                <h6>Register</h6>
+            </button>
+            </a>
+
+
+
+        </div>
+
+
+
+    </div>
+    <div id="box5">
+        <div id="box6">
+            <input type="text" placeholder="      Enter OTP sent on your mobile phone" maxlength="6">
+            <input type="text" placeholder="      Enter OTP sent on your email " maxlength="6">
+            <a  href="#box4">
+            <button id="mybutton">
+                Confirm
+            </button>
+
+
+
+
+
+
+
+    </div>
+<div id="map">
+    <iframe width="100%" height="300" src="https://maps.google.com/maps?width=100%&amp;height=300&amp;hl=en&amp;coord=52.70967533219885, -8.020019531250002&amp;q=1%20Grafton%20Street%2C%20Dublin%2C%20Ireland&amp;ie=UTF8&amp;t=&amp;z=14&amp;iwloc=B&amp;output=embed" frameborder="10" scrolling="yes" marginheight="0" margin-top="30" marginwidth="10" ></iframe><br />
+</div>
+
+
+    <script src="script.js"></script>
+
+</body>
+
+</html>
diff --git a/photos/137-1370321_issue-waste.jpg b/photos/137-1370321_issue-waste.jpg
diff --git a/photos/clear.png b/photos/clear.png
diff --git a/photos/clouds.png b/photos/clouds.png
diff --git a/photos/drizzle.png b/photos/drizzle.png
diff --git a/photos/hackathon final without animation[1] - Read-Only.pptx b/photos/hackathon final without animation[1] - Read-Only.pptx
diff --git a/photos/humidity.png b/photos/humidity.png
diff --git a/photos/mist.png b/photos/mist.png
diff --git a/photos/rain.png b/photos/rain.png
diff --git a/photos/search.png b/photos/search.png
diff --git a/photos/snow.png b/photos/snow.png
diff --git a/photos/waste.jpg b/photos/waste.jpg
diff --git a/photos/wind.png b/photos/wind.png
diff --git a/script.js b/script.js
@@ -0,0 +1,10 @@
+var a=document.querySelector('#mybutton').textContent;
+var b=document.querySelector('#mybutton');
+var c=document.querySelector('h1');
+b.addEventListner("click",function(){
+    c.innerHTML="yoooo";
+
+
+
+
+})
diff --git a/style.css b/style.css
@@ -0,0 +1,238 @@
+ *{
+    font-size: 8px;
+    margin:0;
+    padding: 0;
+    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+    box-sizing: border-box;
+
+
+}
+body{
+
+    overflow-x: visible;
+    height: 100%;
+    width: 100%;
+
+
+
+
+}
+#ff{
+    height: 100dvh;
+    background-position: 50% 50%;
+    background-image: url("https://gemini.no/wp-content/uploads/2020/03/istock-1126668893-1536x1024.jpg");
+ background-size: cover;
+ background-repeat: no-repeat;
+ margin-top: 0;
+}
+h3{
+    margin-bottom: 2px;
+    margin-left: 115px;
+
+}
+h1{
+    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+    color:white;
+    text-align: center; 
+    margin-top: 31px;
+    font-size: 31px;
+
+}
+h4{
+    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+    text-align: center;
+    color: white;
+    font-size: 5px;
+
+}
+
+
+#box{
+    height: 20px;
+    width:70vw;
+    border-radius: 10px;
+    background-color:white;
+    background: linear-gradient();
+    margin: auto;
+    margin-top: 10px;
+    opacity: 0.9;
+
+
+
+
+}
+#class{
+    height: 20px;
+    width: 70vw;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin :auto; 
+
+
+
+}
+#class button{
+    height: 17px;
+    width: 17px;
+    margin:auto ;
+    border-radius: 50%;
+    border: 0px solid black;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    align-self: flex-end;
+    cursor: pointer;
+
+
+}
+#asd{
+    height: 17px;
+    width: 40px;
+    margin:auto ;
+    border-radius: 10px;
+    border: 0px solid black;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    align-self: flex-end;
+    cursor: pointer;
+    margin-top: 10px;
+
+}
+#class input{
+   background-color:whitesmoke;
+    height: 15px;
+    width: 80%;
+    margin : auto ;
+    border-radius: 30px;
+    border: 0;
+    opacity: 1;
+    outline: 0;
+
+    /* padding: 10px 50px; */
+}
+#box2{
+    height: 50vw;
+    width: 100%;
+    background-color:white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    margin-top: 10px;
+
+}
+button{
+    height: 15px;
+    width:40px ;
+    font-size: 6px;
+    margin-top: 10px;
+    margin-left: 132px;
+    border:0.4px solid;
+    border-radius: 15px;
+    color: white;
+    background-color: transparent;
+    cursor: pointer;
+
+}
+#box3{
+    height: 150px;
+    width: 100%;
+    background-color: bisque;
+    margin-top: 0;
+}
+#box4{
+    height:85px ;
+    width: 100px;
+    background-color: white;
+    display:grid;
+    align-items: center;
+    justify-content: center;
+    margin:auto;
+    position:relative;
+
+
+}
+#box4 input{
+    background-color:beige;
+    border: 0;
+    border-radius: 10px;
+    font-size: 5px;
+    display: flex;
+    align-items: center;
+    justify-content:flex-end;
+    height: 10px;
+    width: 70px;
+    margin: auto;
+
+}
+#box4 button{
+    margin:auto;
+    color: black;
+
+
+}
+#mybutton{
+    margin:auto
+}
+#box5{
+    height: 100px;
+    width: 100%;
+    background-color: bisque;
+
+}
+#box6{
+    height:85px ;
+    width: 100px;
+    background-color: white;
+    display:grid;
+    align-items: center;
+    justify-content: center;
+    margin:auto;
+    position: relative;
+
+}
+#box6 button{
+    margin:auto;
+    color: black;
+
+}
+#abx{
+    height: 17px;
+    width: 17px;
+    margin:auto ;
+    border-radius: 50%;
+    border: 0px solid black;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    align-self: flex-end;
+    cursor: pointer;
+    color: aliceblue;
+margin-top: 10px;
+
+}
+#box6 input{
+    background-color:beige;
+    border: 0;
+    border-radius: 10px;
+    font-size: 5px;
+    display: flex;
+    align-items: center;
+    justify-content:flex-end;
+    height: 10px;
+    width: 70px;
+    margin: auto;
+    outline:0;
+
+}
+#map
+{
+    height: 100px;
+
+    margin-top: 10px;
+
+
+}
+