reorganized the repo
This commit is contained in:
JSriwongsa
parent
7faf415c7d
commit
3f98cede59
9 changed files with 0 additions and 1522 deletions
|
|
@ -1,20 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="shortcut icon" href="images/deco.png">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<title>Unsuccess Payment</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="success-container">
|
||||
<h1>Payment Unsuccessful</h1>
|
||||
<p>Oops! Something went wrong, an error occurred while processing the order.</p>
|
||||
<img src="images/icon_c.png" alt="">
|
||||
<a href="index.html" class="success-btn">Back to Homepage</a>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,123 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>FITs</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="shortcut icon" href="images/deco.png">
|
||||
<link rel="stylesheet" href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" >
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="nav container">
|
||||
<a href="#" class="logo">FITs</a>
|
||||
<i class='bx bxs-shopping-bags' id="cart-check-out" data-amount="0"></i>
|
||||
|
||||
<div class="cart">
|
||||
<h2 class="cart-title">Your cart</h2>
|
||||
<div class="cart-content">
|
||||
<div class="cart-box">
|
||||
<img src="images/c1.jpg" alt="" class="cart-img">
|
||||
<div class="detail-box">
|
||||
<div class="cart-c-title">Workout Sets</div>
|
||||
<div class="cart-price">$39.95</div>
|
||||
<input type="number" name="" id="" value="1" class="cart-amount">
|
||||
</div>
|
||||
<i class='bx bxs-trash cart-remove' ></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="total">
|
||||
<div class="total-title">Total</div>
|
||||
<div class="total-price">$0</div>
|
||||
</div>
|
||||
|
||||
<button type="button" class="btn-buy">Buy Now</button>
|
||||
<i class='bx bxs-x-circle' id="close-btn" ></i>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="shop container">
|
||||
<h2 class="section-title">Athletic Wear & Workout Items</h2>
|
||||
<div class="shop-content">
|
||||
|
||||
<div class="product-box">
|
||||
<img src="images/c1.jpg" alt="" class="product-img">
|
||||
<h2 class="product-title">Gym Athletic Shorts </h2>
|
||||
<span class="price">$39.95</span>
|
||||
<i class='bx bxs-shopping-bag-alt add-cart'></i>
|
||||
</div>
|
||||
<div class="product-box">
|
||||
<img src="images/c2.jpg" alt="" class="product-img">
|
||||
<h2 class="product-title">Criss-Cross Sports Bras</h2>
|
||||
<span class="price">$39.99</span>
|
||||
<i class='bx bxs-shopping-bag-alt add-cart'></i>
|
||||
</div>
|
||||
<div class="product-box">
|
||||
<img src="images/c3.jpg" alt="" class="product-img">
|
||||
<h2 class="product-title">Flowy Athletic Shorts</h2>
|
||||
<span class="price">$26.99</span>
|
||||
<i class='bx bxs-shopping-bag-alt add-cart'></i>
|
||||
</div>
|
||||
<div class="product-box">
|
||||
<img src="images/c4.jpg" alt="" class="product-img">
|
||||
<h2 class="product-title">Sports Bras Workout</h2>
|
||||
<span class="price">$24.99</span>
|
||||
<i class='bx bxs-shopping-bag-alt add-cart'></i>
|
||||
</div>
|
||||
<div class="product-box">
|
||||
<img src="images/c5.jpg" alt="" class="product-img">
|
||||
<h2 class="product-title">Long Sleeve T-Shirt </h2>
|
||||
<span class="price">$49.99</span>
|
||||
<i class='bx bxs-shopping-bag-alt add-cart'></i>
|
||||
</div>
|
||||
<div class="product-box">
|
||||
<img src="images/c6.jpg" alt="" class="product-img">
|
||||
<h2 class="product-title">Women's 2 Piece Crop Top</h2>
|
||||
<span class="price">$45.00</span>
|
||||
<i class='bx bxs-shopping-bag-alt add-cart'></i>
|
||||
</div>
|
||||
<div class="product-box">
|
||||
<img src="images/c7.jpg" alt="" class="product-img">
|
||||
<h2 class="product-title">Women Solid Basic Fleece</h2>
|
||||
<span class="price">$35.59</span>
|
||||
<i class='bx bxs-shopping-bag-alt add-cart'></i>
|
||||
</div>
|
||||
<div class="product-box">
|
||||
<img src="images/c8.jpg" alt="" class="product-img">
|
||||
<h2 class="product-title">Full Zip Lightweight Workout Jacket</h2>
|
||||
<span class="price">$28.99</span>
|
||||
<i class='bx bxs-shopping-bag-alt add-cart'></i>
|
||||
</div>
|
||||
<div class="product-box">
|
||||
<img src="images/c9.jpg" alt="" class="product-img">
|
||||
<h2 class="product-title">Waterproof Drawstring Backpack</h2>
|
||||
<span class="price">$19.99</span>
|
||||
<i class='bx bxs-shopping-bag-alt add-cart'></i>
|
||||
</div>
|
||||
<div class="product-box">
|
||||
<img src="images/c10.jpg" alt="" class="product-img">
|
||||
<h2 class="product-title">Gym Bag with Wet Pocket & Shoes Compartment</h2>
|
||||
<span class="price">$49.00</span>
|
||||
<i class='bx bxs-shopping-bag-alt add-cart'></i>
|
||||
</div>
|
||||
<div class="product-box">
|
||||
<img src="images/c11.jpg" alt="" class="product-img">
|
||||
<h2 class="product-title">Resistance Bands (3)</h2>
|
||||
<span class="price">$29.59</span>
|
||||
<i class='bx bxs-shopping-bag-alt add-cart'></i>
|
||||
</div>
|
||||
<div class="product-box">
|
||||
<img src="images/c12.jpg" alt="" class="product-img">
|
||||
<h2 class="product-title">5-pair Low Cut Socks</h2>
|
||||
<span class="price">$19.75</span>
|
||||
<i class='bx bxs-shopping-bag-alt add-cart'></i>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
let cartcheck = document.querySelector('#cart-check-out');
|
||||
let cart = document.querySelector('.cart');
|
||||
let closecart = document.querySelector('#close-btn');
|
||||
|
||||
cartcheck.onclick = () =>{
|
||||
cart.classList.add('active')
|
||||
};
|
||||
closecart.onclick = () =>{
|
||||
cart.classList.remove('active')
|
||||
};
|
||||
|
|
@ -1,256 +0,0 @@
|
|||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: monospace;
|
||||
scroll-padding-top: 2rem;
|
||||
scroll-behavior: smooth;
|
||||
box-sizing: border-box;
|
||||
list-style: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
:root{
|
||||
--main-color: tan;
|
||||
--text-color:saddlebrown;
|
||||
--bg-color:peru;
|
||||
--container-color:OldLace ;
|
||||
}
|
||||
img{
|
||||
width: 100%;
|
||||
}
|
||||
body{
|
||||
color: var(--bg-color);
|
||||
background: OldLace ;
|
||||
}
|
||||
header{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background: var(--container-color);
|
||||
box-shadow: 0 1px 4px hsla(33, 90%, 47%, 0.484);
|
||||
z-index: 100;
|
||||
}
|
||||
.nav{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px 0;
|
||||
}
|
||||
.container{
|
||||
max-width: 1068px;
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
}
|
||||
.logo{
|
||||
font-size: 1.2rem;
|
||||
color: var(--bg-color);
|
||||
font-weight: 600;
|
||||
}
|
||||
#cart-check-out{
|
||||
position: relative;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
#cart-check-out[ddata-amount]::after{
|
||||
contain: '';
|
||||
}
|
||||
#cart-check-out[data-amount]::after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -12px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: var(--text-color);
|
||||
border-radius: 50%;
|
||||
color: black;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.cart{
|
||||
position: fixed;
|
||||
right: -100%;
|
||||
top: 0;
|
||||
width: 360px;
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
background: var(--container-color);
|
||||
box-shadow: -2px 0 4px hsla(0, 4%, 15% /10%);
|
||||
transition: 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||
}
|
||||
.cart.active{
|
||||
right: 0;
|
||||
transition: 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||
}
|
||||
.cart-title{
|
||||
text-align: center;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
.total{
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 1.5rem;
|
||||
border-top: 1px solid var(--text-color);
|
||||
}
|
||||
.total-title{
|
||||
font-size: 1.4rem;
|
||||
font-weight: 600;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.total-price{
|
||||
font-size: 1.2rem;
|
||||
margin: 1rem 0 0 1rem;
|
||||
}
|
||||
.btn-buy{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 1.5rem auto 0 auto;
|
||||
padding: 10px 15px;
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
border: none;
|
||||
border-radius: 1.5rem;
|
||||
background: mintcream;
|
||||
color: var(--bg-color);
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
#close-btn{
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 0.8rem;
|
||||
font-size: 2rem;
|
||||
color: var(--text-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
.cart-box{
|
||||
display: grid;
|
||||
grid-template-columns: 30% 50% 15%;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.cart-img{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
padding: 15px;
|
||||
}
|
||||
.detail-box{
|
||||
display: grid;
|
||||
row-gap: 0.5rem;
|
||||
}
|
||||
.cart-c-title{
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.cart-price{
|
||||
font-weight: 600;
|
||||
}
|
||||
.cart-amount{
|
||||
border: 1px solid var(--text-color);
|
||||
outline-color: var(--main-color);
|
||||
width: 3.5rem;
|
||||
text-align: center;
|
||||
font-size: 1rem;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.cart-remove{
|
||||
font-size: 20px;
|
||||
color: var(--text-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
.section-title{
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.shop{
|
||||
margin-top: 2rem;
|
||||
}
|
||||
.shop-content{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, auto));
|
||||
gap: 1rem;
|
||||
}
|
||||
section{
|
||||
padding: 4rem 0 3rem;
|
||||
}
|
||||
.product-img{
|
||||
width: 100%;
|
||||
height: 65%;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.product-box{
|
||||
position: relative;
|
||||
background: snow;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
transition: 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||
}
|
||||
.product-title{
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
margin-top: 0.8rem;
|
||||
}
|
||||
.price{
|
||||
font-weight: 500;
|
||||
}
|
||||
.add-cart{
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
background: var(--text-color);
|
||||
color: var(--container-color);
|
||||
padding: 10px;
|
||||
font-size: 1.2rem;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.add-cart:hover{
|
||||
background: hsla(56, 11%, 71%, 0.568);
|
||||
}
|
||||
.product-box:hover{
|
||||
background: var(--main-color);
|
||||
border: 1px solid var(--main-color);
|
||||
box-shadow: 0 8px 32px hsla(0.75, 0.82, 0.16, 1);
|
||||
transition: 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||
}
|
||||
.success-container{
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.success-container img{
|
||||
width: 200px;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
.success-container h1{
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.success-container p{
|
||||
max-width: 600px;
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
.success-btn{
|
||||
padding: 12px 20px;
|
||||
border-radius: 2rem;
|
||||
background: var(--text-color);
|
||||
color: var(--container-color);
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="shortcut icon" href="images/deco.png">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<title>Success Payment</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="success-container">
|
||||
<h1>Payment Successful</h1>
|
||||
<p>Your order will arrive in 3 business days</p>
|
||||
<img src="images/icon_s.png" alt="">
|
||||
<a href="index.html" class="success-btn">Back to Homepage</a>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,372 +0,0 @@
|
|||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
#header{
|
||||
height: 100vh;
|
||||
background-image: url(images/wall2.jpg);
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
.container{
|
||||
margin-right: 50px;
|
||||
margin-left: 50px;
|
||||
}
|
||||
.logo{
|
||||
margin-top: 30px;
|
||||
width: 125px;
|
||||
}
|
||||
.header-text{
|
||||
max-width: 550px;
|
||||
margin-top: 100px;
|
||||
color: aliceblue;
|
||||
}
|
||||
h1{
|
||||
font-size: 30px;
|
||||
}
|
||||
.square{
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
display: inline-block;
|
||||
background: grey;
|
||||
margin: 15px 0;
|
||||
}
|
||||
.common-btn{
|
||||
padding: 18px 40px;
|
||||
background: transparent;
|
||||
outline: none;
|
||||
border: 2px solid grey;
|
||||
font-weight: bold;
|
||||
color: rgb(182, 203, 182);
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
p{
|
||||
font-size: 18px;
|
||||
}
|
||||
.header-text button{
|
||||
margin-top: 20px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
.line1{
|
||||
width: 100px;
|
||||
height: 1px;
|
||||
background: grey;
|
||||
display: inline-block;
|
||||
}
|
||||
.line2{
|
||||
width: 80px;
|
||||
height: 1px;
|
||||
background: grey;
|
||||
display: inline-block;
|
||||
}
|
||||
.line3{
|
||||
width: 60px;
|
||||
height: 1px;
|
||||
background: grey;
|
||||
display: inline-block;
|
||||
}
|
||||
.line{
|
||||
line-height: 10px;
|
||||
}
|
||||
#sideNav{
|
||||
width: 250px;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
right: -250px;
|
||||
top: 0;
|
||||
background: rgb(175, 180, 175);
|
||||
z-index: 2;
|
||||
transition: 0.5s;
|
||||
}
|
||||
nav ul li{
|
||||
list-style: none;
|
||||
margin: 50px 20px;
|
||||
}
|
||||
nav ul li a{
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
}
|
||||
#menuBtn{
|
||||
width: 50px;
|
||||
position: fixed;
|
||||
right: 65px;
|
||||
top: 35px;
|
||||
z-index: 2;
|
||||
cursor: pointer;
|
||||
}
|
||||
/*------- about -------*/
|
||||
#about,#framwork{
|
||||
padding: 100px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.about-left-col{
|
||||
flex-basis: 50%;
|
||||
}
|
||||
.about-left-col img{
|
||||
width: 70%;
|
||||
}
|
||||
.about-right-col{
|
||||
flex-basis: 50%;
|
||||
text-align: right;
|
||||
}
|
||||
.about-text{
|
||||
max-width: 650px;
|
||||
margin-right: 100px;
|
||||
display: inline-block;
|
||||
}
|
||||
.about-text h2{
|
||||
margin: 25px 0 10px;
|
||||
font-size: 28px;
|
||||
font-style: italic;
|
||||
}
|
||||
.about-text h3{
|
||||
font-size: 20px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/*------- features -------*/
|
||||
#features{
|
||||
padding-top: 50px;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
.feature-row{
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.feature-col{
|
||||
flex-basis: 25%;
|
||||
text-align: center;
|
||||
}
|
||||
.feature-col{
|
||||
width: 100px;
|
||||
|
||||
}
|
||||
.feature-col img{
|
||||
width: 35%;
|
||||
}
|
||||
.feature-col h4{
|
||||
margin-bottom: 15px;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.feature-btn{
|
||||
margin: 80px auto 0;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
}
|
||||
.feature-btn .line{
|
||||
text-align: right;
|
||||
display: inline-block;
|
||||
margin-right: 25px;
|
||||
}
|
||||
/*------- applications -------*/
|
||||
#applications{
|
||||
padding: 100px 0;
|
||||
}
|
||||
.container-app-row{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.app-right-col{
|
||||
flex-basis: 50%;
|
||||
}
|
||||
.app-right-col img{
|
||||
width: 90%;
|
||||
}
|
||||
.app-left-col{
|
||||
flex-basis: 50%;
|
||||
}
|
||||
.app-text{
|
||||
max-width: 550px;
|
||||
margin-left: 100px;
|
||||
display: inline-block;
|
||||
}
|
||||
.app-text button{
|
||||
margin: 20px 0;
|
||||
}
|
||||
/*------- Framworks -------*/
|
||||
#framwork button{
|
||||
margin: 30px 0;
|
||||
}
|
||||
/*------- contact -------*/
|
||||
.cont-row{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.cont-left-col, .cont-right-col{
|
||||
flex-basis: 50%;
|
||||
}
|
||||
.cont-right-col img{
|
||||
width: 40%;
|
||||
}
|
||||
form{
|
||||
max-width: 350%;
|
||||
margin: 30px 0;
|
||||
}
|
||||
form input{
|
||||
width: 85%;
|
||||
padding: 12px 10px;
|
||||
margin-bottom: 5px;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid gray;
|
||||
}
|
||||
.btn-box{
|
||||
width: 40%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.btn-box button{
|
||||
flex-basis: 46%;
|
||||
padding: 18px 0;
|
||||
}
|
||||
|
||||
/*------ footer -----*/
|
||||
#footer{
|
||||
padding: 50px 0 30px;
|
||||
}
|
||||
hr{
|
||||
width: 100%;
|
||||
border: 0;
|
||||
border-top: 1px solid gray;
|
||||
}
|
||||
.footer-row{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.footer-left-col{
|
||||
flex-basis: 50;
|
||||
margin-top: 40px;
|
||||
}
|
||||
.footer-links{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.link-title h4{
|
||||
font-size: 20px;
|
||||
color: rgb(35, 42, 37);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.link-title small{
|
||||
font-size: 15px;
|
||||
color: rgb(61, 69, 67);
|
||||
}
|
||||
/*social media*/
|
||||
|
||||
.social-icons{
|
||||
width: 50px;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
z-index: 1;
|
||||
}
|
||||
.social-icons img{
|
||||
width: 65%;
|
||||
display: block;
|
||||
margin: 0 auto 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
@media only screen and (max-width:770px){
|
||||
#header{
|
||||
background-image: none;
|
||||
}
|
||||
.container{
|
||||
margin-right: 50px;
|
||||
margin-left: 50px;
|
||||
}
|
||||
.logo{
|
||||
margin-top: b25px;
|
||||
width: 50px;
|
||||
}
|
||||
.header-text{
|
||||
margin-top: 50px;
|
||||
color: black;
|
||||
}
|
||||
h1{
|
||||
font-size: 25px;
|
||||
}
|
||||
#menuBtn{
|
||||
width: 40px;
|
||||
right: 50px;
|
||||
}
|
||||
.common-btn{
|
||||
padding: 10px 16px;
|
||||
|
||||
}
|
||||
.social-icons img{
|
||||
width: 40%;
|
||||
margin: 15px auto;
|
||||
}
|
||||
.about-left-col, .about-right-col{
|
||||
flex-basis: 100%;
|
||||
}
|
||||
.about-left-col img{
|
||||
width: 70%;
|
||||
margin-top: -200px;
|
||||
}
|
||||
.about-text{
|
||||
margin: 50px 50px 0;
|
||||
display: inline-block;
|
||||
}
|
||||
.about-text h2{
|
||||
font-size: 18px;
|
||||
}
|
||||
.feature-col{
|
||||
flex-basis: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.app-left-col{
|
||||
flex-basis: 100%;
|
||||
}
|
||||
.app-right-col{
|
||||
flex-basis: 100%;
|
||||
margin-top: 20%;
|
||||
margin-bottom: 40%;
|
||||
}
|
||||
.cont-left-col, .cont-right-col{
|
||||
flex-basis: 100%;
|
||||
}
|
||||
.cont-right-col{
|
||||
margin-top: 50px;
|
||||
}
|
||||
.cont-right-col img{
|
||||
width: 50%;
|
||||
}
|
||||
form input{
|
||||
width: 85%;
|
||||
padding: 12px 10px;
|
||||
margin-bottom: 5px;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid gray;
|
||||
}
|
||||
.btn-box{
|
||||
width: 60%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.btn-box button{
|
||||
flex-basis: 48%;
|
||||
padding: 10px 0;
|
||||
}
|
||||
.footer-left-col{
|
||||
flex-basis: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,239 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale =1">
|
||||
<title> Complete Website Design- HTML & CSS </title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/cferdinandi/smooth-scroll/dist/smooth-scroll.polyfills.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<section id ="header">
|
||||
<div class="container">
|
||||
<img src="images/ai1.png" class ="logo">
|
||||
<div class="header-text">
|
||||
<h1>A year spent in artificial intelligence is enough to make one believe in God</h1>
|
||||
<span class ="square"></span>
|
||||
<p>"One of our big goals in search is to make search that really understands exactly what you want,
|
||||
understands everything in the world. As computer scientists, we call that artificial intelligence."
|
||||
<br> -Larry Page- </p>
|
||||
<button class="common-btn">Read More</button>
|
||||
<div class="line">
|
||||
<span class="line1"></span> <br>
|
||||
<span class="line2"></span> <br>
|
||||
<span class="line3"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<nav id ="sideNav">
|
||||
<ul>
|
||||
<li><a href = "#header">HOME</a></li>
|
||||
<li><a href = "#about">ABOUT US</a></li>
|
||||
<li><a href = "#features">FEATURES</a></li>
|
||||
<li><a href = "#applications">APPLICATIONS</a></li>
|
||||
<li><a href = "#framwork">FRAMEWORK</a></li>
|
||||
<li><a href = "#contact">CONTACT</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<img src="images/menu3.png" id="menuBtn">
|
||||
|
||||
<!------- About Us ------->
|
||||
<section id="about">
|
||||
<div class ="about-left-col">
|
||||
<img src="images/ai5.png">
|
||||
</div>
|
||||
<div class = "about-right-col">
|
||||
<div class="about-text">
|
||||
<h1>About Us</h1>
|
||||
<span class ="square"></span>
|
||||
<p>Artificial intelligence is intelligence perceiving, synthesizing, and inferring information-demonstrated
|
||||
by machines, as opposed to intelligence displayed by humans or by other animals.
|
||||
Example tasks in which this is done include speech recognition, computer vision, translation between (natural)
|
||||
languages, as well as other mappings of inputs. </p><br>
|
||||
|
||||
<div class="line">
|
||||
<span class="line1"></span> <br>
|
||||
<span class="line2"></span> <br>
|
||||
<span class="line3"></span>
|
||||
</div>
|
||||
|
||||
<h2>"Machines will be capable, within twenty years, of doing any work a man can do."</h2>
|
||||
<h3>-Herbert Simon-</h3>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!------- Features ------->
|
||||
<section id ="features">
|
||||
<div class="feature-row">
|
||||
<div class="feature-col">
|
||||
<img src="images/ai3.png">
|
||||
<h4>Deep Learning</h4>
|
||||
<p>Deep learning is part of a broader family of machine learning methods,
|
||||
which is based on artificial neural networks with representation learning.</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-col">
|
||||
<img src="images/f9.png">
|
||||
<h4>Facial recognition</h4>
|
||||
<p>A facial recognition system is a technology capable of matching
|
||||
a human face from a digital image or a video frame against a database of faces.</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-col">
|
||||
<img src="images/f5.png">
|
||||
<h4>Quantum Computing</h4>
|
||||
<p>Quantum computing is a rapidly-emerging technology that harnesses
|
||||
the laws of quantum mechanics to solve problems too complex for classical computers.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-btn">
|
||||
<div class="line">
|
||||
<span class="line1"></span> <br>
|
||||
<span class="line2"></span> <br>
|
||||
<span class="line3"></span>
|
||||
</div>
|
||||
<button class="common-btn"> Read More</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!--------- Applications --------->
|
||||
<section id = "applications">
|
||||
<div class = "container-app-row">
|
||||
<div class="app-left-col">
|
||||
<div class="app-text">
|
||||
<h1>AI applications </h1>
|
||||
<span class="square"></span>
|
||||
<p>AI and machine learning-enabled technologies are used in medicine, transportation, robotics,
|
||||
science, education, the military, surveillance, finance and its regulation, agriculture,
|
||||
entertainment, retail, customer service, and manufacturing.</p>
|
||||
<button class="common-btn"> Read More</button>
|
||||
<div class="line">
|
||||
<span class="line1"></span> <br>
|
||||
<span class="line2"></span> <br>
|
||||
<span class="line3"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-right-col">
|
||||
<img src="images/ai_app2.png">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!--frameworks-->
|
||||
<section id="framwork">
|
||||
<div class ="about-left-col">
|
||||
<img src="images/fram1.png">
|
||||
</div>
|
||||
<div class = "about-right-col">
|
||||
<div class="about-text">
|
||||
<h1>Top 5 Frameworks for Integration AI <br> in App Development </h1>
|
||||
<span class ="square"></span>
|
||||
<p>The best frameworks for AI and machine learning development tasks that can employ
|
||||
to stay ahead with the technological trends in 2023 are <br>TensorFlow,
|
||||
Microsoft CNTK,Torch, Theano, and Caffe.</p>
|
||||
<button class="common-btn"> Read More</button>
|
||||
<div class="line">
|
||||
<span class="line1"></span> <br>
|
||||
<span class="line2"></span> <br>
|
||||
<span class="line3"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section id>
|
||||
|
||||
<!------- Contact -------->
|
||||
<section id="contact">
|
||||
<div class="container cont-row">
|
||||
<div class="cont-left-col">
|
||||
<h1> Sign Up to join us</h1>
|
||||
<form>
|
||||
<input type="text" placeholder="Enter your name">
|
||||
<input type="email" placeholder="Enter your email">
|
||||
<input type="password" placeholder="Enter your password">
|
||||
<div class="btn-box">
|
||||
<button class="common-btn">Sign Up</button>
|
||||
<button class="common-btn"> Sign In</button>
|
||||
</div>
|
||||
</form>
|
||||
<div class="line">
|
||||
<span class="line1"></span> <br>
|
||||
<span class="line2"></span> <br>
|
||||
<span class="line3"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cont-right-col">
|
||||
<img src="images/con2.png">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!------- Footer ------->
|
||||
<section id="footer">
|
||||
<div class="container footer-row">
|
||||
<hr>
|
||||
<div class="footer-left-col">
|
||||
<div class="footer-links">
|
||||
<div class="link-title">
|
||||
<h4>Product </h4>
|
||||
<small>Our plan</small><br>
|
||||
<small>Free30 days</small>
|
||||
</div>
|
||||
|
||||
<div class="link-title">
|
||||
<h4>About Us </h4>
|
||||
<small>Request Demo</small><br>
|
||||
<small>FAQ</small>
|
||||
</div>
|
||||
|
||||
<div class="link-title">
|
||||
<h4>Support </h4>
|
||||
<small>Features</small><br>
|
||||
<small>Contact Us</small>
|
||||
</div>
|
||||
|
||||
<div class="link-title">
|
||||
<h4>Explore </h4>
|
||||
<small>Find a nonpofit</small><br>
|
||||
<small>Coporate Solution</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!--Social media-->
|
||||
|
||||
<div class= "social-icons">
|
||||
<img src="images/s_fa.png">
|
||||
<img src="images/s_ig.png">
|
||||
<img src="images/s_in.png">
|
||||
<img src="images/s_tw.png">
|
||||
</div>
|
||||
|
||||
<!-------- JavaScript------->
|
||||
<script>
|
||||
var menuBtn = document.getElementById("menuBtn");
|
||||
var sideNav = document.getElementById("sideNav");
|
||||
|
||||
sideNav.style.right="-250px";
|
||||
menuBtn.onclick = function(){
|
||||
if(sideNav.style.right == "-250px"){
|
||||
sideNav.style.right = "0px"
|
||||
}
|
||||
else{
|
||||
sideNav.style.right = "-250px";
|
||||
}
|
||||
}
|
||||
|
||||
var scroll = new SmoothScroll('a[href*="#"]',{
|
||||
speed:650
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,235 +0,0 @@
|
|||
*{
|
||||
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: 350px;
|
||||
padding-bottom: 0;
|
||||
font-size: 55px;
|
||||
}
|
||||
.header p{
|
||||
margin: 18px 0;
|
||||
}
|
||||
.input-group{
|
||||
width: 90% !important;
|
||||
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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,247 +0,0 @@
|
|||
<!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>Popular 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>
|
||||
<!-------------------------------------------------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