first commit
This commit is contained in:
jsriwongsa
parent
f8a33f044e
commit
040f2cc686
2 changed files with 225 additions and 0 deletions
109
template2/style2.css
Normal file
109
template2/style2.css
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
*{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.header{
|
||||
height: 100vh;
|
||||
background-image: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)), url(images_2/wall4.jpg);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-attachment: fixed;
|
||||
padding-top: 30px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
}
|
||||
.header img{
|
||||
width: 250px;
|
||||
float: left;
|
||||
}
|
||||
.login-btn{
|
||||
width: 100px;
|
||||
padding: 8px 0;
|
||||
outline: none !important;
|
||||
border: 2px solid goldenrod;
|
||||
border-radius: 50px;
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
float: right;
|
||||
}
|
||||
.header h1{
|
||||
padding-top: 200px;
|
||||
padding-bottom: 0;
|
||||
font-size: 55px;
|
||||
}
|
||||
.header p{
|
||||
margin: 18px 0;
|
||||
}
|
||||
.input-group{
|
||||
width: 90%;
|
||||
max-width: 500px;
|
||||
border-radius: 30px;
|
||||
background: lightgray;
|
||||
margin: auto;
|
||||
padding: 2px;
|
||||
}
|
||||
.form-control{
|
||||
border: 0 !important;
|
||||
border-radius: 30px 0 0 30px !important;
|
||||
margin: 2px;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.input-group-text{
|
||||
width: 100px;
|
||||
background-image: linear-gradient(#bc8c1b,#807b1e);
|
||||
border: 0 !important;
|
||||
color: #fff !important;
|
||||
padding: 0 25px;
|
||||
border-radius: 30px !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
/*------- features -------*/
|
||||
.features{
|
||||
padding: 100px 0;
|
||||
}
|
||||
h1{
|
||||
text-align: center;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
.feature-img img{
|
||||
width: 100%;
|
||||
}
|
||||
.cost{
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: #bc8c1b;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
border-radius: 50%;
|
||||
padding: 10px;
|
||||
box-shadow: 0 0 10px 1px rgba(37, 73, 214,0.18);
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
bottom: -50px;
|
||||
}
|
||||
.feature-img{
|
||||
position: relative;
|
||||
}
|
||||
.rating{
|
||||
padding: 3px;
|
||||
float: right;
|
||||
background: white;
|
||||
bottom: -1px;
|
||||
right: 20;
|
||||
position: absolute;
|
||||
}
|
||||
.features .fa{
|
||||
font-size: 15px;
|
||||
color: #bc8c1b;
|
||||
}
|
||||
.feature-details{
|
||||
padding: 30px;
|
||||
text-align:justify;
|
||||
}
|
||||
.feature-details h4{
|
||||
font-weight: 600;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.feature-details .fa{
|
||||
margin-right: 4px;
|
||||
}
|
||||
116
template2/template2.html
Normal file
116
template2/template2.html
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title> Complete Travel Web- HTML-CSS-Bootstrap</title>
|
||||
<link rel="stylesheet" href="style2.css">
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<section class="header">
|
||||
<div class="container">
|
||||
<img src="images_2/logo1.png">
|
||||
<button type="button" class="login-btn">Login</button>
|
||||
</div>
|
||||
<h1>Travel Around The World</h1>
|
||||
<p>Subscribe Excellence Vacation & Travel YouTube Channel</p>
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" placeholder="Search your destination">
|
||||
<div class="input-group-a">
|
||||
<button type="submit" class="input-group-text btn"> Search </button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="features">
|
||||
<h1>Features Destinations</h1>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="feature-box">
|
||||
<div class="feature-img">
|
||||
<img src="images_2/im1.jpg">
|
||||
<div class="cost">
|
||||
<p>$399</p>
|
||||
</div>
|
||||
<div class="rating">
|
||||
<i class="fa fa-star"></i>
|
||||
<i class="fa fa-star"></i>
|
||||
<i class="fa fa-star"></i>
|
||||
<i class="fa fa-star"></i>
|
||||
<i class="fa fa-star-half-o"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-details">
|
||||
<h4>Tokyo</h4>
|
||||
<p>Enjoy a classic Mt Fuji tour from Tokyo and explore the nearby destinations locals and travelers love!</p>
|
||||
<div>
|
||||
<span><i class="fa fa-map-o"></i>Tokyo</span>
|
||||
<span><i class="fa fa-sun-o"></i>5 days</span>
|
||||
<span><i class="fa fa-moon-o"></i>4 nights</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="feature-box">
|
||||
<div class="feature-img">
|
||||
<img src="images_2/im2.jpg">
|
||||
<div class="cost">
|
||||
<p>$299</p>
|
||||
</div>
|
||||
<div class="rating">
|
||||
<i class="fa fa-star"></i>
|
||||
<i class="fa fa-star"></i>
|
||||
<i class="fa fa-star"></i>
|
||||
<i class="fa fa-star-half-o"></i>
|
||||
<i class="fa fa-star-o"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-details">
|
||||
<h4>Singapore</h4>
|
||||
<p>Future World! Where Art Meets Science is being transformed in one of its most dramatic redevelopments to date!</p>
|
||||
<div>
|
||||
<span><i class="fa fa-map-o"></i>Singapore</span>
|
||||
<span><i class="fa fa-sun-o"></i>3 days</span>
|
||||
<span><i class="fa fa-moon-o"></i>2 nights</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="feature-box">
|
||||
<div class="feature-img">
|
||||
<img src="images_2/im3.jpg">
|
||||
<div class="cost">
|
||||
<p>$199</p>
|
||||
</div>
|
||||
<div class="rating">
|
||||
<i class="fa fa-star"></i>
|
||||
<i class="fa fa-star"></i>
|
||||
<i class="fa fa-star"></i>
|
||||
<i class="fa fa-star"></i>
|
||||
<i class="fa fa-star"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-details">
|
||||
<h4>Thailand</h4>
|
||||
<p>Enjoy round trip hotel transfers, ride aboard a speedboat, inclusive lunch, and more!</p>
|
||||
<div>
|
||||
<span><i class="fa fa-map-o"></i>Thailand</span>
|
||||
<span><i class="fa fa-sun-o"></i>3 days</span>
|
||||
<span><i class="fa fa-moon-o"></i>2 nights</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
</html>
|
||||
Loading…
Add table
Reference in a new issue