Skip to content

Commit b89b919

Browse files
HimanshuRajpoot2301HimanshuRajpoot2301
committed
cards completed
2 parents 866aea8 + 9aad84f commit b89b919

8 files changed

+190
-15
lines changed

‎Frontend/Screenshot 2024-05-09 232128.png

3.29 KB
Loading

‎Frontend/index.html

+71-2
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
<div id="navbar">
2424
<div class="menu-container">
2525
<div class="menu-flex">
26-
<img src="" class="logo"/>
26+
<img src="./Screenshot 2024-05-09 232128.png" class="logo"/>
2727
</div>
2828
<div class="menu-flex">
2929
<div class="menus">
@@ -94,7 +94,76 @@
9494
<!--Himanshu-->
9595
<div id="cards"></div>
9696
<!--Rameshwar-->
97-
<div id="gateways"></div>
97+
<div id="gateways">
98+
<div>
99+
<div class="dropdown" id="popularDropdown">
100+
<span>Popular</span>
101+
<div class="dropdown-content">
102+
<a href="#">Canmore - Flat rentals</a>
103+
<a href="#">Mijas - House rentals</a>
104+
<a href="#">Tucson - Holiday rentals</a>
105+
</div>
106+
</div>
107+
<div class="dropdown" id="artsCultureDropdown">
108+
<span>Arts & culture</span>
109+
<div class="dropdown-content">
110+
<a href="#">Flat rentals</a>
111+
<a href="#">Cottage rentals</a>
112+
<a href="#">Holiday rentals</a>
113+
</div>
114+
</div>
115+
<div class="dropdown" id="outdoorsDropdown">
116+
<span>Outdoors</span>
117+
<div class="dropdown-content">
118+
<a href="#">Benalmádena - Flat rentals</a>
119+
<a href="#">Prescott - Cottage rentals</a>
120+
<a href="#">Jasper - Holiday rentals</a>
121+
</div>
122+
</div>
123+
<div class="dropdown" id="mountainsDropdown">
124+
<span>Mountains</span>
125+
<div class="dropdown-content">
126+
<a href="#">Flat rentals</a>
127+
<a href="#">Cottage rentals</a>
128+
<a href="#">Holiday rentals</a>
129+
</div>
130+
</div>
131+
<div class="dropdown" id="beachDropdown">
132+
<span>Beach</span>
133+
<div class="dropdown-content">
134+
<a href="#">Marbella - Flat rentals</a>
135+
<a href="#">Scottsdale - Holiday rentals</a>
136+
<a href="#">Mountain View - Holiday rentals</a>
137+
</div>
138+
</div>
139+
<div class="dropdown" id="uniqueStaysDropdown">
140+
<span>Unique stays</span>
141+
<div class="dropdown-content">
142+
<a href="#">Flat rentals</a>
143+
<a href="#">Cottage rentals</a>
144+
<a href="#">Holiday rentals</a>
145+
</div>
146+
</div>
147+
<div class="dropdown" id="categoriesDropdown">
148+
<span>Categories</span>
149+
<div class="dropdown-content">
150+
<a href="#">Flat rentals</a>
151+
<a href="#">Cottage rentals</a>
152+
<a href="#">Holiday rentals</a>
153+
</div>
154+
</div>
155+
<div class="dropdown" id="thingsToDoDropdown">
156+
<span>Things to do</span>
157+
<div class="dropdown-content">
158+
<a href="#">Flat rentals</a>
159+
<a href="#">Cottage rentals</a>
160+
<a href="#">Holiday rentals</a>
161+
</div>
162+
</div>
163+
</div>
164+
165+
<hr> <!-- Horizontal line below title's row -->
166+
</div>
98167
<!--Himanshu-->
99168
<div id="footer">
100169
<div>

‎Frontend/product.html

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Document</title>
7+
<link rel="stylesheet" href="styles/product.css" />
8+
</head>
9+
<body>
10+
<div class="container">
11+
<nav></nav>
12+
<div id="main-section">
13+
<div id="left-main">
14+
<div id="flat-title"></div>
15+
<div id="flat-images"></div>
16+
<div id="flat-details"></div>
17+
<div id="host"></div>
18+
<div id="features"></div>
19+
<div id="discription"></div>
20+
<div id="where-sleep"></div>
21+
</div>
22+
<div id="right-main"></div>
23+
</div>
24+
<div></div>
25+
<footer></footer>
26+
</div>
27+
28+
</body>
29+
<script src="scripts/product.js"></script>
30+
</html>

‎Frontend/scripts/index.js

+27-12
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11

2+
const menuIcon = document.querySelector('.button-icons');
3+
const dropdownMenu = document.getElementById('dropdownMenu');
24

3-
4-
5-
6-
// const menuIcon = document.querySelector('.button-icons');
7-
// const dropdownMenu = document.getElementById('dropdownMenu');
8-
9-
// menuIcon.addEventListener('click', function() {
10-
// dropdownMenu.classList.toggle('show');
11-
// });
5+
menuIcon.addEventListener('click', function() {
6+
dropdownMenu.classList.toggle('show');
7+
});
128
// HIMANSHU------>>
139
let cont=document.getElementById("cards")
1410
function createCards(det){
1511
let card=document.createElement("div");
12+
card.addEventListener("click",()=>{
13+
localStorage.setItem("currCard", det.id);
14+
window.location.assign("product.html")
15+
})
1616
let carousel =document.createElement("div");
1717
let details=document.createElement("div")
1818
card.classList.add("c1");
@@ -85,8 +85,23 @@ async function fetchData(url){
8585
}
8686
}
8787
fetchData("https://tapti-recursion-010-v93f.onrender.com/data")
88+
// Rameshwar /
8889

90+
document.addEventListener("DOMContentLoaded", function() {
91+
var popularDropdown = document.getElementById("popularDropdown");
92+
popularDropdown.classList.add("active");
93+
var popularContent = popularDropdown.querySelector(".dropdown-content");
94+
popularContent.style.display = "block";
8995

90-
91-
92-
//
96+
var dropdowns = document.querySelectorAll(".dropdown");
97+
dropdowns.forEach(function(dropdown) {
98+
dropdown.addEventListener("click", function() {
99+
var currentContent = document.querySelector(".dropdown.active .dropdown-content");
100+
if (currentContent && currentContent.parentElement !== this) {
101+
currentContent.parentElement.classList.remove("active");
102+
currentContent.style.display = "none";
103+
}
104+
this.classList.toggle("active");
105+
});
106+
});
107+
});

‎Frontend/scripts/product.js

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
localStorage.setItem("currCard", "8450130");
2+
3+
let productID = localStorage.getItem("currCard");
4+

‎Frontend/signup.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ <h2 class="text-2xl font-bold mb-6 text-center">Sign up</h2>
9292
<div id="loading"></div>
9393
<a
9494
class="inline-block align-baseline font-bold text-sm text-blue-500 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-500"
95-
href="#"
95+
href="login.html"
9696
>
9797
Already have an account? Login
9898
</a>

‎Frontend/styles/index.css

+57
Original file line numberDiff line numberDiff line change
@@ -321,3 +321,60 @@ gap: 25px;
321321
}
322322
}
323323
/* For standard mobile screens */
324+
325+
/* Rameshwar Section */
326+
#gateways{
327+
height: auto;
328+
height: 400px;
329+
background-color: rgb(246, 247, 246);
330+
}
331+
332+
.dropdown {
333+
position: relative;
334+
display: inline-block;
335+
margin-right: 20px;
336+
cursor: pointer;
337+
}
338+
339+
.dropdown-content {
340+
341+
display: none;
342+
position: absolute;
343+
background-color: #f9f9f9;
344+
min-width: 160px;
345+
/* z-index: 1; */
346+
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
347+
padding: 5px;
348+
}
349+
350+
.dropdown.active .dropdown-content {
351+
display: block;
352+
}
353+
354+
.dropdown-content a {
355+
display: block;
356+
padding: 5px 10px;
357+
text-decoration: none;
358+
color: #333;
359+
}
360+
361+
.dropdown-content a:hover {
362+
background-color: #ddd;
363+
}
364+
365+
/* Thick black line below each title */
366+
.dropdown.active span::after {
367+
content: "";
368+
display: block;
369+
width: 100%;
370+
height: 3px;
371+
background-color: black;
372+
margin-top: 3px;
373+
}
374+
375+
/* Horizontal line below title's row */
376+
hr {
377+
border: none;
378+
border-top: 1px solid #000;
379+
margin: 10px 0;
380+
}

‎Frontend/styles/product.css

Whitespace-only changes.

0 commit comments

Comments
 (0)