finished template2
This commit is contained in:
jsriwongsa
parent
040f2cc686
commit
64953fada7
2 changed files with 263 additions and 6 deletions
|
|
@ -27,7 +27,7 @@
|
|||
float: right;
|
||||
}
|
||||
.header h1{
|
||||
padding-top: 200px;
|
||||
padding-top: 350px;
|
||||
padding-bottom: 0;
|
||||
font-size: 55px;
|
||||
}
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
margin: 18px 0;
|
||||
}
|
||||
.input-group{
|
||||
width: 90%;
|
||||
width: 90% !important;
|
||||
max-width: 500px;
|
||||
border-radius: 30px;
|
||||
background: lightgray;
|
||||
|
|
@ -107,3 +107,129 @@ h1{
|
|||
.feature-details .fa{
|
||||
margin-right: 4px;
|
||||
}
|
||||
.feature-box{
|
||||
box-shadow: 0 0 10px 1px rgba(30, 31, 27, 0.18);
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
/*------- gallery -------*/
|
||||
.gallery{
|
||||
padding: 100px 0;
|
||||
background: rgb(226, 224, 208);}
|
||||
.gallery-box{
|
||||
position: relative;
|
||||
margin-bottom: 30px;}
|
||||
.gallery-box img{
|
||||
width: 100%;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
transition: 1s;}
|
||||
.gallery-box img:hover{
|
||||
transform: scale(1.2);}
|
||||
.gallery-box h4{
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
font-size: 26px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
color: white;
|
||||
transform: translate(-50%, -50%);
|
||||
text-shadow: -2px 2px 2px grey;}
|
||||
|
||||
/*------- slogan -------*/
|
||||
.slogan{
|
||||
height: 80vh;
|
||||
padding-top: 13%;
|
||||
background-image: url(images_2/pic4.jpg);
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
.slogan-1{
|
||||
padding: 80px 0;
|
||||
background: rgba(255, 250, 250, 0.665);
|
||||
text-align: center;
|
||||
color: black;
|
||||
}
|
||||
.book-btn{
|
||||
width: 150px;
|
||||
padding: 8px 0;
|
||||
outline: none !important;
|
||||
border: 2px solid goldenrod;
|
||||
border-radius: 50px;
|
||||
background: transparent;
|
||||
color: black;
|
||||
font-weight: 600;
|
||||
margin-top: 10%;
|
||||
}
|
||||
/*-------- Review --------*/
|
||||
.reviews{
|
||||
padding: 5%;
|
||||
}
|
||||
.c-review{
|
||||
text-align: center;
|
||||
box-shadow: 0 0 10px 0 grey;
|
||||
padding-bottom: 10%;
|
||||
}
|
||||
.c-review p{
|
||||
padding: 50px 10px 10px 10px;
|
||||
}
|
||||
.reviews img{
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: 100%;
|
||||
position: relative;
|
||||
margin: -30px 0 20px 40%;
|
||||
}
|
||||
.c-review p::before{
|
||||
content: '\201d';
|
||||
display: block;
|
||||
position: absolute;
|
||||
font-size: 80px;
|
||||
color: #bc8c1b;
|
||||
left: 44%;
|
||||
top: -20px;
|
||||
font-family: monospace;
|
||||
}
|
||||
/*------- footer ------*/
|
||||
.footer{
|
||||
padding: 100px 20px;
|
||||
background-image: linear-gradient(#042791, #0fd2d8);
|
||||
color: white;
|
||||
}
|
||||
.footer-logo{
|
||||
width: 120px;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.footer p{
|
||||
font-size: 16px;
|
||||
text-align: justify;
|
||||
padding-right: 30px;
|
||||
}
|
||||
.footer h4{
|
||||
text-align: left;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
@media (max-width:770px){
|
||||
.header img{
|
||||
width: 150px;
|
||||
float: left;}
|
||||
.login-btn{
|
||||
width: 80px;}
|
||||
.header h1{
|
||||
font-size: 28px;}
|
||||
.header p{
|
||||
font-size: 10px;
|
||||
}
|
||||
.features h1{
|
||||
font-size: 30px;
|
||||
}
|
||||
.gallery h1{
|
||||
font-size: 30px;
|
||||
}
|
||||
.reviews h1{
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
</div>
|
||||
</section>
|
||||
<section class="features">
|
||||
<h1>Features Destinations</h1>
|
||||
<h1>Popular Destinations</h1>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
|
|
@ -109,8 +109,139 @@
|
|||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-------------------------------------------------gallery-------------------------------------------------------->
|
||||
<section class = "gallery">
|
||||
<h1>Gallery</h1>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="gallery-box">
|
||||
<img src="images_2/pic1.jpg">
|
||||
<h4>France</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="gallery-box">
|
||||
<img src="images_2/pic2.jpg">
|
||||
<h4>Italy</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="gallery-box">
|
||||
<img src="images_2/pic3.jpg">
|
||||
<h4>Switzerland</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="gallery-box">
|
||||
<img src="images_2/pic4_czech.jpg">
|
||||
<h4>Czech Republic</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="gallery-box">
|
||||
<img src="images_2/pic5_spain.jpg">
|
||||
<h4>Spain</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="gallery-box">
|
||||
<img src="images_2/pic6_poland.jpg">
|
||||
<h4>Poland</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-------------------------------------------------slogan-------------------------------------------------------->
|
||||
|
||||
<section class="slogan">
|
||||
<div class="slogan-1">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
<h2>Special Discount, We Take Care Of You!</h2>
|
||||
<p>Book a room from now through December 31, 2023 to score 10% off select hotels.</p>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<button type="button" class="book-btn">Book Now</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-------------------------------------------------review-------------------------------------------------------->
|
||||
<section class="reviews">
|
||||
<h1>Customer Reviews</h1>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="c-review">
|
||||
<p>France has a rich cultural heritage. French literature began in the Middle Ages,
|
||||
and the country has a long history in fine arts, music and dance. </p>
|
||||
<h5>Lisa Balackpink</h5>
|
||||
<small>France</small>
|
||||
</div>
|
||||
<img src="images_2/r-lisa.jpg">
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="c-review">
|
||||
<p> Super-chic Seoul combines modernism with ancient history;
|
||||
coastal Busan serves up rugged beach spots; and Jeju Island wows with volcanic landscapes.</p>
|
||||
<h5>Tom Cruise</h5>
|
||||
<small>South Korea</small>
|
||||
</div>
|
||||
<img src="images_2/r-tom.jpg">
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="c-review">
|
||||
<p>As the meeting point of the Atlantic Ocean and Mediterranean Sea, this vast country offers some of
|
||||
Europe's most dramatic landscapes.</p>
|
||||
<h5>Michael Jordan</h5>
|
||||
<small>Spain</small>
|
||||
</div>
|
||||
<img src="images_2/r-michael.jpg">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-------------------------------------------------footer-------------------------------------------------------->
|
||||
<section class="footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<img src="images_2/logo1.png" class = "footer-logo">
|
||||
<p>We travel not to escape life, but for life not to escape us. Fill your life with experiences,
|
||||
not things. Have stories to tell, not stuff to show.</p>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<h4>Features</h4>
|
||||
<p>Discount & Markup</p>
|
||||
<p>Transportation </p>
|
||||
<p>Hotel Tips</p>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<h4>Contact</h4>
|
||||
<p><i class ="fa fa-mobile"></i>+1 (987)000-1122</p>
|
||||
<p><i class ="fa fa-envelope-o"></i>excellence@travel.com</p>
|
||||
<p><i class ="fa fa-map-maker"></i>1234 Tuna Rd. West beach</p>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<h4>Social Media</h4>
|
||||
<p><i class ="fa fa-facebook-square"></i>Excellence VocationNTravel</p>
|
||||
<p><i class ="fa fa-instagram"></i>excellencevocation</p>
|
||||
<p><i class ="fa fa-youtube-play"></i>ExcellenceVocation</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
|
||||
|
||||
</html>
|
||||
Loading…
Add table
Reference in a new issue