Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ft31 041 day 4 #25

Merged
merged 4 commits into from
May 10, 2024
Merged

Ft31 041 day 4 #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3a59432
added cateogory bar
May 10, 2024
c6df25b
added cateogory bar
May 10, 2024
c2dcf1f
added cateogory bar
May 10, 2024
e05366c
added cateogory bar
May 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added Frontend/icon1.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
182 changes: 174 additions & 8 deletions Frontend/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
<div class="container">
<!-- Krishna-->
<div id="navbar">

<div class="menu-container">
<div class="menu-flex">
<img src="./Screenshot 2024-05-09 232128.png" class="logo"/>
Expand All @@ -34,8 +35,8 @@
<div class="menu-flex">
<div class="right-menu">
<div class="right-menu-item">
<button class="menu-button">Airbnb your Home</button>
<button class="menu-globe"><span class="material-icons globe">language</span></button>
<button id="btn" class="menu-button">Airbnb your Home</button>
<button id=" btn" class="menu-globe"><span class="material-icons globe">language</span></button>
<div class="button-icons"><span class="material-icons iconMenu">menu</span> <span class="material-icons iconUser">account_circle</span>
<i class="fa-solid fa-circle iconCircle"></i>
<div id="dropdownMenu" class="dropdown-content">
Expand All @@ -59,12 +60,20 @@
</div>
<div>
<label>Check in</label>
<input type="datetime-local"
id="Test_DatetimeLocal"
min="2015-01-01T00:00"
max="2025-12-31T23:59"
step="1">

<input type="text" placeholder="Add Dates">
</div>
<div>
<label>Check Out</label>
<input type="text" placeholder="Add Dates">
<input type="datetime-local"
id="Test_DatetimeLocal"
min="2015-01-01T00:00"
max="2025-12-31T23:59"
step="1">
</div>
<div>
<label>Who</label>
Expand All @@ -78,18 +87,175 @@
</form>
</div>
</div>
<div id="datePicker">

</div>

</div>
<!-- Krishna-->
<div id="top-carousel">
<div class=" d-flex alighn-items-center">
<div class="d-flex alighn-items-center">
<div class="d-flex flex-column ">
<img src="https://a0.muscache.com/im/pictures/mediaverse/category_icon/original/3e5243c8-4d15-4c6b-97e3-7ba2bb7bb880.png" alt="">
<div id="iconss">
<div class="d-flex">

<div class="d-flex flex-column align-items-center gray-400">
<img src="icon1.jpg" alt="" class="img-fluid h-1 w-1">
<p class="fs-6 fw-normal">icons</p>
</div>

<div class="d-flex flex-column align-items-center gray-400">
<img src="https://a0.muscache.com/pictures/3b1eb541-46d9-4bef-abc4-c37d77e3c21b.jpg" alt="" class="img-fluid h-1 w-1">
<p class="fs-6 fw-normal">Amazing views</p>
</div>
<div class="d-flex flex-column align-items-center gray-400">
<img src="https://a0.muscache.com/pictures/bcd1adc0-5cee-4d7a-85ec-f6730b0f8d0c.jpg" alt="" class="img-fluid h-1 w-1">
<p class="fs-6 fw-normal">Beachfront</p>
</div>
<div class="d-flex flex-column align-items-center gray-400">
<img src="https://a0.muscache.com/pictures/1b6a8b70-a3b6-48b5-88e1-2243d9172c06.jpg" alt="" class="img-fluid h-1 w-1">
<p class="fs-6 fw-normal">Castles</p>
</div>
<div class="d-flex flex-column align-items-center gray-400">
<img src="https://a0.muscache.com/pictures/8b44f770-7156-4c7b-b4d3-d92549c8652f.jpg" alt="" class="img-fluid h-1 w-1">
<p class="fs-6 fw-normal">Arctic</p>
</div>
<div class="d-flex flex-column align-items-center gray-400">
<img src="https://a0.muscache.com/pictures/3271df99-f071-4ecf-9128-eb2d2b1f50f0.jpg" alt="" class="img-fluid h-1 w-1">
<p class="fs-6 fw-normal">Tiney Homes</p>
</div>
<div class="d-flex flex-column align-items-center gray-400">
<img src="https://a0.muscache.com/pictures/3fb523a0-b622-4368-8142-b5e03df7549b.jpg" alt="" class="img-fluid h-1 w-1">
<p class="fs-6 fw-normal">Amazing pools</p>
</div>
<div class="d-flex flex-column align-items-center gray-400">
<img src="https://a0.muscache.com/pictures/4d4a4eba-c7e4-43eb-9ce2-95e1d200d10e.jpg" alt="" class="img-fluid h-1 w-1">
<p class="fs-6 fw-normal">Treehouses</p>
</div>

<div class="d-flex flex-column align-items-center gray-400">
<img src="https://a0.muscache.com/pictures/677a041d-7264-4c45-bb72-52bff21eb6e8.jpg" alt="" class="img-fluid h-1 w-1">
<p class="fs-6 fw-normal">Lakefront</p>
</div>
<div class="d-flex flex-column align-items-center gray-400">
<img src="https://a0.muscache.com/pictures/c8e2ed05-c666-47b6-99fc-4cb6edcde6b4.jpg" alt="" class="img-fluid h-1 w-1">
<p class="fs-6 fw-normal">Luxe</p>
</div>
<div class="d-flex flex-column align-items-center gray-400">
<img src="https://a0.muscache.com/pictures/aaa02c2d-9f0d-4c41-878a-68c12ec6c6bd.jpg" alt="" class="img-fluid h-1 w-1">
<p class="fs-6 fw-normal">Farms</p>
</div>
<div class="d-flex flex-column align-items-center gray-400">
<img src="https://a0.muscache.com/pictures/732edad8-3ae0-49a8-a451-29a8010dcc0c.jpg" alt="" class="img-fluid h-1 w-1">
<p class="fs-6 fw-normal">Cabins</p>
</div>

<div class="d-flex flex-column align-items-center gray-400">
<img src="https://a0.muscache.com/pictures/78ba8486-6ba6-4a43-a56d-f556189193da.jpg" alt="" class="img-fluid h-1 w-1">
<p class="fs-6 fw-normal">Mansions</p>
</div>
<div class="d-flex flex-column align-items-center gray-400">
<img src="https://a0.muscache.com/pictures/bcd1adc0-5cee-4d7a-85ec-f6730b0f8d0c.jpg" alt="" class="img-fluid h-1 w-1">
<p class="fs-6 fw-normal">Beachfront</p>
</div>
<div class="d-flex flex-column align-items-center gray-400">
<img src="https://a0.muscache.com/pictures/1b6a8b70-a3b6-48b5-88e1-2243d9172c06.jpg" alt="" class="img-fluid h-1 w-1">
<p class="fs-6 fw-normal">Castles</p>
</div>
<div class="d-flex flex-column align-items-center gray-400">
<img src="https://a0.muscache.com/pictures/8b44f770-7156-4c7b-b4d3-d92549c8652f.jpg" alt="" class="img-fluid h-1 w-1">
<p class="fs-6 fw-normal">Arctic</p>
</div>
<div class="d-flex flex-column align-items-center gray-400">
<img src="https://a0.muscache.com/pictures/3271df99-f071-4ecf-9128-eb2d2b1f50f0.jpg" alt="" class="img-fluid h-1 w-1">
<p class="fs-6 fw-normal">Tiney Homes</p>
</div>
<div class="d-flex flex-column align-items-center gray-400">
<img src="https://a0.muscache.com/pictures/3fb523a0-b622-4368-8142-b5e03df7549b.jpg" alt="" class="img-fluid h-1 w-1">
<p class="fs-6 fw-normal">Amazing pools</p>
</div>
<div class="d-flex flex-column align-items-center gray-400">
<img src="https://a0.muscache.com/pictures/4d4a4eba-c7e4-43eb-9ce2-95e1d200d10e.jpg" alt="" class="img-fluid h-1 w-1">
<p class="fs-6 fw-normal">Treehouses</p>
</div>

<div class="d-flex flex-column align-items-center gray-400">
<img src="https://a0.muscache.com/pictures/677a041d-7264-4c45-bb72-52bff21eb6e8.jpg" alt="" class="img-fluid h-1 w-1">
<p class="fs-6 fw-normal">Lakefront</p>
</div>
<div class="d-flex flex-column align-items-center gray-400">
<img src="https://a0.muscache.com/pictures/c8e2ed05-c666-47b6-99fc-4cb6edcde6b4.jpg" alt="" class="img-fluid h-1 w-1">
<p class="fs-6 fw-normal">Luxe</p>
</div>
<div class="d-flex flex-column align-items-center gray-400">
<img src="https://a0.muscache.com/pictures/aaa02c2d-9f0d-4c41-878a-68c12ec6c6bd.jpg" alt="" class="img-fluid h-1 w-1">
<p class="fs-6 fw-normal">Farms</p>
</div>
<div class="d-flex flex-column align-items-center gray-400">
<img src="https://a0.muscache.com/pictures/732edad8-3ae0-49a8-a451-29a8010dcc0c.jpg" alt="" class="img-fluid h-1 w-1">
<p class="fs-6 fw-normal">Cabins</p>
</div>

<div class="d-flex flex-column align-items-center gray-400">
<img src="https://a0.muscache.com/pictures/78ba8486-6ba6-4a43-a56d-f556189193da.jpg" alt="" class="img-fluid h-1 w-1">
<p class="fs-6 fw-normal">Mansions</p>
</div>
<div class="d-flex flex-column align-items-center gray-400">
<img src="https://a0.muscache.com/pictures/bcd1adc0-5cee-4d7a-85ec-f6730b0f8d0c.jpg" alt="" class="img-fluid h-1 w-1">
<p class="fs-6 fw-normal">Beachfront</p>
</div>
<div class="d-flex flex-column align-items-center gray-400">
<img src="https://a0.muscache.com/pictures/1b6a8b70-a3b6-48b5-88e1-2243d9172c06.jpg" alt="" class="img-fluid h-1 w-1">
<p class="fs-6 fw-normal">Castles</p>
</div>
<div class="d-flex flex-column align-items-center gray-400">
<img src="https://a0.muscache.com/pictures/8b44f770-7156-4c7b-b4d3-d92549c8652f.jpg" alt="" class="img-fluid h-1 w-1">
<p class="fs-6 fw-normal">Arctic</p>
</div>
<div class="d-flex flex-column align-items-center gray-400">
<img src="https://a0.muscache.com/pictures/3271df99-f071-4ecf-9128-eb2d2b1f50f0.jpg" alt="" class="img-fluid h-1 w-1">
<p class="fs-6 fw-normal">Tiney Homes</p>
</div>
<div class="d-flex flex-column align-items-center gray-400">
<img src="https://a0.muscache.com/pictures/3fb523a0-b622-4368-8142-b5e03df7549b.jpg" alt="" class="img-fluid h-1 w-1">
<p class="fs-6 fw-normal">Amazing pools</p>
</div>
<div class="d-flex flex-column align-items-center gray-400">
<img src="https://a0.muscache.com/pictures/4d4a4eba-c7e4-43eb-9ce2-95e1d200d10e.jpg" alt="" class="img-fluid h-1 w-1">
<p class="fs-6 fw-normal">Treehouses</p>
</div>

<div class="d-flex flex-column align-items-center gray-400">
<img src="https://a0.muscache.com/pictures/677a041d-7264-4c45-bb72-52bff21eb6e8.jpg" alt="" class="img-fluid h-1 w-1">
<p class="fs-6 fw-normal">Lakefront</p>
</div>
<div class="d-flex flex-column align-items-center gray-400">
<img src="https://a0.muscache.com/pictures/c8e2ed05-c666-47b6-99fc-4cb6edcde6b4.jpg" alt="" class="img-fluid h-1 w-1">
<p class="fs-6 fw-normal">Luxe</p>
</div>
<div class="d-flex flex-column align-items-center gray-400">
<img src="https://a0.muscache.com/pictures/aaa02c2d-9f0d-4c41-878a-68c12ec6c6bd.jpg" alt="" class="img-fluid h-1 w-1">
<p class="fs-6 fw-normal">Farms</p>
</div>
<div class="d-flex flex-column align-items-center gray-400">
<img src="https://a0.muscache.com/pictures/732edad8-3ae0-49a8-a451-29a8010dcc0c.jpg" alt="" class="img-fluid h-1 w-1">
<p class="fs-6 fw-normal">Cabins</p>
</div>

<div class="d-flex flex-column align-items-center gray-400">
<img src="https://a0.muscache.com/pictures/78ba8486-6ba6-4a43-a56d-f556189193da.jpg" alt="" class="img-fluid h-1 w-1">
<p class="fs-6 fw-normal">Mansions</p>
</div>


</div>

</div>

</div>

</div>

</div>

<!--Himanshu-->
<div id="cards"></div>
<!--Rameshwar-->
Expand Down
1 change: 1 addition & 0 deletions Frontend/scripts/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ const dropdownMenu = document.getElementById('dropdownMenu');
menuIcon.addEventListener('click', function() {
dropdownMenu.classList.toggle('show');
});

// HIMANSHU------>>
let cont=document.getElementById("cards")
function createCards(det){
Expand Down
96 changes: 96 additions & 0 deletions Frontend/styles/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -224,6 +224,101 @@ body {
border-radius: 50px;
background-color: rgb(230, 227, 227);
}
#top-carousel .d-flex{
margin-left: 20px;
gap: 10px;
}
#top-carousel{
display: flex;
}
#top-carousel img{
width:2rem ;
height: 2rem;
}
#iconss {
margin:5px;
display: flex;
overflow-x: auto;
}
#iconss::-webkit-scrollbar{
width: 0;
}
#top-carousel p{
font-size: 0.873rem;
color: gray;
font-weight: 400;
}
#top-carousel p:hover{
font-size: 0.873rem;
color: rgb(16, 15, 15);
font-weight: 400;
}
#datePicker {
position: absolute;
display: none;
background-color: white;
border: 1px solid #ccc;
padding: 10px;
}

#datePicker input[type="datetime-local"] {
width: 200px;
}
/* Media queries for different screen sizes */

/* Mobile devices (320px to 480px) */
@media (max-width: 480px) {
#navbar{
font-size: smaller;
background-color: chocolate;
}
}

/* Tablets (481px to 768px) */
@media (min-width: 481px) and (max-width: 768px) {
#navbar .menu-container .menus .item-menu{
font-size: 12px;
}
#navbar .menu-container .right-menu{
font-size: 12px;
}

}

/* Small screens, laptops (769px to 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
.item-menu{
font-size: 10px;
gap: 5px;
}
.menu-flex .right-menu-item #btn{
font-size: 10px;
}
.menu-flex img{
width: 3cm;
}
}

/* Desktops, large screens (1025px and above) */
@media (min-width: 1025px) {
#navbar .menu-container{
gap: 2px;

}
#navbar .menu-container .item-menu{

}

}

/* Extra large screens, TV (1201px and above) */
@media (min-width: 1201px) {
.item-menu,
.fs-6 {
font-size: 1.6rem; /* Adjust the font size as needed for extra large screens */
}
}

#dropdown{
}
/* HIMANSHU */
Expand Down Expand Up @@ -286,6 +381,7 @@ height: auto;
display: flex;
flex-wrap: wrap;
gap: 25px;
justify-content: center;

}
.c1 img{
Expand Down