Hello Developers!, Are you looking to enhance your travel agency website with a visually appealing and functional dashboard? Look no further! In this comprehensive guide, we will take you through the process of creating an attractive and user-friendly dashboard using HTML and CSS. A well-designed dashboard is essential for managing various aspects of your travel agency business efficiently. So, let’s dive in and learn how to bring your travel agency website to the next level!
Setting Up the HTML Structure
First and foremost, let’s set up the basic structure of our HTML document. To specify that we’re working with an HTML5 document, we’ll start by declaring the <!DOCTYPE html> tag. Transitioning to the next step, inside the <html> tags, we’ll set the language attribute to “en” for English.
Meta Tags for Compatibility and Responsive Design
Next, we’ll include essential meta tags within the <head> section. These meta tags will define the character encoding, ensure compatibility with Internet Explorer, and provide viewport settings for responsive design. By ensuring compatibility and responsiveness, your dashboard will seamlessly adapt to different devices and screen sizes.
Linking CSS Styles and Icon Library
To bring our dashboard to life with stunning styles, we’ll link an external CSS file called “styles.css” using the <link> tag. This CSS file will contain all the necessary style rules for our dashboard. Additionally, we’ll include a link to the Remix Icon library, which offers a vast collection of icons that will enhance the visual appeal of our dashboard.
Creating the Dashboard Layout
Now, let’s focus on creating the layout for our dashboard. We’ll start by creating a container div with the class “dashboard.” This container will hold all the content and components of our dashboard.
Designing the Sidebar Section
The sidebar section plays a crucial role in navigation and brand representation. Transitioning into the design phase, typically, it contains the logo and navigation links. We’ll style the sidebar using the class “sidebar” and add the logo using the class “logo.” To enhance navigation, the navigation links will be displayed vertically, utilizing the class “sidebar–links.” Each link will be represented by a div element, and we can leverage the Remix Icon library to include visually appealing icons alongside the links.
Designing the Main Section
The main section is the central area of our dashboard, where we’ll display important information and interactive elements. Transitioning to the main design aspect, to achieve a well-organized layout, we’ll divide the main section into two columns: the left column and the right column. CSS grid will be our go-to tool for this purpose. In the left column, we’ll house a search input field and a section for displaying popular stays. Stylistically, the search input will be styled with the class “search” and accompanied by a search icon for enhanced visual appearance. Moving on to the section displaying popular stays, styled with the class “popular–stays,” it will consist of multiple stay cards. Each stay card will feature an image, stay details (such as title, location, price, and rating), and be represented by the class “stay.”
The right column of the main section will include the user profile section and a title container. Focusing on the right column, the user profile section will display the user’s avatar, username, and a dropdown arrow indicating additional options. To create an engaging title, the title container will consist of a heading and a button for planning a trip. These elements will be styled using the classes “title–container” and “btn,” respectively.
Adding a Gallery Section
To add an extra visual appeal to our dashboard, we can include a gallery section at the bottom of the right column. Transitioning to the gallery section, it will display a set of images, enticing users to explore different destinations. Styling-wise, we’ll apply the class “gallery–img–cover” to the gallery section, ensuring smooth transition between the previous content and the gallery. Moreover, we’ll include navigation arrows to facilitate convenient image scrolling and enhance the overall user experience.
Styling the Dashboard with CSS
Firstly, we’ll set custom font families using the @import rule, which allows us to import external fonts and apply them to our dashboard. This will add a touch of uniqueness and personality to the overall design, enhancing the visual appeal of our dashboard.
Next, we’ll define styles for the scrollbar to ensure a polished and consistent look throughout the dashboard. By customizing the scrollbar’s colors, size, and behavior, we can create a more refined user experience and ensure that the scrollbar blends seamlessly with the overall design.
To establish a cohesive and visually pleasing design, we’ll apply general styles to all elements using the * selector. This includes setting default margins, padding, and font sizes. By doing so, we can establish a consistent visual hierarchy and improve the overall aesthetics of our dashboard.
Additionally, we’ll apply a background image to the body and set its properties to ensure responsiveness. This will allow the background image to adjust and scale appropriately based on the device and screen size, providing a visually pleasing experience across different platforms and devices.
Moving on to specific section styles, we’ll focus on styling the dashboard, sidebar, and main sections. These sections will receive appropriate background colors, padding, and border radius to create visual separation and enhance the overall aesthetics of the dashboard. By choosing colors that align with your travel agency’s branding, you can create a cohesive and visually appealing dashboard.
Furthermore, we’ll pay attention to styling the logo, navigation links, search input, and stay cards. Each of these components will have specific color schemes, fonts, and spacing to maintain consistency and readability. By applying consistent styling, we can create a visually cohesive dashboard that reflects the branding of your travel agency and provides a seamless user experience.
Conclusion
Congratulations! You have successfully learned how to create an attractive and functional dashboard for your travel agency website using HTML and CSS. By following the step-by-step instructions provided in this comprehensive guide, you now have the knowledge and tools to elevate your website’s user experience and streamline the management of your travel agency business.
Remember, customization is key. Feel free to experiment with different color schemes, fonts, and layouts to create a unique dashboard that aligns with your travel agency’s branding guidelines. Additionally, incorporate more transition words throughout your content to improve flow and readability, ensuring a smooth transition between ideas.
Now it’s time to put your skills into action and bring your travel agency website dashboard to life. Enjoy the process of designing and developing an exceptional dashboard that will captivate your users and enhance their overall experience. Happy coding!
Video Tutorial
Source codes HTML & CSS
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bali travel</title>
<link rel="stylesheet" href="styles.css" />
<link
href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css"
rel="stylesheet"
/>
</head>
<body>
<div class="dashboard">
<div class="sidebar">
<div class="logo">
<span>Bali</span> <br />
Travel.
</div>
<div class="sidebar--links">
<div class="ri-community-line sidebar--link"></div>
<div class="ri-flight-takeoff-line sidebar--link"></div>
<div class="ri-train-line sidebar--link"></div>
<div class="ri-roadster-line sidebar--link"></div>
<div class="ri-quil-pen-line sidebar--link"></div>
</div>
</div>
<div class="main">
<div class="left">
<div class="search">
<input
type="text"
placeholder="Destination, Hotel, Attraction, etc.."
/>
<i class="ri-search-line search--icon"></i>
</div>
<div class="popular--stays">
<h2>Popular Stays</h2>
<p>In Bali Indonesia</p>
<div class="stays">
<div class="stay">
<div class="img--cover">
<img src="./assets/stay1.jpg" />
</div>
<div class="stay--details">
<h6>Entire bungalow in bay area</h6>
<h4>Pura Tanah Lot</h4>
<p>$255 / night</p>
<div class="rating">
<i class="ri-star-fill"></i>
<p>4.5 (120)</p>
</div>
</div>
</div>
<div class="stay">
<div class="img--cover">
<img src="./assets/stay2.jpg" />
</div>
<div class="stay--details">
<h6>Entire house in Koa Lanta Yai</h6>
<h4>Udaya Resort and Spa</h4>
<p>$160 / night</p>
<div class="rating">
<i class="ri-star-fill"></i>
<p>4.5 (98)</p>
</div>
</div>
</div>
<div class="stay">
<div class="img--cover">
<img src="./assets/stay3.jpg" />
</div>
<div class="stay--details">
<h6>With morning sunrise</h6>
<h4>Jimbaran stay</h4>
<p>$186 / night</p>
<div class="rating">
<i class="ri-star-fill"></i>
<p>4.5 (74)</p>
</div>
</div>
</div>
<div class="stay">
<div class="img--cover">
<img src="./assets/stay4.jpg" />
</div>
<div class="stay--details">
<h6>Natural beauty and sea view</h6>
<h4>Nusa Dusa</h4>
<p>$325 / night</p>
<div class="rating">
<i class="ri-star-fill"></i>
<p>4.5 (99)</p>
</div>
</div>
</div>
<div class="stay">
<div class="img--cover">
<img src="./assets/bali1.jpg" />
</div>
<div class="stay--details">
<h6>some text</h6>
<h4>some tect</h4>
<p>$25 / night</p>
<div class="rating">
<i class="ri-star-fill"></i>
<p>4.5 (38)</p>
</div>
</div>
</div>
<div class="stay">
<div class="img--cover">
<img src="./assets/bali1.jpg" />
</div>
<div class="stay--details">
<h6>some text</h6>
<h4>some tect</h4>
<p>$25 / night</p>
<div class="rating">
<i class="ri-star-fill"></i>
<p>4.5 (38)</p>
</div>
</div>
</div>
<div class="stay">
<div class="img--cover">
<img src="./assets/bali1.jpg" />
</div>
<div class="stay--details">
<h6>some text</h6>
<h4>some tect</h4>
<p>$25 / night</p>
<div class="rating">
<i class="ri-star-fill"></i>
<p>4.5 (38)</p>
</div>
</div>
</div>
<div class="stay">
<div class="img--cover">
<img src="./assets/bali1.jpg" />
</div>
<div class="stay--details">
<h6>some text</h6>
<h4>some tect</h4>
<p>$25 / night</p>
<div class="rating">
<i class="ri-star-fill"></i>
<p>4.5 (38)</p>
</div>
</div>
</div>
<div class="stay">
<div class="img--cover">
<img src="./assets/bali1.jpg" />
</div>
<div class="stay--details">
<h6>some text</h6>
<h4>some tect</h4>
<p>$25 / night</p>
<div class="rating">
<i class="ri-star-fill"></i>
<p>4.5 (38)</p>
</div>
</div>
</div>
<div class="stay">
<div class="img--cover">
<img src="./assets/bali1.jpg" />
</div>
<div class="stay--details">
<h6>some text</h6>
<h4>some tect</h4>
<p>$25 / night</p>
<div class="rating">
<i class="ri-star-fill"></i>
<p>4.5 (38)</p>
</div>
</div>
</div>
<div class="stay">
<div class="img--cover">
<img src="./assets/bali1.jpg" />
</div>
<div class="stay--details">
<h6>some text</h6>
<h4>some tect</h4>
<p>$25 / night</p>
<div class="rating">
<i class="ri-star-fill"></i>
<p>4.5 (38)</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="right">
<div class="profile">
<div class="profile--cover">
<img src="./assets/avatar.png" alt="" />
</div>
<p>Hello, John!</p>
<i class="ri-arrow-down-s-line"></i>
</div>
<div class="title--container">
<h4>Live as if</h4>
<h1>The Paradise</h1>
<h4>is on earth</h4>
<div class="btn">Plan a trip</div>
</div>
<div class="galary">
<div class="galary--img--cover">
<img src="./assets/gal1.jpg" alt="" />
</div>
<div class="galary--img--cover">
<img src="./assets/gal2.jpg" alt="" />
</div>
<div class="galary--img--cover">
<img src="./assets/gal3.jpg" alt="" />
</div>
<div class="galary--img--cover">
<img src="./assets/gal4.jpg" alt="" />
</div>
<div class="arrows">
<i class="ri-arrow-right-s-line"></i>
<i class="ri-arrow-left-s-line"></i>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
styles.css
@import url("https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600&display=swap");
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-track {
background: none;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #f1f1f1;
border-radius: 5px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #bab8b6;
}
* {
font-family: "Golos Text", sans-serif;
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background-image: url(./assets/bali1.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.dashboard {
width: 900px;
min-height: 550px;
border: 5px solid #f1f1f1;
border-radius: 2rem;
overflow: hidden;
display: flex;
}
.sidebar {
padding: 1.2rem 10px;
background-color: #177edf;
}
.logo {
margin-bottom: 100px;
color: #fff;
}
.logo span {
font-size: 1.5rem;
font-weight: 700;
}
.sidebar--links {
display: flex;
flex-direction: column;
align-items: center;
gap: 25px;
font-size: 1.2rem;
}
.sidebar--link {
color: #d3d5e8;
cursor: pointer;
}
.sidebar--link:hover {
color: #fff;
}
.main {
display: grid;
grid-template-columns: 1fr 1fr;
width: 100%;
}
.left {
padding: 1.5rem;
background-color: rgba(204, 238, 238, 0.5);
backdrop-filter: blur(5px);
}
.search {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #999;
padding-bottom: 5px;
margin-bottom: 1rem;
}
input {
width: 100%;
border: none;
background-color: transparent;
outline: none;
}
.search--icon {
color: #999;
}
.img--cover {
position: relative;
width: 70px;
height: 70px;
overflow: hidden;
border-radius: 1rem;
}
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
p {
font-size: 12px;
}
.stays {
margin-top: 1rem;
padding-right: 5px;
display: grid;
gap: 10px;
height: 400px;
overflow-y: scroll;
}
.stay {
display: flex;
gap: 1rem;
background: #e7f7f6;
padding: 8px;
border-radius: 1rem;
}
h2 {
color: #222;
}
.stay--details h4 {
color: #222;
}
.stay--details h6 {
color: #555;
font-weight: normal;
}
.rating {
display: flex;
gap: 5px;
margin-top: 5px;
}
.rating i {
color: #177edf;
}
.right {
padding: 1.5rem;
display: flex;
flex-direction: column;
justify-content: space-between;
border-radius: 1.5rem;
}
.profile--cover {
position: relative;
height: 1.5rem;
width: 1.5rem;
border-radius: 50%;
overflow: hidden;
}
.profile {
display: flex;
align-items: center;
gap: 5px;
background: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(1px);
width: fit-content;
padding: 5px 10px;
border-radius: 0.5rem;
margin-left: auto;
}
.title--container {
color: #fff;
margin-top: 4rem;
}
.title--container h4 {
font-weight: lighter;
font-size: 1.2rem;
}
.title--container h1 {
font-size: 3rem;
}
.btn {
border: 1px solid #fff;
width: fit-content;
padding: 7px 13px;
border-radius: 0.6rem;
margin-top: 1rem;
cursor: pointer;
}
.galary--img--cover {
position: relative;
height: 50px;
width: 50px;
border-radius: 0.8rem;
overflow: hidden;
}
.galary {
margin-left: auto;
background: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(1px);
padding: 5px;
display: flex;
gap: 5px;
border-radius: 1rem;
}
.arrows {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 8px 2px;
background-color: #fff;
border-radius: 1rem;
}
Don’t forget to Subscribe to our YouTube Channel for more.
