Introduction:
A well-designed website for an Architecture Website Using HTML CSS JavaScript design firm should be more than just visually appealing—it must provide an immersive user experience, smooth navigation, and engaging animations. In this guide, we will learn how to create a complete architecture and interior design website, covering:
- HTML for structuring the content
- CSS for styling and animations
- JavaScript for interactivity
- Tilt.js for modern UI effects let’s start..
Step 1: Structuring the Website with HTML:
The HTML file forms the foundation of the website. It defines the layout, sections, and content. Our website will include: A hero banner with an introduction A navigation menu for seamless access A services section to display offerings A team section to introduce professionals A contact form for user inquiries.
Step 1.1: Setting Up the Basic HTML File:
The first step is to create a new HTML file named index.html and structure it correctly.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Architecture & Interior Design</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- All website content will be added here -->
</body>
</html>Explanation:
- The <meta> tags ensure SEO optimization and mobile responsiveness.
- The <tittle> sets the name of the website visible in browser tabs.
- The <link> connects the CSS file to style the page.
Step 1.2: Creating the Header & Banner:
The header introduces the website with a hero section and a call-to-action button.
<header class="header">
<div class="banner">
<h1>Architecture & Interior Design</h1>
<p>Transforming spaces with creativity and precision.</p>
<button>Explore Now</button>
</div>
</header>Explanation:
- The
- tag conveys the website’s main heading for better SEO.
- The tag introduces the company’s mission statement.
- The acts as a call-to-action for users.
Step 1.3: Implementing the Navigation Menu:
Now, we will create a hamburger menu that enhances navigation.
<nav class="sidebar">
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>Explanation:
- The <nav> tag defines the navigation menu.
- The <ul> and <li> elements create a structured menu.
Step 2: Implementing Tilt.js for Modern UI Effects:
Tilt.js is a lightweight JavaScript library that creates interactive tilt effects on elements, providing depth and motion based on user interaction. This effect enhances the visual engagement of a website by simulating perspective changes, making elements appear to tilt dynamically as the user moves their mouse.
How Tilt.js Works:-
Tilt.js calculates mouse movement relative to an element’s position, then applies a rotation effect based on the movement. This creates an illusion of depth, making static elements feel more interactive and alive.
Setting Up Tilt.js:-
To use Tilt.js, first include the library in your project. You can either download it or use a CDN Once Tilt.js is included, it can be applied to specific elements using JavaScript.
<script src="https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery.min.js"></script>
Basic Implementation:
Let’s apply Tilt.js to elements such as team member cards or service icons.
$("[data-tilt]").tilt({
maxTilt: 20, // Maximum tilt angle
perspective: 300, // Depth perception
easing: "cubic-bezier(.03,.98,.52,.99)", // Smooth animation effect
scale: 1.1 // Slight zoom-in effect on tilt
});This configuration ensures smooth transitions, giving elements a subtle yet engaging tilt effect when hovered. Tilt.js allows fine-tuning using various options:
- maxTilt: Controls the degree of tilt (lower values create subtle tilts, higher values increase movement).
- perspective: Defines the depth of the tilt effect.
- glare: Adds a light reflection when tilted.
- scale: Slightly zooms elements when hovered.
- speed: Adjusts the transition duration.
For example, enabling glare:
$("[data-tilt]").tilt({
glare: true,
maxGlare: 0.5 // Amount of light reflection
});This creates realistic lighting effects, making objects shine dynamically as users interact.
Where to Use Tilt.js
- Cards and UI elements (e.g., team member cards, portfolio images).
- Icons and buttons for a modern interaction.
- Product showcases on e-commerce websites.
Conclusion:
Building an architecture and interior design website requires careful attention to structure, styling, interactivity, and engagement. By combining:
- HTML for a well-organized layout.
- CSS for a visually stunning design.
- JavaScript for seamless interactions.
- Tilt.js for modern UI enhancements.
By following these steps, you can create a highly professional and interactive website for architecture and interior design firms.
Index.html:
<div class="spinner-container">
<div class="circles">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="container">
<div class="hamburger-menu">
<div class="line line-1"></div>
<div class="line line-2"></div>
<div class="line line-3"></div>
<span>Close</span>
</div>
<header class="header">
<div class="img-wrapper">
<img src="images/bg.jpg" />
</div>
<div class="banner">
<h1>Architecture & Interior Design</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<button>Discover now</button>
</div>
</header>
<section class="sidebar">
<ul class="menu">
<li class="menu-item">
<a href="#" class="menu-link" data-content="Home">Home</a>
</li>
<li class="menu-item">
<a href="#" class="menu-link" data-content="About Us">About Us</a>
</li>
<li class="menu-item">
<a href="#" class="menu-link" data-content="Team">Team</a>
</li>
<li class="menu-item">
<a href="#" class="menu-link" data-content="Pricing">Pricing</a>
</li>
<li class="menu-item">
<a href="#" class="menu-link" data-content="Contact">Contact</a>
</li>
</ul>
<div class="social-media">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
</div>
</section>
<section class="about-us">
<div class="section-header">
<h1 class="section-heading">About Us</h1>
<div class="underline"></div>
</div>
<div class="services">
<div class="service">
<div class="service-header">
<i class="fas fa-pen-nib"></i>
<h3>Interior</h3>
</div>
<p class="service-text">
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Doloremque, officia! Necessitatibus delectus sed dicta corrupti
voluptatibus, omnis eius vel ab magni nemo, incidunt esse! Quod!
</p>
</div>
<div class="service">
<div class="service-header">
<i class="fas fa-paint-roller"></i>
<h3>Exterior</h3>
</div>
<p class="service-text">
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Doloremque, officia! Necessitatibus delectus sed dicta corrupti
voluptatibus, omnis eius vel ab magni nemo, incidunt esse! Quod!
</p>
</div>
<div class="service">
<div class="service-header">
<i class="fas fa-pencil-alt"></i>
<h3>Design</h3>
</div>
<p class="service-text">
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Doloremque, officia! Necessitatibus delectus sed dicta corrupti
voluptatibus, omnis eius vel ab magni nemo, incidunt esse! Quod!
</p>
</div>
<div class="service">
<div class="service-header">
<i class="fas fa-paint-brush"></i>
<h3>Decoration</h3>
</div>
<p class="service-text">
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Doloremque, officia! Necessitatibus delectus sed dicta corrupti
voluptatibus, omnis eius vel ab magni nemo, incidunt esse! Quod!
</p>
</div>
<div class="service">
<div class="service-header">
<i class="fas fa-ruler-combined"></i>
<h3>Planning</h3>
</div>
<p class="service-text">
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Doloremque, officia! Necessitatibus delectus sed dicta corrupti
voluptatibus, omnis eius vel ab magni nemo, incidunt esse! Quod!
</p>
</div>
<div class="service">
<div class="service-header">
<i class="far fa-building"></i>
<h3>Execution</h3>
</div>
<p class="service-text">
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Doloremque, officia! Necessitatibus delectus sed dicta corrupti
voluptatibus, omnis eius vel ab magni nemo, incidunt esse! Quod!
</p>
</div>
<div class="about-us-img-wrapper">
<img src="images/house.png" />
</div>
</div>
</section>
<section class="team">
<div class="section-header">
<h1 class="section-heading">Our Team</h1>
<div class="underline"></div>
</div>
<div class="cards-wrapper">
<div class="card" data-tilt>
<div class="card-img-wrapper">
<img src="images/person-1.jpg" alt="CEO" />
</div>
<div class="card-info">
<h2>John Smith</h2>
<h3>CEO</h3>
<p>
"Lorem ipsum dolor sit amet consectetur adipisicing elit.
Asperiores, impedit!"
</p>
<button>Read More</button>
</div>
</div>
<div class="card" data-tilt>
<div class="card-img-wrapper">
<img src="images/person-2.jpg" alt="Designer" />
</div>
<div class="card-info">
<h2>Ann Brown</h2>
<h3>Designer</h3>
<p>
"Lorem ipsum dolor sit amet consectetur adipisicing elit.
Asperiores, impedit!"
</p>
<button>Read More</button>
</div>
</div>
<div class="card" data-tilt>
<div class="card-img-wrapper">
<img src="images/person-3.jpg" alt="Architect" />
</div>
<div class="card-info">
<h2>Mary Doe</h2>
<h3>Architect</h3>
<p>
"Lorem ipsum dolor sit amet consectetur adipisicing elit.
Asperiores, impedit!"
</p>
<button>Read More</button>
</div>
</div>
</div>
</section>
<section class="contact">
<div class="contact-wrapper">
<div class="contact-left"></div>
<div class="contact-right">
<h1 class="contact-heading">Contact</h1>
<form>
<div class="input-group">
<input type="text" class="field" />
<label class="input-label">Full Name</label>
</div>
<div class="input-group">
<input type="email" class="field" />
<label class="input-label">Email</label>
</div>
<div class="input-group">
<textarea class="field"></textarea>
<label class="message">Message</label>
</div>
<input type="submit" class="submit-btn" value="Submit" />
</form>
</div>
</div>
</section>
<footer class="footer">
<div class="footer-content">
<p class="copyright">
Copyright © 2020, CodeAndCreate - All Rights Reserved
</p>
<div class="social-list">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
</div>
</div>
</footer>
<a href="#" class="scroll-btn">
<i class="fas fa-arrow-up"></i>
</a>
</div>
<script src="script.js"></script>
<script
src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"
></script>
<script src="tilt.js"></script>Style.css:
* {
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
html {
font-size: 62.5%;
}
.spinner-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: #262626;
display: flex;
justify-content: center;
align-items: center;
transition: all 1s;
z-index: 300;
}
.display .spinner-container {
opacity: 0;
visibility: hidden;
}
.circles {
width: 8rem;
height: 8rem;
position: relative;
opacity: 0;
visibility: hidden;
animation: displayCircles 4s;
}
@keyframes displayCircles {
0% {
opacity: 0;
visibility: hidden;
}
25% {
opacity: 1;
visibility: visible;
}
90% {
opacity: 1;
visibility: visible;
}
100% {
opacity: 0;
visibility: hidden;
}
}
.circles div {
animation: circles 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
transform-origin: 4rem 4rem;
}
.circles div::after {
content: "";
position: absolute;
width: 0.7rem;
height: 0.7rem;
border-radius: 50%;
background-color: #c29525;
margin: -0.4rem 0 0 -0.4rem;
}
.circles div:nth-child(1) {
animation-delay: -0.036s;
}
.circles div:nth-child(1)::after {
top: 6.3rem;
left: 6.3rem;
}
.circles div:nth-child(2) {
animation-delay: -0.072s;
}
.circles div:nth-child(2)::after {
top: 6.8rem;
left: 5.6rem;
}
.circles div:nth-child(3) {
animation-delay: -0.108s;
}
.circles div:nth-child(3)::after {
top: 7.1rem;
left: 4.8rem;
}
.circles div:nth-child(4) {
animation-delay: -0.144s;
}
.circles div:nth-child(4)::after {
top: 7.2rem;
left: 4rem;
}
.circles div:nth-child(5) {
animation-delay: -0.18s;
}
.circles div:nth-child(5)::after {
top: 7.1rem;
left: 3.2rem;
}
.circles div:nth-child(6) {
animation-delay: -0.216s;
}
.circles div:nth-child(6)::after {
top: 6.8rem;
left: 2.4rem;
}
.circles div:nth-child(7) {
animation-delay: -0.252s;
}
.circles div:nth-child(7)::after {
top: 6.3rem;
left: 1.7rem;
}
.circles div:nth-child(8) {
animation-delay: -0.288s;
}
.circles div:nth-child(8)::after {
top: 5.6rem;
left: 1.2rem;
}
@keyframes circles {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
.container {
display: none;
}
.display .container {
display: block;
}
.hamburger-menu {
width: 3rem;
height: 3rem;
position: fixed;
top: 5rem;
right: 5rem;
z-index: 200;
display: flex;
flex-direction: column;
justify-content: space-evenly;
cursor: pointer;
transition: right 0.7s;
}
.change .hamburger-menu {
right: 33rem;
}
.line {
width: 100%;
height: 0.2rem;
background-color: #fff;
box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.2);
}
.change .line {
background-color: rgba(0, 0, 0, 0.8);
}
.change .line-1 {
transform: rotate(45deg) translate(0.3rem, 0.8rem);
}
.change .line-2 {
opacity: 0;
visibility: hidden;
}
.change .line-3 {
transform: rotate(-45deg) translate(0.3rem, -0.8rem);
}
.hamburger-menu span {
position: absolute;
left: 5rem;
width: 10rem;
height: 4rem;
background-color: #e2b646;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-family: "Baloo Da 2", serif;
font-size: 1.6rem;
letter-spacing: 0.1rem;
opacity: 0;
visibility: hidden;
transition: all 0.2s;
}
.change .hamburger-menu:hover span {
opacity: 1;
visibility: visible;
}
.hamburger-menu span::before {
content: "";
position: absolute;
border-left: 1rem solid transparent;
border-right: 1rem solid #e2b646;
border-bottom: 1rem solid transparent;
border-top: 1rem solid transparent;
top: 50%;
left: -2rem;
transform: translateY(-50%);
}
.header {
width: 100%;
height: 100vh;
position: relative;
perspective: 100rem;
overflow: hidden;
}
.img-wrapper {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
overflow: hidden;
}
.img-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.5;
animation: scale 25s;
}
@keyframes scale {
0% {
transform: scale(1.3);
}
100% {
transform: scale(1);
}
}
.banner {
position: absolute;
top: 30%;
left: 15%;
}
.banner h1 {
font-family: "Baloo Da 2", serif;
font-size: 8rem;
font-weight: 300;
color: #fff;
width: 50%;
line-height: 9rem;
letter-spacing: 0.2rem;
text-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.4);
opacity: 0;
animation: moveBanner 1s 0.5s forwards;
}
.banner p {
font-family: "Josefin Slab", serif;
font-size: 4rem;
color: #fff;
width: 70%;
letter-spacing: 0.1rem;
margin-bottom: 3rem;
text-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.4);
opacity: 0;
animation: moveBanner 1s 0.7s forwards;
}
.banner button {
width: 25rem;
height: 7rem;
background-color: #c29525;
border: none;
font-family: "Muli", serif;
font-size: 2rem;
text-transform: uppercase;
color: #fff;
text-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.2);
box-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.4);
cursor: pointer;
opacity: 0;
animation: moveBanner 1s 0.9s forwards;
}
@keyframes moveBanner {
0% {
transform: translateY(40rem) rotateY(-20deg);
}
100% {
transform: translateY(0) rotateY(0);
opacity: 1;
}
}
.sidebar {
width: 40rem;
height: 100vh;
position: fixed;
top: 0;
right: -40rem;
background-color: #fff;
transition: right 0.5s;
z-index: 100;
}
.change .sidebar {
right: 0;
}
.menu {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
.menu-item {
text-align: center;
}
.menu-link {
font-family: "Baloo Da 2", serif;
font-size: 4rem;
color: #555;
position: relative;
}
.menu-link::before {
content: attr(data-content);
position: absolute;
top: 0;
left: 0;
color: #c29525;
width: 0;
overflow: hidden;
white-space: nowrap;
transition: width 0.3s ease-in-out;
}
.menu-link:hover::before {
width: 100%;
}
.social-media {
position: absolute;
bottom: 3rem;
width: 100%;
display: flex;
justify-content: center;
}
.social-media i {
font-size: 2.2rem;
margin: 3rem;
width: 4.5rem;
height: 4.5rem;
background-color: #777;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
transition: background-color 0.3s;
}
.social-media i:hover {
background-color: #c29525;
}
.about-us {
width: 100%;
background-color: #f5f5f5;
padding-bottom: 15rem;
}
.section-header {
display: flex;
flex-direction: column;
align-items: center;
padding: 7rem 0 10rem 0;
}
.section-heading {
font-family: "Muli", serif;
font-size: 5rem;
font-weight: 300;
color: #4b4b4b;
margin-bottom: 6rem;
}
.underline {
width: 12rem;
height: 0.3rem;
background-color: #c29525;
}
.services {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: repeat(16, 1fr);
grid-template-rows: repeat(6, 6rem);
grid-row-gap: 4rem;
}
.service {
width: 100%;
margin-bottom: 2rem;
}
.service:nth-child(1) {
grid-column: 4 / 7;
grid-row: 1 / 3;
}
.service:nth-child(2) {
grid-column: 3 / 6;
grid-row: 3 / 5;
}
.service:nth-child(3) {
grid-column: 4 / 7;
grid-row: 5 / -1;
}
.service:nth-child(4) {
grid-column: 11 / 14;
grid-row: 1 / 3;
}
.service:nth-child(5) {
grid-column: 12 / 15;
grid-row: 3 / 5;
}
.service:nth-child(6) {
grid-column: 11 / 14;
grid-row: 5 / -1;
}
.service-header {
display: flex;
align-items: center;
margin-bottom: 1rem;
}
.service-header i {
font-size: 4rem;
color: #4b4b4b;
margin-right: 2rem;
}
.service-header h3 {
font-family: "Baloo Da 2", serif;
font-size: 2.6rem;
line-height: 2.6rem;
font-weight: 400;
margin-bottom: 2rem;
}
.service-text {
font-family: "Josefin Slab", serif;
font-size: 1.6rem;
text-align: justify;
}
.about-us-img-wrapper {
grid-column: 7 / 11;
grid-row: 2 / 6;
width: 100%;
}
.about-us-img-wrapper img {
width: 100%;
object-fit: cover;
opacity: 0.8;
}
.team {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0 5rem 20rem 5rem;
}
.cards-wrapper {
display: flex;
justify-content: space-evenly;
margin-top: 8rem;
width: 100%;
}
.card {
width: 37rem;
height: 45rem;
box-shadow: 0 1rem 4rem rgba(0, 0, 0, 0.4);
border-radius: 0.5rem;
position: relative;
}
.card-img-wrapper {
width: 100%;
height: 100%;
background-color: #262626;
border-radius: 0.5rem;
}
.card-img-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.8;
border-radius: 0.5rem;
transition: opacity 0.3s;
}
.card:hover .card-img-wrapper img {
opacity: 0.5;
}
.card-info {
position: absolute;
bottom: 0;
padding: 2rem;
text-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.4);
opacity: 0;
visibility: hidden;
transition: all 0.3s;
}
.card:hover .card-info {
bottom: 2rem;
opacity: 1;
visibility: visible;
}
.card-info h2 {
font-family: "Baloo Da 2", serif;
font-size: 2.5rem;
line-height: 2.5rem;
font-weight: 300;
color: #eee;
}
.card-info h3 {
font-family: "Muli", serif;
font-size: 2rem;
font-weight: 500;
color: #a52a2a;
margin-bottom: 1rem;
}
.card-info p {
font-family: "Baloo da 2", serif;
font-size: 1.4rem;
line-height: 1.6rem;
font-weight: 300;
color: #eee;
width: 80%;
margin-bottom: 2rem;
}
.card-info button {
width: 10rem;
height: 3rem;
background-color: #c29525;
border: none;
font-family: "Baloo Da 2", serif;
font-size: 1.4rem;
line-height: 1.5rem;
color: #eee;
border-radius: 0.3rem;
box-shadow: 0 0.1rem 0.8rem rgba(0, 0, 0, 0.4);
}
.contact {
width: 100%;
height: 100vh;
background-color: #272727;
display: flex;
justify-content: center;
align-items: center;
}
.contact-wrapper {
width: 60%;
height: 75rem;
display: flex;
box-shadow: 0 3rem 7rem rgba(0, 0, 0, 0.5);
}
.contact-left {
width: 35%;
background: linear-gradient(rgba(15, 15, 15, 0.6), rgba(22, 22, 22, 0.9)),
url(images/contact-bg.jpg) center no-repeat;
background-size: cover;
}
.contact-right {
width: 65%;
background-color: #eee;
padding: 3rem 10rem 10rem 10rem;
}
.contact-heading {
font-family: "Baloo Da 2", serif;
font-size: 6rem;
font-weight: 300;
color: #272727;
margin-bottom: 5rem;
text-align: center;
}
.contact-right form {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.input-group {
position: relative;
}
.field {
width: 45rem;
background-color: transparent;
border: none;
border-bottom: 0.2rem dashed #636363;
margin: 3rem 0;
padding: 1rem 1rem 1rem 0;
font-family: "Muli", serif;
font-size: 1.6rem;
color: #4b4b4b;
}
.input-group input {
height: 4rem;
}
.input-group textarea {
max-height: 7rem;
max-width: 45rem;
}
.field:focus {
border-bottom-style: solid;
}
.input-group label {
position: absolute;
left: 0;
font-family: "Baloo Da 2", serif;
font-size: 1.8rem;
color: #4b4b4b;
text-transform: uppercase;
pointer-events: none;
transition: all 0.3s;
}
.input-label {
bottom: 3rem;
}
.message {
bottom: 6rem;
}
.field:focus ~ label {
transform: translateY(-3rem);
font-size: 1.2rem;
}
.submit-btn {
width: 45rem;
height: 5rem;
background-color: #c29525;
color: #fff;
border: none;
margin-top: 2rem;
font-family: "Muli", serif;
font-size: 2rem;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 0.2rem;
cursor: pointer;
text-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.5);
box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.3);
}
.footer {
width: 100%;
height: 15rem;
background-color: #17181b;
display: flex;
justify-content: center;
align-items: center;
}
.footer-content {
width: 60%;
display: flex;
justify-content: space-between;
}
.copyright {
font-family: "Baloo Da 2", serif;
font-size: 1.6rem;
color: #a7a7a7;
}
.social-list a {
margin: 0 2rem;
}
.social-list i {
font-size: 2rem;
color: #a7a7a7;
}
.scroll-btn {
position: fixed;
right: 5rem;
bottom: 5rem;
width: 4.5rem;
height: 4.5rem;
background-color: #e2b646;
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
color: #fff;
box-shadow: 0 0.1rem 0.6rem rgba(0, 0, 0, 0.2);
border-radius: 0.3rem;
}
@media (max-width: 1500px) {
.about-us-img-wrapper {
grid-row: 3 / -1;
}
.card {
width: 34rem;
}
.contact-wrapper {
width: 80%;
height: 65rem;
}
.footer-content {
width: 80%;
}
}
@media (max-width: 1400px) {
.banner h1 {
font-size: 6rem;
line-height: 7rem;
}
.banner p {
font-size: 3rem;
}
.banner button {
width: 20rem;
height: 5rem;
font-size: 1.6rem;
}
.menu-link {
font-size: 3rem;
}
.service:nth-child(1) {
grid-column: 3 / 7;
}
.service:nth-child(2) {
grid-column: 2 / 6;
}
.service:nth-child(3) {
grid-column: 3 / 7;
}
.service:nth-child(4) {
grid-column: 11 / 15;
}
.service:nth-child(5) {
grid-column: 12 / 16;
}
.service:nth-child(6) {
grid-column: 11 / 15;
}
}
@media (max-width: 1300px) {
.team {
padding-bottom: 5rem;
}
.cards-wrapper {
flex-direction: column;
align-items: center;
margin-top: 4rem;
}
.card {
margin-bottom: 8rem;
}
.contact-wrapper {
width: 90%;
height: 55rem;
}
.contact-heading {
margin-bottom: 2rem;
}
.field {
margin: 2rem 0;
}
}
@media (max-width: 1000px) {
.banner h1 {
font-size: 5rem;
line-height: 6rem;
}
.banner p {
font-size: 2.5rem;
}
.banner button {
width: 18rem;
height: 4rem;
font-size: 1.5rem;
}
.services {
display: flex;
flex-direction: column;
align-items: center;
}
.service {
width: 40rem;
margin-bottom: 6rem;
}
.about-us-img-wrapper {
width: 40rem;
}
.about-us-img-wrapper img {
width: 100%;
}
.contact-left {
width: 0;
}
.contact-right {
width: 100%;
}
.field {
width: 55rem;
}
.input-group textarea {
max-width: 55rem;
}
.submit-btn {
width: 55rem;
}
.footer-content {
flex-direction: column;
align-items: center;
text-align: center;
width: 50%;
}
.copyright {
order: 1;
margin-top: 3rem;
}
}
@media (max-width: 700px) {
.banner h1 {
font-size: 4rem;
line-height: 5rem;
}
.banner p {
font-size: 2rem;
}
.field {
width: 35rem;
}
.input-group textarea {
max-width: 35rem;
}
.submit-btn {
width: 35rem;
}
}
@media (max-width: 500px) {
html {
font-size: 45%;
}
.sidebar {
width: 100%;
right: -100%;
}
.change .hamburger-menu {
right: 38rem;
}
.service {
width: 30rem;
}
.footer {
height: 18rem;
}
}
Script.js:
window.onload = () => {
setTimeout(() => {
document.querySelector("body").classList.add("display");
}, 4000);
};
document.querySelector(".hamburger-menu").addEventListener("click", () => {
document.querySelector(".container").classList.toggle("change");
});
document.querySelector(".scroll-btn").addEventListener("click", () => {
document.querySelector("html").style.scrollBehavior = "smooth";
setTimeout(() => {
document.querySelector("html").style.scrollBehavior = "unset";
}, 1000);
});Tilts.js:
(function (factory) {
if (typeof define === "function" && define.amd) {
// AMD. Register as an anonymous module.
define(["jquery"], factory);
} else if (typeof module === "object" && module.exports) {
// Node/CommonJS
module.exports = function (root, jQuery) {
if (jQuery === undefined) {
// require('jQuery') returns a factory that requires window to
// build a jQuery instance, we normalize how we use modules
// that require this pattern but the window provided is a noop
// if it's defined (how jquery works)
if (typeof window !== "undefined") {
jQuery = require("jquery");
} else {
jQuery = require("jquery")(root);
}
}
factory(jQuery);
return jQuery;
};
} else {
// Browser globals
factory(jQuery);
}
})(function ($) {
$.fn.tilt = function (options) {
/**
* RequestAnimationFrame
*/
const requestTick = function () {
if (this.ticking) return;
requestAnimationFrame(updateTransforms.bind(this));
this.ticking = true;
};
/**
* Bind mouse movement evens on instance
*/
const bindEvents = function () {
const _this = this;
$(this).on("mousemove", mouseMove);
$(this).on("mouseenter", mouseEnter);
if (this.settings.reset) $(this).on("mouseleave", mouseLeave);
if (this.settings.glare)
$(window).on("resize", updateGlareSize.bind(_this));
};
/**
* Set transition only on mouse leave and mouse enter so it doesn't influence mouse move transforms
*/
const setTransition = function () {
if (this.timeout !== undefined) clearTimeout(this.timeout);
$(this).css({
transition: `${this.settings.speed}ms ${this.settings.easing}`,
});
if (this.settings.glare)
this.glareElement.css({
transition: `opacity ${this.settings.speed}ms ${this.settings.easing}`,
});
this.timeout = setTimeout(() => {
$(this).css({ transition: "" });
if (this.settings.glare) this.glareElement.css({ transition: "" });
}, this.settings.speed);
};
/**
* When user mouse enters tilt element
*/
const mouseEnter = function (event) {
this.ticking = false;
$(this).css({ "will-change": "transform" });
setTransition.call(this);
// Trigger change event
$(this).trigger("tilt.mouseEnter");
};
/**
* Return the x,y position of the mouse on the tilt element
* @returns {{x: *, y: *}}
*/
const getMousePositions = function (event) {
if (typeof event === "undefined") {
event = {
pageX: $(this).offset().left + $(this).outerWidth() / 2,
pageY: $(this).offset().top + $(this).outerHeight() / 2,
};
}
return { x: event.pageX, y: event.pageY };
};
/**
* When user mouse moves over the tilt element
*/
const mouseMove = function (event) {
this.mousePositions = getMousePositions(event);
requestTick.call(this);
};
/**
* When user mouse leaves tilt element
*/
const mouseLeave = function () {
setTransition.call(this);
this.reset = true;
requestTick.call(this);
// Trigger change event
$(this).trigger("tilt.mouseLeave");
};
/**
* Get tilt values
*
* @returns {{x: tilt value, y: tilt value}}
*/
const getValues = function () {
const width = $(this).outerWidth();
const height = $(this).outerHeight();
const left = $(this).offset().left;
const top = $(this).offset().top;
const percentageX = (this.mousePositions.x - left) / width;
const percentageY = (this.mousePositions.y - top) / height;
// x or y position inside instance / width of instance = percentage of position inside instance * the max tilt value
const tiltX = (
this.settings.maxTilt / 2 -
percentageX * this.settings.maxTilt
).toFixed(2);
const tiltY = (
percentageY * this.settings.maxTilt -
this.settings.maxTilt / 2
).toFixed(2);
// angle
const angle =
Math.atan2(
this.mousePositions.x - (left + width / 2),
-(this.mousePositions.y - (top + height / 2))
) *
(180 / Math.PI);
// Return x & y tilt values
return {
tiltX,
tiltY,
percentageX: percentageX * 100,
percentageY: percentageY * 100,
angle,
};
};
/**
* Update tilt transforms on mousemove
*/
const updateTransforms = function () {
this.transforms = getValues.call(this);
if (this.reset) {
this.reset = false;
$(this).css(
"transform",
`perspective(${this.settings.perspective}px) rotateX(0deg) rotateY(0deg)`
);
// Rotate glare if enabled
if (this.settings.glare) {
this.glareElement.css(
"transform",
`rotate(180deg) translate(-50%, -50%)`
);
this.glareElement.css("opacity", `0`);
}
return;
} else {
$(this).css(
"transform",
`perspective(${this.settings.perspective}px) rotateX(${
this.settings.disableAxis === "x" ? 0 : this.transforms.tiltY
}deg) rotateY(${
this.settings.disableAxis === "y" ? 0 : this.transforms.tiltX
}deg) scale3d(${this.settings.scale},${this.settings.scale},${
this.settings.scale
})`
);
// Rotate glare if enabled
if (this.settings.glare) {
this.glareElement.css(
"transform",
`rotate(${this.transforms.angle}deg) translate(-50%, -50%)`
);
this.glareElement.css(
"opacity",
`${(this.transforms.percentageY * this.settings.maxGlare) / 100}`
);
}
}
// Trigger change event
$(this).trigger("change", [this.transforms]);
this.ticking = false;
};
/**
* Prepare elements
*/
const prepareGlare = function () {
const glarePrerender = this.settings.glarePrerender;
// If option pre-render is enabled we assume all html/css is present for an optimal glare effect.
if (!glarePrerender)
// Create glare element
$(this).append(
'<div class="js-tilt-glare"><div class="js-tilt-glare-inner"></div></div>'
);
// Store glare selector if glare is enabled
this.glareElementWrapper = $(this).find(".js-tilt-glare");
this.glareElement = $(this).find(".js-tilt-glare-inner");
// Remember? We assume all css is already set, so just return
if (glarePrerender) return;
// Abstracted re-usable glare styles
const stretch = {
position: "absolute",
top: "0",
left: "0",
width: "100%",
height: "100%",
};
// Style glare wrapper
this.glareElementWrapper.css(stretch).css({
overflow: "hidden",
"pointer-events": "none",
});
// Style glare element
this.glareElement.css({
position: "absolute",
top: "50%",
left: "50%",
"background-image": `linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)`,
width: `${$(this).outerWidth() * 2}`,
height: `${$(this).outerWidth() * 2}`,
transform: "rotate(180deg) translate(-50%, -50%)",
"transform-origin": "0% 0%",
opacity: "0",
});
};
/**
* Update glare on resize
*/
const updateGlareSize = function () {
this.glareElement.css({
width: `${$(this).outerWidth() * 2}`,
height: `${$(this).outerWidth() * 2}`,
});
};
/**
* Public methods
*/
$.fn.tilt.destroy = function () {
$(this).each(function () {
$(this).find(".js-tilt-glare").remove();
$(this).css({ "will-change": "", transform: "" });
$(this).off("mousemove mouseenter mouseleave");
});
};
$.fn.tilt.getValues = function () {
const results = [];
$(this).each(function () {
this.mousePositions = getMousePositions.call(this);
results.push(getValues.call(this));
});
return results;
};
$.fn.tilt.reset = function () {
$(this).each(function () {
this.mousePositions = getMousePositions.call(this);
this.settings = $(this).data("settings");
mouseLeave.call(this);
setTimeout(() => {
this.reset = false;
}, this.settings.transition);
});
};
/**
* Loop every instance
*/
return this.each(function () {
/**
* Default settings merged with user settings
* Can be set trough data attributes or as parameter.
* @type {*}
*/
this.settings = $.extend(
{
maxTilt: $(this).is("[data-tilt-max]")
? $(this).data("tilt-max")
: 20,
perspective: $(this).is("[data-tilt-perspective]")
? $(this).data("tilt-perspective")
: 300,
easing: $(this).is("[data-tilt-easing]")
? $(this).data("tilt-easing")
: "cubic-bezier(.03,.98,.52,.99)",
scale: $(this).is("[data-tilt-scale]")
? $(this).data("tilt-scale")
: "1",
speed: $(this).is("[data-tilt-speed]")
? $(this).data("tilt-speed")
: "400",
transition: $(this).is("[data-tilt-transition]")
? $(this).data("tilt-transition")
: true,
disableAxis: $(this).is("[data-tilt-disable-axis]")
? $(this).data("tilt-disable-axis")
: null,
axis: $(this).is("[data-tilt-axis]")
? $(this).data("tilt-axis")
: null,
reset: $(this).is("[data-tilt-reset]")
? $(this).data("tilt-reset")
: true,
glare: $(this).is("[data-tilt-glare]")
? $(this).data("tilt-glare")
: false,
maxGlare: $(this).is("[data-tilt-maxglare]")
? $(this).data("tilt-maxglare")
: 1,
},
options
);
// Add deprecation warning & set disableAxis to deprecated axis setting
if (this.settings.axis !== null) {
console.warn(
"Tilt.js: the axis setting has been renamed to disableAxis. See https://github.com/gijsroge/tilt.js/pull/26 for more information"
);
this.settings.disableAxis = this.settings.axis;
}
this.init = () => {
// Store settings
$(this).data("settings", this.settings);
// Prepare element
if (this.settings.glare) prepareGlare.call(this);
// Bind events
bindEvents.call(this);
};
// Init
this.init();
});
};
/**
* Auto load
*/
$("[data-tilt]").tilt();
return true;
});
