Simple Trevling Website Ui Design
.png)
Introduction:
Join us in this engaging tutorial where we dive into creating a stunning Traveling Website UI from scratch using HTML, CSS, and JavaScript. Learn the art of crafting an intuitive user interface that captivates visitors and provides a seamless browsing experience.
In this step-by-step video, we'll cover:
- Building a responsive and visually appealing layout using HTML5 and CSS3.
- Implementing stylish design elements to evoke the essence of travel and exploration.
- Adding interactive features with JavaScript to make your website stand out.
- Best practices for optimizing your website's performance and compatibility across devices.
Whether you're a beginner looking to expand your web development skills or an experienced coder seeking fresh insights, this tutorial offers valuable techniques to create a compelling Traveling Website UI. Elevate your portfolio and impress your audience with this hands-on UI design experience.
Keywords: Traveling Website UI Design, HTML, CSS, JavaScript Tutorial, Web Design Tutorial, UI/UX Design, Front-end Development, Responsive Layout, Website Development, User Interface Design, Travel Website, Coding Tutorial.
Html Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Travel</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="showcase">
<header>
<h2 class="logo">Travel</h2>
<div class="toggle"></div>
</header>
<video src="https://traversymedia.com/downloads/
videos/explore.mp4" muted loop autoplay></video>
<div class="overlay"></div>
<div class="text">
<h2>Never Stop To </h2>
<h3>Exploring The World</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo
consequat.</p>
<a href="#">Explore</a>
</div>
<ul class="social">
<li><a href="#"><img src="https://i.ibb.co/x7P24fL/facebook.png">
</a></li>
<li><a href="#"><img src="https://i.ibb.co/Wnxq2Nq/twitter.png">
</a></li>
<li><a href="#"><img src="https://i.ibb.co/ySwtH4B/instagram.png">
</a></li>
</ul>
</section>
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Destination</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</body>
<script type="module" src="script.js"></script>
</html>
Css Code:
@import url('https://fonts.googleapis.com/css?family=Poppins:200,
300,400,500,600,700,800,900&display=swap');
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
header
{
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 40px 100px;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
}
header .logo
{
color: #fff;
text-transform: uppercase;
cursor: pointer;
}
.toggle
{
position: relative;
width: 60px;
height: 60px;
background: url(https://i.ibb.co/HrfVRcx/menu.png);
background-repeat: no-repeat;
background-size: 30px;
background-position: center;
cursor: pointer;
}
.toggle.active
{
background: url(https://i.ibb.co/rt3HybH/close.png);
background-repeat: no-repeat;
background-size: 25px;
background-position: center;
cursor: pointer;
}
.showcase
{
position: absolute;
right: 0;
width: 100%;
min-height: 100vh;
padding: 100px;
display: flex;
justify-content: space-between;
align-items: center;
background: #111;
transition: 0.5s;
z-index: 2;
}
.showcase.active
{
right: 300px;
}
.showcase video
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.8;
}
.overlay
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #03a9f4;
mix-blend-mode: overlay;
}
.text
{
position: relative;
z-index: 10;
}
.text h2
{
font-size: 5em;
font-weight: 800;
color: #fff;
line-height: 1em;
text-transform: uppercase;
}
.text h3
{
font-size: 4em;
font-weight: 700;
color: #fff;
line-height: 1em;
text-transform: uppercase;
}
.text p
{
font-size: 1.1em;
color: #fff;
margin: 20px 0;
font-weight: 400;
max-width: 700px;
}
.text a
{
display: inline-block;
font-size: 1em;
background: #fff;
padding: 10px 30px;
text-transform: uppercase;
text-decoration: none;
font-weight: 500;
margin-top: 10px;
color: #111;
letter-spacing: 2px;
transition: 0.2s;
}
.text a:hover
{
letter-spacing: 6px;
}
.social
{
position: absolute;
z-index: 10;
bottom: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.social li
{
list-style: none;
}
.social li a
{
display: inline-block;
margin-right: 20px;
filter: invert(1);
transform: scale(0.5);
transition: 0.5s;
}
.social li a:hover
{
transform: scale(0.5) translateY(-15px);
}
.menu
{
position: absolute;
top: 0;
right: 0;
width: 300px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.menu ul
{
position: relative;
}
.menu ul li
{
list-style: none;
}
.menu ul li a
{
text-decoration: none;
font-size: 24px;
color: #111;
}
.menu ul li a:hover
{
color: #03a9f4;
}
@media (max-width: 991px)
{
.showcase,
.showcase header
{
padding: 40px;
}
.text h2
{
font-size: 3em;
}
.text h3
{
font-size: 2em;
}
}
JavaScript Code:
const menuToggle = document.querySelector(".toggle");
const showcase = document.querySelector(".showcase");
menuToggle.addEventListener("click", () => {
menuToggle.classList.toggle("active");
showcase.classList.toggle("active");
});
