Skip to content

Commit

Permalink
responsive finished
Browse files Browse the repository at this point in the history
  • Loading branch information
@abrarhasan529
abrarhasan529 committed Jan 17, 2024
1 parent f7ec4d3 commit 19e2104
Show file tree
Hide file tree
Showing 2 changed files with 108 additions and 64 deletions.
117 changes: 60 additions & 57 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,68 +24,70 @@ <h1 class="nav-heading">Summit <span class="nav-span1">Travel</span></h1>
</nav>
<div class="banner">
<div class="parent">
<div class="banner-content">
<h1>Explore Your Travel</h1>
<p>Where Dreams Take Flight, and Journeys Begin with Exceeding Expectations, Luxurious Retreats, and Unforgettable Experience.</p>
<div class="explore">
<div class="banner-content">
<h1>Explore Your Travel</h1>
<p>Where Dreams Take Flight, and Journeys Begin with Exceeding Expectations, Luxurious Retreats, and Unforgettable Experience.</p>
</div>
</div>
<div class="banner-input">
<input type="text" name="" id="" placeholder="Where go">
<select name="time" id="time">
<option value="When">When</option>
<option value="10 AM">10 AM</option>
<option value="11 AM">11 AM</option>
</select>
<select name="select-type" id="select-type">
<option value="Select Type">Select Type</option>
<option value="Long Trip">Long Trip</option>
<option value="Short Trip">Short Trip</option>
</select>
<button class="find-now">Find Now</button>
<div class="explore">
<div class="banner-input">
<input type="text" name="" id="" placeholder="Where go">
<select name="time" id="time">
<option value="When">When</option>
<option value="10 AM">10 AM</option>
<option value="11 AM">11 AM</option>
</select>
<select name="select-type" id="select-type">
<option value="Select Type">Select Type</option>
<option value="Long Trip">Long Trip</option>
<option value="Short Trip">Short Trip</option>
</select>
<button class="find-now">Find Now</button>
</div>
</div>
</div>
</div>
</header>
<main>
<section class="popular">
<div class="popular-text">
<h1 class="popular-title">Our Popular Tours</h1>
<div class="popular-description">
<p>Our plan tours are at the best places of the world where you will enjoy much. We ensure your full privacy and other comforts.</p>
<ul>
<li>Join us on a captivating adventure with Our Popular Tour, carefully crafted to take you to the world's most iconic destinations.</li>
<li>Our Popular Tour is designed for the ultimate convenience and enjoyment. Forget the hassles of planning and organizing – we've taken care of every detail.</li>
<li>Uncover exceptional value with Our Popular Tour, where every penny spent translates into an abundance of enriching experiences. We believe in providing our travelers with unparalleled value.</li>
</ul>
<p>This tour promises not only an incredible itinerary but also the creation of memories that will stay with you long after the journey concludes. Join us for an unforgettable expedition where each day unfolds as a new chapter in your travel story.</p>
<button class="btn-popular">Read More</button>
<div class="popular-text">
<h1 class="popular-title">Our Popular Tours</h1>
<div class="popular-description">
<p>Our plan tours are at the best places of the world where you will enjoy much. We ensure your full privacy and other comforts.</p>
<ul>
<li>Join us on a captivating adventure with Our Popular Tour, carefully crafted to take you to the world's most iconic destinations.</li>
<li>Our Popular Tour is designed for the ultimate convenience and enjoyment. Forget the hassles of planning and organizing – we've taken care of every detail.</li>
<li>Uncover exceptional value with Our Popular Tour, where every penny spent translates into an abundance of enriching experiences. We believe in providing our travelers with unparalleled value.</li>
</ul>
<p>This tour promises not only an incredible itinerary but also the creation of memories that will stay with you long after the journey concludes. Join us for an unforgettable expedition where each day unfolds as a new chapter in your travel story.</p>
<button class="btn-popular">Read More</button>
</div>
</div>
</div>
<div class="popular-img">
<img src="Images/Rectangle 4.png" alt="">
</div>
</section>
<section class="grid">
<h1>Choose Your Destination</h1>
<p>Choose Your Destination where Your Journey Begins with Endless Possibilities. Choose your destinations among these places. We ensure that these places are considered as the most beautiful places in the word.</p>
<div class="margin">
<h1>Choose Your Destination</h1>
<p>Choose Your Destination where Your Journey Begins with Endless Possibilities. Choose your destinations among these places. We ensure that these places are considered as the most beautiful places in the word.</p>
</div>
<div class="flex">
<div class="grid-img">
<img src="Images/Rectangle 5.png" alt="">
<img src="Images/Rectangle 8.png" alt="">
</div>
<div class="grid-img">
<img class="last-new" src="Images/Rectangle 6.png" alt="">
<img class="last-new" src="Images/Rectangle 7.png" alt="">
<img src="Images/Rectangle 9.png" alt="">
</div>
<div class="grid-img">
<img src="Images/Rectangle 11.png" alt="">
<img src="Images/Rectangle 10.png" alt="">
</div>
<div><img src="Images/Rectangle 5.png" alt=""></div>
<div><img src="Images/Rectangle 8.png" alt=""></div>
<div><img src="Images/Rectangle 6.png" alt=""></div>
<div><img src="Images/Rectangle 7.png" alt=""></div>
<div><img src="Images/Rectangle 9.png" alt=""></div>
<div><img src="Images/Rectangle 11.png" alt=""></div>
<div><img src="Images/Rectangle 10.png" alt=""></div>
</div>
</section>
<section class="grid">
<h1>Why Choose Us</h1>
<p>Choose us for a travel experience marked by exceptional service and a customer-centric approach. Your satisfaction is our priority, and our dedicated team is committed to going above and beyond to meet your expectations.</p>
<div class="margin">
<h1>Why Choose Us</h1>
<p>Choose us for a travel experience marked by exceptional service and a customer-centric approach. Your satisfaction is our priority, and our dedicated team is committed to going above and beyond to meet your expectations.</p>
</div>
</section>
<div class="new-border">
<div class="border1">
Expand Down Expand Up @@ -124,19 +126,20 @@ <h1 class="popular-title">A Simple Perfect Place To Get Lost</h1>
</section>
<div class="border-x">
<div class="last-border1">
<h1 class="border-head">Newsletter</h1>
<p class="border-text">Get your daily dose of travel news & tips. Sign up today!</p>
<div class="block">
<div class="first-div">
<input type="text" name="" id="" placeholder="Enter your name">
</div>
<div class="second-div">
<input type="email" name="" id="" placeholder="Enter your mail">
<div class="border-top">
<h1 class="border-head">Newsletter</h1>
<p class="border-text">Get your daily dose of travel news & tips. Sign up today!</p>
<div class="block">
<div class="first-div">
<input type="text" name="" id="" placeholder="Enter your name">
</div>
<div class="second-div">
<input type="email" name="" id="" placeholder="Enter your mail">
</div>
<div class="third-div">
<button type="button">Subscribe</button>
</div>
</div>
<div class="third-div">
<button type="button">Subscribe</button>
</div>

</div>
</div>
<div class="last-border2">
Expand Down
55 changes: 48 additions & 7 deletions styles/travel.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,9 @@ nav li a{
color: #ff5400;
font-weight: 700;
}
.explore{
margin-top: 80px;
}
.banner-input{
display: flex;
text-align: center;
Expand All @@ -61,6 +64,7 @@ nav li a{
align-items: center;
padding: 16px;
margin: 60px;
gap: 10px;
}
.banner-input input, select, .find-now{
padding-left: 10px;
Expand Down Expand Up @@ -111,12 +115,11 @@ main{
margin-top: 130px;
text-align: center;
}
.grid-img{
width: 100%;
}
.flex{
margin-top: 90px;
display: grid;
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.new-border{
margin: 70px auto;
Expand Down Expand Up @@ -215,27 +218,66 @@ main{
.nav-div, nav, .banner-input{
flex-direction: column;
padding: 10px;
gap: 10px;
width: 50%;
}
nav>ul{
flex-direction: column;
}
.popular{
flex-direction: column;

width: 230%;
margin-top: 80px;
}
.popular-text{
margin: 0 50px;
}
.popular-img{

}
.margin{
margin: 0 50px;
}
.popular-img{
margin-top: 50px;
}
.grid{
width: 230%;
}
.flex{
display: block;
}
.border1{
width: 230%;
width: 120%;
display: block;
margin-left: 200px;
width: 130%;
}
.new-border2{
margin-top: 20px;
}
.border2{
width: 120%;
margin: 30px 200px;
margin-top: 293px;
}
.border-top{
text-align: center;
}
.border-x{
display: block;
margin-left: 140px;
width: 100%;
}
.last-border1{
width: 150%;
margin-left: 10px;
margin-bottom: 20px;
}
.footer-container{
width: 143%;
margin-top: 700px;
margin-left: -6px;
}
.last1{
width: 230%;
Expand All @@ -244,5 +286,4 @@ main{
width: 230%;
margin-left: 25px;
}

}

0 comments on commit 19e2104

Please sign in to comment.