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.
-
Responsive Movie Landing Page Website Design
-
Anime Website Design Using HTML CSS JavaScript
-
Online Cake Shop Website Design With Source Code
-
Hotel Booking Website Design HTML CSS and JAVASCRIPT
-
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 data-header>
<a href="#">
<h1>Agency</h1>
</a>
<nav data-navbar>
<a href="#">Agency</a>
<button aria-label="Close Menu" data-nav-close-btn>
<ion-icon name="close-outline"></ion-icon>
</button>
<ul>
<li>
<a href="#home" data-navbar-link>Home</a>
</li>
<li>
<a href="#about" data-navbar-link>About</a>
</li>
<li>
<a href="#services" data-navbar-link>Services</a>
</li>
<li>
<a href="#features" data-navbar-link>Features</a>
</li>
<li>
<a href="#blog" data-navbar-link>Blog</a>
</li>
<li>
<a href="#" data-navbar-link>Contact Us</a>
</li>
</ul>
</nav>
<a href="#">
<ion-icon name="chevron-forward-outline" aria-hidden="true"></ion-icon>
Get A Quote
</a>
<button aria-label="Open Menu" data-nav-open-btn>
<ion-icon name="menu-outline"></ion-icon>
</button>
</header>
<main>
<article>
<!--
- #HERO
-->
<section id="home">
<p>We Are Product Designer From USA</p>
<h2>We Design Interfaces That Users Love</h2>
<p>
Sed ut perspiciatis unde omnis iste natus farha sit voluptatem accusantium doloremque laudantium, totam rem
aperiam.
</p>
<button>Learn More</button>
<figure>
<img loading="lazy" loading="lazy" decoding="async" src="./assets/images/hero-banner2.png" width="694" height="529" loading="lazy" alt="hero-banner"
>
</figure>
</section>
<!--
- #ABOUT
-->
<section id="about">
<figure>
<img loading="lazy" loading="lazy" decoding="async" src="./assets/images/about-banner2.png" width="700" height="532" loading="lazy" alt="about banner"
>
</figure>
<h2>Why Our Agency</h2>
<p>
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>
Praesent rhoncus commodo tortor, id pulvinar nisl blandit at. Nulla facilisi. Quisque turpis ante,
vehicula condimentum
arcu.
</p>
<ul>
<li>
<p>9786</p>
<p>Satisfied Clients</p>
</li>
<li>
<p>7564</p>
<p>Project Lunched</p>
</li>
<li>
<p>27</p>
<p>Years Completed</p>
</li>
</ul>
</section>
<!--
- #SERVICE
-->
<section id="services">
<h2>Our Speciallization</h2>
<ul>
<li>
<ion-icon name="telescope-outline"></ion-icon>
<h3>Strategy & Research</h3>
<p>
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 aria-label="Show More">
<ion-icon name="chevron-forward-outline"></ion-icon>
</button>
</li>
<li>
<ion-icon name="desktop-outline"></ion-icon>
<h3>Web Development</h3>
<p>
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 aria-label="Show More">
<ion-icon name="chevron-forward-outline"></ion-icon>
</button>
</li>
<li>
<ion-icon name="globe-outline"></ion-icon>
<h3>Web Solution</h3>
<p>
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 aria-label="Show More">
<ion-icon name="chevron-forward-outline"></ion-icon>
</button>
</li>
</ul>
</section>
<!--
- #FEATURES
-->
<section id="features">
<h2>Our Features</h2>
<ul>
<li>
<ion-icon name="bulb-outline"></ion-icon>
<h3>Idea & Analysis</h3>
<p>
Praesent tincidunt congue est ut hendrerit. Pellentesque et eros sit amet ipsum venenatis.
</p>
</li>
<li>
<ion-icon name="color-palette-outline"></ion-icon>
<h3>Designing</h3>
<p>
Praesent tincidunt congue est ut hendrerit. Pellentesque et eros sit amet ipsum venenatis.
</p>
</li>
</ul>
<figure>
<img loading="lazy" loading="lazy" decoding="async" src="./assets/images/feautres-banner2.png" width="369" height="318" loading="lazy" alt="Features Banner"
>
</figure>
<ul>
<li>
<ion-icon name="code-slash-outline"></ion-icon>
<h3>Development</h3>
<p>
Praesent tincidunt congue est ut hendrerit. Pellentesque et eros sit amet ipsum venenatis.
</p>
</li>
<li>
<ion-icon name="rocket-outline"></ion-icon>
<h3>Testing & Lunching</h3>
<p>
Praesent tincidunt congue est ut hendrerit. Pellentesque et eros sit amet ipsum venenatis.
</p>
</li>
</ul>
</section>
<!--
- #BLOG
-->
<section id="blog">
<h2>Our Blog & News</h2>
<ul>
<li>
<figure>
<a href="#">
<img loading="lazy" loading="lazy" decoding="async" src="./assets/images/blog-11.jpg" width="750" height="350" loading="lazy"
alt="Vestibulum massa arcu, consectetu pellentesque scelerisque.">
</a>
</figure>
<h3>
<a href="#">
Vestibulum massa arcu, consectetu pellentesque scelerisque.
</a>
</h3>
<p>
Sed quis sagittis velit. Aliquam velit eros, bibendum ut massa et, consequat laoreet erat nam ac
imperdiet.
</p>
<ion-icon name="time-outline"></ion-icon>
<time datetime="2023-03-07">27 March, 2023</time>
<button aria-label="Comment">
<ion-icon name="chatbubble-outline"></ion-icon>
<data value="15">15</data>
</button>
<button aria-label="Share">
<ion-icon name="share-social-outline"></ion-icon>
</button>
</li>
<li>
<figure>
<a href="#">
<img loading="lazy" 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.">
</a>
</figure>
<h3>
<a href="#">
Quisque egestas iaculis felis eget placerat ut pulvinar mi.
</a>
</h3>
<p>
Sed quis sagittis velit. Aliquam velit eros, bibendum ut massa et, consequat laoreet erat nam ac
imperdiet.
</p>
<ion-icon name="time-outline"></ion-icon>
<time datetime="2023-03-07">27 March, 2023</time>
<button aria-label="Comment">
<ion-icon name="chatbubble-outline"></ion-icon>
<data value="15">15</data>
</button>
<button aria-label="Share">
<ion-icon name="share-social-outline"></ion-icon>
</button>
</li>
<li>
<figure>
<a href="#">
<img loading="lazy" 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.">
</a>
</figure>
<h3>
<a href="#">
Fusce sem ligula, imperdiet sed nisi sit amet, euismod posuere.
</a>
</h3>
<p>
Sed quis sagittis velit. Aliquam velit eros, bibendum ut massa et, consequat laoreet erat nam ac
imperdiet.
</p>
<ion-icon name="time-outline"></ion-icon>
<time datetime="2023-03-07">27 March, 2023</time>
<button aria-label="Comment">
<ion-icon name="chatbubble-outline"></ion-icon>
<data value="15">15</data>
</button>
<button aria-label="Share">
<ion-icon name="share-social-outline"></ion-icon>
</button>
</li>
<li>
<figure>
<a href="#">
<img loading="lazy" 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.">
</a>
</figure>
<h3>
<a href="#">
Donec feugiat mollis nisi in dignissim. Morbi sollicitudin quis.
</a>
</h3>
<p>
Sed quis sagittis velit. Aliquam velit eros, bibendum ut massa et, consequat laoreet erat nam ac
imperdiet.
</p>
<ion-icon name="time-outline"></ion-icon>
<time datetime="2023-03-07">27 March, 2023</time>
<button aria-label="Comment">
<ion-icon name="chatbubble-outline"></ion-icon>
<data value="15">15</data>
</button>
<button aria-label="Share">
<ion-icon name="share-social-outline"></ion-icon>
</button>
</li>
</ul>
</section>
</article>
</main>
<!--
- #FOOTER
-->
<footer>
<a href="#">Agency</a>
<p>
Maecenas pellentesque placerat quam, in finibus nisl tincidunt sed. Aliquam magna augue, malesuada ut
feugiat eget,
cursus eget felis.
</p>
<ul>
<li>
<a href="#">
<ion-icon name="logo-facebook"></ion-icon>
</a>
</li>
<li>
<a href="#">
<ion-icon name="logo-instagram"></ion-icon>
</a>
</li>
<li>
<a href="#">
<ion-icon name="logo-twitter"></ion-icon>
</a>
</li>
</ul>
<ul>
<li>
<p>Our links</p>
</li>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About Us</a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Team</a>
</li>
<li>
<a href="#">Blog</a>
</li>
</ul>
<ul>
<li>
<p>Our Services</p>
</li>
<li>
<a href="#">Strategy & Research</a>
</li>
<li>
<a href="#">Web Development</a>
</li>
<li>
<a href="#">Web Solution</a>
</li>
<li>
<a href="#">Digital Marketing</a>
</li>
<li>
<a href="#">App Design</a>
</li>
</ul>
<ul>
<li>
<p>Other links</p>
</li>
<li>
<a href="#">FAQ</a>
</li>
<li>
<a href="#">Portfolio</a>
</li>
<li>
<a href="#">Privacy Policy</a>
</li>
<li>
<a href="#">Terms & Conditions</a>
</li>
<li>
<a href="#">Support</a>
</li>
</ul>
<ul>
<li>
<p>Contact Us</p>
</li>
<li>
<ion-icon name="call"></ion-icon>
<a href="tel:+2786214313">+278-621-4313</a>
<a href="tel:+2786871365">+278-687-1365</a>
</li>
<li>
<ion-icon name="mail"></ion-icon>
<a href="mailto:info@agency.com">info@agency.com</a>
<a href="mailto:help@agency.com">help@agency.com</a>
</li>
<li>
<ion-icon name="location"></ion-icon>
<address>
Amphitheatre, ParkwayMounta, United States of America
</address>
</li>
</ul>
<p>
© 2023 <a href="#">dailywebdesign</a>. All Right Reserved
</p>
</footer>
<!--
- #GO TO TOP
-->
<a href="#top" aria-label="Go To Top" data-go-top>
<ion-icon name="arrow-up-outline"></ion-icon>
</a>
<!--
- custom js link
-->
<!--
- ionicon link
-->
</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");
}
});
images
|
|
|
|
| Stunning Agency Website |
|
|
| Stunning Agency Website |
