A Step-by-Step Guide to Creating a Stunning Agency Website with HTML, CSS, and JavaScript
In the digital age, having a professional and visually appealing website is crucial for any agency looking to establish a strong online presence. If you’re ready to create a stunning agency website from scratch, this comprehensive guide will walk you through the process using HTML, CSS, and JavaScript. Whether you’re a beginner or an experienced web developer, this step-by-step tutorial will help you build a website that reflects the professionalism and uniqueness of your agency.
Understanding the Importance of a Professional Website:
In today’s digital era, a professional website is a fundamental tool for businesses of all sizes, including agencies. It serves as a virtual storefront, offering visitors a glimpse into your agency’s services, portfolio, and unique selling points. A well-designed website can build credibility, establish trust, and create a positive first impression. It is essential to prioritize your website’s design and functionality to stand out from the competition.
Planning Your Agency Website:
Before diving into the development process, it’s crucial to plan your agency website strategically. Start by defining your target audience, determining your website’s primary goals, and outlining the key features and functionalities you want to incorporate. Consider your agency’s brand identity, color scheme, typography, and overall visual style to ensure consistency and coherence throughout your website.
Getting Started with HTML:
HTML (Hypertext Markup Language) is the foundation of any website. It provides the structure and semantic markup for your web pages. Begin by setting up a basic HTML file and understanding the essential tags, such as <html>, <head>, and <body>. Dive deeper into HTML elements, attributes, headings, paragraphs, links, and images, to structure your content effectively and optimize it for search engines.
Enhancing Visual Appeal with CSS:
CSS (Cascading Style Sheets) enables you to style your website and bring it to life visually. It allows you to customize colors, fonts, layouts, and animations. Explore the world of CSS selectors, properties, and values to create stunning visual effects and maintain a consistent design language across your entire website. Learn about responsive design techniques to ensure your website looks great on all devices.
Adding Interactivity with JavaScript:
JavaScript empowers you to add interactivity and dynamic functionality to your website. Master the fundamentals of JavaScript, including variables, functions, conditions, loops, and events. Harness the power of JavaScript frameworks and libraries, such as jQuery or React, to streamline your development process and create engaging user experiences. Implement smooth animations, form validations, and interactive elements to captivate your website visitors.
Optimizing Your Website for Performance and SEO:
To ensure your agency website provides an exceptional user experience, it’s essential to optimize it for performance and search engines. Minify your HTML, CSS, and JavaScript files to reduce load times. Optimize images and leverage caching techniques. Implement proper heading structures, meta tags, and descriptive URLs to enhance your website’s visibility in search engine results. Conduct keyword research and incorporate relevant keywords naturally into your content.
Testing and Launching Your Website:
Before launching your agency website, thoroughly test it across various browsers, devices, and screen sizes to ensure compatibility and responsiveness. Validate your HTML code and fix any errors or warnings. Conduct usability tests to gather feedback and make necessary improvements. Once you’re confident in the performance and functionality, it’s time to deploy your website to a reliable hosting provider and promote it through various marketing channels.
Creating a stunning agency website with HTML, CSS, and JavaScript may seem like a daunting task, but with the right guidance and a step-by-step approach, it becomes an exciting and rewarding journey. By following the insights shared in this comprehensive guide, you now have the knowledge and tools to develop a visually appealing, user-friendly, and functionally rich website for your agency. Embrace the power of HTML, CSS, and JavaScript to build a strong online presence, attract potential clients, and showcase your agency’s unique offerings. Happy coding!
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Agency - Get Best UI Design</title>
<!--
- favicon
-->
<link rel="shortcut icon" href="./favicon.svg" type="image/svg+xml">
<!--
- custom css link
-->
<link rel="stylesheet" href="./assets/css/style.css">
<!--
- google font link
-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&family=Source+Sans+Pro:wght@600;700&display=swap"
rel="stylesheet">
</head>
<body id="top">
<!--
- #HEADER
-->
<header class="header" data-header>
<div class="container">
<div class="overlay" data-overlay></div>
<a href="#">
<h1 class="logo">Agency</h1>
</a>
<nav class="navbar" data-navbar>
<div class="navbar-top">
<a href="#" class="logo">Agency</a>
<button class="nav-close-btn" aria-label="Close Menu" data-nav-close-btn>
<ion-icon name="close-outline"></ion-icon>
</button>
</div>
<ul class="navbar-list">
<li class="navbar-item">
<a href="#home" class="navbar-link" data-navbar-link>Home</a>
</li>
<li class="navbar-item">
<a href="#about" class="navbar-link" data-navbar-link>About</a>
</li>
<li class="navbar-item">
<a href="#services" class="navbar-link" data-navbar-link>Services</a>
</li>
<li class="navbar-item">
<a href="#features" class="navbar-link" data-navbar-link>Features</a>
</li>
<li class="navbar-item">
<a href="#blog" class="navbar-link" data-navbar-link>Blog</a>
</li>
<li class="navbar-item">
<a href="#" class="navbar-link" data-navbar-link>Contact Us</a>
</li>
</ul>
</nav>
<a href="#" class="btn">
<ion-icon name="chevron-forward-outline" aria-hidden="true"></ion-icon>
<span>Get A Quote</span>
</a>
<button class="nav-open-btn" aria-label="Open Menu" data-nav-open-btn>
<ion-icon name="menu-outline"></ion-icon>
</button>
</div>
</header>
<main>
<article>
<!--
- #HERO
-->
<section class="hero" id="home">
<div class="container">
<div class="hero-content">
<p class="hero-subtitle">We Are Product Designer From USA</p>
<h2 class="h2 hero-title">We Design Interfaces That Users Love</h2>
<p class="hero-text">
Sed ut perspiciatis unde omnis iste natus farha sit voluptatem accusantium doloremque laudantium, totam rem
aperiam.
</p>
<button class="btn">Learn More</button>
</div>
<figure class="hero-banner">
<img loading="lazy" decoding="async" src="./assets/images/hero-banner2.png" width="694" height="529" loading="lazy" alt="hero-banner"
class="w-100 banner-animation">
</figure>
</div>
</section>
<!--
- #ABOUT
-->
<section class="section about" id="about">
<div class="container">
<figure class="about-banner">
<img loading="lazy" decoding="async" src="./assets/images/about-banner2.png" width="700" height="532" loading="lazy" alt="about banner"
class="w-100 banner-animation">
</figure>
<div class="about-content">
<h2 class="h2 section-title underline">Why Our Agency</h2>
<p class="about-text">
In dictum aliquam turpis lacinia iaculis. Fusce vel malesuada magna. Nulla vel maximus risus. Donec
volutpat metus
lacinia risus accumsan, ac bibendum libero efficitur. Pellentesque nec nisi sit amet magna tempus
hendrerit ut a odio.
</p>
<p class="about-text">
Praesent rhoncus commodo tortor, id pulvinar nisl blandit at. Nulla facilisi. Quisque turpis ante,
vehicula condimentum
arcu.
</p>
<ul class="stats-list">
<li class="stats-card">
<p class="h3 stats-title">9786</p>
<p class="stats-text">Satisfied Clients</p>
</li>
<li class="stats-card">
<p class="h3 stats-title">7564</p>
<p class="stats-text">Project Lunched</p>
</li>
<li class="stats-card">
<p class="h3 stats-title">27</p>
<p class="stats-text">Years Completed</p>
</li>
</ul>
</div>
</div>
</section>
<!--
- #SERVICE
-->
<section class="section service" id="services">
<div class="container">
<h2 class="h2 section-title underline">Our Speciallization</h2>
<ul class="service-list">
<li>
<div class="service-card">
<div class="card-icon">
<ion-icon name="telescope-outline"></ion-icon>
</div>
<h3 class="h3 title">Strategy & Research</h3>
<p class="text">
Mauris ut felis malesuada eros varius tristique a at orci. Nulla vulputate, leo sit amet rhoncus
suscipit, enim ex
venenatis ipsum, et porttitor.
</p>
<button class="card-btn" aria-label="Show More">
<ion-icon name="chevron-forward-outline"></ion-icon>
</button>
</div>
</li>
<li>
<div class="service-card">
<div class="card-icon">
<ion-icon name="desktop-outline"></ion-icon>
</div>
<h3 class="h3 title">Web Development</h3>
<p class="text">
Mauris ut felis malesuada eros varius tristique a at orci. Nulla vulputate, leo sit amet rhoncus
suscipit, enim ex
venenatis ipsum, et porttitor.
</p>
<button class="card-btn" aria-label="Show More">
<ion-icon name="chevron-forward-outline"></ion-icon>
</button>
</div>
</li>
<li>
<div class="service-card">
<div class="card-icon">
<ion-icon name="globe-outline"></ion-icon>
</div>
<h3 class="h3 title">Web Solution</h3>
<p class="text">
Mauris ut felis malesuada eros varius tristique a at orci. Nulla vulputate, leo sit amet rhoncus
suscipit, enim ex
venenatis ipsum, et porttitor.
</p>
<button class="card-btn" aria-label="Show More">
<ion-icon name="chevron-forward-outline"></ion-icon>
</button>
</div>
</li>
</ul>
</div>
</section>
<!--
- #FEATURES
-->
<section class="section features" id="features">
<div class="container">
<h2 class="h2 section-title underline">Our Features</h2>
<ul class="features-list">
<li>
<div class="features-card">
<div class="icon">
<ion-icon name="bulb-outline"></ion-icon>
</div>
<div class="content">
<h3 class="h3 title">Idea & Analysis</h3>
<p class="text">
Praesent tincidunt congue est ut hendrerit. Pellentesque et eros sit amet ipsum venenatis.
</p>
</div>
</div>
</li>
<li>
<div class="features-card">
<div class="icon">
<ion-icon name="color-palette-outline"></ion-icon>
</div>
<div class="content">
<h3 class="h3 title">Designing</h3>
<p class="text">
Praesent tincidunt congue est ut hendrerit. Pellentesque et eros sit amet ipsum venenatis.
</p>
</div>
</div>
</li>
</ul>
<figure class="features-banner">
<img loading="lazy" decoding="async" src="./assets/images/feautres-banner2.png" width="369" height="318" loading="lazy" alt="Features Banner"
class="w-100 banner-animation">
</figure>
<ul class="features-list">
<li>
<div class="features-card">
<div class="icon">
<ion-icon name="code-slash-outline"></ion-icon>
</div>
<div class="content">
<h3 class="h3 title">Development</h3>
<p class="text">
Praesent tincidunt congue est ut hendrerit. Pellentesque et eros sit amet ipsum venenatis.
</p>
</div>
</div>
</li>
<li>
<div class="features-card">
<div class="icon">
<ion-icon name="rocket-outline"></ion-icon>
</div>
<div class="content">
<h3 class="h3 title">Testing & Lunching</h3>
<p class="text">
Praesent tincidunt congue est ut hendrerit. Pellentesque et eros sit amet ipsum venenatis.
</p>
</div>
</div>
</li>
</ul>
</div>
</section>
<!--
- #BLOG
-->
<section class="section blog" id="blog">
<div class="container">
<h2 class="h2 section-title underline">Our Blog & News</h2>
<ul class="blog-list">
<li>
<div class="blog-card">
<figure class="banner">
<a href="#">
<img loading="lazy" decoding="async" src="./assets/images/blog-11.jpg" width="750" height="350" loading="lazy"
alt="Vestibulum massa arcu, consectetu pellentesque scelerisque." class="img-cover">
</a>
</figure>
<div class="content">
<h3 class="h3 title">
<a href="#">
Vestibulum massa arcu, consectetu pellentesque scelerisque.
</a>
</h3>
<p class="text">
Sed quis sagittis velit. Aliquam velit eros, bibendum ut massa et, consequat laoreet erat nam ac
imperdiet.
</p>
<div class="meta">
<div class="publish-date">
<ion-icon name="time-outline"></ion-icon>
<time datetime="2023-03-07">27 March, 2023</time>
</div>
<button class="comment" aria-label="Comment">
<ion-icon name="chatbubble-outline"></ion-icon>
<data value="15">15</data>
</button>
<button class="share" aria-label="Share">
<ion-icon name="share-social-outline"></ion-icon>
</button>
</div>
</div>
</div>
</li>
<li>
<div class="blog-card">
<figure class="banner">
<a href="#">
<img loading="lazy" decoding="async" src="./assets/images/blog-22.jpg" width="750" height="350" loading="lazy"
alt="Quisque egestas iaculis felis eget placerat ut pulvinar mi." class="img-cover">
</a>
</figure>
<div class="content">
<h3 class="h3 title">
<a href="#">
Quisque egestas iaculis felis eget placerat ut pulvinar mi.
</a>
</h3>
<p class="text">
Sed quis sagittis velit. Aliquam velit eros, bibendum ut massa et, consequat laoreet erat nam ac
imperdiet.
</p>
<div class="meta">
<div class="publish-date">
<ion-icon name="time-outline"></ion-icon>
<time datetime="2023-03-07">27 March, 2023</time>
</div>
<button class="comment" aria-label="Comment">
<ion-icon name="chatbubble-outline"></ion-icon>
<data value="15">15</data>
</button>
<button class="share" aria-label="Share">
<ion-icon name="share-social-outline"></ion-icon>
</button>
</div>
</div>
</div>
</li>
<li>
<div class="blog-card">
<figure class="banner">
<a href="#">
<img loading="lazy" decoding="async" src="./assets/images/blog-33.jpg" width="750" height="350" loading="lazy"
alt="Fusce sem ligula, imperdiet sed nisi sit amet, euismod posuere." class="img-cover">
</a>
</figure>
<div class="content">
<h3 class="h3 title">
<a href="#">
Fusce sem ligula, imperdiet sed nisi sit amet, euismod posuere.
</a>
</h3>
<p class="text">
Sed quis sagittis velit. Aliquam velit eros, bibendum ut massa et, consequat laoreet erat nam ac
imperdiet.
</p>
<div class="meta">
<div class="publish-date">
<ion-icon name="time-outline"></ion-icon>
<time datetime="2023-03-07">27 March, 2023</time>
</div>
<button class="comment" aria-label="Comment">
<ion-icon name="chatbubble-outline"></ion-icon>
<data value="15">15</data>
</button>
<button class="share" aria-label="Share">
<ion-icon name="share-social-outline"></ion-icon>
</button>
</div>
</div>
</div>
</li>
<li>
<div class="blog-card">
<figure class="banner">
<a href="#">
<img loading="lazy" decoding="async" src="./assets/images/blog-44.jpg" width="750" height="350" loading="lazy"
alt="Donec feugiat mollis nisi in dignissim. Morbi sollicitudin quis." class="img-cover">
</a>
</figure>
<div class="content">
<h3 class="h3 title">
<a href="#">
Donec feugiat mollis nisi in dignissim. Morbi sollicitudin quis.
</a>
</h3>
<p class="text">
Sed quis sagittis velit. Aliquam velit eros, bibendum ut massa et, consequat laoreet erat nam ac
imperdiet.
</p>
<div class="meta">
<div class="publish-date">
<ion-icon name="time-outline"></ion-icon>
<time datetime="2023-03-07">27 March, 2023</time>
</div>
<button class="comment" aria-label="Comment">
<ion-icon name="chatbubble-outline"></ion-icon>
<data value="15">15</data>
</button>
<button class="share" aria-label="Share">
<ion-icon name="share-social-outline"></ion-icon>
</button>
</div>
</div>
</div>
</li>
</ul>
</div>
</section>
</article>
</main>
<!--
- #FOOTER
-->
<footer class="footer">
<div class="footer-top section">
<div class="container">
<div class="footer-brand">
<a href="#" class="logo">Agency</a>
<p class="text">
Maecenas pellentesque placerat quam, in finibus nisl tincidunt sed. Aliquam magna augue, malesuada ut
feugiat eget,
cursus eget felis.
</p>
<ul class="social-list">
<li>
<a href="#" class="social-link">
<ion-icon name="logo-facebook"></ion-icon>
</a>
</li>
<li>
<a href="#" class="social-link">
<ion-icon name="logo-instagram"></ion-icon>
</a>
</li>
<li>
<a href="#" class="social-link">
<ion-icon name="logo-twitter"></ion-icon>
</a>
</li>
</ul>
</div>
<ul class="footer-list">
<li>
<p class="footer-list-title">Our links</p>
</li>
<li>
<a href="#" class="footer-link">Home</a>
</li>
<li>
<a href="#" class="footer-link">About Us</a>
</li>
<li>
<a href="#" class="footer-link">Services</a>
</li>
<li>
<a href="#" class="footer-link">Team</a>
</li>
<li>
<a href="#" class="footer-link">Blog</a>
</li>
</ul>
<ul class="footer-list">
<li>
<p class="footer-list-title">Our Services</p>
</li>
<li>
<a href="#" class="footer-link">Strategy & Research</a>
</li>
<li>
<a href="#" class="footer-link">Web Development</a>
</li>
<li>
<a href="#" class="footer-link">Web Solution</a>
</li>
<li>
<a href="#" class="footer-link">Digital Marketing</a>
</li>
<li>
<a href="#" class="footer-link">App Design</a>
</li>
</ul>
<ul class="footer-list">
<li>
<p class="footer-list-title">Other links</p>
</li>
<li>
<a href="#" class="footer-link">FAQ</a>
</li>
<li>
<a href="#" class="footer-link">Portfolio</a>
</li>
<li>
<a href="#" class="footer-link">Privacy Policy</a>
</li>
<li>
<a href="#" class="footer-link">Terms & Conditions</a>
</li>
<li>
<a href="#" class="footer-link">Support</a>
</li>
</ul>
<ul class="footer-list">
<li>
<p class="footer-list-title">Contact Us</p>
</li>
<li class="footer-item">
<div class="footer-item-icon">
<ion-icon name="call"></ion-icon>
</div>
<div>
<a href="tel:+2786214313" class="footer-item-link">+278-621-4313</a>
<a href="tel:+2786871365" class="footer-item-link">+278-687-1365</a>
</div>
</li>
<li class="footer-item">
<div class="footer-item-icon">
<ion-icon name="mail"></ion-icon>
</div>
<div>
<a href="mailto:info@agency.com" class="footer-item-link">info@agency.com</a>
<a href="mailto:help@agency.com" class="footer-item-link">help@agency.com</a>
</div>
</li>
<li class="footer-item">
<div class="footer-item-icon">
<ion-icon name="location"></ion-icon>
</div>
<address class="footer-item-link">
Amphitheatre, ParkwayMounta, United States of America
</address>
</li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p class="copyright">
© 2023 <a href="#" class="copyright-link">dailywebdesign</a>. All Right Reserved
</p>
</div>
</footer>
<!--
- #GO TO TOP
-->
<a href="#top" class="go-top active" aria-label="Go To Top" data-go-top>
<ion-icon name="arrow-up-outline"></ion-icon>
</a>
<!--
- custom js link
-->
<script src="./assets/js/script.js"></script>
<!--
- ionicon link
-->
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>
style.css
/*-----------------------------------*\
#style.css
\*-----------------------------------*/
/**
* copyright 2023 dailywebdesigns.com
*/
/*-----------------------------------*\
#CUSTOM PROPERTY
\*-----------------------------------*/
:root {
/**
* colors
*/
--st-patricks-blue: hsl(236, 57%, 28%);
--amaranth-purple: hsl(335, 88%, 38%);
--royal-blue-dark: hsl(231, 68%, 21%);
--chrome-yellow: hsl(5, 100%, 69%);
--space-cadet-1: hsl(230, 41%, 25%);
--space-cadet-2: hsl(230, 59%, 16%);
--winter-sky_50: hsla(335, 87%, 53%, 0.5);
--purple-navy: hsl(236, 26%, 43%);
--ksu-purple: hsl(275, 54%, 33%);
--winter-sky: hsl(212, 100%, 50%);
--razzmatazz: hsl(212, 87%, 53%);
--platinum: hsl(0, 0%, 90%);
--black_70: hsla(0, 0%, 0%, 0.7);
--rajah: hsl(5, 100%, 69%);
--white: hsl(0, 0%, 100%);
--gradient-1: linear-gradient(90deg,var(--royal-blue-dark) 0,var(--ksu-purple) 51%,var(--royal-blue-dark));
--gradient-2: linear-gradient(90deg,var(--razzmatazz) ,var(--rajah));
/**
* typography
*/
--ff-source-sans-pro: 'Source Sans Pro', sans-serif;
--ff-poppins: 'Poppins', sans-serif;
--fs-1: 4.2rem;
--fs-2: 3.8rem;
--fs-3: 3.2rem;
--fs-4: 2.5rem;
--fs-5: 2.4rem;
--fs-6: 2rem;
--fs-7: 1.8rem;
--fs-8: 1.5rem;
--fw-500: 500;
--fw-600: 600;
--fw-700: 700;
/**
* border radius
*/
--radius-4: 4px;
--radius-12: 12px;
/**
* spacing
*/
--section-padding: 60px;
/**
* transition
*/
--transition-1: 0.15s ease;
--transition-2: 0.35s ease;
--cubic-in: cubic-bezier(0.51, 0.03, 0.64, 0.28);
--cubic-out: cubic-bezier(0.33, 0.85, 0.56, 1.02);
/**
* shadow
*/
--shadow: 0 5px 20px 1px hsla(220, 63%, 33%, 0.1);
}
/*-----------------------------------*\
#RESET
\*-----------------------------------*/
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li { list-style: none; }
a { text-decoration: none; }
a,
img,
span,
input,
button,
ion-icon { display: block; }
button,
input {
background: none;
border: none;
font: inherit;
}
button { cursor: pointer; }
input { width: 100%; }
ion-icon { pointer-events: none; }
img { height: auto; }
address { font-style: normal; }
html {
font-family: var(--ff-poppins);
font-size: 10px;
scroll-behavior: smooth;
}
body {
background-color: var(--white);
color: var(--purple-navy);
font-size: 1.6rem;
}
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background-color: hsl(0, 0%, 95%); }
::-webkit-scrollbar-thumb { background-color: hsl(0, 0%, 80%); }
::-webkit-scrollbar-thumb:hover { background-color: hsl(0, 0%, 70%); }
/*-----------------------------------*\
#REUSED STYLE
\*-----------------------------------*/
.container { padding-inline: 15px; }
.h2,
.h3 { font-family: var(--ff-source-sans-pro); }
.btn {
background-image: var(--gradient-2);
background-size: 200%;
color: var(--white);
padding: 12px 35px;
font-size: var(--fs-8);
font-weight: var(--fw-500);
border-radius: 0 25px;
transition: var(--transition-2);
}
.btn:is(:hover, :focus) { background-position: right; }
.w-100 { width: 100%; }
.banner-animation { animation: waveAnim 2s linear infinite alternate; }
@keyframes waveAnim {
0% { transform: translate(0, 0) rotate(0); }
100% { transform: translate(2px, 2px) rotate(2deg); }
}
.section { padding-block: var(--section-padding); }
.section-title {
color: var(--st-patricks-blue);
font-size: var(--fs-3);
margin-block-end: 60px;
max-width: max-content;
margin-inline: auto;
}
.underline { position: relative; }
.underline::before {
content: "";
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
width: 70%;
height: 6px;
background-image: var(--gradient-2);
border-radius: 10px;
}
:is(.service-card, .features-card) .title {
color: var(--st-patricks-blue);
font-size: var(--fs-4);
font-weight: var(--fw-700);
}
:is(.service-card, .features-card, .blog-card) .text { font-size: var(--fs-8); }
.img-cover {
width: 100%;
height: 100%;
object-fit: cover;
}
/*-----------------------------------*\
#HEADER
\*-----------------------------------*/
.header .btn { display: none; }
.header {
--color: var(--white);
position: absolute;
top: 0;
left: 0;
width: 100%;
padding-block: 14px;
z-index: 4;
transition: var(--transition-1);
}
.header.active {
--color: var(--st-patricks-blue);
position: fixed;
background-color: var(--white);
box-shadow: 0 2px 30px hsla(0, 0%, 0%, 0.1);
}
.header .container {
display: flex;
justify-content: space-between;
align-items: center;
gap: 30px;
}
.logo {
color: var(--color);
font-family: var(--ff-source-sans-pro);
font-size: var(--fs-3);
}
.nav-open-btn {
color: var(--color);
font-size: 32px;
padding: 4px;
}
.navbar {
background-color: var(--white);
position: fixed;
top: 0;
left: -280px;
width: 100%;
max-width: 280px;
min-height: 100%;
padding: 20px;
visibility: hidden;
z-index: 2;
transition: 0.25s var(--cubic-in);
}
.navbar.active {
transform: translateX(280px);
visibility: visible;
transition: 0.5s var(--cubic-out);
}
.navbar-top {
display: flex;
justify-content: space-between;
align-items: center;
padding-block: 10px 30px;
}
.navbar-top .logo {
color: var(--st-patricks-blue);
font-size: 4.2rem;
font-weight: var(--fw-700);
}
.nav-close-btn {
color: var(--space-cadet-1);
font-size: 2.8rem;
padding: 4px;
}
.navbar-item:not(:last-child) { border-bottom: 1px solid var(--platinum); }
.navbar-link {
color: var(--space-cadet-1);
font-size: var(--fs-8);
font-weight: var(--fw-600);
padding-block: 12px;
}
.overlay {
position: fixed;
inset: 0;
background-color: var(--black_70);
z-index: 1;
opacity: 0;
pointer-events: none;
transition: var(--transition-2);
}
.overlay.active {
opacity: 1;
pointer-events: all;
}
/*-----------------------------------*\
#HERO
\*-----------------------------------*/
.hero {
background-image: url("../images/hero-bg-bottom.png"),
url("../images/hero-bg.png"),
var(--gradient-1);
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: -280px bottom, center, center;
background-size: auto, cover, auto;
padding-block-start: 120px;
padding-block-end: var(--section-padding);
}
.hero-content { margin-block-end: 50px; }
.hero-subtitle {
color: var(--chrome-yellow);
font-family: var(--ff-source-sans-pro);
font-size: var(--fs-7);
margin-block-end: 15px;
}
.hero-title {
color: var(--white);
font-size: var(--fs-1);
margin-block-end: 20px;
}
.hero-text {
color: var(--white);
font-size: var(--fs-8);
margin-block-end: 30px;
}
/*-----------------------------------*\
#ABOUT
\*-----------------------------------*/
.about-banner { margin-block-end: 30px; }
.about .section-title { margin-inline: 0; }
.about .underline::before {
left: 0;
transform: translateX(0);
}
.about-text {
font-size: var(--fs-8);
margin-block-end: 20px;
}
.stats-list {
display: grid;
gap: 30px;
}
.stats-card {
text-align: center;
padding: 15px;
box-shadow: var(--shadow);
border-radius: var(--radius-12);
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
}
.stats-title {
color: var(--st-patricks-blue);
font-size: var(--fs-2);
font-weight: var(--fw-700);
}
.stats-text { font-size: var(--fs-8); }
/*-----------------------------------*\
#SERVICE
\*-----------------------------------*/
.service-list {
display: grid;
gap: 30px;
}
.service-card {
padding: 30px;
box-shadow: var(--shadow);
border-radius: var(--radius-12);
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
}
.service-card .card-icon {
background-image: url("../images/service-banner-pattern.png");
background-repeat: no-repeat;
background-size: contain;
background-color: hsla(335, 87%, 53%, 0.12);
aspect-ratio: 1 / 1;
max-width: 165px;
display: grid;
place-content: center;
margin-inline: auto;
transition: var(--transition-1);
}
.service-card:hover .card-icon { background-color: var(--winter-sky); }
.service-card .card-icon ion-icon {
font-size: 5rem;
color: var(--winter-sky);
--ionicon-stroke-width: 20px;
transition: var(--transition-1);
}
.service-card:hover .card-icon ion-icon { color: var(--white); }
.service-card .title {
text-align: center;
margin-block-end: 15px;
}
.service-card .text {
text-align: center;
margin-block-end: 20px;
}
.service-card .card-btn {
margin-inline: auto;
padding: 15px;
border: 1px solid var(--winter-sky);
border-radius: 50%;
color: var(--winter-sky);
transition: var(--transition-1);
}
.service-card .card-btn:is(:hover, :focus) {
color: var(--white);
background-color: var(--winter-sky);
}
/*-----------------------------------*\
#FEATURE
\*-----------------------------------*/
.features-list > li:first-child { margin-block-end: 30px; }
.features-card {
display: flex;
align-items: flex-start;
gap: 20px;
}
.features-card .icon {
background-image: var(--gradient-1);
background-size: 200%;
color: var(--white);
min-width: max-content;
max-width: max-content;
font-size: 36px;
padding: 22px;
border-radius: 50%;
}
.features-card .icon ion-icon { --ionicon-stroke-width: 20px; }
.features-card .title { margin-block-end: 10px; }
.features-banner { margin-block: 40px; }
.features-banner > img {
max-width: max-content;
margin-inline: auto;
}
/*-----------------------------------*\
#BLOG
\*-----------------------------------*/
.blog { padding-block-end: 120px; }
.blog-list {
display: grid;
gap: 30px;
}
.blog-card {
padding: 20px;
box-shadow: var(--shadow);
border-radius: var(--radius-12);
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
}
.blog-card .banner {
border-radius: var(--radius-12);
overflow: hidden;
margin-block-end: 15px;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
}
.blog-card .banner img { transition: var(--transition-2); }
.blog-card .banner a:is(:hover, :focus) img { transform: scale(1.1); }
.blog-card .title {
color: var(--st-patricks-blue);
font-size: var(--fs-6);
line-height: 1.2;
margin-block-end: 15px;
}
.blog-card .title > a { color: inherit; }
.blog-card .title > a:is(:hover, :focus) { color: var(--razzmatazz); }
.blog-card .text { margin-block-end: 15px; }
.blog-card .meta {
display: flex;
justify-content: space-between;
align-items: center;
gap: 15px;
font-size: var(--fs-8);
color: var(--purple-navy);
font-weight: var(--fw-500);
padding-block-end: 10px;
}
.blog-card .meta ion-icon {
color: var(--winter-sky);
font-size: 22px;
--ionicon-stroke-width: 35px;
}
.publish-date,
.comment {
display: flex;
align-items: center;
gap: 8px;
}
.comment {
color: inherit;
margin-inline-start: auto;
}
/*-----------------------------------*\
#FOOTER
\*-----------------------------------*/
.footer { font-size: var(--fs-8); }
.footer a { color: inherit; }
.footer-top {
background-image: url("../images/footer-bg.png"), var(--gradient-1);
background-repeat: no-repeat;
background-size: auto, 200%;
background-position: center, center;
color: var(--white);
}
.footer-brand { margin-block-end: 30px; }
.footer-brand .logo {
font-weight: var(--fw-700);
margin-block-end: 15px;
}
.footer-brand .text {
font-size: var(--fs-8);
margin-block-end: 20px;
}
.social-list {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 10px;
}
.footer-top .social-link {
background-color: var(--white);
color: var(--winter-sky);
font-size: 18px;
padding: 8px;
border-radius: 50%;
}
.footer-top .social-link:is(:hover, :focus) {
background-image: var(--gradient-2);
color: var(--white);
}
.footer-list:not(:last-child) { margin-block-end: 25px; }
.footer-list-title {
font-family: var(--ff-source-sans-pro);
font-size: var(--fs-5);
font-weight: var(--fw-700);
margin-block-end: 15px;
}
.footer-link { padding-block: 5px; }
:is(.footer-link, .footer-item-link):not(address):is(:hover, :focus) { text-decoration: underline; }
.footer-item {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 10px;
padding-block: 10px;
}
.footer-item-icon {
background-image: var(--gradient-2);
padding: 13px;
border-radius: 50%;
}
.footer-bottom {
background-color: var(--space-cadet-2);
padding: 20px;
text-align: center;
color: var(--white);
}
.copyright-link {
display: inline-block;
text-decoration: underline;
}
.copyright-link:is(:hover, :focus) { text-decoration: none; }
/*-----------------------------------*\
#GO TO TOP
\*-----------------------------------*/
.go-top {
position: fixed;
bottom: 0;
right: 15px;
background-color: var(--winter-sky);
color: var(--white);
font-size: 2rem;
padding: 14px;
border-radius: var(--radius-4);
box-shadow: -3px 3px 15px var(--winter-sky_50);
z-index: 2;
visibility: hidden;
opacity: 0;
transition: var(--transition-1);
}
.go-top.active {
visibility: visible;
opacity: 1;
transform: translateY(-15px);
/* box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7); */
border:0.1rem solid rgba(0,0,0,0.7);
}
/*-----------------------------------*\
#MEDIA QUERIES
\*-----------------------------------*/
/**
* responsive for larger than 550px screen
*/
@media (min-width: 550px) {
/**
* REUSED STYLE
*/
.container {
max-width: 550px;
margin-inline: auto;
}
.section-title { --fs-3: 3.6rem; }
/**
* HEADER
*/
.header .btn {
display: flex;
align-items: center;
gap: 5px;
margin-inline-start: auto;
}
/**
* ABOUT
*/
.stats-list { grid-template-columns: repeat(3, 1fr); }
/**
* BLOG
*/
.blog-card {
display: grid;
grid-template-columns: 0.75fr 1fr;
gap: 20px;
padding: 30px;
}
.blog-card .banner { margin-block-end: 0; }
.blog-card .banner a { height: 100%; }
/**
* FOOTER
*/
.footer-brand,
.footer-list:not(:last-child) { margin-block-end: 0; }
.footer-top .container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px 50px;
}
}
/**
* responsive for larger than 768px screen
*/
@media (min-width: 768px) {
/**
* REUSED STYLE
*/
.container { max-width: 720px; }
/**
* HERO
*/
.hero {
min-height: 600px;
display: grid;
place-items: center;
}
.hero-content { margin-block-end: 0; }
.hero .container {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 30px;
}
/**
* SERVICE
*/
.service-list { grid-template-columns: 1fr 1fr; }
/**
* FEATURES
*/
.features-list > li:first-child { margin-block-end: 0; }
.features-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 25px;
}
/**
* FOOTER
*/
.footer-top .container { grid-template-columns: repeat(3, 1fr); }
}
/**
* responsive for larger than 992px screen
*/
@media (min-width: 992px) {
/**
* CUSTOM PROPERTY
*/
:root {
/**
* typography
*/
--fs-1: 5.4rem;
}
/**
* REUSED STYLE
*/
.container { max-width: 950px; }
/**
* HEADER
*/
.header { padding-block: 20px; }
.overlay,
.nav-open-btn,
.navbar-top { display: none; }
.navbar,
.navbar.active {
all: unset;
margin-inline-start: auto;
}
.header .btn { margin-inline-start: 0; }
.navbar-list {
display: flex;
gap: 25px;
}
.navbar-item:not(:last-child) { border-bottom: none; }
.navbar-link { color: var(--color); }
/**
* HERO
*/
.hero { min-height: 700px; }
/**
* ABOUT
*/
.about .container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
}
/**
* SERVICE
*/
.service-list { grid-template-columns: repeat(3, 1fr); }
/**
* FEATURES
*/
.features-list { grid-template-columns: 1fr; }
.features .container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.features .section-title { grid-column: 1 / 4; }
.features-banner {
margin-block: 0;
display: grid;
place-items: center;
}
/**
* FOOTER
*/
.footer-top .container { grid-template-columns: repeat(4, 1fr); }
.footer-brand { grid-column: 1 / 5; }
.footer-brand .text { max-width: 45ch; }
}
/**
* responsive for larger than 1200px screen
*/
@media (min-width: 1200px) {
/**
* REUSED STYLE
*/
.container { max-width: 1200px; }
.section-title { --fs-3: 4.6rem; }
/**
* HERO
*/
.hero { min-height: 800px; }
/**
* BLOG
*/
.blog-list { grid-template-columns: 1fr 1fr; }
.blog-card { height: 100%; }
.blog-card .content {
display: flex;
flex-direction: column;
justify-content: space-between;
}
/**
* FOOTER
*/
.footer-top .container { grid-template-columns: 1fr 0.5fr 0.7fr 0.5fr 1fr; }
.footer-brand { grid-column: auto; }
}
main.js
'use strict';
/**
* navbar toggle
*/
const navOpenBtn = document.querySelector("[data-nav-open-btn]");
const navbar = document.querySelector("[data-navbar]");
const navCloseBtn = document.querySelector("[data-nav-close-btn]");
const overlay = document.querySelector("[data-overlay]");
const elemArr = [navCloseBtn, overlay, navOpenBtn];
for (let i = 0; i < elemArr.length; i++) {
elemArr[i].addEventListener("click", function () {
navbar.classList.toggle("active");
overlay.classList.toggle("active");
});
}
/**
* toggle navbar & overlay when click any navbar-link
*/
const navbarLinks = document.querySelectorAll("[data-navbar-link]");
for (let i = 0; i < navbarLinks.length; i++) {
navbarLinks[i].addEventListener("click", function () {
navbar.classList.toggle("active");
overlay.classList.toggle("active");
});
}
/**
* header & go-top-btn active
* when window scroll down to 400px
*/
const header = document.querySelector("[data-header]");
const goTopBtn = document.querySelector("[data-go-top]");
window.addEventListener("scroll", function () {
if (window.scrollY >= 400) {
header.classList.add("active");
goTopBtn.classList.add("active");
} else {
header.classList.remove("active");
goTopBtn.classList.remove("active");
}
});
