first commit

This commit is contained in:
jsriwongsa 2023-05-12 07:11:28 -05:00
parent f8a33f044e
commit 040f2cc686
2 changed files with 225 additions and 0 deletions

109
template2/style2.css Normal file
View 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
View 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>