Via - Documentation
Support: Author Profile (Aurora-Themes)
Thank you for purchasing Via - HTML Web Template.
If you have any problem with this product, be free to check for support on my Author Profile (Aurora-Themes). Also, if you have a problem to change this template, contact me, and I will do that for you. I worked hard to provide the best and newest features in this template. Via is template particularly crafted for Travel & Adventure agencies.
Installation
Zip File
After download Via - HTML Web Template, and unpacking zip file you have the following folders:
Install - Server and FTP Upload
To install Via - HTML Web Template you can use two methods:
1. Upload files to the server using cPanel (cPanel provide to you your hosting provider). On the bottom image you can see an example:
To upload files to the server:
- Log in to your account (hosting),
- Upload your choosen template version to the server - ZIP file (all versions can be found in "Versions" folder).
- Unzip files in following folder on server: public_html
- You are ready to go.
2. Upload files to the server using some ftp client (for example - FileZilla). On the bottom image - FileZilla (screen):
Please, download the newest FileZilla version.
Useful Links
Licensing
More about licensing options you can find in Via - HTML Web Template - Zip File.
Images
Template images aren't included in this package. It's only there for preview purposes. Instead, there are appropriate image placeholders with sizes in pixels.
To change image you need to take a care about image names. Image name need to be same in the folder (Images), but also and inside code. For example: Graphic.webp (Images folder), src = "Images/Graphic.webp" (code). You only need to replace placeholders with real images, and that's easy like that.
I strongly recommend use of images with "webp" extension.
Useful Link
HTML
In each version you can find HTML folder where are located HTML files (except index.html). These files are very important because there you can make changes, which relates to this web template. Actually, text and images are replaced inside HTML files (except background images). Also, each HTML file has the Table of Contents for your easier orientation.
Layout - Smooth
index.html
Description
Code Line: 11
<meta name = "description" content = "Via is a high quality HTML web template, which is tailored for tourism, travel and adventure agencies.">
Keywords
Code Line: 13
<meta name = "keywords" content = "Adventures, Agencies, Blog, Bootstrap, Modern, Responsive, Tourism, Travel">
Browser Bar Image
Code Line: 22
<link rel = "icon" type = "image/png" href = "Images/Title-Bar/Via.png">
Browser Title Text
Code Lines: 33-35
<title>
Via - Stellar Travel
</title>
Loader
Code Lines: 865-874
<!-- Loader -->
<section class = "loader">
<!-- Shape -->
<div class = "shape">
</div>
<!-- H2 -->
<h2>
Required for Validation
</h2>
</section>
Header
Code Lines: 880-1209
<!-- Header -->
<header class = "header" id = "header-anchor">
<!-- Header Container -->
<div class = "header-container">
<!-- Grand Canyon Small -->
<div class = "container location-small">
<!-- H2 -->
<h2>
CALICO
</h2>
</div>
<!-- Via Text -->
<div class = "via-text">
<!-- H2 -->
<h2>
VIA
</h2>>
</div>
<!-- Large Img -->
<div class = "large-img">
<!-- Img -->
<img class = "img-fluid" src = "Images/Header/Desert.webp" alt = "Desert">
</div>
<!-- Elements Container -->
<div class = "align-items-center d-block d-xxl-flex elements-container">
<!-- Info Container -->
<div class = "info-container">
<!-- Info -->
<div class = "info">
<!-- H2 -->
<h2 class = "animate__animated animate__backInLeft location">
MOJAVE DESERT
</h2>
<!-- Activity -->
<h2 class = "activity animate__animated animate__backInLeft">
HIKING & WALKING
</h2>
<!-- Text -->
<div class = "text">
<!-- H2 -->
<h2>
We offer to our clients the best travel tours in the world, from the beautiful American coast to the Pyramids of Giza. Visit us, and fulfill your passion for adventures.
</h2>
</div>
<!-- Button Area -->
<div class = "button-area">
<!-- Button -->
<div class = "align-items-center button d-flex justify-content-center" onclick = "window.location = '#';">
<!-- Button Content -->
<div class = "align-items-center button-content d-flex">
<!-- Button Left -->
<div class = "button-left">
<!-- Button Left Text -->
<div class = "button-left-text">
<!-- Button Text -->
<h2 class = "button-text">
FIND OUT MORE
</h2>
</div>
<!-- Button Triangle -->
<div class = "button-triangle">
</div>
</div>
<!-- Button Right -->
<div class = "button-right">
<!-- Icon Container -->
<div class = "icon-container">
<!-- Arrow -->
<i class = "arrow fa-solid fa-chevron-right">
</i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Social -->
<div class = "social">
<!-- Icons Container -->
<div class = "icons-container">
<!-- Icons -->
<div class = "icons">
<!-- Facebook Icon -->
<img class = "facebook-icon img-fluid" onclick = "window.location = '#';" src = "Images/Header/Icon-Facebook.webp" alt = "Icon-Facebook">
<!-- Pinterest Icon -->
<img class = "img-fluid" onclick = "window.location = '#';" src = "Images/Header/Icon-Pinterest.webp" alt = "Icon-Pinterest">
<!-- Vimeo Icon -->
<img class = "img-fluid vimeo-icon" onclick = "window.location = '#';" src = "Images/Header/Icon-Vimeo.webp" alt = "Icon-Vimeo">
</div>
</div>
</div>
</div>
<!-- Menu -->
<div class = "menu">
<!-- Left Top Quarter -->
<div class = "left-top quarter">
</div>
<!-- Right Top Quarter -->
<div class = "quarter right-top">
</div>
<!-- Left Bottom Quarter -->
<div class = "left-bottom quarter">
<!-- Ellipses and Close -->
<div class = "ellipses-and-close">
<!-- Ellipses -->
<div class = "ellipses row">
<!-- Ellipse Area -->
<div class = "col-4 ellipse-area">
<!-- Ellipse -->
<div class = "ellipse">
</div>
</div>
<!-- Ellipse Area -->
<div class = "col-4 ellipse-area">
<!-- Ellipse -->
<div class = "ellipse">
</div>
</div>
<!-- Ellipse Area -->
<div class = "col-4 ellipse-area">
<!-- Ellipse -->
<div class = "ellipse">
</div>
</div>
<!-- Ellipse Area -->
<div class = "col-4 ellipse-area">
<!-- Ellipse -->
<div class = "ellipse">
</div>
</div>
<!-- Ellipse Area -->
<div class = "col-4 ellipse-area">
<!-- Ellipse -->
<div class = "ellipse">
</div>
</div>
<!-- Ellipse Area -->
<div class = "col-4 ellipse-area">
<!-- Ellipse -->
<div class = "ellipse">
</div>
</div>
<!-- Ellipse Area -->
<div class = "col-4 ellipse-area">
<!-- Ellipse -->
<div class = "ellipse">
</div>
</div>
<!-- Ellipse Area -->
<div class = "col-4 ellipse-area">
<!-- Ellipse -->
<div class = "ellipse">
</div>
</div>
<!-- Ellipse Area -->
<div class = "col-4 ellipse-area">
<!-- Ellipse -->
<div class = "ellipse">
</div>
</div>
</div>
<!-- Close Icon Container -->
<div class = "close-icon-area close-icon-container" id = "close-button">
<!-- Close Icon -->
<i class = "close-icon fa-solid fa-xmark">
</i>
</div>
</div>
<!-- Ellipses and Close Small -->
<div class = "ellipses-and-close-small">
<!-- Ellipses Small -->
<div class = "ellipses-small row">
<!-- Ellipse Area Small -->
<div class = "col-4 ellipse-area-small">
<!-- Ellipse Small -->
<div class = "ellipse-small">
</div>
</div>
<!-- Ellipse Area Small -->
<div class = "col-4 ellipse-area-small">
<!-- Ellipse Small -->
<div class = "ellipse-small">
</div>
</div>
<!-- Ellipse Area Small -->
<div class = "col-4 ellipse-area-small">
<!-- Ellipse Small -->
<div class = "ellipse-small">
</div>
</div>
<!-- Ellipse Area Small -->
<div class = "col-4 ellipse-area-small">
<!-- Ellipse Small -->
<div class = "ellipse-small">
</div>
</div>
<!-- Ellipse Area Small -->
<div class = "col-4 ellipse-area-small">
<!-- Ellipse Small -->
<div class = "ellipse-small">
</div>
</div>
<!-- Ellipse Area Small -->
<div class = "col-4 ellipse-area-small">
<!-- Ellipse Small -->
<div class = "ellipse-small">
</div>
</div>
<!-- Ellipse Area Small -->
<div class = "col-4 ellipse-area-small">
<!-- Ellipse Small -->
<div class = "ellipse-small">
</div>
</div>
<!-- Ellipse Area Small -->
<div class = "col-4 ellipse-area-small">
<!-- Ellipse Small -->
<div class = "ellipse-small">
</div>
</div>
<!-- Ellipse Area Small -->
<div class = "col-4 ellipse-area-small">
<!-- Ellipse Small -->
<div class = "ellipse-small">
</div>
</div>
</div>
<!-- Close Icon Container Small -->
<div class = "close-icon-area-small close-icon-container-small" id = "close-button-small">
<!-- Close Icon Small -->
<i class = "close-icon-small fa-solid fa-xmark">
</i>
</div>
</div>
</div>
<!-- Right Bottom Quarter -->
<div class = "quarter right-bottom">
</div>
<!-- Menu Container -->
<div class = "menu-container">
<!-- Links -->
<div class = "links">
<!-- Ul -->
<ul>
<!-- Li -->
<li class = "conn">
<!-- A -->
<a class = "link" href = "#">
HOME
</a>
</li>
<!-- Li -->
<li class = "conn">
<!-- A -->
<a class = "link" href = "#story-anchor">
STORY
</a>
</li>
<!-- Li -->
<li class = "conn">
<!-- A -->
<a class = "link" href = "#tours-anchor">
TOURS
</a>
</li>
<!-- Li -->
<li class = "conn">
<!-- A -->
<a class = "link" href = "#blog-anchor">
BLOG
</a>
</li>
<!-- Li -->
<li class = "conn">
<!-- A -->
<a class = "link" href = "#contact-anchor">
CONTACT
</a>
</li>
</ul>
</div>
</div>
<!-- Menu Container Small -->
<div class = "menu-container-small menu-container-small-area" id = "menu-container-mobile">
<!-- Links Small -->
<div class = "links-small">
<!-- Ul -->
<ul>
<!-- Li -->
<li class = "conn-small">
<!-- A -->
<a href = "#">
HOME
</a>
</li>
<!-- Li -->
<li class = "conn-small">
<!-- A -->
<a href = "#story-anchor">
STORY
</a>
</li>
<!-- Li -->
<li class = "conn-small">
<!-- A -->
<a href = "#tours-anchor">
TOURS
</a>
</li>
<!-- Li -->
<li class = "conn-small">
<!-- A -->
<a href = "#blog-anchor">
BLOG
</a>
</li>
<!-- Li -->
<li class = "conn-small">
<!-- A -->
<a href = "#contact-anchor">
CONTACT
</a>
</li>
</ul>
</div>
</div>
</div>
</header>
Our Story
Code Lines: 1212-1353
<!-- Section - Our Story -->
<section class = "d-flex justify-content-center story" data-aos = "fade-up" data-aos-duration = "3500" id = "story-anchor">
<!-- Content -->
<div class = "content padding-width">
<!-- Top -->
<div class = "top">
<!-- Heading Container -->
<div class = "heading-container">
<!-- Heading -->
<h2 class = "heading">
OUR STORY
</h2>
</div>
</div>
<!-- Middle -->
<div class = "middle">
<!-- Great Wall Container -->
<div class = "great-wall-container row">
<!-- Img Container -->
<div class = "col-12 col-xxl-6 img-container">
<!-- Img -->
<img class = "img-fluid" src = "Images/Story/The-Great-Wall.webp" alt = "The Great Wall">
</div>
<!-- Info Container -->
<div class = "col-12 col-xxl-6 info-container">
<!-- Info Area -->
<div class = "info-area">
<div class = "info-area-elements">
<!-- Great Wall Heading Container -->
<div class = "great-wall-heading-container" data-aos = "fade-left" data-aos-duration = "3500" >
<!-- H2 -->
<h2>
THE GREAT WALL
</h2>
</div>
<!-- Great Wall Text Container -->
<div class = "great-wall-text-container">
<!-- H2 -->
<h2>
Our story started in China, when we visited The Great Wall. Very soon, we realized that travelling is the best human activity, and we founded this magnificent travel agency. Today, we are leading travel agency in the US, with room for growing. Visit us in our central office in New York, or some other office between many around the US, consult with our experts, and book your dream trip.
</h2>
</div>
<!-- Button Area -->
<div class = "button-area">
<!-- Button -->
<div class = "align-items-center button d-flex justify-content-center" onclick = "window.location = '#';">
<!-- Button Content -->
<div class = "align-items-center button-content d-flex">
<!-- Button Left -->
<div class = "button-left">
<!-- Button Left Text -->
<div class = "button-left-text">
<!-- Button Text -->
<h2 class = "button-text">
LEARN MORE
</h2>
</div>
<!-- Button Triangle -->
<div class = "button-triangle">
</div>
</div>
<!-- Button Right -->
<div class = "button-right">
<!-- Icon Container -->
<div class = "icon-container">
<!-- Arrow -->
<i class = "arrow fa-solid fa-chevron-right">
</i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Video -->
<div class = "video">
<!-- Video Area -->
<div class = "video-area">
<!-- Borders -->
<div class = "borders">
</div>
<!-- Rectangle Area -->
<div class = "rectangle-area">
<!-- Img -->
<img class = "img-fluid" src = "Images/Story/Video.webp" alt = "Video">
</div>
</div>
</div>
</div>
<!-- Bottom -->
<div class = "bottom">
<!-- Blocks Container -->
<div class = "blocks-container row">
<!-- Block -->
<div class = "block col-xxl-4 left">
<!-- Data -->
<div class = "data">
<!-- H2 -->
<h2>
2000
</h2>
<!-- Text -->
<h2 class = "text">
Clients
</h2>
</div>
</div>
<!-- Block -->
<div class = "block center col-xxl-4">
<!-- Data -->
<div class = "data">
<!-- H2 -->
<h2>
120
</h2>
<!-- Text -->
<h2 class = "text">
Tours
</h2>
</div>
</div>
<!-- Block -->
<div class = "block col-xxl-4 right">
<!-- Data -->
<div class = "data">
<!-- H2 -->
<h2>
115
</h2>
<!-- Text -->
<h2 class = "text">
Countries
</h2>
</div>
</div>
</div>
</div>
</div>
</section>
Tours
Code Lines: 1356-1628
<!-- Section - Tours -->
<section class = "d-flex justify-content-center tours" data-aos = "fade-up" data-aos-duration = "3500" id = "tours-anchor">
<div class = "content padding-width">
<!-- Top -->
<div class = "top">
<!-- Heading Container -->
<div class = "heading-container">
<!-- Heading -->
<h2 class = "heading">
TOURS
</h2>
</div>
</div>
<!-- Middle -->
<div class = "middle">
<!-- Middle Container -->
<div class = "middle-container row">
<!-- Left -->
<div class = "col-12 col-xxl-6 left order-2 order-xxl-1">
<!-- Left Container -->
<div class = "left-container">
<!-- Numbers -->
<div class = "numbers row">
<!-- Left -->
<div class = "col-4 left">
<!-- H2 -->
<h2 class = "number-one">
01
</h2>
</div>
<!-- Center -->
<div class = "center col-4">
<!-- Line -->
<div class = "line">
</div>
</div>
<!-- Right -->
<div class = "col-4 right">
<!-- H2 -->
<h2 class = "number-two">
02
</h2>
</div>
</div>
<!-- Fuji Location -->
<div class = "fuji-location location">
<!-- H2 -->
<h2>
Fuji, Japan
</h2>
</div>
<!-- Berlin Location -->
<div class = "berlin-location location">
<!-- H2 -->
<h2>
Berlin, Germany
</h2>
</div>
<!-- Fuji Text Container -->
<div class = "fuji-text-container tours-text-container">
<!-- H2 -->
<h2>
Mount Fuji, Japanese Fuji-san, also spelled Fujisan, also called Fujiyama or Fuji no Yama, highest mountain in Japan. It rises to 12,388 feet (3,776 metres) near the Pacific Ocean coast in Yamanashi and Shizuoka ken (prefectures) of central Honshu, about 60 miles (100 km) west of the Tokyo-Yokohama metropolitan area.
</h2>
</div>
<!-- Berlin Text Container -->
<div class = "berlin-text-container tours-text-container">
<!-- H2 -->
<h2>
Berlin, capital and chief urban centre of Germany. The city lies at the heart of the North German Plain, athwart an east-west commercial and geographic axis that helped make it the capital of the kingdom of Prussia and then, from 1871, of a unified Germany. Berlin’s former glory ended in 1945, but the city survived the destruction of World War II.
</h2>
</div>
</div>
</div>
<!-- Right -->
<div class = "col-12 col-xxl-6 order-1 order-xxl-2 right">
<!-- Fuji Image Container -->
<div class = "fuji-image-container tours-image-container">
<!-- Img -->
<img class = "img-fluid" src = "Images/Tours/Fuji.webp" alt = "Fuji">
<!-- Video -->
<div class = "video">
<!-- Img -->
<img class = "img-fluid" src = "Images/Story/Video.webp" alt = "Video">
</div>
</div>
<!-- Berlin Image Container -->
<div class = "berlin-image-container tours-image-container">
<!-- Img -->
<img class = "img-fluid" src = "Images/Tours/Berlin.webp" alt = "Berlin">
<!-- Video -->
<div class = "video">
<!-- Img -->
<img class = "img-fluid" src = "Images/Story/Video.webp" alt = "Video">
</div>
</div>
</div>
</div>
</div>
<!-- Bottom -->
<div class = "bottom">
<!-- Tours Area -->
<div class = "row tours-area">
<!-- Mountains -->
<div class = "block col-12 col-xxl-4 mountains">
<!-- Block Content -->
<div class = "block-content">
<!-- Info -->
<div class = "info">
<!-- Img Container -->
<div class = "img-container">
<!-- Img -->
<img class = "img-fluid img-mountains" src = "Images/Tours/Mountains.webp" alt = "Mountains">
</div>
<!-- H2 -->
<h2>
MOUNTAINS
</h2>
<!-- h3 -->
<h3>
We have excellent mountain tours. Our recommendation are tours in Rockies. It will be an unforgettable experience.
</h3>
<!-- Button Area -->
<div class = "button-area">
<!-- Button -->
<div class = "align-items-center button d-flex justify-content-center" onclick = "window.location = '#';">
<!-- Button Content -->
<div class = "align-items-center button-content d-flex">
<!-- Button Left -->
<div class = "button-left">
<!-- Button Left Text -->
<div class = "button-left-text">
<!-- Button Text -->
<h2 class = "button-text">
LEARN MORE
</h2>
</div>
<!-- Button Triangle -->
<div class = "button-triangle">
</div>
</div>
<!-- Button Right -->
<div class = "button-right">
<!-- Icon Container -->
<div class = "icon-container">
<!-- Arrow -->
<i class = "arrow fa-solid fa-chevron-right">
</i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Additional Borders -->
<div class = "additional-borders">
</div>
</div>
<!-- Block -->
<div class = "block col-12 col-xxl-4">
<!-- Block Content -->
<div class = "block-content">
<div class = "info">
<!-- Img Container -->
<div class = "img-container">
<!-- Img -->
<img class = "img-fluid img-heritage" src = "Images/Tours/Heritage.webp" alt = "Heritage">
</div>
<!-- H2 -->
<h2>
HERITAGE
</h2>
<!-- h3 -->
<h3>
We have excellent heritage tours. Our recommendation is visit to Great Wall in China. It will be an unforgettable experience.
</h3>
<!-- Button Area -->
<div class = "button-area">
<!-- Button -->
<div class = "align-items-center button d-flex justify-content-center" onclick = "window.location = '#';">
<!-- Button Content -->
<div class = "align-items-center button-content d-flex">
<!-- Button Left -->
<div class = "button-left">
<!-- Button Left Text -->
<div class = "button-left-text">
<!-- Button Text -->
<h2 class = "button-text">
LEARN MORE
</h2>
</div>
<!-- Button Triangle -->
<div class = "button-triangle">
</div>
</div>
<!-- Button Right -->
<div class = "button-right">
<!-- Icon Container -->
<div class = "icon-container">
<!-- Arrow -->
<i class = "arrow fa-solid fa-chevron-right">
</i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Additional Borders -->
<div class = "additional-borders">
</div>
</div>
<!-- Block -->
<div class = "block col-12 col-xxl-4 sailing">
<!-- Block Content -->
<div class = "block-content">
<div class = "info">
<!-- Img Container -->
<div class = "img-container">
<!-- Img -->
<img class = "img-fluid img-sailing" src = "Images/Tours/Sailing.webp" alt = "Sailing">
</div>
<!-- H2 -->
<h2>
SAILING
</h2>
<!-- h3 -->
<h3>
We have excellent sailing tours. Our recommendation is north coast of Pacific in Japan. It will be an unforgettable experience.
</h3>
<!-- Button Area -->
<div class = "button-area">
<!-- Button -->
<div class = "align-items-center button d-flex justify-content-center" onclick = "window.location = '#';">
<!-- Button Content -->
<div class = "align-items-center button-content d-flex">
<!-- Button Left -->
<div class = "button-left">
<!-- Button Left Text -->
<div class = "button-left-text">
<!-- Button Text -->
<h2 class = "button-text">
LEARN MORE
</h2>
</div>
<!-- Button Triangle -->
<div class = "button-triangle">
</div>
</div>
<!-- Button Right -->
<div class = "button-right">
<!-- Icon Container -->
<div class = "icon-container">
<!-- Arrow -->
<i class = "arrow fa-solid fa-chevron-right">
</i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Additional Borders -->
<div class = "additional-borders">
</div>
</div>
</div>
</div>
</div>
</section>
Blog
Code Lines: 1631-2024
<!-- Section - Blog -->
<section class = "blog d-flex justify-content-center" data-aos = "fade-up" data-aos-duration = "3500" id = "blog-anchor">
<!-- Content -->
<div class = "content padding-width">
<!-- Top -->
<div class = "top">
<!-- Heading Container -->
<div class = "heading-container">
<!-- Heading -->
<h2 class = "heading">
BLOG
</h2>
</div>
</div>
<!-- Bottom -->
<div class = "bottom">
<!-- Blogs Container -->
<div class = "blogs-container row">
<!-- Block -->
<div class = "block col-12 col-xxl-6 top-left">
<!-- Img Container -->
<div class = "img-container">
<!-- Img -->
<img class = "img-fluid" src = "Images/Blog/German-Alps.webp" alt = "German Alps">
<!-- Date -->
<div class = "date">
<!-- H2 -->
<h2>
20 May 2023
</h2>
</div>
</div>
<!-- Heading Container -->
<div class = "heading-container">
<!-- H2 -->
<h2>
Find your Peace in German Alps
</h2>
</div>
<!-- Text Container -->
<div class = "text-container">
<!-- H3 -->
<h3>
Stretching west from Germany’s remote southeastern corner to the Allgäu region near Lake Constance, the Bavarian Alps (Bayerische Alpen) form a stunningly beautiful natural divide along the Austrian border. Ranges further south...
</h3>
</div>
<!-- Likes, Comments -->
<div class = "likes-comments">
<!-- Block -->
<div class = "block likes">
<!-- Icon Container -->
<div class = "icon-container">
<!-- Img -->
<img class = "img-fluid likes-img" src = "Images/Blog/Like.webp" alt = "Like">
</div>
<!-- Number Container -->
<div class = "number-container">
<!-- H3 -->
<h3>
40
</h3>
</div>
</div>
<!-- Block -->
<div class = "block comments">
<!-- Icon Container -->
<div class = "icon-container">
<!-- Img -->
<img class = "comments-img img-fluid" src = "Images/Blog/Comments.webp" alt = "Comments">
</div>
<!-- Number Container -->
<div class = "number-container">
<!-- H3 -->
<h3>
35
</h3>
</div>
</div>
</div>
<!-- Button Area -->
<div class = "button-area">
<!-- Button -->
<div class = "align-items-center button d-flex justify-content-center" onclick = "window.location = 'HTML/alps.html';">
<!-- Button Content -->
<div class = "align-items-center button-content d-flex">
<!-- Button Left -->
<div class = "button-left">
<!-- Button Left Text -->
<div class = "button-left-text">
<!-- Button Text -->
<h2 class = "button-text">
LEARN MORE
</h2>
</div>
<!-- Button Triangle -->
<div class = "button-triangle">
</div>
</div>
<!-- Button Right -->
<div class = "button-right">
<!-- Icon Container -->
<div class = "icon-container">
<!-- Arrow -->
<i class = "arrow fa-solid fa-chevron-right">
</i>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Block -->
<div class = "block col-12 col-xxl-6 top-right">
<!-- Img Container -->
<div class = "img-container">
<!-- Img -->
<img class = "img-fluid" src = "Images/Blog/Stonehenge.webp" alt = "Stonehenge">
<!-- Date -->
<div class = "date">
<!-- H2 -->
<h2>
13 July 2023
</h2>
</div>
</div>
<!-- Heading Container -->
<div class = "heading-container">
<!-- H2 -->
<h2>
Visit Stone Age Magnificent Monument
</h2>
</div>
<!-- Text Container -->
<div class = "text-container">
<!-- H3 -->
<h3>
Stonehenge, prehistoric stone circle monument, cemetery, and archaeological site located on Salisbury Plain, about 8 miles (13 km) north of Salisbury, Wiltshire, England. Though there is no definite evidence as to the intended purpose...
</h3>
</div>
<!-- Likes, Comments -->
<div class = "likes-comments">
<!-- Block -->
<div class = "block likes">
<!-- Icon Container -->
<div class = "icon-container">
<!-- Img -->
<img class = "img-fluid likes-img" src = "Images/Blog/Like.webp" alt = "Like">
</div>
<!-- Number Container -->
<div class = "number-container">
<!-- H3 -->
<h3>
35
</h3>
</div>
</div>
<!-- Block -->
<div class = "block comments">
<!-- Icon Container -->
<div class = "icon-container">
<!-- Img -->
<img class = "comments-img img-fluid" src = "Images/Blog/Comments.webp" alt = "Comments">
</div>
<!-- Number Container -->
<div class = "number-container">
<!-- H3 -->
<h3>
30
</h3>
</div>
</div>
</div>
<!-- Button Area -->
<div class = "button-area">
<!-- Button -->
<div class = "align-items-center button d-flex justify-content-center" onclick = "window.location = 'HTML/stonehenge.html';">
<!-- Button Content -->
<div class = "align-items-center button-content d-flex">
<!-- Button Left -->
<div class = "button-left">
<!-- Button Left Text -->
<div class = "button-left-text">
<!-- Button Text -->
<h2 class = "button-text">
LEARN MORE
</h2>
</div>
<!-- Button Triangle -->
<div class = "button-triangle">
</div>
</div>
<!-- Button Right -->
<div class = "button-right">
<!-- Icon Container -->
<div class = "icon-container">
<!-- Arrow -->
<i class = "arrow fa-solid fa-chevron-right">
</i>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Block -->
<div class = "block bottom-left col-12 col-xxl-6">
<!-- Img Container -->
<div class = "img-container">
<!-- Img -->
<img class = "img-fluid" src = "Images/Blog/Taj-Mahal.webp" alt = "Taj Mahal">
<!-- Date -->
<div class = "date">
<!-- H2 -->
<h2>
13 July 2023
</h2>
</div>
</div>
<!-- Heading Container -->
<div class = "heading-container">
<!-- H2 -->
<h2>
Eternal Love in India
</h2>
</div>
<!-- Text Container -->
<div class = "text-container">
<!-- H3 -->
<h3>
Taj Mahal, also spelled Tadj Mahall, mausoleum complex in Agra, western Uttar Pradesh state, northern India. The Taj Mahal was built by the Mughal emperor Shah Jahān (reigned 1628–58) to immortalize his wife Mumtaz Mahal...
</h3>
</div>
<!-- Likes, Comments -->
<div class = "likes-comments">
<!-- Block -->
<div class = "block likes">
<!-- Icon Container -->
<div class = "icon-container">
<!-- Img -->
<img class = "img-fluid likes-img" src = "Images/Blog/Like.webp" alt = "Like">
</div>
<!-- Number Container -->
<div class = "number-container">
<!-- H3 -->
<h3>
30
</h3>
</div>
</div>
<!-- Block -->
<div class = "block comments">
<!-- Icon Container -->
<div class = "icon-container">
<!-- Img -->
<img class = "comments-img img-fluid" src = "Images/Blog/Comments.webp" alt = "Comments">
</div>
<!-- Number Container -->
<div class = "number-container">
<!-- H3 -->
<h3>
25
</h3>
</div>
</div>
</div>
<!-- Button Area -->
<div class = "button-area">
<!-- Button -->
<div class = "align-items-center button d-flex justify-content-center" onclick = "window.location = 'HTML/taj-mahal.html';">
<!-- Button Content -->
<div class = "align-items-center button-content d-flex">
<!-- Button Left -->
<div class = "button-left">
<!-- Button Left Text -->
<div class = "button-left-text">
<!-- Button Text -->
<h2 class = "button-text">
LEARN MORE
</h2>
</div>
<!-- Button Triangle -->
<div class = "button-triangle">
</div>
</div>
<!-- Button Right -->
<div class = "button-right">
<!-- Icon Container -->
<div class = "icon-container">
<!-- Arrow -->
<i class = "arrow fa-solid fa-chevron-right">
</i>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Block -->
<div class = "block bottom-right col-12 col-xxl-6">
<!-- Img Container -->
<div class = "img-container">
<!-- Img -->
<img class = "img-fluid" src = "Images/Blog/Eiffel-Tower.webp" alt = "Eiffel Tower">
<!-- Date -->
<div class = "date">
<!-- H2 -->
<h2>
13 July 2023
</h2>
</div>
</div>
<!-- Heading Container -->
<div class = "heading-container">
<!-- H2 -->
<h2>
Giant from Steel
</h2>
</div>
<!-- Text Container -->
<div class = "text-container">
<!-- H3 -->
<h3>
Nothing remotely like the Eiffel Tower had ever been built; it was twice as high as the dome of St. Peter’s in Rome or the Great Pyramid of Giza. In contrast to such older monuments, the tower was erected in only about two years (1887–89)...
</h3>
</div>
<!-- Likes, Comments -->
<div class = "likes-comments">
<!-- Block -->
<div class = "block likes">
<!-- Icon Container -->
<div class = "icon-container">
<!-- Img -->
<img class = "img-fluid likes-img" src = "Images/Blog/Like.webp" alt = "Like">
</div>
<!-- Number Container -->
<div class = "number-container">
<!-- H3 -->
<h3>
25
</h3>
</div>
</div>
<!-- Block -->
<div class = "block comments">
<!-- Icon Container -->
<div class = "icon-container">
<!-- Img -->
<img class = "comments-img img-fluid" src = "Images/Blog/Comments.webp" alt = "Comments">
</div>
<!-- Number Container -->
<div class = "number-container">
<!-- H3 -->
<h3>
20
</h3>
</div>
</div>
</div>
<!-- Button Area -->
<div class = "button-area">
<!-- Button -->
<div class = "align-items-center button d-flex justify-content-center" onclick = "window.location = 'HTML/eiffel-tower.html';">
<!-- Button Content -->
<div class = "align-items-center button-content d-flex">
<!-- Button Left -->
<div class = "button-left">
<!-- Button Left Text -->
<div class = "button-left-text">
<!-- Button Text -->
<h2 class = "button-text">
LEARN MORE
</h2>
</div>
<!-- Button Triangle -->
<div class = "button-triangle">
</div>
</div>
<!-- Button Right -->
<div class = "button-right">
<!-- Icon Container -->
<div class = "icon-container">
<!-- Arrow -->
<i class = "arrow fa-solid fa-chevron-right">
</i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Contact
Code Lines: 2027-2209
<!-- Section - Contact -->
<section class = "contact d-flex justify-content-center" data-aos = "fade-up" data-aos-duration = "3500" id = "contact-anchor">
<!-- Content -->
<div class = "content padding-width">
<!-- Top -->
<div class = "top">
<!-- Heading Container -->
<div class = "heading-container">
<!-- Heading -->
<h2 class = "heading">
CONTACT
</h2>
</div>
</div>
<!-- Middle -->
<div class = "middle">
<!-- Middle Container -->
<div class = "middle-container row">
<!-- Left -->
<div class = "col-12 col-xxl-6 left">
<div class = "left-content">
<!-- Top Text Container -->
<div class = "top-text-container">
<!-- Heading -->
<div class = "heading">
<!-- H2 -->
<h2>
Get in Touch
</h2>
</div>
<!-- Text -->
<div class = "text">
<!-- H2 -->
<h2>
We are here for your suggestions.
</h2>
</div>
</div>
<!-- Bottom Text Container -->
<div class = "bottom-text-container">
<!-- Heading -->
<div class = "heading">
<!-- H2 -->
<h2>
New York, USA
</h2>
</div>
<!-- Info -->
<div class = "info">
<!-- Contact Area -->
<div class = "contact-area">
<!-- Contact Info -->
<div class = "contact-info">
<!-- Icon Container -->
<div class = "icon-container">
<!-- Img -->
<img class = "img-fluid" src = "Images/Contact/Phone.webp" alt = "Phone">
</div>
<!-- Text Container -->
<div class = "text-container">
<!-- H2 -->
<h2>
+212 123 456 789
</h2>
</div>
</div>
<!-- Contact Info -->
<div class = "contact-info contact-info-bottom">
<!-- Icon Container -->
<div class = "icon-container">
<!-- Img -->
<img class = "img-fluid" src = "Images/Contact/Mail.webp" alt = "Mail">
</div>
<!-- Text Container -->
<div class = "text-container">
<!-- H2 -->
<h2>
via@mailaddress.com
</h2>
</div>
</div>
<!-- Contact Info -->
<div class = "contact-info contact-info-bottom">
<!-- Icon Container -->
<div class = "icon-container">
<!-- Img -->
<img class = "img-fluid" src = "Images/Contact/Location.webp" alt = "Location">
</div>
<!-- Text Container -->
<div class = "text-container">
<!-- H2 -->
<h2>
Broadway, NY
</h2>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Right -->
<div class = "col-12 col-xxl-6 right">
<!-- Contact Form -->
<div class = "contact-form">
<!-- Form Container -->
<form action = "PHP/contact.php" class = "form-container row" id = "formArea" method = "post">
<!-- Field Container -->
<div class = "col-12 col-sm-6 field-container field-container-left">
<!-- H2 -->
<h2>
First Name
<!-- Span -->
<span>
*
</span>
</h2>
<!-- Field -->
<input class = "field" id = "name" name = "userName" placeholder = "" type = "text" required>
</div>
<!-- Field Container Right -->
<div class = "col-12 col-sm-6 field-container field-container-right">
<!-- H2 -->
<h2>
Last Name
<!-- Span -->
<span>
*
</span>
</h2>
<!-- Field -->
<input class = "field" id = "last-name" name = "lastName" placeholder = "" type = "text" required>
</div>
<!-- Field Container -->
<div class = "col-12 field-container field-container-email">
<!-- H2 -->
<h2>
Email Address
<!-- Span -->
<span>
*
</span>
</h2>
<!-- Field -->
<input class = "field" id = "email" name = "userEmail" placeholder = "" type = "email" required>
</div>
<!-- Field Container -->
<div class = "col-12 field-container field-container-email">
<!-- H2 -->
<h2>
Comment
<!-- Span -->
<span>
*
</span>
</h2>
<!-- Field -->
<textarea class = "field field-message" name = "userMessage" placeholder = "" required></textarea>
</div>
<!-- Button Container -->
<div class = "button-container p-0">
<!-- Button Area -->
<div class = "button-area m-0 p-0">
<!-- Submit Button -->
<input class = "align-items-center d-flex justify-content-center m-0 p-0 submit-button" name = "submit" type = "submit" value = "SUBMIT">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Bottom -->
<div class = "bottom">
<!-- Map Container -->
<div class = "map-container">
<!-- Map -->
<div id = "map">
</div>
</div>
</div>
</div>
</section>
Subscribe
Code Lines: 2212-2265
<!-- Section - Subscribe -->
<section class = "d-flex justify-content-center subscribe">
<!-- Content -->
<div class = "content">
<!-- Subscribe Area -->
<div class = "subscribe-area row">
<!-- Left -->
<div class = "col-12 col-xxl-6 left">
<!-- Left Content -->
<div class = "left-content">
<!-- Text One -->
<div class = "text-one">
<!-- H2 -->
<h2>
HEY YOU...
</h2>
</div>
<!-- Text Two -->
<div class = "text-two">
<!-- H2 -->
<h2>
Subscribe for our Newsletter.
</h2>
</div>
<!-- Text Three -->
<div class = "text-three">
<!-- H2 -->
<h2>
Find out more about our activities, offers and tours. We will inform you about the best trips around the world.
</h2>
</div>
<!-- Subscribe Form -->
<div class = "subscribe-form">
<!-- Form -->
<form action = "PHP/subscribe.php">
<!-- Field -->
<input class = "field" id = "emailSubscribe" name = "userEmailSubscribe" placeholder = "Your Email..." type = "email" required>
<!-- Submit Button -->
<input class = "align-items-center d-flex justify-content-center m-0 p-0 submit-button" name = "submit" type = "submit" value = "SUBSCRIBE">
</form>
</div>
</div>
</div>
<!-- Right -->
<div class = "col-12 col-sm-6 right">
<!-- Img Container -->
<div class = "img-container">
<!-- Img -->
<img class = "img-fluid" src = "Images/Subscribe/Sea.webp" alt = "Sea">
</div>
</div>
</div>
</div>
</section>
Footer
Code Lines: 2268-2481
<!-- Footer -->
<footer>
<!-- Top -->
<div class = "top">
<!-- Top Area -->
<div class = "top-area">
<!-- Headings -->
<div class = "headings row">
<!-- Left One -->
<div class = "col-12 col-xxl-3 left-one">
<!-- Via Container -->
<div class = "via-container">
<!-- Via Area -->
<div class = "via-area">
<!-- First -->
<span class = "first">
V
</span>
<!-- Span -->
<span>
IA
</span>
</div>
</div>
</div>
<!-- Block Headings -->
<div class = "block-headings col-xxl-3">
<!-- Heading Container -->
<div class = "heading-container">
<!-- H2 -->
<h2>
Latest Posts
</h2>
</div>
</div>
<!-- Block Headings -->
<div class = "block-headings col-xxl-3">
<!-- Heading Container -->
<div class = "heading-container">
<!-- H2 -->
<h2>
Twitter
</h2>
</div>
</div>
<!-- Block Headings -->
<div class = "block-headings col-xxl-3">
<!-- Heading Container -->
<div class = "heading-container">
<!-- H2 -->
<h2>
Instagram
</h2>
</div>
</div>
</div>
<!-- Info -->
<div class = "info row">
<!-- Left One -->
<div class = "col-12 col-xxl-3 left-one">
<!-- Text Container -->
<div class = "text-container">
<!-- H3 -->
<h3>
Via is travel agency located in New York, US. We are leading travel company in this part of the state. With several offices around the world, we are working hard to give the best for our clients.
</h3>
</div>
</div>
<!-- Block Info -->
<div class = "block-info col-12 col-xxl-3">
<!-- Text Container First -->
<div class = "text-container-first">
<!-- H3 -->
<h3 onclick = "window.location = 'HTML/alps.html';">
Find your Peace in German Alps
</h3>
</div>
<!-- Text Container Other -->
<div class = "text-container-other">
<!-- H3 -->
<h3 onclick = "window.location = 'HTML/stonehenge.html';">
Visit Stone Age Magnificient Monument
</h3>
</div>
<!-- Text Container Other -->
<div class = "text-container-other">
<!-- H3 -->
<h3 onclick = "window.location = 'HTML/taj-mahal.html';">
Eternal Love in India
</h3>
</div>
<!-- Text Container Other -->
<div class = "text-container-other">
<!-- H3 -->
<h3 onclick = "window.location = 'HTML/eiffel-tower.html';">
Giant from Steel
</h3>
</div>
</div>
<!-- Right One -->
<div class = "col-12 col-xxl-3 right-one">
<!-- Text Container First -->
<div class = "text-container-first">
<!-- Name -->
<span class = "name" onclick = "window.location = '#';">
@Robert -
</span>
<!-- Text -->
<span class = "text">
Excellent trip to Italy. I enjoyed.
</span>
</div>
<!-- Text Container Other -->
<div class = "text-container-other">
<!-- Name -->
<span class = "name" onclick = "window.location = '#';">
@Sarah -
</span>
<!-- Text -->
<span class = "text">
Excellent trip to Canada. I enjoyed.
</span>
</div>
<!-- Text Container Other -->
<div class = "text-container-other">
<!-- Name -->
<span class = "name" onclick = "window.location = '#';">
@Michael -
</span>
<!-- Text -->
<span class = "text">
Excellent trip to South Korea. I enjoyed.
</span>
</div>
</div>
<!-- Right Two -->
<div class = "col-xxl-3 right-two">
<!-- Images -->
<div class = "images">
<!-- Images Area -->
<div class = "images-area row">
<!-- Image One -->
<div class = "col-xxl-6 image-one">
<!-- Img -->
<img class = "img-fluid" src = "Images/Footer/Instagram-One.webp" alt = "Instagram-One">
</div>
<!-- Image Two -->
<div class = "col-xxl-6 image-two">
<!-- Img -->
<img class = "img-fluid" src = "Images/Footer/Instagram-Two.webp" alt = "Instagram-Two">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bottom -->
<div class = "bottom">
<div class = "left-middle">
<!-- Row Container -->
<div class = "row-container">
<!-- Bottom Area -->
<div class = "bottom-area row">
<!-- Left -->
<div class = "col-12 col-xxl-4 left order-second order-xxl-first">
<!-- Text Container -->
<div class = "text-container">
<!-- H2 -->
<h2>
AURORA-THEMES©, 2023
</h2>
</div>
</div>
<!-- Middle -->
<div class = "col-12 col-xxl-4 middle order-first order-xxl-second">
<!-- Social Container -->
<div class = "social-container">
<!-- Fb -->
<div class = "fb">
<!-- Img -->
<img class = "img-fluid" src = "Images/Footer/Fb.webp" alt = "Fb" onclick = "window.location = '#';">
</div>
<!-- Pinterest -->
<div class = "pinterest">
<!-- Img -->
<img class = "img-fluid" src = "Images/Footer/Pinterest.webp" alt = "Pinterest" onclick = "window.location = '#';">
</div>
<!-- Vimeo -->
<div class = "vimeo">
<!-- Img -->
<img class = "img-fluid" src = "Images/Footer/Vimeo.webp" alt = "Vimeo" onclick = "window.location = '#';">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Right -->
<div class = "right">
<!-- Rectangle Container -->
<div class = "rectangle-container">
<!-- Rectangle -->
<div class = "rectangle">
<!-- Icon Container -->
<div class = "icon-container">
<!-- Img -->
<img class = "img-fluid" src = "Images/Footer/Up.webp" alt = "Up" onclick = "window.location = '#header-anchor';">
</div>
</div>
</div>
</div>
</div>
</footer>
alps.html
German Alps
Code Lines: 224-758
<!-- Blog Inside -->
<div class = "blog-inside">
<!-- Content -->
<div class = "content">
<!-- Row Container -->
<div class = "row-container">
<!-- Row -->
<div class = "row">
<!-- Left -->
<div class = "col-12 col-xxl-6 left">
<!-- Image Author Date Container -->
<div class = "left-content">
<!-- Top Image Author Date -->
<div class = "top-image-author-date">
<!-- Image Container -->
<div class = "top-image-container">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blog/German-Alps.webp" alt = "Alps">
</div>
<!-- Author Container -->
<div class = "author-container">
<!-- Icon Container -->
<div class = "icon-container">
<!-- Icon -->
<div class = "icon">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/Author.webp" alt = "Author">
</div>
</div>
<!-- Name Container -->
<div class = "name-container">
<!-- Name -->
<div class = "name">
<!-- H2 -->
<h2>
BY MARCELO CONSI
</h2>
</div>
</div>
</div>
<!-- Date Container -->
<div class = "date-container">
<!-- Icon Container -->
<div class = "icon-container">
<!-- Icon -->
<div class = "icon">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/Calendar.webp" alt = "Calendar">
</div>
</div>
<!-- Text Container -->
<div class = "text-container">
<!-- Text -->
<div class = "text">
<!-- H2 -->
<h2>
MAY 20, 2023
</h2>
</div>
</div>
</div>
</div>
<!-- Heading Container -->
<div class = "heading-container">
<!-- Heading -->
<div class = "heading">
<!-- H2 -->
<h2>
FIND YOUR PEACE IN GERMAN ALPS
</h2>
</div>
</div>
<!-- Main Text Container -->
<div class = "main-text-container">
<!-- Main Text -->
<div class = "main-text">
<!-- H2 -->
<h2>
Stretching west from Germany’s remote southeastern corner to the Allgäu region near Lake Constance, the Bavarian Alps (Bayerische Alpen) form a stunningly beautiful natural divide along the Austrian border. Ranges further south may be higher, but these mountains shoot up from the foothills so abruptly that the impact is all the more dramatic.
</h2>
</div>
</div>
<!-- Blue Line Text Container -->
<div class = "blue-line-text-container">
<!-- Blue Line Text -->
<div class = "blue-line-text">
<div class = "blue-line-container">
<!-- Blue Line -->
<div class = "blue-line">
</div>
</div>
<!-- Text -->
<div class = "text">
<!-- H3 -->
<h3>
The region is pocked with quaint frescoed villages, spas and health retreats, and possibilities for skiing, snowboarding, hiking, canoeing and paragliding.
</h3>
</div>
</div>
</div>
<!-- Dark Line Container -->
<div class = "dark-line-container">
<!-- Dark Line -->
<div class = "dark-line">
</div>
</div>
<!-- Social Container -->
<div class = "social-container">
<!-- Social -->
<div class = "social">
<!-- Text Container -->
<div class = "text-container">
<!-- Text -->
<div class = "text">
<!-- H3 -->
<h3>
SHARE:
</h3>
</div>
</div>
<!-- Icons Container -->
<div class = "icons-container">
<!-- Icons -->
<div class = "icons">
<!-- Fb -->
<img class = "fb img-fluid" src = "../Images/Footer/Fb.webp" onclick = "window.location = '#';" alt = "Fb">
<!-- Pinterest -->
<img class = "img-fluid pi" src = "../Images/Footer/Pinterest.webp" onclick = "window.location = '#';" alt = "Pinterest">
<!-- Vimeo -->
<img class = "img-fluid vi" src = "../Images/Footer/Vimeo.webp" onclick = "window.location = '#';" alt = "Vimeo">
</div>
</div>
</div>
</div>
<!-- Comments Container -->
<div class = "comments-container">
<!-- Comments -->
<div class = "comments">
<!-- Heading Comments Container -->
<div class = "heading-comments-container">
<!-- Heading Comments -->
<div class = "heading-comments">
<!-- H2 -->
<h2>
Comments
</h2>
</div>
</div>
<!-- Comment Container -->
<div class = "comment-container">
<!-- Comment -->
<div class = "comment">
<!-- Comment Area -->
<div class = "comment-area">
<!-- Img Container -->
<div class = "img-container">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/Comment-1-Alps.webp" alt = "Comment 1, Alps">
</div>
<!-- Name Text Container -->
<div class = "name-text-container">
<!-- Name Text -->
<div class = "name-text">
<!-- Name Container -->
<div class = "name-container">
<!-- Name -->
<div class = "name">
<!-- H2 -->
<h2>
DANIEL SOTHO
</h2>
</div>
</div>
<!-- Text Container -->
<div class = "text-container">
<!-- Text -->
<div class = "text">
<!-- H4 -->
<h4>
I am passionate about nature, climbing and adventures. I like to walk in the nature for the long hours.
</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Comment Container -->
<div class = "comment-container comment-container-bottom">
<!-- Comment -->
<div class = "comment">
<!-- Comment Area -->
<div class = "comment-area">
<!-- Img Container -->
<div class = "img-container">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/Comment-2-Alps.webp" alt = "Comment 2, Alps">
</div>
<!-- Name Text Container -->
<div class = "name-text-container">
<!-- Name Text -->
<div class = "name-text">
<!-- Name Container -->
<div class = "name-container">
<!-- Name -->
<div class = "name">
<!-- H2 -->
<h2>
LAURA FOSTER
</h2>
</div>
</div>
<!-- Text Container -->
<div class = "text-container">
<!-- Text -->
<div class = "text">
<!-- H4 -->
<h4>
I am passionate about outdoor activities. Also, I like to swim in the nature.
</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Caret -->
<div class = "caret">
<!-- Caret Content -->
<div class = "caret-content">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/Expand.webp" alt = "Expand">
</div>
</div>
<!-- Reply -->
<div class = "reply">
<!-- Reply Content -->
<div class = "reply-content">
<!-- Reply Content Leave -->
<div class = "reply-content-leave">
<!-- H2 -->
<h2>
Leave a Reply
</h2>
</div>
<!-- Reply Content Form -->
<div class = "reply-content-form">
<!-- Form -->
<form>
<!-- Name Field -->
<div class = "name-field">
<!-- Name -->
<input class = "form-field name" id = "comment-name" name = "commentName" placeholder = "YOUR NAME..." type = "text" required>
</div>
<!-- Email Field -->
<div class = "email-field">
<!-- Email -->
<input class = "email form-field" id = "comment-email" name = "commentEmail" placeholder = "YOUR EMAIL ADDRESS..." type = "email" required>
</div>
<!-- Message Field -->
<div class = "message-field">
<!-- Message -->
<textarea class = "message" name = "comment-nessage" placeholder = "YOUR MESSAGE..."></textarea>
</div>
<!-- Button Field -->
<div class = "button-field">
<!-- Button Submit -->
<input class = "align-items-center button-submit d-flex justify-content-center m-0 p-0" name = "submit" type = "submit" value = "POST">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Right -->
<div class = "col-12 col-xxl-6 right">
<!-- Search Field -->
<div class = "search-field">
<!-- Form -->
<form>
<!-- Form Search -->
<input class = "form-search" id = "search" name = "formSearch" placeholder = "Search..." type = "text">
</form>
</div>
<!-- Author Container -->
<div class = "author-container">
<!-- Author -->
<div class = "author">
<!-- Author Heading -->
<div class = "author-heading">
<!-- H2 -->
<h2>
Author
</h2>
</div>
<!-- H3 -->
<h3>
Marcelo Consi is passionate about nature, climbing, walking and all outdoor activities. Also, Marcelo has his own travel agency, and one of the best route is tour to the German Alps.
</h3>
</div>
</div>
<!-- Categories Container -->
<div class = "categories-container">
<!-- Categories -->
<div class = "categories">
<!-- Categories Heading -->
<div class = "categories-heading">
<!-- H2 -->
<h2>
Categories
</h2>
</div>
<!-- H3 -->
<h3>
Backpack
</h3>
<!-- Bottom Text -->
<h3 class = "bottom-text">
Hidden Places
</h3>
<!-- Bottom Text -->
<h3 class = "bottom-text">
Mountains
</h3>
<!-- Bottom Text -->
<h3 class = "bottom-text">
Transport
</h3>
<!-- Bottom Text -->
<h3 class = "bottom-text">
Travel
</h3>
<!-- Bottom Text -->
<h3 class = "bottom-text">
Vacation
</h3>
</div>
</div>
<!-- Posts Container -->
<div class = "posts-container">
<!-- Posts -->
<div class = "posts">
<!-- Posts Heading -->
<div class = "posts-heading">
<!-- H2 -->
<h2>
Other Posts
</h2>
</div>
<!-- Posts Info -->
<div class = "posts-info">
<!-- Posts Info Area -->
<div class = "posts-info-area">
<!-- Img Container -->
<div class = "img-container">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/Stonehenge.webp" alt = "Stonehenge">
</div>
<!-- Text -->
<div class = "text">
<!-- H3 -->
<h3>
Visit Stone Age Magnificent Monument
</h3>
<!-- H2 -->
<h2>
July 2023
</h2>
</div>
</div>
<!-- Posts Info Area -->
<div class = "area-margin posts-info-area">
<!-- Img Container -->
<div class = "img-container">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/Taj-Mahal.webp" alt = "Taj Mahal">
</div>
<!-- Text -->
<div class = "text">
<!-- H3 -->
<h3>
Eternal Love in India
</h3>
<!-- H2 -->
<h2>
July 2023
</h2>
</div>
</div>
<!-- Posts Info Area -->
<div class = "area-margin posts-info-area">
<!-- Img Container -->
<div class = "img-container">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/Eiffel-Tower.webp" alt = "Eiffel Tower">
</div>
<!-- Text -->
<div class = "text">
<!-- H3 -->
<h3>
Giant from Steel
</h3>
<!-- H2 -->
<h2>
July 2023
</h2>
</div>
</div>
</div>
</div>
</div>
<!-- Visit Container -->
<div class = "visit-container">
<!-- Visit -->
<div class = "visit">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/Visit-Germany.webp" alt = "Visit Germany">
<!-- Text -->
<div class = "text">
<!-- H2 -->
<h2>
Visit Germany
</h2>
</div>
</div>
</div>
<!-- Instagram Feed -->
<div class = "instagram-feed">
<!-- Instagram Feed Content -->
<div class = "instagram-feed-content">
<!-- Heading -->
<div class = "heading">
<!-- H2 -->
<h2>
Instagram Feed
</h2>
</div>
<!-- Row -->
<div class = "row">
<!-- Img Area -->
<div class = "col-6 col-xxl-3 img-area">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/Instagram-One.webp" alt = "Instagram One">
</div>
<!-- Img Area -->
<div class = "col-6 col-xxl-3 img-area">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/Instagram-Two.webp" alt = "Instagram Two">
</div>
<!-- Img Area -->
<div class = "col-6 col-xxl-3 img-area">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/Instagram-Three.webp" alt = "Instagram Three">
</div>
<!-- Img Area -->
<div class = "col-6 col-xxl-3 img-area">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/Instagram-Four.webp" alt = "Instagram Four">
</div>
<!-- Img Area -->
<div class = "bottom col-3 img-area">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/Instagram-Five.webp" alt = "Instagram Five">
</div>
<!-- Img Area -->
<div class = "bottom col-3 img-area">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/Instagram-Six.webp" alt = "Instagram Six">
</div>
<!-- Img Area -->
<div class = "bottom col-3 img-area">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/Instagram-Seven.webp" alt = "Instagram Seven">
</div>
<!-- Img Area -->
<div class = "bottom col-3 img-area">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/Instagram-Eight.webp" alt = "Instagram Eight">
</div>
</div>
</div>
</div>
<!-- Tags -->
<div class = "tags">
<!-- Tags Content -->
<div class = "tags-content">
<!-- H2 -->
<h2>
Tags
</h2>
<!-- Tags Words -->
<div class = "tags-words">
<!-- Tags Words Top -->
<div class = "tags-words-top">
<!-- H3 -->
<h3>
DESTINATIONS
</h3>
<!-- Tags Words Top Space -->
<h3 class = "tags-words-top-space">
HOTELS
</h3>
<!-- Tags Words Top Space -->
<h3 class = "tags-words-top-space">
MONUMENTS
</h3>
<!-- Tags Words Top Space -->
<h3 class = "tags-words-top-space">
TOURS
</h3>
</div>
<!-- Tags Words Bottom -->
<div class = "tags-words-bottom">
<!-- H3 -->
<h3>
TRAVEL
</h3>
<!-- Tags Words Bottom Space -->
<h3 class = "tags-words-bottom-space">
VISITS
</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
eiffel-tower.html
Eiffel Tower
Code Lines: 224-758
<!-- Blog Inside -->
<div class = "blog-inside">
<!-- Content -->
<div class = "content">
<!-- Row Container -->
<div class = "row-container">
<!-- Row -->
<div class = "row">
<!-- Left -->
<div class = "col-12 col-xxl-6 left">
<!-- Image Author Date Container -->
<div class = "left-content">
<!-- Top Image Author Date -->
<div class = "top-image-author-date">
<!-- Image Container -->
<div class = "top-image-container">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blog/Eiffel-Tower.webp" alt = "Eiffel Tower">
</div>
<!-- Author Container -->
<div class = "author-container">
<!-- Icon Container -->
<div class = "icon-container">
<!-- Icon -->
<div class = "icon">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/Author.webp" alt = "Author">
</div>
</div>
<!-- Name Container -->
<div class = "name-container">
<!-- Name -->
<div class = "name">
<!-- H2 -->
<h2>
BY CHRISTINA MALONE
</h2>
</div>
</div>
</div>
<!-- Date Container -->
<div class = "date-container">
<!-- Icon Container -->
<div class = "icon-container">
<!-- Icon -->
<div class = "icon">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/Calendar.webp" alt = "Calendar">
</div>
</div>
<!-- Text Container -->
<div class = "text-container">
<!-- Text -->
<div class = "text">
<!-- H2 -->
<h2>
JULY 13, 2023
</h2>
</div>
</div>
</div>
</div>
<!-- Heading Container -->
<div class = "heading-container">
<!-- Heading -->
<div class = "heading">
<!-- H2 -->
<h2>
GIANT FROM STEEL
</h2>
</div>
</div>
<!-- Main Text Container -->
<div class = "main-text-container">
<!-- Main Text -->
<div class = "main-text">
<!-- H2 -->
<h2>
Nothing remotely like the Eiffel Tower had ever been built; it was twice as high as the dome of St. Peter’s in Rome or the Great Pyramid of Giza. In contrast to such older monuments, the tower was erected in only about two years (1887–89), with a small labour force, at slight cost. Making use of his advanced knowledge, Eiffel designed a light, airy, but strong structure.
</h2>
</div>
</div>
<!-- Blue Line Text Container -->
<div class = "blue-line-text-container">
<!-- Blue Line Text -->
<div class = "blue-line-text">
<div class = "blue-line-container">
<!-- Blue Line -->
<div class = "blue-line">
</div>
</div>
<!-- Text -->
<div class = "text">
<!-- H3 -->
<h3>
Eiffel Tower, French Tour Eiffel, Parisian landmark that is also a technological masterpiece in building-construction history. Eiffel’s concept of a 300-metre tower built almost entirely of wrought iron.
</h3>
</div>
</div>
</div>
<!-- Dark Line Container -->
<div class = "dark-line-container">
<!-- Dark Line -->
<div class = "dark-line">
</div>
</div>
<!-- Social Container -->
<div class = "social-container">
<!-- Social -->
<div class = "social">
<!-- Text Container -->
<div class = "text-container">
<!-- Text -->
<div class = "text">
<!-- H3 -->
<h3>
SHARE:
</h3>
</div>
</div>
<!-- Icons Container -->
<div class = "icons-container">
<!-- Icons -->
<div class = "icons">
<!-- Fb -->
<img class = "fb img-fluid" src = "../Images/Footer/Fb.webp" onclick = "window.location = '#';" alt = "Fb">
<!-- Pinterest -->
<img class = "img-fluid pi" src = "../Images/Footer/Pinterest.webp" onclick = "window.location = '#';" alt = "Pinterest">
<!-- Vimeo -->
<img class = "img-fluid vi" src = "../Images/Footer/Vimeo.webp" onclick = "window.location = '#';" alt = "Vimeo">
</div>
</div>
</div>
</div>
<!-- Comments Container -->
<div class = "comments-container">
<!-- Comments -->
<div class = "comments">
<!-- Heading Comments Container -->
<div class = "heading-comments-container">
<!-- Heading Comments -->
<div class = "heading-comments">
<!-- H2 -->
<h2>
Comments
</h2>
</div>
</div>
<!-- Comment Container -->
<div class = "comment-container">
<!-- Comment -->
<div class = "comment">
<!-- Comment Area -->
<div class = "comment-area">
<!-- Img Container -->
<div class = "img-container">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/Comment-1-Eiffel-Tower.webp" alt = "Comment 1, Eiffel Tower">
</div>
<!-- Name Text Container -->
<div class = "name-text-container">
<!-- Name Text -->
<div class = "name-text">
<!-- Name Container -->
<div class = "name-container">
<!-- Name -->
<div class = "name">
<!-- H2 -->
<h2>
LANA RAY
</h2>
</div>
</div>
<!-- Text Container -->
<div class = "text-container">
<!-- Text -->
<div class = "text">
<!-- H4 -->
<h4>
I am passionate about nature, history and archaeology. Also, I like to travel to France.
</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Comment Container -->
<div class = "comment-container comment-container-bottom">
<!-- Comment -->
<div class = "comment">
<!-- Comment Area -->
<div class = "comment-area">
<!-- Img Container -->
<div class = "img-container">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/Comment-2-Eiffel-Tower.webp" alt = "Comment 2, Eiffel Tower">
</div>
<!-- Name Text Container -->
<div class = "name-text-container">
<!-- Name Text -->
<div class = "name-text">
<!-- Name Container -->
<div class = "name-container">
<!-- Name -->
<div class = "name">
<!-- H2 -->
<h2>
ALLEN FOSTER
</h2>
</div>
</div>
<!-- Text Container -->
<div class = "text-container">
<!-- Text -->
<div class = "text">
<!-- H4 -->
<h4>
I am also passionate about outdoor activities and history. Additionaly, I like to visit magnificent monuments.
</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Caret -->
<div class = "caret">
<!-- Caret Content -->
<div class = "caret-content">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/Expand.webp" alt = "Expand">
</div>
</div>
<!-- Reply -->
<div class = "reply">
<!-- Reply Content -->
<div class = "reply-content">
<!-- Reply Content Leave -->
<div class = "reply-content-leave">
<!-- H2 -->
<h2>
Leave a Reply
</h2>
</div>
<!-- Reply Content Form -->
<div class = "reply-content-form">
<!-- Form -->
<form>
<!-- Name Field -->
<div class = "name-field">
<!-- Name -->
<input class = "form-field name" id = "comment-name" name = "commentName" placeholder = "YOUR NAME..." type = "text" required>
</div>
<!-- Email Field -->
<div class = "email-field">
<!-- Email -->
<input class = "email form-field" id = "comment-email" name = "commentEmail" placeholder = "YOUR EMAIL ADDRESS..." type = "email" required>
</div>
<!-- Message Field -->
<div class = "message-field">
<!-- Message -->
<textarea class = "message" name = "comment-nessage" placeholder = "YOUR MESSAGE..."></textarea>
</div>
<!-- Button Field -->
<div class = "button-field">
<!-- Button Submit -->
<input class = "align-items-center button-submit d-flex justify-content-center m-0 p-0" name = "submit" type = "submit" value = "POST">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Right -->
<div class = "col-12 col-xxl-6 right">
<!-- Search Field -->
<div class = "search-field">
<!-- Form -->
<form>
<!-- Form Search -->
<input class = "form-search" id = "search" name = "formSearch" placeholder = "Search..." type = "text">
</form>
</div>
<!-- Author Container -->
<div class = "author-container">
<!-- Author -->
<div class = "author">
<!-- Author Heading -->
<div class = "author-heading">
<!-- H2 -->
<h2>
Author
</h2>
</div>
<!-- H3 -->
<h3>
Allen Foster is passionate about history, archaeology and travelling. Also, Allen has his own travel agency, and one of the best route is tour to the France - to the giant from steel - Eiffel Tower.
</h3>
</div>
</div>
<!-- Categories Container -->
<div class = "categories-container">
<!-- Categories -->
<div class = "categories">
<!-- Categories Heading -->
<div class = "categories-heading">
<!-- H2 -->
<h2>
Categories
</h2>
</div>
<!-- H3 -->
<h3>
Backpack
</h3>
<!-- Bottom Text -->
<h3 class = "bottom-text">
Hidden Places
</h3>
<!-- Bottom Text -->
<h3 class = "bottom-text">
Mountains
</h3>
<!-- Bottom Text -->
<h3 class = "bottom-text">
Transport
</h3>
<!-- Bottom Text -->
<h3 class = "bottom-text">
Travel
</h3>
<!-- Bottom Text -->
<h3 class = "bottom-text">
Vacation
</h3>
</div>
</div>
<!-- Posts Container -->
<div class = "posts-container">
<!-- Posts -->
<div class = "posts">
<!-- Posts Heading -->
<div class = "posts-heading">
<!-- H2 -->
<h2>
Other Posts
</h2>
</div>
<!-- Posts Info -->
<div class = "posts-info">
<!-- Posts Info Area -->
<div class = "posts-info-area">
<!-- Img Container -->
<div class = "img-container">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/German-Alps.webp" alt = "German Alps">
</div>
<!-- Text -->
<div class = "text">
<!-- H3 -->
<h3>
Find your Peace in German Alps
</h3>
<!-- H2 -->
<h2>
May 2023
</h2>
</div>
</div>
<!-- Posts Info Area -->
<div class = "area-margin posts-info-area">
<!-- Img Container -->
<div class = "img-container">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/Stonehenge.webp" alt = "Stonehenge">
</div>
<!-- Text -->
<div class = "text">
<!-- H3 -->
<h3>
Visit Stone Age Magnificent Monument
</h3>
<!-- H2 -->
<h2>
July 2023
</h2>
</div>
</div>
<!-- Posts Info Area -->
<div class = "area-margin posts-info-area">
<!-- Img Container -->
<div class = "img-container">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/Taj-Mahal.webp" alt = "Taj Mahal">
</div>
<!-- Text -->
<div class = "text">
<!-- H3 -->
<h3>
Eternal Love in India
</h3>
<!-- H2 -->
<h2>
July 2023
</h2>
</div>
</div>
</div>
</div>
</div>
<!-- Visit Container -->
<div class = "visit-container">
<!-- Visit -->
<div class = "visit">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/Visit-France.webp" alt = "Visit France">
<!-- Text -->
<div class = "text">
<!-- H2 -->
<h2>
Visit France
</h2>
</div>
</div>
</div>
<!-- Instagram Feed -->
<div class = "instagram-feed">
<!-- Instagram Feed Content -->
<div class = "instagram-feed-content">
<!-- Heading -->
<div class = "heading">
<!-- H2 -->
<h2>
Instagram Feed
</h2>
</div>
<!-- Row -->
<div class = "row">
<!-- Img Area -->
<div class = "col-6 col-xxl-3 img-area">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/Instagram-One.webp" alt = "Instagram One">
</div>
<!-- Img Area -->
<div class = "col-6 col-xxl-3 img-area">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/Instagram-Two.webp" alt = "Instagram Two">
</div>
<!-- Img Area -->
<div class = "col-6 col-xxl-3 img-area">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/Instagram-Three.webp" alt = "Instagram Three">
</div>
<!-- Img Area -->
<div class = "col-6 col-xxl-3 img-area">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/Instagram-Four.webp" alt = "Instagram Four">
</div>
<!-- Img Area -->
<div class = "bottom col-3 img-area">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/Instagram-Five.webp" alt = "Instagram Five">
</div>
<!-- Img Area -->
<div class = "bottom col-3 img-area">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/Instagram-Six.webp" alt = "Instagram Six">
</div>
<!-- Img Area -->
<div class = "bottom col-3 img-area">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/Instagram-Seven.webp" alt = "Instagram Seven">
</div>
<!-- Img Area -->
<div class = "bottom col-3 img-area">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/Instagram-Eight.webp" alt = "Instagram Eight">
</div>
</div>
</div>
</div>
<!-- Tags -->
<div class = "tags">
<!-- Tags Content -->
<div class = "tags-content">
<!-- H2 -->
<h2>
Tags
</h2>
<!-- Tags Words -->
<div class = "tags-words">
<!-- Tags Words Top -->
<div class = "tags-words-top">
<!-- H3 -->
<h3>
DESTINATIONS
</h3>
<!-- Tags Words Top Space -->
<h3 class = "tags-words-top-space">
HOTELS
</h3>
<!-- Tags Words Top Space -->
<h3 class = "tags-words-top-space">
MONUMENTS
</h3>
<!-- Tags Words Top Space -->
<h3 class = "tags-words-top-space">
TOURS
</h3>
</div>
<!-- Tags Words Bottom -->
<div class = "tags-words-bottom">
<!-- H3 -->
<h3>
TRAVEL
</h3>
<!-- Tags Words Bottom Space -->
<h3 class = "tags-words-bottom-space">
VISITS
</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
stonehenge.html
Stonehenge
Code Lines: 224-758
<!-- Blog Inside -->
<div class = "blog-inside">
<!-- Content -->
<div class = "content">
<!-- Row Container -->
<div class = "row-container">
<!-- Row -->
<div class = "row">
<!-- Left -->
<div class = "col-12 col-xxl-6 left">
<!-- Image Author Date Container -->
<div class = "left-content">
<!-- Top Image Author Date -->
<div class = "top-image-author-date">
<!-- Image Container -->
<div class = "top-image-container">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blog/Stonehenge.webp" alt = "Stonehenge">
</div>
<!-- Author Container -->
<div class = "author-container">
<!-- Icon Container -->
<div class = "icon-container">
<!-- Icon -->
<div class = "icon">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/Author.webp" alt = "Author">
</div>
</div>
<!-- Name Container -->
<div class = "name-container">
<!-- Name -->
<div class = "name">
<!-- H2 -->
<h2>
BY JENNIFER CARR
</h2>
</div>
</div>
</div>
<!-- Date Container -->
<div class = "date-container">
<!-- Icon Container -->
<div class = "icon-container">
<!-- Icon -->
<div class = "icon">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/Calendar.webp" alt = "Calendar">
</div>
</div>
<!-- Text Container -->
<div class = "text-container">
<!-- Text -->
<div class = "text">
<!-- H2 -->
<h2>
JULY 13, 2023
</h2>
</div>
</div>
</div>
</div>
<!-- Heading Container -->
<div class = "heading-container">
<!-- Heading -->
<div class = "heading">
<!-- H2 -->
<h2>
VISIT STONE AGE MAGNIFICENT MONUMENT
</h2>
</div>
</div>
<!-- Main Text Container -->
<div class = "main-text-container">
<!-- Main Text -->
<div class = "main-text">
<!-- H2 -->
<h2>
Stonehenge, prehistoric stone circle monument, cemetery, and archaeological site located on Salisbury Plain, about 8 miles (13 km) north of Salisbury, Wiltshire, England. Though there is no definite evidence as to the intended purpose of Stonehenge, it was presumably a religious site and an expression of the power and wealth of the chieftains, aristocrats, and priests.
</h2>
</div>
</div>
<!-- Blue Line Text Container -->
<div class = "blue-line-text-container">
<!-- Blue Line Text -->
<div class = "blue-line-text">
<div class = "blue-line-container">
<!-- Blue Line -->
<div class = "blue-line">
</div>
</div>
<!-- Text -->
<div class = "text">
<!-- H3 -->
<h3>
It was aligned on the Sun and possibly used for observing the Sun and Moon and working out the farming calendar.
</h3>
</div>
</div>
</div>
<!-- Dark Line Container -->
<div class = "dark-line-container">
<!-- Dark Line -->
<div class = "dark-line">
</div>
</div>
<!-- Social Container -->
<div class = "social-container">
<!-- Social -->
<div class = "social">
<!-- Text Container -->
<div class = "text-container">
<!-- Text -->
<div class = "text">
<!-- H3 -->
<h3>
SHARE:
</h3>
</div>
</div>
<!-- Icons Container -->
<div class = "icons-container">
<!-- Icons -->
<div class = "icons">
<!-- Fb -->
<img class = "fb img-fluid" src = "../Images/Footer/Fb.webp" onclick = "window.location = '#';" alt = "Fb">
<!-- Pinterest -->
<img class = "img-fluid pi" src = "../Images/Footer/Pinterest.webp" onclick = "window.location = '#';" alt = "Pinterest">
<!-- Vimeo -->
<img class = "img-fluid vi" src = "../Images/Footer/Vimeo.webp" onclick = "window.location = '#';" alt = "Vimeo">
</div>
</div>
</div>
</div>
<!-- Comments Container -->
<div class = "comments-container">
<!-- Comments -->
<div class = "comments">
<!-- Heading Comments Container -->
<div class = "heading-comments-container">
<!-- Heading Comments -->
<div class = "heading-comments">
<!-- H2 -->
<h2>
Comments
</h2>
</div>
</div>
<!-- Comment Container -->
<div class = "comment-container">
<!-- Comment -->
<div class = "comment">
<!-- Comment Area -->
<div class = "comment-area">
<!-- Img Container -->
<div class = "img-container">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/Comment-1-Stonehenge.webp" alt = "Comment 1, Stonehenge">
</div>
<!-- Name Text Container -->
<div class = "name-text-container">
<!-- Name Text -->
<div class = "name-text">
<!-- Name Container -->
<div class = "name-container">
<!-- Name -->
<div class = "name">
<!-- H2 -->
<h2>
GABRIEL FIANO
</h2>
</div>
</div>
<!-- Text Container -->
<div class = "text-container">
<!-- Text -->
<div class = "text">
<!-- H4 -->
<h4>
I am passionate about nature, history and archaeology. Also, I like to walk in the nature for the long hours.
</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Comment Container -->
<div class = "comment-container comment-container-bottom">
<!-- Comment -->
<div class = "comment">
<!-- Comment Area -->
<div class = "comment-area">
<!-- Img Container -->
<div class = "img-container">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/Comment-2-Stonehenge.webp" alt = "Comment 2, Stonehenge">
</div>
<!-- Name Text Container -->
<div class = "name-text-container">
<!-- Name Text -->
<div class = "name-text">
<!-- Name Container -->
<div class = "name-container">
<!-- Name -->
<div class = "name">
<!-- H2 -->
<h2>
SOFIA CUSCO
</h2>
</div>
</div>
<!-- Text Container -->
<div class = "text-container">
<!-- Text -->
<div class = "text">
<!-- H4 -->
<h4>
I am also passionate about outdoor activities. Additionaly, I like to swim in the nature.
</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Caret -->
<div class = "caret">
<!-- Caret Content -->
<div class = "caret-content">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/Expand.webp" alt = "Expand">
</div>
</div>
<!-- Reply -->
<div class = "reply">
<!-- Reply Content -->
<div class = "reply-content">
<!-- Reply Content Leave -->
<div class = "reply-content-leave">
<!-- H2 -->
<h2>
Leave a Reply
</h2>
</div>
<!-- Reply Content Form -->
<div class = "reply-content-form">
<!-- Form -->
<form>
<!-- Name Field -->
<div class = "name-field">
<!-- Name -->
<input class = "form-field name" id = "comment-name" name = "commentName" placeholder = "YOUR NAME..." type = "text" required>
</div>
<!-- Email Field -->
<div class = "email-field">
<!-- Email -->
<input class = "email form-field" id = "comment-email" name = "commentEmail" placeholder = "YOUR EMAIL ADDRESS..." type = "email" required>
</div>
<!-- Message Field -->
<div class = "message-field">
<!-- Message -->
<textarea class = "message" name = "comment-nessage" placeholder = "YOUR MESSAGE..."></textarea>
</div>
<!-- Button Field -->
<div class = "button-field">
<!-- Button Submit -->
<input class = "align-items-center button-submit d-flex justify-content-center m-0 p-0" name = "submit" type = "submit" value = "POST">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Right -->
<div class = "col-12 col-xxl-6 right">
<!-- Search Field -->
<div class = "search-field">
<!-- Form -->
<form>
<!-- Form Search -->
<input class = "form-search" id = "search" name = "formSearch" placeholder = "Search..." type = "text">
</form>
</div>
<!-- Author Container -->
<div class = "author-container">
<!-- Author -->
<div class = "author">
<!-- Author Heading -->
<div class = "author-heading">
<!-- H2 -->
<h2>
Author
</h2>
</div>
<!-- H3 -->
<h3>
Jennifer Carr is passionate about history, archaeology and travelling. Also, Jennifer has her own travel agency, and one of the best route is tour to the England - to the stone age area - Stonehenge.
</h3>
</div>
</div>
<!-- Categories Container -->
<div class = "categories-container">
<!-- Categories -->
<div class = "categories">
<!-- Categories Heading -->
<div class = "categories-heading">
<!-- H2 -->
<h2>
Categories
</h2>
</div>
<!-- H3 -->
<h3>
Backpack
</h3>
<!-- Bottom Text -->
<h3 class = "bottom-text">
Hidden Places
</h3>
<!-- Bottom Text -->
<h3 class = "bottom-text">
Mountains
</h3>
<!-- Bottom Text -->
<h3 class = "bottom-text">
Transport
</h3>
<!-- Bottom Text -->
<h3 class = "bottom-text">
Travel
</h3>
<!-- Bottom Text -->
<h3 class = "bottom-text">
Vacation
</h3>
</div>
</div>
<!-- Posts Container -->
<div class = "posts-container">
<!-- Posts -->
<div class = "posts">
<!-- Posts Heading -->
<div class = "posts-heading">
<!-- H2 -->
<h2>
Other Posts
</h2>
</div>
<!-- Posts Info -->
<div class = "posts-info">
<!-- Posts Info Area -->
<div class = "posts-info-area">
<!-- Img Container -->
<div class = "img-container">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/German-Alps.webp" alt = "German Alps">
</div>
<!-- Text -->
<div class = "text">
<!-- H3 -->
<h3>
Find your Peace in German Alps
</h3>
<!-- H2 -->
<h2>
May 2023
</h2>
</div>
</div>
<!-- Posts Info Area -->
<div class = "area-margin posts-info-area">
<!-- Img Container -->
<div class = "img-container">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/Taj-Mahal.webp" alt = "Taj Mahal">
</div>
<!-- Text -->
<div class = "text">
<!-- H3 -->
<h3>
Eternal Love in India
</h3>
<!-- H2 -->
<h2>
July 2023
</h2>
</div>
</div>
<!-- Posts Info Area -->
<div class = "area-margin posts-info-area">
<!-- Img Container -->
<div class = "img-container">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/Eiffel-Tower.webp" alt = "Eiffel Tower">
</div>
<!-- Text -->
<div class = "text">
<!-- H3 -->
<h3>
Giant from Steel
</h3>
<!-- H2 -->
<h2>
July 2023
</h2>
</div>
</div>
</div>
</div>
</div>
<!-- Visit Container -->
<div class = "visit-container">
<!-- Visit -->
<div class = "visit">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/Visit-UK.webp" alt = "Visit UK">
<!-- Text -->
<div class = "text">
<!-- H2 -->
<h2>
Visit UK
</h2>
</div>
</div>
</div>
<!-- Instagram Feed -->
<div class = "instagram-feed">
<!-- Instagram Feed Content -->
<div class = "instagram-feed-content">
<!-- Heading -->
<div class = "heading">
<!-- H2 -->
<h2>
Instagram Feed
</h2>
</div>
<!-- Row -->
<div class = "row">
<!-- Img Area -->
<div class = "col-6 col-xxl-3 img-area">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/Instagram-One.webp" alt = "Instagram One">
</div>
<!-- Img Area -->
<div class = "col-6 col-xxl-3 img-area">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/Instagram-Two.webp" alt = "Instagram Two">
</div>
<!-- Img Area -->
<div class = "col-6 col-xxl-3 img-area">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/Instagram-Three.webp" alt = "Instagram Three">
</div>
<!-- Img Area -->
<div class = "col-6 col-xxl-3 img-area">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/Instagram-Four.webp" alt = "Instagram Four">
</div>
<!-- Img Area -->
<div class = "bottom col-3 img-area">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/Instagram-Five.webp" alt = "Instagram Five">
</div>
<!-- Img Area -->
<div class = "bottom col-3 img-area">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/Instagram-Six.webp" alt = "Instagram Six">
</div>
<!-- Img Area -->
<div class = "bottom col-3 img-area">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/Instagram-Seven.webp" alt = "Instagram Seven">
</div>
<!-- Img Area -->
<div class = "bottom col-3 img-area">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/Instagram-Eight.webp" alt = "Instagram Eight">
</div>
</div>
</div>
</div>
<!-- Tags -->
<div class = "tags">
<!-- Tags Content -->
<div class = "tags-content">
<!-- H2 -->
<h2>
Tags
</h2>
<!-- Tags Words -->
<div class = "tags-words">
<!-- Tags Words Top -->
<div class = "tags-words-top">
<!-- H3 -->
<h3>
DESTINATIONS
</h3>
<!-- Tags Words Top Space -->
<h3 class = "tags-words-top-space">
HOTELS
</h3>
<!-- Tags Words Top Space -->
<h3 class = "tags-words-top-space">
MONUMENTS
</h3>
<!-- Tags Words Top Space -->
<h3 class = "tags-words-top-space">
TOURS
</h3>
</div>
<!-- Tags Words Bottom -->
<div class = "tags-words-bottom">
<!-- H3 -->
<h3>
TRAVEL
</h3>
<!-- Tags Words Bottom Space -->
<h3 class = "tags-words-bottom-space">
VISITS
</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
taj-mahal.html
Taj Mahal
Code Lines: 224-758
<!-- Blog Inside -->
<div class = "blog-inside">
<!-- Content -->
<div class = "content">
<!-- Row Container -->
<div class = "row-container">
<!-- Row -->
<div class = "row">
<!-- Left -->
<div class = "col-12 col-xxl-6 left">
<!-- Image Author Date Container -->
<div class = "left-content">
<!-- Top Image Author Date -->
<div class = "top-image-author-date">
<!-- Image Container -->
<div class = "top-image-container">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blog/Taj-Mahal.webp" alt = "Taj Mahal">
</div>
<!-- Author Container -->
<div class = "author-container">
<!-- Icon Container -->
<div class = "icon-container">
<!-- Icon -->
<div class = "icon">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/Author.webp" alt = "Author">
</div>
</div>
<!-- Name Container -->
<div class = "name-container">
<!-- Name -->
<div class = "name">
<!-- H2 -->
<h2>
BY DAVID WEBBER
</h2>
</div>
</div>
</div>
<!-- Date Container -->
<div class = "date-container">
<!-- Icon Container -->
<div class = "icon-container">
<!-- Icon -->
<div class = "icon">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/Calendar.webp" alt = "Calendar">
</div>
</div>
<!-- Text Container -->
<div class = "text-container">
<!-- Text -->
<div class = "text">
<!-- H2 -->
<h2>
JULY 13, 2023
</h2>
</div>
</div>
</div>
</div>
<!-- Heading Container -->
<div class = "heading-container">
<!-- Heading -->
<div class = "heading">
<!-- H2 -->
<h2>
ETERNAL LOVE IN INDIA
</h2>
</div>
</div>
<!-- Main Text Container -->
<div class = "main-text-container">
<!-- Main Text -->
<div class = "main-text">
<!-- H2 -->
<h2>
Taj Mahal, also spelled Tadj Mahall, mausoleum complex in Agra, western Uttar Pradesh state, northern India. The Taj Mahal was built by the Mughal emperor Shah Jahān (reigned 1628–58) to immortalize his wife Mumtaz Mahal (“Chosen One of the Palace”), who died in childbirth in 1631, having been the emperor’s inseparable companion since their marriage in 1612.
</h2>
</div>
</div>
<!-- Blue Line Text Container -->
<div class = "blue-line-text-container">
<!-- Blue Line Text -->
<div class = "blue-line-text">
<div class = "blue-line-container">
<!-- Blue Line -->
<div class = "blue-line">
</div>
</div>
<!-- Text -->
<div class = "text">
<!-- H3 -->
<h3>
India’s most famous and widely recognized building, it is situated in the eastern part of the city on the southern (right) bank of the Yamuna (Jumna) River.
</h3>
</div>
</div>
</div>
<!-- Dark Line Container -->
<div class = "dark-line-container">
<!-- Dark Line -->
<div class = "dark-line">
</div>
</div>
<!-- Social Container -->
<div class = "social-container">
<!-- Social -->
<div class = "social">
<!-- Text Container -->
<div class = "text-container">
<!-- Text -->
<div class = "text">
<!-- H3 -->
<h3>
SHARE:
</h3>
</div>
</div>
<!-- Icons Container -->
<div class = "icons-container">
<!-- Icons -->
<div class = "icons">
<!-- Fb -->
<img class = "fb img-fluid" src = "../Images/Footer/Fb.webp" onclick = "window.location = '#';" alt = "Fb">
<!-- Pinterest -->
<img class = "img-fluid pi" src = "../Images/Footer/Pinterest.webp" onclick = "window.location = '#';" alt = "Pinterest">
<!-- Vimeo -->
<img class = "img-fluid vi" src = "../Images/Footer/Vimeo.webp" onclick = "window.location = '#';" alt = "Vimeo">
</div>
</div>
</div>
</div>
<!-- Comments Container -->
<div class = "comments-container">
<!-- Comments -->
<div class = "comments">
<!-- Heading Comments Container -->
<div class = "heading-comments-container">
<!-- Heading Comments -->
<div class = "heading-comments">
<!-- H2 -->
<h2>
Comments
</h2>
</div>
</div>
<!-- Comment Container -->
<div class = "comment-container">
<!-- Comment -->
<div class = "comment">
<!-- Comment Area -->
<div class = "comment-area">
<!-- Img Container -->
<div class = "img-container">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/Comment-1-Taj.webp" alt = "Comment 1, Taj">
</div>
<!-- Name Text Container -->
<div class = "name-text-container">
<!-- Name Text -->
<div class = "name-text">
<!-- Name Container -->
<div class = "name-container">
<!-- Name -->
<div class = "name">
<!-- H2 -->
<h2>
CHRIS FORD
</h2>
</div>
</div>
<!-- Text Container -->
<div class = "text-container">
<!-- Text -->
<div class = "text">
<!-- H4 -->
<h4>
I am passionate about nature, history and archaeology. Also, I like to travel to India.
</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Comment Container -->
<div class = "comment-container comment-container-bottom">
<!-- Comment -->
<div class = "comment">
<!-- Comment Area -->
<div class = "comment-area">
<!-- Img Container -->
<div class = "img-container">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/Comment-2-Taj.webp" alt = "Comment 2, Taj">
</div>
<!-- Name Text Container -->
<div class = "name-text-container">
<!-- Name Text -->
<div class = "name-text">
<!-- Name Container -->
<div class = "name-container">
<!-- Name -->
<div class = "name">
<!-- H2 -->
<h2>
DIANA LOPEZ
</h2>
</div>
</div>
<!-- Text Container -->
<div class = "text-container">
<!-- Text -->
<div class = "text">
<!-- H4 -->
<h4>
I am also passionate about outdoor activities. Additionaly, I like to visit magnificent monuments.
</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Caret -->
<div class = "caret">
<!-- Caret Content -->
<div class = "caret-content">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/Expand.webp" alt = "Expand">
</div>
</div>
<!-- Reply -->
<div class = "reply">
<!-- Reply Content -->
<div class = "reply-content">
<!-- Reply Content Leave -->
<div class = "reply-content-leave">
<!-- H2 -->
<h2>
Leave a Reply
</h2>
</div>
<!-- Reply Content Form -->
<div class = "reply-content-form">
<!-- Form -->
<form>
<!-- Name Field -->
<div class = "name-field">
<!-- Name -->
<input class = "form-field name" id = "comment-name" name = "commentName" placeholder = "YOUR NAME..." type = "text" required>
</div>
<!-- Email Field -->
<div class = "email-field">
<!-- Email -->
<input class = "email form-field" id = "comment-email" name = "commentEmail" placeholder = "YOUR EMAIL ADDRESS..." type = "email" required>
</div>
<!-- Message Field -->
<div class = "message-field">
<!-- Message -->
<textarea class = "message" name = "comment-nessage" placeholder = "YOUR MESSAGE..."></textarea>
</div>
<!-- Button Field -->
<div class = "button-field">
<!-- Button Submit -->
<input class = "align-items-center button-submit d-flex justify-content-center m-0 p-0" name = "submit" type = "submit" value = "POST">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Right -->
<div class = "col-12 col-xxl-6 right">
<!-- Search Field -->
<div class = "search-field">
<!-- Form -->
<form>
<!-- Form Search -->
<input class = "form-search" id = "search" name = "formSearch" placeholder = "Search..." type = "text">
</form>
</div>
<!-- Author Container -->
<div class = "author-container">
<!-- Author -->
<div class = "author">
<!-- Author Heading -->
<div class = "author-heading">
<!-- H2 -->
<h2>
Author
</h2>
</div>
<!-- H3 -->
<h3>
David Webber is passionate about history, archaeology and travelling. Also, David has his own travel agency, and one of the best route is tour to the India - to the monument of the eternal love - Taj Mahal.
</h3>
</div>
</div>
<!-- Categories Container -->
<div class = "categories-container">
<!-- Categories -->
<div class = "categories">
<!-- Categories Heading -->
<div class = "categories-heading">
<!-- H2 -->
<h2>
Categories
</h2>
</div>
<!-- H3 -->
<h3>
Backpack
</h3>
<!-- Bottom Text -->
<h3 class = "bottom-text">
Hidden Places
</h3>
<!-- Bottom Text -->
<h3 class = "bottom-text">
Mountains
</h3>
<!-- Bottom Text -->
<h3 class = "bottom-text">
Transport
</h3>
<!-- Bottom Text -->
<h3 class = "bottom-text">
Travel
</h3>
<!-- Bottom Text -->
<h3 class = "bottom-text">
Vacation
</h3>
</div>
</div>
<!-- Posts Container -->
<div class = "posts-container">
<!-- Posts -->
<div class = "posts">
<!-- Posts Heading -->
<div class = "posts-heading">
<!-- H2 -->
<h2>
Other Posts
</h2>
</div>
<!-- Posts Info -->
<div class = "posts-info">
<!-- Posts Info Area -->
<div class = "posts-info-area">
<!-- Img Container -->
<div class = "img-container">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/German-Alps.webp" alt = "German Alps">
</div>
<!-- Text -->
<div class = "text">
<!-- H3 -->
<h3>
Find your Peace in German Alps
</h3>
<!-- H2 -->
<h2>
May 2023
</h2>
</div>
</div>
<!-- Posts Info Area -->
<div class = "area-margin posts-info-area">
<!-- Img Container -->
<div class = "img-container">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/Stonehenge.webp" alt = "Stonehenge">
</div>
<!-- Text -->
<div class = "text">
<!-- H3 -->
<h3>
Visit Stone Age Magnificent Monument
</h3>
<!-- H2 -->
<h2>
July 2023
</h2>
</div>
</div>
<!-- Posts Info Area -->
<div class = "area-margin posts-info-area">
<!-- Img Container -->
<div class = "img-container">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/Eiffel-Tower.webp" alt = "Eiffel Tower">
</div>
<!-- Text -->
<div class = "text">
<!-- H3 -->
<h3>
Giant from Steel
</h3>
<!-- H2 -->
<h2>
July 2023
</h2>
</div>
</div>
</div>
</div>
</div>
<!-- Visit Container -->
<div class = "visit-container">
<!-- Visit -->
<div class = "visit">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/Visit-India.webp" alt = "Visit India">
<!-- Text -->
<div class = "text">
<!-- H2 -->
<h2>
Visit India
</h2>
</div>
</div>
</div>
<!-- Instagram Feed -->
<div class = "instagram-feed">
<!-- Instagram Feed Content -->
<div class = "instagram-feed-content">
<!-- Heading -->
<div class = "heading">
<!-- H2 -->
<h2>
Instagram Feed
</h2>
</div>
<!-- Row -->
<div class = "row">
<!-- Img Area -->
<div class = "col-6 col-xxl-3 img-area">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/Instagram-One.webp" alt = "Instagram One">
</div>
<!-- Img Area -->
<div class = "col-6 col-xxl-3 img-area">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/Instagram-Two.webp" alt = "Instagram Two">
</div>
<!-- Img Area -->
<div class = "col-6 col-xxl-3 img-area">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/Instagram-Three.webp" alt = "Instagram Three">
</div>
<!-- Img Area -->
<div class = "col-6 col-xxl-3 img-area">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/Instagram-Four.webp" alt = "Instagram Four">
</div>
<!-- Img Area -->
<div class = "bottom col-3 img-area">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/Instagram-Five.webp" alt = "Instagram Five">
</div>
<!-- Img Area -->
<div class = "bottom col-3 img-area">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/Instagram-Six.webp" alt = "Instagram Six">
</div>
<!-- Img Area -->
<div class = "bottom col-3 img-area">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/Instagram-Seven.webp" alt = "Instagram Seven">
</div>
<!-- Img Area -->
<div class = "bottom col-3 img-area">
<!-- Img -->
<img class = "img-fluid" src = "../Images/Blogs-Inside/Instagram-Eight.webp" alt = "Instagram Eight">
</div>
</div>
</div>
</div>
<!-- Tags -->
<div class = "tags">
<!-- Tags Content -->
<div class = "tags-content">
<!-- H2 -->
<h2>
Tags
</h2>
<!-- Tags Words -->
<div class = "tags-words">
<!-- Tags Words Top -->
<div class = "tags-words-top">
<!-- H3 -->
<h3>
DESTINATIONS
</h3>
<!-- Tags Words Top Space -->
<h3 class = "tags-words-top-space">
HOTELS
</h3>
<!-- Tags Words Top Space -->
<h3 class = "tags-words-top-space">
MONUMENTS
</h3>
<!-- Tags Words Top Space -->
<h3 class = "tags-words-top-space">
TOURS
</h3>
</div>
<!-- Tags Words Bottom -->
<div class = "tags-words-bottom">
<!-- H3 -->
<h3>
TRAVEL
</h3>
<!-- Tags Words Bottom Space -->
<h3 class = "tags-words-bottom-space">
VISITS
</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
SCSS
If you need to change styling of this web template, you use SCSS files. In this documentation you can find more about colors, fonts, mixins, variables, imports and containers, but if you need to make more serious changes, you are free to ask for help and support. Also, there are comments within the SCSS code for easier orientation. Notice: code section is without media queries. For changes within media queries part, be free to ask for support.
Layout - Smooth
loader.scss
Loader
Code Lines: 16-73
// Loader
.loader
{
align-items:center;
background:$bg;
display:flex;
height:100vh;
justify-content:center;
width:100vw;
// H2
h2
{
display:none;
}
// Shape
.shape
{
animation:move 0.5s linear infinite alternate-reverse;
border:2px solid $cream-light;
border-radius:50% 50% 0% 50%;
height:80px;
position:relative;
transform:rotate(45deg);
width:80px;
}
// Shape - Before
.shape::before
{
animation:rotate 1s linear infinite;
border:2px solid transparent;
border-bottom-color:$cream-light;
border-radius:50%;
border-top-color:$cream-light;
content:"";
height:55%;
left:50%;
position:absolute;
top:50%;
transform:translate(-50%, -50%);
width:55%;
}
}
// Keyframes - Move
@keyframes move
{
to
{
transform:translateY(15px) rotate(45deg);
}
}
// Keyframes - Rotate
@keyframes rotate
{
to
{
transform:translate(-50%, -50%) rotate(360deg);
}
}
header.scss
Header
Code Lines: 68-497
// Header
header
{
background:url("../../../Images/Header/Background.webp");
background-position:center;
background-repeat:no-repeat;
background-size:cover;
height:100vh;
margin:0;
-moz-background-size:cover;
-o-background-size:cover;
padding:0;
-webkit-background-size:cover;
width:100%;
// Header Container
.header-container
{
height:100%;
margin:0;
padding:0;
width:100%;
// Elements Container
.elements-container
{
height:100%;
margin:0;
padding:0;
// Info Container
.info-container
{
margin:0;
padding:0;
position:relative;
left:0;
z-index:2;
// Info
.info
{
left:5%;
margin:0;
padding:0;
position:relative;
// Activity
.activity
{
color:$bg;
display:inline-block;
font-family:cinzel-regular;
font-size:59px;
}
.animate__animated
{
--animate-duration:2s;
}
// Button Area
.button-area
{
margin:42px 0 0 0;
// Button
.button
{
background:$header-button-background;
border-radius:8px;
box-shadow:2px 2px 2px 1px $header-button-shadow;
cursor:pointer;
height:130px;
width:20%;
&:hover
{
background:darken($header-button-hover, 1.5%);
border:1px solid rgba(#000, .05);
box-shadow:1px 1px 2px rgba(#fff, .2);
color:lighten($header-button-hover, 18%);
text-decoration:none;
text-shadow:-1px -1px 0 darken($header-button-hover, 9.5%);
transition:all 250ms linear;
}
// Button Content
.button-content
{
display:inline-block;
height:100%;
width:100%;
// Button Left
.button-left
{
align-items:center;
display:flex;
height:100%;
position:relative;
width:75%;
// Button Left Text
.button-left-text
{
align-items:center;
display:flex;
height:100%;
justify-content:center;
width:calc(100% - 30px);
// Button Text
.button-text
{
color:$cream-light;
font-size:27px;
margin:0;
padding:0;
position:relative;
top:0;
}
}
// Button Triangle
.button-triangle
{
border-bottom:65px solid transparent;
border-right:30px solid $header-button-right-background;
border-top:65px solid transparent;
height:0;
position:absolute;
right:0;
top:0;
width:0;
}
}
// Button Right
.button-right
{
background:$header-button-right-background;
border-bottom-right-radius:8px;
border-top-right-radius:8px;
display:flex;
height:100%;
justify-content:center;
width:25%;
// Icon Container
.icon-container
{
display:flex;
justify-content:end;
position:relative;
// Arrow
.arrow
{
color:$cream-light;
height:auto;
width:20px;
}
}
}
}
}
}
// Location
.location
{
color:$bg;
}
// Text
.text
{
margin:100px 0 0 0;
width:27%;
// H2
h2
{
bottom:0;
color:$bg;
font-family:quicksand-light;
font-size:27px;
}
}
}
}
}
// Large Img
.large-img
{
// Img
img
{
border-radius:7px;
box-shadow:2px 2px 2px 1px $header-img-shadow;
height:auto;
position:absolute;
right:5%;
top:50%;
transform:translate(-0%, -50%);
width:63%;
}
}
// Location Small
.location-small
{
align-items:center;
display:flex;
height:100%;
justify-content:center;
position:absolute;
right:0;
top:0;
width:5%;
// H2
h2
{
bottom:0;
color:$cream-light;
font-size:32px;
position:relative;
right:5px;
text-align:center;
writing-mode:vertical-rl;
}
}
// Social
.social
{
display:none;
margin:0;
padding:0;
position:absolute;
height:100%;
right:0;
top:0;
width:5%;
// Icons Container
.icons-container
{
display:flex;
height:100%;
justify-content:center;
margin:0;
padding:0;
position:relative;
width:100%;
// Icons
.icons
{
bottom:8%;
margin:0;
padding:0;
position:absolute;
// Img
img
{
cursor:pointer;
display:block;
height:auto;
margin-bottom:21px;
width:18px;
}
// Vimeo Icon
.vimeo-icon
{
margin-bottom:0;
}
}
}
}
// Via Text
.via-text
{
display:none;
font-size:0;
margin:0.5% 0 0 0;
position:absolute;
right:10%;
top:0;
// H2
h2
{
bottom:0;
color:$white;
font-size:50px;
}
}
}
// Menu
.menu
{
background:$menu-background;
border-radius:150px;
height:300px;
position:fixed;
right:-185px;
top:-185px;
transition:width 1s;
width:300px;
z-index:5;
// Left Bottom
.left-bottom
{
align-items:center;
border-bottom-left-radius:150px;
display:flex;
justify-content:center;
left:0;
top:150px;
// Ellipses and Close
.ellipses-and-close
{
.close-icon-area
{
display:none;
}
// Close Icon Container
.close-icon-container
{
position:fixed;
z-index:2;
// Close Icon
.close-icon
{
bottom:10px;
color:$white;
cursor:pointer;
font-size:30px;
position:relative;
}
}
// Ellipses
.ellipses
{
border:none;
cursor:pointer;
height:48px;
margin:0;
padding:0;
position:relative;
width:48px;
z-index:2;
// Ellipse Area
.ellipse-area
{
align-items:center;
border:none;
display:flex;
justify-content:center;
margin:0;
padding:0;
// Ellipse
.ellipse
{
background:$white;
border-radius:50%;
height:5px;
width:5px;
}
}
}
}
.ellipses-and-close-small
{
display:none;
}
}
// Left Top
.left-top
{
border-top-left-radius:150px;
left:0;
top:0;
}
// Menu Container
.menu-container
{
align-items:center;
bottom:0;
display:flex;
height:120px;
justify-content:center;
left:45%;
position:absolute;
width:500px;
// Links
.links
{
// Ul
ul
{
list-style-type:none;
padding:0;
position:relative;
top:8px;
// Li
li
{
display:inline;
margin:20px;
// A
a
{
font-family:quicksand-light;
text-decoration:none;
&:hover
{
color:$cream-light;
}
}
}
}
}
}
.menu-container-small
{
position:fixed;
top:-100%;
}
// Quarter
.quarter
{
height:150px;
position:absolute;
width:150px;
}
// Right Bottom
.right-bottom
{
border-bottom-right-radius:150px;
left:150px;
top:150px;
}
// Right Top
.right-top
{
border-top-right-radius:150px;
left:150px;
top:0;
}
}
}
story.scss
Our Story
Code Lines: 50-361
// Story
.story
{
// Content
.content
{
// Bottom
.bottom
{
margin:149px 0 0 0;
// Blocks Container
.blocks-container
{
background:$dark-background;
border-radius:10px;
box-shadow:10px 10px 4px $dark-background-shadow;
height:350px;
padding:0;
// Block
.block
{
align-items:center;
display:flex;
justify-content:center;
margin:0;
padding:0;
// Data
.data
{
display:inline-block;
margin:0;
padding:0;
// H2
h2
{
bottom:0;
color:$story-data;
display:inline-block;
font-family:cinzel-regular;
font-size:75px;
margin:0;
padding:0;
text-align:center;
width:100%;
}
// Text
.text
{
bottom:0;
color:$white;
display:block;
font-size:50px;
text-align:center;
}
}
}
// Left
.left
{
border-bottom-left-radius:10px;
border-top-left-radius:10px;
}
// Right
.right
{
border-bottom-right-radius:10px;
border-top-right-radius:10px;
}
}
}
// Middle
.middle
{
margin:125px 0 0 0;
// Great Wall Container
.great-wall-container
{
margin:0;
padding:0;
// Img Container
.img-container
{
margin:0;
padding:0;
// Img
img
{
border-bottom-left-radius:12px;
border-top-left-radius:12px;
box-shadow:-2px 2px 4px 2px $story-img-shadow;
}
}
// Info Container
.info-container
{
margin:0;
padding:0;
// Info Area
.info-area
{
align-items:center;
background:$dark-brown;
border-radius:9px;
bottom:5%;
box-shadow:10px 10px 4px $shadow-opacity;
display:flex;
height:110%;
justify-content:center;
margin:0;
padding:0;
position:relative;
width:100%;
// Info Area Elements
.info-area-elements
{
// Button Area
.button-area
{
display:flex;
justify-content:center;
margin:55px 0 0 0;
// Button
.button
{
background:$story-button-background;
border-radius:8px;
box-shadow:2px 2px 1px 1px $story-button-shadow;
cursor:pointer;
height:120px;
width:45%;
// Button Content
.button-content
{
display:inline-block;
height:100%;
width:100%;
// Button Left
.button-left
{
align-items:center;
display:flex;
height:100%;
position:relative;
width:75%;
// Button Left Text
.button-left-text
{
align-items:center;
display:flex;
height:100%;
justify-content:center;
width:calc(100% - 30px);
// Button Text
.button-text
{
color:$cream-light;
font-size:27px;
margin:0;
padding:0;
position:relative;
top:0;
}
}
// Button Triangle
.button-triangle
{
border-bottom:60px solid transparent;
border-right:30px solid $story-button-right-background;
border-top:60px solid transparent;
height:0;
position:absolute;
right:0;
top:0;
width:0;
}
}
// Button Right
.button-right
{
background:$story-button-right-background;
border-bottom-right-radius:8px;
border-top-right-radius:8px;
display:flex;
height:100%;
justify-content:center;
width:25%;
// Icon Container
.icon-container
{
display:flex;
justify-content:end;
position:relative;
// Arrow
.arrow
{
color:$cream-light;
height:auto;
width:20px;
}
}
}
}
}
}
// Great Wall Heading Container
.great-wall-heading-container
{
position:relative;
right:19%;
// H2
h2
{
bottom:0;
color:$white;
font-family:comfortaa-regular;
font-size:75px;
text-shadow:8px 8px 4px $dark-shadow-opacity;
}
}
// Great Wall Text Container
.great-wall-text-container
{
display:flex;
justify-content:center;
margin:55px 0 0 0;
// H2
h2
{
bottom:0;
color:$white;
font-size:35px;
width:77%;
}
}
}
}
}
}
// Video
.video
{
display:flex;
justify-content:center;
margin:200px 0 0 0;
// Video Area
.video-area
{
border:1px solid $menu-background;
border-radius:13px;
box-shadow:2px 2px 1px 1px $story-video-shadow;
height:200px;
padding:0;
position:relative;
width:200px;
// Borders
.borders
{
border-bottom:1px solid $video-opacity;
border-right:1px solid $video-opacity;
border-radius:13px;
box-shadow:2px 2px 1px 1px $story-video-shadow;
height:200px;
left:7px;
position:absolute;
top:7px;
width:200px;
}
// Rectangle Area
.rectangle-area
{
align-items:center;
background:$menu-background;
border-radius:8px;
box-shadow:2px 2px 1px 1px $story-video-shadow;
display:flex;
height:150px;
justify-content:center;
left:50%;
position:absolute;
top:50%;
transform:translate(-50%, -50%);
width:150px;
// Img
img
{
cursor:pointer;
height:auto;
width:50%;
}
}
}
}
}
// Top
.top
{
// Heading Container
.heading-container
{
// Heading
.heading
{
bottom:0;
color:$fiji-heading;
display:inline-block;
font-family:comfortaa-regular;
text-shadow:4px 4px 4px $black;
}
}
}
}
}
tours.scss
Tours
Code Lines: 62-469
// Tours
.tours
{
margin:0;
padding:0;
// Content
.content
{
// Bottom
.bottom
{
margin:140px 0 0 0;
padding:0;
// Tours Area
.tours-area
{
margin:0;
padding:0;
// Block
.block
{
border-left:22.5px solid transparent;
border-right:22.5px solid transparent;
border-top:22.5px solid transparent;
margin:0;
padding:0;
position:relative;
// Additional Borders
.additional-borders
{
border:1px solid $tours-opacity;
border-radius:9px;
box-shadow:0px 0px 4px $tours-opacity;
height:650px;
left:6px;
margin:0;
padding:0;
position:absolute;
top:6px;
width:100%;
z-index:1;
}
// Block Content
.block-content
{
align-items:center;
background:$bg;
border:1px solid $menu-background;
border-radius:9px;
display:flex;
height:650px;
justify-content:center;
margin:0;
padding:0;
position:relative;
z-index:2;
// Info
.info
{
width:84%;
// Button Area
.button-area
{
display:flex;
justify-content:center;
margin:75px 0 0 0;
// Button
.button
{
background:$tours-button-background;
border-radius:8px;
box-shadow:2px 2px 1px 1px $tours-button-shadow;
cursor:pointer;
height:90px;
width:75%;
// Button Content
.button-content
{
display:inline-block;
height:100%;
width:100%;
// Button Left
.button-left
{
align-items:center;
display:flex;
height:100%;
position:relative;
width:75%;
// Button Left Text
.button-left-text
{
align-items:center;
display:flex;
height:100%;
justify-content:center;
width:calc(100% - 22.5px);
// Button Text
.button-text
{
color:$cream-light;
font-size:27px;
margin:0;
padding:0;
position:relative;
top:0;
}
}
// Button Triangle
.button-triangle
{
border-bottom:45px solid transparent;
border-right:22.5px solid $tours-button-right-background;
border-top:45px solid transparent;
height:0;
position:absolute;
right:0;
top:0;
width:0;
}
}
// Button Right
.button-right
{
background:$tours-button-right-background;
border-bottom-right-radius:8px;
border-top-right-radius:8px;
display:flex;
height:100%;
justify-content:center;
width:25%;
// Icon Container
.icon-container
{
display:flex;
justify-content:end;
position:relative;
// Arrow
.arrow
{
color:$cream-light;
height:auto;
width:20px;
}
}
}
}
}
}
// H2
h2
{
bottom:0;
color:$white;
font-size:27px;
margin:12px 0 0 0;
text-align:center;
}
// Img Container
.img-container
{
align-items:center;
display:flex;
height:60px;
justify-content:center;
width:100%;
// Img Heritage
.img-heritage
{
height:auto;
width:50px;
}
// Img Mountains
.img-mountains
{
height:auto;
width:60px;
}
// Img Sailing
.img-sailing
{
height:auto;
width:43px;
}
}
}
}
}
// Mountains
.mountains
{
position:relative;
right:22.5px;
}
// Sailing
.sailing
{
left:22.5px;
position:relative;
}
}
}
// Middle
.middle
{
margin:125px 0 0 0;
padding:0;
// Middle Container
.middle-container
{
margin:0;
padding:0;
// Left
.left
{
align-items:center;
display:flex;
justify-content:start;
margin:0;
padding:0;
// Left Container
.left-container
{
display:inline-block;
margin:0;
padding:0;
width:90%;
// Berlin Location
.berlin-location
{
display:none;
}
// Berlin Text Container
.berlin-text-container
{
display:none;
}
// Location
.location
{
margin:52px 0 0 0;
// H2
h2
{
bottom:0;
color:$white;
font-size:80px;
text-align:center;
}
}
// Numbers
.numbers
{
margin:0;
padding:0;
width:100%;
// Center
.center
{
align-items:center;
display:flex;
margin:0;
padding:0;
width:70%;
// Line
.line
{
background:$cream-light;
height:1px;
margin:0;
padding:0;
width:100%;
}
}
// Left
.left
{
display:flex;
font-size:0;
justify-content:center;
margin:0;
padding:0;
width:15%;
// H2
h2
{
bottom:0;
color:$tours-numbers;
cursor:pointer;
font-size:65px;
line-height:65px;
margin:0;
overflow:hidden;
padding:0;
text-overflow:ellipsis;
}
}
// Right
.right
{
display:flex;
justify-content:center;
margin:0;
padding:0;
width:15%;
// H2
h2
{
bottom:0;
color:$white;
cursor:pointer;
font-size:65px;
line-height:65px;
margin:0;
overflow:hidden;
padding:0;
text-overflow:ellipsis;
}
}
}
// Tours Text Container
.tours-text-container
{
margin:15px 0 0 0;
// H2
h2
{
bottom:0;
color:$white;
font-size:30px;
text-align:center;
}
}
}
}
// Right
.right
{
display:flex;
justify-content:flex-end;
margin:0;
padding:0;
// Berlin Image Container
.berlin-image-container
{
display:none;
}
// Tours Image Container
.tours-image-container
{
position:relative;
// Image
img
{
border-radius:10px;
height:auto;
width:747px;
}
// Video
.video
{
align-items:center;
backdrop-filter:blur(10px);
background:$dark-shadow-opacity;
border-radius:7px;
box-shadow:4px 4px 4px $black-opacity-025;
display:flex;
height:200px;
justify-content:center;
left:50%;
position:absolute;
top:50%;
transform:translate(-50%, -50%);
-webkit-backdrop-filter:blur(10px);
width:200px;
// Img
img
{
cursor:pointer;
height:auto;
width:55px;
}
}
}
}
}
}
// Top
.top
{
// Heading Container
.heading-container
{
display:flex;
justify-content:end;
// Heading
.heading
{
bottom:0;
color:$fiji-heading;
display:inline-block;
font-family:comfortaa-regular;
text-shadow:4px 4px 4px $black;
}
}
}
}
}
blog.scss
Blog
Code Lines: 50-320
// Blog
.blog
{
// Content
.content
{
// Bottom
.bottom
{
margin:125px 0 0 0;
// Blogs Container
.blogs-container
{
// Block
.block
{
// Button Area
.button-area
{
display:flex;
justify-content:start;
margin:75px 0 0 0;
// Button
.button
{
background:$tours-button-background;
border-radius:8px;
box-shadow:2px 2px 1px 1px $tours-button-shadow;
cursor:pointer;
height:90px;
width:45%;
// Button Content
.button-content
{
display:inline-block;
height:100%;
width:100%;
// Button Left
.button-left
{
align-items:center;
display:flex;
height:100%;
position:relative;
width:75%;
// Button Left Text
.button-left-text
{
align-items:center;
display:flex;
height:100%;
justify-content:center;
width:calc(100% - 22.5px);
// Button Text
.button-text
{
color:$cream-light;
font-size:27px;
margin:0;
padding:0;
position:relative;
top:0;
}
}
// Button Triangle
.button-triangle
{
border-bottom:45px solid transparent;
border-right:22.5px solid $tours-button-right-background;
border-top:45px solid transparent;
height:0;
position:absolute;
right:0;
top:0;
width:0;
}
}
// Button Right
.button-right
{
background:$tours-button-right-background;
border-bottom-right-radius:8px;
border-top-right-radius:8px;
display:flex;
height:100%;
justify-content:center;
width:25%;
// Icon Container
.icon-container
{
display:flex;
justify-content:end;
position:relative;
// Arrow
.arrow
{
color:$cream-light;
height:auto;
width:20px;
}
}
}
}
}
}
// Heading Container
.heading-container
{
margin:104px 0 0 0;
// H2
h2
{
bottom:0;
color:$white;
font-size:35px;
}
}
// Img Container
.img-container
{
position:relative;
// Date
.date
{
align-items:center;
backdrop-filter:blur(10px);
background:$blog-date-layer-085;
bottom:-66px;
box-shadow:7px 7px 4px $dark-background-shadow;
display:flex;
height:132px;
justify-content:center;
left:0;
position:absolute;
-webkit-backdrop-filter:blur(10px);
width:47%;
// H2
h2
{
bottom:0;
color:$cream-light;
font-size:30px;
}
}
// Img
img
{
border-radius:8px;
box-shadow:4px 4px 8px $dark-background-shadow;
}
}
// Likes, Comments
.likes-comments
{
margin:27px 0 0 0;
// Block
.block
{
padding:0;
// Icon Container
.icon-container
{
align-items:center;
display:flex;
float:left;
margin:0;
padding:0;
// Comments, Img
.comments-img
{
display:inline;
height:auto;
margin:0;
padding:0;
width:32px;
}
// Likes, Img
.likes-img
{
display:inline;
height:auto;
margin:0;
padding:0;
width:35px;
}
}
// Number Container
.number-container
{
float:right;
left:10px;
margin:0;
padding:0;
position:relative;
// H3
h3
{
display:inline;
margin:0;
padding:0;
text-align:start;
}
}
}
// Comments
.comments
{
display:inline-block;
margin:0 0 0 45px;
}
// Likes
.likes
{
display:inline-block;
}
}
// Text Container
.text-container
{
margin:13px 0 0 0;
// H3
h3
{
margin:0;
text-align:start;
}
}
}
// Bottom Left
.bottom-left
{
border-right:35px solid transparent;
margin:90px 0 0 0;
}
// Bottom Right
.bottom-right
{
border-left:35px solid transparent;
margin:90px 0 0 0;
}
// Top Left
.top-left
{
border-right:35px solid transparent;
}
// Top Right
.top-right
{
border-left:35px solid transparent;
}
}
}
// Top
.top
{
// Heading Container
.heading-container
{
// Heading
.heading
{
bottom:0;
color:$fiji-heading;
display:inline-block;
font-family:comfortaa-regular;
text-shadow:4px 4px 4px $black;
}
}
}
}
}
contact.scss
Contact
Code Lines: 52-334
// Contact
.contact
{
// Content
.content
{
// Bottom
.bottom
{
bottom:150px;
height:781px;
position:relative;
width:100%;
z-index:1;
// Map Container
.map-container
{
height:100%;
position:relative;
width:100%;
// Map
#map
{
height:100%;
width:100%;
}
}
}
// Middle
.middle
{
margin:125px 0 0 0;
padding:0;
position:relative;
z-index:2;
// Middle Container
.middle-container
{
margin:0;
padding:0;
// Left
.left
{
align-items:center;
display:flex;
font-size:0;
margin:0;
padding:0;
.left-content
{
// Bottom Text Container
.bottom-text-container
{
margin:116px 0 0 0;
// Heading
.heading
{
// H2
h2
{
bottom:0;
color:$white;
font-family:cinzel-regular;
font-size:50px;
}
}
// Info
.info
{
margin:20px 0 0 0;
// Contact Area
.contact-area
{
// Contact Info
.contact-info
{
// Icon Container
.icon-container
{
float:left;
// Img
img
{
height:auto;
width:40px;
}
}
// Text Container
.text-container
{
display:inline-block;
padding-left:12px;
position:relative;
// H2
h2
{
bottom:0;
color:$white;
font-size:38px;
}
}
}
}
// Contact Info Bottom
.contact-info-bottom
{
align-items:center;
display:flex;
margin:15px 0 0 0;
}
}
}
// Top Text Container
.top-text-container
{
display:inline-block;
font-size:0;
margin:0;
padding:0;
// Heading
.heading
{
display:inline-block;
font-size:0;
margin:0;
padding:0;
// H2
h2
{
bottom:0;
color:$white;
display:inline-block;
font-family:acme-regular;
font-size:75px;
}
}
// Text
.text
{
// H2
h2
{
bottom:0;
color:$white;
font-family:acme-regular;
font-size:35px;
}
}
}
}
}
// Right
.right
{
margin:0;
padding:0;
// Contact Form
.contact-form
{
backdrop-filter:blur(10px);
background:$contact-form;
border-radius:15px;
box-shadow:5px 5px 4px $black-opacity-050;
margin:0;
padding:0;
-webkit-backdrop-filter:blur(10px);
width:100%;
// Form Container
.form-container
{
margin:0;
padding:88px 56px 88px 56px;
// Button Container
.button-container
{
display:flex;
height:115px;
justify-content:start;
margin:77px 0 0 0;
width:45%;
// Button Area
.button-area
{
height:100%;
width:100%;
// Submit Button
.submit-button
{
background:$contact-form-field;
border:0.45px solid $white;
border-radius:4.5px;
color:$white;
display:flex;
font-family:acme-regular;
font-size:33px;
height:100%;
justify-content:start;
width:100%;
}
}
}
// Field Container
.field-container
{
padding:0;
// Field
.field
{
background:$contact-form-field;
border:none;
border-radius:8px;
box-shadow:4px 4px 4px $black-opacity-035;
color:$white;
font-family:acme-regular;
font-size:30px;
height:60px;
margin:5px 0 0 0;
outline:none;
padding-left:15px;
width:100%;
}
// Field Message
.field-message
{
height:311px;
padding-top:15px;
}
// H2
h2
{
bottom:0;
color:$white;
font-size:35px;
margin:0;
padding:0;
// Span
span
{
color:$contact-span;
}
}
}
// Field Container Email
.field-container-email
{
margin:75px 0 0 0;
}
// Field Container Left
.field-container-left
{
border-right:23px solid transparent;
}
// Field Container Right
.field-container-right
{
border-left:23px solid transparent;
}
}
}
}
}
}
// Top
.top
{
// Heading Container
.heading-container
{
display:flex;
justify-content:end;
// Heading
.heading
{
bottom:0;
color:$fiji-heading;
display:inline-block;
font-family:comfortaa-regular;
text-shadow:4px 4px 4px $black;
}
}
}
}
}
subscribe.scss
Subscribe
Code Lines: 31-189
// Subscribe
.subscribe
{
background:$bg;
// Content
.content
{
width:84%;
// Subscribe Area
.subscribe-area
{
backdrop-filter:blur(40px);
background:$subscribe-bg;
border-radius:12px;
margin:0;
padding:0;
-webkit-backdrop-filter:blur(40px);
width:100%;
// Left
.left
{
align-items:center;
display:flex;
margin:0;
padding:0;
// Left Content
.left-content
{
display:inline-block;
margin:55px 0 55px 109px;
position:relative;
// Subscribe Form
.subscribe-form
{
height:86px;
margin:48px 0 0 0;
padding:0;
// Form
form
{
height:100%;
margin:0;
padding:0;
width:95%;
// Field
.field
{
background:$subscribe-form;
border:none;
border-bottom-left-radius:14px;
border-top-left-radius:14px;
height:100%;
margin:0;
outline:none;
padding:0;
width:67%;
}
// Placeholder
input[placeholder]
{
color:$white;
font-family:acme-regular;
font-size:30px;
opacity:1;
padding:0 0 0 20px;
position:relative;
top:3px;
}
// Moz Placeholder
::-moz-placeholder
{
color:$white;
opacity:1;
position:relative;
top:3px;
}
// Submit Button
.submit-button
{
background:$subscribe-button;
border:none;
border-bottom-left-radius:0;
border-bottom-right-radius:14px;
border-top-left-radius:0;
border-top-right-radius:14px;
color:$white;
float:right;
font-family:acme-regular;
font-size:24px;
height:100%;
position:relative;
top:3.1px;
width:33%;
}
// Webkit Input Placeholder
::-webkit-input-placeholder
{
color:$white;
opacity:1;
position:relative;
top:3px;
}
}
}
// Text One
.text-one
{
// H2
h2
{
bottom:0;
color:$white;
display:inline-block;
font-size:45px;
}
}
// Text Three
.text-three
{
// H2
h2
{
bottom:0;
color:$white;
display:inline-block;
font-size:28px;
}
}
// Text Two
.text-two
{
// H2
h2
{
bottom:0;
color:$white;
display:inline-block;
font-size:45px;
}
}
}
}
// Right
.right
{
display:flex;
justify-content:end;
margin:0;
padding:0;
// Img Container
.img-container
{
margin:0;
padding:0;
}
}
}
}
}
footer.scss
Footer
Code Lines: 64-438
// Footer
footer
{
// Bottom
.bottom
{
background:$footer-bottom-background;
height:192px;
margin:150px 0 0 0;
position:relative;
.left-middle
{
display:flex;
height:100%;
justify-content:center;
width:100%;
// Row Container
.row-container
{
width:84%;
// Bottom Area
.bottom-area
{
height:100%;
margin:0;
padding:0;
// Left
.left
{
align-items:center;
display:flex;
margin:0;
padding:0;
// Text Container
.text-container
{
margin:0;
padding:0;
// H2
h2
{
bottom:0;
color:$footer-bottom-name;
font-size:30px;
line-height:1;
}
}
}
// Middle
.middle
{
align-items:center;
display:flex;
justify-content:center;
margin:0;
padding:0;
// Social Container
.social-container
{
display:inline-block;
margin:0;
padding:0;
// Fb
.fb
{
display:inline;
margin:0 21px 0 0;
// Img
img
{
cursor:pointer;
height:auto;
width:22px;
}
}
// Pinterest
.pinterest
{
display:inline;
margin:0 19px 0 0;
// Img
img
{
cursor:pointer;
height:auto;
width:28px;
}
}
// Vimeo
.vimeo
{
display:inline;
// Img
img
{
cursor:pointer;
height:auto;
width:45px;
}
}
}
}
}
}
}
// Right
.right
{
background:$footer-up;
bottom:0;
display:inline-block;
height:100%;
position:absolute;
right:0;
width:15%;
// Rectangle Container
.rectangle-container
{
height:100%;
// Rectangle
.rectangle
{
align-items:center;
display:flex;
height:100%;
justify-content:center;
// Icon Container
.icon-container
{
display:inline-block;
// Img
img
{
cursor:pointer;
height:auto;
width:40px;
}
}
}
}
}
}
// Top
.top
{
display:flex;
justify-content:center;
padding:130px 0 0 0;
width:100%;
// Top Area
.top-area
{
width:84%;
// Headings
.headings
{
margin:0;
padding:0;
// Block Headings
.block-headings
{
align-items:center;
display:flex;
margin:0;
padding:0;
// Heading Container
.heading-container
{
margin:0;
padding:0;
// H2
h2
{
bottom:0;
border-bottom:4px solid $footer-bottom-border;
color:$white;
display:inline-block;
font-size:40px;
line-height:1;
margin:0;
padding:0;
}
}
}
// Left One
.left-one
{
margin:0;
padding:0;
// Via Container
.via-container
{
font-size:0;
margin:0;
padding:0;
// Via Area
.via-area
{
display:inline-block;
margin:0;
padding:0;
position:relative;
right:8px;
// First
.first
{
color:$footer-logo;
}
// Span
span
{
color:$white;
display:inline-block;
font-family:comfortaa-regular;
font-size:90px;
line-height:1;
text-shadow:5px 5px 4px $black-opacity-050;
margin:0;
padding:0;
}
}
}
}
}
// Info
.info
{
margin:20px 0 0 0;
padding:0;
// Block Info
.block-info
{
margin:0;
padding:0;
// Text Container First
.text-container-first
{
margin:0;
padding:0;
// H3
h3
{
cursor:pointer;
margin:0;
padding:0;
text-align:start;
width:80%;
}
}
// Text Container Other
.text-container-other
{
margin:8px 0 0 0;
padding:0;
// H3
h3
{
cursor:pointer;
margin:0;
padding:0;
text-align:start;
width:80%;
}
}
}
// Left One
.left-one
{
margin:0;
padding:0;
// Text Container
.text-container
{
margin:0;
padding:0;
// H3
h3
{
margin:0;
padding:0;
text-align:start;
width:80%;
}
}
}
// Right One
.right-one
{
margin:0;
padding:0;
// Text Container First
.text-container-first
{
margin:0;
padding:0;
width:80%;
// Name
.name
{
color:$footer-names;
cursor:pointer;
font-family:acme-regular;
font-size:27px;
line-height:1;
}
// Text
.text
{
color:$white;
font-family:acme-regular;
font-size:27px;
line-height:1;
}
}
// Text Container Other
.text-container-other
{
margin:16px 0 0 0;
padding:0;
width:80%;
// Name
.name
{
color:$footer-names;
cursor:pointer;
font-family:acme-regular;
font-size:27px;
line-height:1;
}
// Text
.text
{
color:$white;
font-family:acme-regular;
font-size:27px;
line-height:1;
}
}
}
// Right Two
.right-two
{
margin:0;
padding:0;
// Images
.images
{
margin:0;
padding:0;
// Images Area
.images-area
{
margin:0;
padding:0;
// Image One
.image-one
{
border-right:10px solid transparent;
margin:0;
padding:0;
}
// Image Two
.image-two
{
border-left:10px solid transparent;
margin:0;
padding:0;
}
}
}
}
}
}
}
}
blog-inside.scss
Blogs - Inside
Code Lines: 143-1018
// Blog Inside
.blog-inside
{
display:flex;
justify-content:center;
// Content
.content
{
background:$bg;
border-radius:10px;
margin:100px 0 100px 0;
width:85%;
// Row Container
.row-container
{
// Row
.row
{
margin:0;
padding:0;
// Left
.left
{
margin:0;
padding:0;
// Image Author Date Container
.left-content
{
// Blue Line Text Container
.blue-line-text-container
{
margin:38px 0 0 0;
width:89%;
// Blue Line Text
.blue-line-text
{
align-items:center;
display:flex;
.blue-line-container
{
// Blue Line
.blue-line
{
background:$subscribe-button;
float:left;
height:125px;
width:15px;
}
}
// Text
.text
{
margin:0 0 0 20px;
// H3
h3
{
font-family:acme-regular;
font-size:26px;
font-weight:bold;
margin:0;
text-align:start;
}
}
}
}
// Comments Container
.comments-container
{
margin:125px 0 0 0;
// Comments
.comments
{
// Caret
.caret
{
display:flex;
font-size:0;
justify-content:center;
left:118px;
margin:95px 0 0 0;
padding:0;
position:relative;
width:89%;
z-index:2;
// Caret Content
.caret-content
{
display:inline-flex;
margin:0;
padding:0;
// Img
img
{
cursor:pointer;
height:auto;
margin:0;
padding:0;
width:35px;
}
}
}
// Comment Container
.comment-container
{
margin:59px 0 0 0;
// Comment
.comment
{
align-items:center;
border:1px solid $comments-border;
display:flex;
height:236px;
justify-content:center;
width:89%;
// Comment Area
.comment-area
{
align-items:center;
display:inline-flex;
width:90%;
// Img Container
.img-container
{
display:inline-flex;
float:left;
// Img
img
{
height:auto;
width:150px;
}
}
// Name Text Container
.name-text-container
{
align-items:center;
display:inline-flex;
float:right;
margin:0 0 0 25px;
width:90%;
// Name Text
.name-text
{
display:inline-block;
position:relative;
// Name Container
.name-container
{
display:inline-block;
// Name
.name
{
// H2
h2
{
bottom:0;
color:$white;
font-size:25px;
}
}
}
}
}
}
}
}
// Comment Container Bottom
.comment-container-bottom
{
left:118px;
margin:41px 0 0 0;
position:relative;
}
// Heading Comments Container
.heading-comments-container
{
// Heading Comments
.heading-comments
{
// H2
h2
{
bottom:0;
color:$white;
font-size:35px;
}
}
}
// Reply
.reply
{
margin:197px 0 0 0;
width:calc(89% + 118px);
// Reply Content
.reply-content
{
// Reply Content Form
.reply-content-form
{
margin:59px 0 0 0;
// Form
form
{
// Button Field
.button-field
{
height:75px;
margin:26px 0 0 0;
width:150px;
// Button Submit
.button-submit
{
background:$comment-submit;
border:none;
border-radius:5px;
color:$white;
font-family:acme-regular;
font-size:19px;
height:100%;
width:100%;
}
}
.email-field
{
border-left:13px solid transparent;
float:right;
width:50%;
.email
{
width:100%;
}
}
.form-field
{
background:transparent;
border:1px solid $comments-border;
border-radius:6px;
color:$comment-placeholders;
font-family:acme-regular;
font-size:19px;
height:69px;
outline:none;
}
// Input Placeholder
input[placeholder]
{
color:$comment-placeholders;
padding:2px 0 0 27px;
}
// Message Field
.message-field
{
display:inline-flex;
margin:26px 0 0 0;
width:100%;
// Message
.message
{
background:transparent;
border:1px solid $comments-border;
border-radius:6px;
color:$comment-placeholders;
font-family:acme-regular;
font-size:19px;
height:335px;
outline:none;
padding:15px 0 0 27px;
width:100%;
}
}
// Moz Placeholder
::-moz-placeholder
{
color:$comment-placeholders;
padding:2px 0 0 27px;
opacity:1;
}
.name-field
{
border-right:13px solid transparent;
float:left;
width:50%;
.name
{
width:100%;
}
}
// Webkit Input Placeholder
::-webkit-input-placeholder
{
color:$comment-placeholders;
opacity:1;
}
}
}
// Reply Content Leave
.reply-content-leave
{
display:inline-flex;
// H2
h2
{
bottom:0;
color:$white;
font-size:35px;
}
}
}
}
}
}
// Heading Container
.heading-container
{
margin:48px 0 0 0;
// Heading
.heading
{
// H2
h2
{
bottom:0;
color:$white;
font-size:40px;
}
}
}
// Main Text Container
.main-text-container
{
display:inline-block;
margin:18px 0 0 0;
width:89%;
// Main Text
.main-text
{
// H2
h2
{
bottom:0;
color:$white;
display:inline-block;
font-size:27px;
}
}
}
// Social Container
.social-container
{
font-size:0;
margin:34px 0 0 0;
padding:0;
width:89%;
// Social
.social
{
display:inline-flex;
margin:0;
padding:0;
// Icons Container
.icons-container
{
float:right;
margin:0 0 0 17px;
padding:0;
// Icons
.icons
{
margin:0;
padding:0;
// Fb
.fb
{
cursor:pointer;
height:auto;
margin:0;
padding:0;
width:17px;
}
// Pinterest
.pi
{
cursor:pointer;
height:auto;
margin:0 0 0 13px;
padding:0;
width:22px;
}
// Vimeo
.vi
{
cursor:pointer;
height:auto;
margin:0 0 0 13px;
padding:0;
width:34px;
}
}
}
// Text Container
.text-container
{
align-items:center;
display:flex;
float:left;
margin:0;
padding:0;
// Text
.text
{
margin:0;
padding:0;
// H3
h3
{
display:inline-block;
margin:0;
padding:0;
text-align:start;
}
}
}
}
}
// Top Image Author Date
.top-image-author-date
{
// Author Container
.author-container
{
align-items:center;
display:inline-flex;
margin:28px 0 0 0;
// Icon Container
.icon-container
{
float:left;
// Icon
.icon
{
// Img
img
{
height:auto;
width:32px;
}
}
}
// Name Container
.name-container
{
display:inline-block;
line-height:1;
margin:0 0 0 12px;
position:relative;
top:2px;
// Name
.name
{
// H2
h2
{
bottom:0;
color:$white;
font-size:25px;
}
}
}
}
// Date Container
.date-container
{
align-items:center;
display:inline-flex;
margin:28px 0 0 73px;
// Icon Container
.icon-container
{
float:left;
// Icon
.icon
{
// Img
img
{
height:auto;
width:32px;
}
}
}
// Text Container
.text-container
{
display:inline-block;
line-height:1;
margin:0 0 0 12px;
position:relative;
top:2px;
// Text
.text
{
// H2
h2
{
bottom:0;
color:$white;
font-size:25px;
}
}
}
}
// Image Container
.top-image-container
{
// Img
img
{
border-radius:8px;
box-shadow:5px 5px 4px $black-opacity-025;
height:auto;
width:89%;
}
}
}
// Dark Line Container
.dark-line-container
{
margin:43px 0 0 0;
width:89%;
// Dark Line
.dark-line
{
background:$bg;
height:2px;
}
}
}
}
// Right
.right
{
margin:0;
padding:0;
// Author Container
.author-container
{
display:flex;
justify-content:end;
margin:84px 0 0 0;
// Author
.author
{
width:500px;
// Author Heading
.author-heading
{
// H2
h2
{
bottom:0;
color:$white;
font-size:38px;
}
}
// H3
h3
{
display:inline-flex;
font-size:24px;
margin:5px 0 0 0;
padding:0;
text-align:initial;
}
}
}
// Categories Container
.categories-container
{
display:flex;
justify-content:end;
margin:84px 0 0 0;
// Categories
.categories
{
width:500px;
.bottom-text
{
margin:0;
}
// Categories Heading
.categories-heading
{
// H2
h2
{
bottom:0;
color:$white;
font-size:38px;
}
}
// H3
h3
{
display:block;
font-size:24px;
margin:5px 0 0 0;
padding:0;
text-align:initial;
}
}
}
// Instagram Feed
.instagram-feed
{
display:flex;
justify-content:flex-end;
margin:84px 0 0 0;
// Instagram Feed Content
.instagram-feed-content
{
display:inline-block;
width:500px;
// Heading
.heading
{
// H2
h2
{
bottom:0;
color:$white;
font-size:38px;
}
}
// Row
.row
{
margin:5px 0 0 0;
padding:0;
position:relative;
right:5px;
width:100%;
// Img Area
.img-area
{
border:5px solid transparent;
margin:0;
padding:0;
// Img
img
{
border-radius:6px;
height:auto;
margin:0;
padding:0;
width:125px;
}
}
}
}
}
// Posts Container
.posts-container
{
display:flex;
justify-content:end;
margin:84px 0 0 0;
// Posts
.posts
{
width:500px;
// Posts Heading
.posts-heading
{
// H2
h2
{
bottom:0;
color:$white;
font-size:38px;
}
}
// Posts Info
.posts-info
{
margin:13px 0 0 0;
// Area Margin
.area-margin
{
margin:25px 0 0 0;
}
// Posts Info Area
.posts-info-area
{
align-items:center;
display:flex;
// Img Container
.img-container
{
// Img
img
{
border-radius:7px;
float:left;
height:auto;
width:125px;
}
}
// Text
.text
{
margin:0 0 0 27px;
// H2
h2
{
bottom:0;
color:$white;
font-size:26px;
}
// H3
h3
{
font-size:24px;
margin:0;
text-align:initial;
}
}
}
}
}
}
// Search Field
.search-field
{
display:flex;
justify-content:flex-end;
margin:0;
padding:0;
// Form
form
{
// Form Search
.form-search
{
background:$search;
border:none;
border-radius:5px;
color:$white;
font-family:acme-regular;
font-size:22px;
height:55px;
outline:none;
padding:2px 0 0 15px;
width:500px;
}
// Moz Placeholder
::-moz-placeholder
{
color:$white;
opacity:1;
padding:2px 0 0 15px;
}
// Webkit Input Placeholder
::-webkit-input-placeholder
{
color:$white;
opacity:1;
}
}
}
// Tags
.tags
{
display:flex;
justify-content:end;
margin:84px 0 0 0;
// Tags Content
.tags-content
{
display:inline-block;
width:500px;
// H2
h2
{
bottom:0;
color:$white;
font-size:38px;
}
// Tags Words
.tags-words
{
margin:5px 0 0 0;
// Tags Words Bottom
.tags-words-bottom
{
margin:5px 0 0 0;
// H3
h3
{
display:inline;
font-size:24px;
margin:0;
text-align:initial;
}
// Tags Words Bottom Space
.tags-words-bottom-space
{
margin:0 0 0 10px;
}
}
// Tags Words Top
.tags-words-top
{
// H3
h3
{
display:inline;
font-size:24px;
margin:0;
text-align:initial;
}
// Tags Words Top Space
.tags-words-top-space
{
margin:0 0 0 10px;
}
}
}
}
}
// Visit Container
.visit-container
{
display:flex;
justify-content:flex-end;
margin:84px 0 0 0;
// Visit
.visit
{
display:inline-flex;
position:relative;
// Img
img
{
height:auto;
width:500px;
}
// Text
.text
{
align-items:center;
background:$black-opacity-075;
display:flex;
height:100%;
justify-content:center;
left:0px;
position:absolute;
top:0px;
width:100%;
// H2
h2
{
bottom:0;
color:$white;
font-family:borel-regular;
font-size:38px;
transform:rotate(-45deg);
}
}
}
}
}
}
}
}
}
PHP
In this section you can find more about how to set message send system in contact form.
Layout - Smooth
contact.php
Contact Form
Code Lines: 1-33
<?php
/*
Table of Contents
Data
Send Data
*/
if(isset($_POST['submit']))
{
// Data
$to = "#"; // This is your Email address
$from = $_POST['userEmail']; // This is the sender's Email address
$name = $_POST['userName']; // First Name
$lastName = $_POST['lastName'];
$mail = $_POST['userEmail'];
$subject = "Form submission";
$subject2 = "Copy of your form submission";
$message = $name . " " . $lastName . " " . $mail . " wrote the following:" . "\n\n" . $_POST['userMessage'];
$message2 = "Here is a copy of your message " . $name . "\n\n" . $_POST['userMessage'];
$headers = "From:" . $from;
$headers2 = "From:" . $to;
// Send Data
mail($to,$subject,$message,$headers);
mail($from,$subject2,$message2,$headers2); // Sends a copy of the message to the sender
echo "Mail Sent. Thank you " . $name . ", we will contact you shortly.";
// You can also use header('Location: thank_you.php'); to redirect to another page.
}
?>