hello everyone and welcome back for a new web project. In this project, I will show you how to make an index page for a traveling agency using HTML CSS and a bit of JAVASCRIPT.
before we start coding let me gives you the images that we will use.
if you want to know where you can find free and good quality images for our website, I recommend to you to visit my article about the subject:
Where you can find free images for your website
images resource for this project
 |
| hotel image |
 |
| logo of the project |
 |
| image for the about section |
 |
| header image |
 |
| contact us image |
 |
| flight image |
 |
| trip image |
now I will give you the full source code of this project.
source code
HTML
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="contact-nav">
<div class="container">
you can contact us via this email doctorcode@gmail.com
</div>
</div>
<div class="nav">
<div class="container">
<img src="logo-Recovered.png" class="logo">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">services</a></li>
<li><a href="#">about us </a></li>
<li><a href="#">Blog</a></li>
</ul>
</div>
</div>
<div class="header">
<div class="search">
<input type="text" placeholder="search your destination">
<button>Search</button>
</div>
</div>
<div class="main-section">
<div class="container">
<div class="tab-container">
<div class="tab-button">
<button onclick="showPanel(0,0)" class="btn active">trips</button>
<button onclick="showPanel(1,1)" class="btn">flight</button>
<button onclick="showPanel(2,2)" class="btn">hotels</button>
</div>
<div class="tab-content" style="display: block;">
<img src="photo-1549442554-3d2930130873.jpg">
<h1>Discover our trips</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque egestas metus fringilla tincidunt dictum. Donec mattis nunc at odio mollis vulputate nec eu orci. Cras in dolor vel tortor dapibus dictum et et nisl. Aenean venenatis diam a nulla scelerisque porttitor. Donec sem orciLorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque egestas metus fringilla tincidunt dictum. Donec mattis nunc at odio mollis vulputate nec eu orci. Cras in dolor vel tortor dapibus dictum et et nisl. Aenean venenatis diam a nulla scelerisque porttitor. Donec sem orciLorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque egestas metus fringilla tincidunt dictum. Donec mattis nunc at odio mollis vulputate nec eu orci. Cras in dolor vel tortor dapibus dictum et et nisl. Aenean venenatis diam a nulla scelerisque porttitor. Donec sem orci</p>
</div>
<div class="tab-content">
<img src="travel.jpg">
<h1>Discover our fligts</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque egestas metus fringilla tincidunt dictum. Donec mattis nunc at odio mollis vulputate nec eu orci. Cras in dolor vel tortor dapibus dictum et et nisl. Aenean venenatis diam a nulla scelerisque porttitor. Donec sem orciLorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque egestas metus fringilla tincidunt dictum. Donec mattis nunc at odio mollis vulputate nec eu orci. Cras in dolor vel tortor dapibus dictum et et nisl. Aenean venenatis diam a nulla scelerisque porttitor. Donec sem orciLorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque egestas metus fringilla tincidunt dictum. Donec mattis nunc at odio mollis vulputate nec eu orci. Cras in dolor vel tortor dapibus dictum et et nisl. Aenean venenatis diam a nulla scelerisque porttitor. Donec sem orci</p>
</div>
<div class="tab-content">
<img src="hotels.jpg">
<h1>Discover our hotels</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque egestas metus fringilla tincidunt dictum. Donec mattis nunc at odio mollis vulputate nec eu orci. Cras in dolor vel tortor dapibus dictum et et nisl. Aenean venenatis diam a nulla scelerisque porttitor. Donec sem orciLorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque egestas metus fringilla tincidunt dictum. Donec mattis nunc at odio mollis vulputate nec eu orci. Cras in dolor vel tortor dapibus dictum et et nisl. Aenean venenatis diam a nulla scelerisque porttitor. Donec sem orciLorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque egestas metus fringilla tincidunt dictum. Donec mattis nunc at odio mollis vulputate nec eu orci. Cras in dolor vel tortor dapibus dictum et et nisl. Aenean venenatis diam a nulla scelerisque porttitor. Donec sem orci</p>
</div>
</div>
</div>
</div>
<hr>
<div class="about-section">
<div class="container">
<img src="photo-1512757776214-26d36777b513.jpg">
<div class="text">
<h1>Who we are ?</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque egestas metus fringilla tincidunt dictum. Donec mattis nunc at odio mollis vulputate nec eu orci. Cras in dolor vel tortor dapibus dictum et et nisl. Aenean venenatis diam a nulla scelerisque porttitor. Donec sem orciLorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque egestas metus fringilla tincidunt dictum. Donec mattis nunc at odio mollis vulputate nec eu orci. Cras in dolor vel tortor dapibus dictum et et nisl. Aenean venenatis diam a nulla scelerisque porttitor. Donec sem orciLorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque egestas
</p>
<h1>Our Goals</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque egestas metus fringilla tincidunt dictum. Donec mattis nunc at odio mollis vulputate nec eu orci. Cras in dolor vel tortor dapibus dictum et et nisl. Aenean venenatis diam a nulla scelerisque porttitor. Donec sem orciLorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque egestas metus fringilla tincidunt dictum. Donec mattis nunc at odio mollis vulputate nec eu orci. Cras in dolor vel tortor dapibus dictum et et nisl. Aenean venenatis diam a nulla scelerisque porttitor. Donec sem orciLorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque egestas
</p>
<h1>follow us</h1>
</div>
</div>
</div>
<div class="contact-section">
<div class="container">
<img src="photo-1559147625-8a594bd63c9b.jpg">
<div class="contact-form">
<h1>Contact us </h1>
<form>
<input type="text" placeholder="Name"><br>
<input type="text" placeholder="Last Name"><br>
<input type="email" placeholder="email"><br>
<textarea placeholder="your message"></textarea><br>
<button>Send</button>
</form>
</div>
</div>
</div>
<div class="footer">
<p>copyright © All rights reserved to DoctorCode</p>
</div>
</body>
<script src="tab.js"></script>
</html>
CSS
*{
margin: 0;
padding: 0;
outline: 0;
}
.container{
width: 80%;
position: relative;
left: 50%;
transform: translateX(-50%);
overflow: auto;
}
.contact-nav{
background-color: #424242;
padding: 5px 10px;
color: #fafafa;
}
.nav img{
height: 100px;
}
.nav ul{
float: right;
padding-top: 45px;
}
.nav ul li{
display: inline-block;
margin-right: 15px;
}
.nav ul li a{
font-size: 1.2rem;
text-transform: uppercase;
text-decoration: none;
color: #212121;
transition: .4;
}
.nav ul li a:hover{
color: #3e7a7e;
}
.header{
position: relative;
width: 100%;
height: 600px;
background-image: url(photo-1503703796045-3b073bd4b539.jpg);
background-size: cover;
background-position: center;
}
.header .search{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
background-color: #fff;
border-radius: 4px;
}
.header .search input{
padding: 15px 10px;
border: none;
width: 500px;
font-size: 1.1rem;
}
.header .search button{
padding: 17px 6px;
border: none;
width: 100px;
border-radius: 0 4px 4px 0;
background-color: #8ed1d5;
color: #fafafa;
font-size: 1.2rem;
transition: .4s;
}
.header .search button:hover{
background-color: #3e7a7e;
}
.tab-button{
margin-bottom: 15px;
}
.tab-button button{
width: 33%;
padding: 20px 0;
border: none;
background: transparent;
}
.tab-button button.active{
border-bottom: 4px solid #8ed1d5;
}
.tab-content{
overflow: auto;
display: none;
margin-bottom: 15px;
transition: .4s;
}
.tab-content img{
width: 33%;
float: left;
margin-right: 20px;
}
hr{
margin:15px 0;
}
.about-section {
overflow: auto;
}
.about-section img{
float: left;
margin-right: 15px;
width: 33%;
}
.about-section h1{
margin-bottom: 15px;
}
.about-section p{
font-size: 1.1rem;
line-height: 2rem;
}
.contact-section{
overflow: auto;
margin-bottom: 15px;
}
.contact-section img{
float: right;
margin-left: 15px;
width: 33%;
height: 100%;
}
.contact-section .contact-form{
padding: 0 ;
position: relative;
}
.contact-section .contact-form form{
height: 100%;
overflow: auto;
}
.contact-section .contact-form input{
padding: 5px 10px;
width: calc(100% - 20px);
border: none;
border-bottom: 1px solid #8ed1d5;
margin-bottom: 15px;
}
.contact-section .contact-form textarea{
position: relative;
padding: 5px 10px;
width: calc(100% - 22px);
border: none;
border: 1px solid #8ed1d5;
margin-bottom: 15px;
resize: none;
height: 300px;
}
.contact-section .contact-form button{
padding: 9px 10px;
width: calc(100%);
border: none;
background-color: #8ed1d5;
}
.footer{
padding: 15px;
background-color: #3e7a7e;
}
.footer p{
text-align: center;
}
JAVASCRIPT
var tabButtons=document.getElementsByClassName("btn");
var tabPanels=document.getElementsByClassName("tab-content");
var btn = tabButtons.item;
function showPanel(panelindex,btnindex){
for(var i=0;i<tabPanels.length;i++){
if(i==panelindex){
tabPanels[panelindex].style.display="block";
}else{
tabPanels[i].style.display="none";
}
}
for(var i=0;i<tabButtons.length;i++){
if(i==btnindex){
tabButtons[btnindex].classList.add("active");
}else{
tabButtons[i].classList.remove("active");
}
}
}
You can download the project from this link :
Download
Reviewed by Medics
on
June 09, 2019
Rating:
No comments: