How to create a multiple-page website in HTML? (downloadable template)
This post will show you how to create a multi-page website in HTML. End of it, I will also give you the full source code to download. You will also learn how to upload this static HTML website to a live domain & hosting.
First, see the live preview that you’re going to build.
Template Link
Before writing any code, create a project folder (avoid spaces or special characters). In this example, I made a folder called “webdesign” on my desktop. Inside, I’ll create three HTML files: index.html (home page), about.html, and contact.html. I’ll also add style.css for styling all pages.
Here’s the project structure:
As you see I have an additional folder (img) for storing images & a favicon (favicon.png) for the site identity. It’s not mandatory to have but professionals have it. So I would suggest you have the favicon as well.
Open the project in any text editor. If you’re unsure, use Visual Studio Code (VS Code) — it’s free, powerful, and has a built-in terminal.
Once your files are open, we can start coding.
In the first step, we will work on the “index.html & style.css” and then copy & paste the global header & footer to the other files.
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" />
<link rel="stylesheet" href="style.css" />
<link rel="shortcut icon" href="favicon.png" type="image/x-icon" />
<!-- font (google) -->
<link
href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap"
rel="stylesheet"
/>
<title>Home</title>
</head>
<body>
<header>
<nav>
<div class="logo-container">
<a href="index.html"><img src="img/logo.png" alt="logo" /></a>
</div>
<div class="navigation-container">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
</header>
<section class="banner">
<h1>Web designer in Chicago</h1>
<p>
Take your business to the next level. I help small business owners to
create their websites.
</p>
<a class="button_a" href="./contact.html">Contact me →</a>
</section>
<!-- .banner -->
<section class="sec-intro">
<div class="col">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ea
distinctio dolorem, suscipit amet ipsa nisi inventore id porro
blanditiis, ex illum natus. Similique quae saepe ad possimus minus ab
rem.
</p>
<p>
Sit amet consectetur adipisicing elit. Hic aperiam voluptatibus
necessitatibus ducimus, aliquid quasi quae totam ea impedit culpa eum
minima blanditiis fugit veritatis
</p>
<img src="./img/multipage-html-img1.jpg" alt="person" />
<figcaption>Designing websites since 2025</figcaption>
<p>
Aliquid quasi quae totam ea impedit culpa eum minima blanditiis fugit
veritatis.
</p>
</div>
</section>
<!-- .sec-intro -->
<section class="sec-core-services">
<h2>Services I offer</h2>
<div class="sec-core-services-wrapper">
<div class="card">
<img src="./img/multipage-html-img2.jpg" alt="web design" />
<h3>Web design</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi
odit ipsam dolore quae vitae nam vero soluta fugit libero ab amet.
</p>
</div>
<!-- .card -->
<div class="card">
<img src="./img/multipage-html-img3.jpg" alt="SEO service" />
<h3>SEO</h3>
<p>
Debitis quasi placeat! Culpa praesentium dolore nobis ipsa modi.
Ipsum dolor sit amet consectetur adipisicing elitdommodi odit ipsam
dolore quae vitae.
</p>
</div>
<!-- .card -->
<div class="card">
<img src="./img/multipage-html-img4.jpg" alt="Logo designing" />
<h3>Logo design</h3>
<p>
Luasi placeat! Culpa praesentium dolore nobis ipsa modi. Ipsum dolor
sit amet consectetur adipisicing elitdommodi odit ipsam dolore quae
vitae sit amet consectetur adipisicing.
</p>
</div>
<!-- .card -->
</div>
<!-- .sec-core-services-wrapper -->
</section>
<!-- .sec-core-services -->
<section class="sec-completed-projects">
<h3>100+ projects completed in 2022</h3>
<p>
If you hire me to design your website, you can be assured that you're
getting service from a top notch expert!
</p>
<a class="button_a" href="contact.html">Let's discuss ↠</a>
</section>
<section class="sec-testimonials">
<h3>Testimonials - What clients are saying about me!</h3>
<div class="sec-testimonials-wrapper">
<div class="sec-testimonials-wrapper-speaches">
<div class="card">
<blockquote>
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Exercitationem ipsum architecto voluptas. Ipsum laborum
voluptatibus dolorem ducimus quo ut ex consequuntur, enim quaerat
dolores fugiat. Ad dolore labore totam enim!
</blockquote>
<img src="./img/client1.jpg" alt="client" />
<p>John Doe, CEO, Laravel councelling center, Illions.</p>
</div>
<!-- .card -->
<div class="card">
<blockquote>
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Exercitationem ipsum architecto voluptas. Ipsum laborum
voluptatibus dolorem ducimus quo ut ex consequuntur, enim quaerat
dolores fugiat. Ad dolore labore totam enim!
</blockquote>
<img src="./img/client2.jpg" alt="client" />
<p>Jane Dolly, Trainer, Node Yoga Center, Vancouver, CA.</p>
</div>
<!-- .card -->
</div>
<!-- .sec-testimonials-wrapper-speaches -->
<div class="sec-testimonials-wrapper-promo-photo">
<img src="./img/img5.jpg" alt="business interactions" />
</div>
</div>
<!-- .sec-testimonials-wrapper -->
</section>
<!-- .sec-testimonials -->
<section class="expertise">
<h2>My skills & expertise</h2>
<div class="expertise-container">
<div class="expertise-wrapper">
<div class="programming-skills">
<div class="html item">
<h3>HTML</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet
distinctio rem asperiores dignissimos voluptas animi, hic
tempore optio non pariatur.
</p>
</div>
<div class="css item">
<h3>CSS</h3>
<p>
Consectetur adipisicing elit. Nam natus dolore vel hic,
excepturi quo illum, architecto sunt exercitationem expedita
aliquam deleniti, ab tempora enim quibusdam saepe.
</p>
</div>
<div class="javascript item">
<h3>JavaScript</h3>
<p>
Amet consectetur adipisicing elit. Libero voluptatum accusamus
aliquam vel sequi omnis eaque amet odio tempore velit veritatis
reprehenderit quibusdam est quasi, ipsam sint culpa.
</p>
</div>
</div>
<!-- .programming-skills -->
<div class="other-skills">
<div class="seo item">
<h3>SEO</h3>
<p>
Dolorsit amet consectetur adipisicing elit. Eum impedit placeat,
rerum, laborum recusandae animi consequatur repudiandae in
aspernatur illo ratione consequuntur natus id consectetur
veritatis amet provident vitae.
</p>
</div>
<div class="photoshop item">
<h3>Photoshop</h3>
<p>
Amet rsitum impedit placeat, rerum, laborum recusandae animi
consequatur repudiandae in aspernatur illo ratione consequuntur
natus id consectetur veritatis amet provident vitae consectetur
adipisicing elit.
</p>
</div>
</div>
<!-- .other-skills -->
</div>
<!-- .expertise-wrapper -->
<div class="cta">
<h3>Need help from an expert?</h3>
<img src="./img/img6.jpg" alt="trusted by clients" />
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Obcaecati
ratione error beatae sunt mollitia odio magnam alias quas illo
eligendi pariatur necessitatibus perferendis in, fugiat at quasi!
Velit, illum facere. Lorem ipsum dolor sit amet consectetur
adipisicing elit. Adipisci impedit nihil eveniet earum repellat
neque eius, cum dolores quod harum enim consequatur reiciendis
eligendi temporibus molestias dolorum praesentium hic eos!
</p>
<a class="button_a" href="contact.html">Get in touch ⤖</a>
</div>
<!-- .cta -->
</div>
<!-- .expertise-container -->
</section>
<!-- .expertise -->
<footer>
<div class="footer-container">
<div class="footer-col">
<img src="./img/logo.png" alt="logo" />
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque
nostrum porro rem est ab ad accusantium eveniet exercitationem
corporis voluptas, dolores amet maxime facilis maiores! Ea corrupti
rerum sunt velit.
</p>
</div>
<div class="footer-col">
<h4>Contact options</h4>
<p>
<a
href="mailto:email@example.com?subject=Enquiry&body=Hello, I have a question"
>Email me</a
>
</p>
<p>Call me: <a href="tel:+1234567890">+1 (234) 567-8900</a></p>
<p>
<a
href="https://wa.me/1234567890?text=Hello,%20I%20have%20a%20question"
>Contact me on WhatsApp</a
>
</p>
</div>
<div class="footer-col">
<h4>Sitemap</h4>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>
</div>
<div class="bottombar">
Copyright © 2023 Your_Name. All rights reserved.
</div>
</footer>
</body>
</html>about.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" />
<link rel="stylesheet" href="style.css" />
<link rel="shortcut icon" href="favicon.png" type="image/x-icon" />
<!-- font (google) -->
<link
href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap"
rel="stylesheet"
/>
<title>About me</title>
</head>
<body>
<header>
<nav>
<div class="logo-container">
<a href="index.html"><img src="img/logo.png" alt="logo" /></a>
</div>
<div class="navigation-container">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
</header>
<section class="about">
<div class="about-container">
<div class="about-me">
<h1>About me</h1>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et in
consectetur, amet laborum laudantium impedit id enim dolore
asperiores dignissimos quasi recusandae beatae, eveniet ex illo
doloremque. Sapiente, obcaecati eaque!
</p>
<p>
Dolor sit amet consectetur adipisicing elit. Et in consectetur, amet
laborum laudantium impedit id enim dolore asperiores dignissimos
quasi recusandae beatae, eveniet ex illo doloremque.
</p>
<p>
Consectetur adipisicing elit. Et in consectetur, amet laborum
laudantium impedit id enim dolore asperiores dignissimos quasi
recusandae beatae obcaecati eaque!
</p>
</div>
<!-- .about-me -->
<div class="my-photo">
<img src="./img/img7.jpg" alt="headshot" />
</div>
<!-- .my-photo -->
</div>
<!-- .about-container -->
</section>
<!-- .about -->
<section class="why">
<div class="why-container">
<h2>Why you should work with me?</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam
perspiciatis alias id, necessitatibus magnam saepe illo corrupti iure
quasi nostrum doloribus ipsa quod ex repellendus odit aliquid
laudantium. Repellendus, officiis?
</p>
<p>
Amet consectetur adipisicing elit. Pariatur consequuntur alias illo ad
sequi, magni quo a iusto, fugit commodi beatae repellat molestias
corporis quis excepturi.
</p>
<h3>Some of my past work samples</h3>
<div class="work-samples">
<div><img src="./img/multipage-html-img2.jpg" alt="portfolio" /></div>
<div><img src="./img/multipage-html-img3.jpg" alt="portfolio" /></div>
<div><img src="./img/multipage-html-img4.jpg" alt="portfolio" /></div>
</div>
<!-- .work-samples -->
</div>
<!-- .why-container -->
</section>
<!-- .why -->
<section class="past-employment">
<div class="past-employment-container">
<h2>Past employment history</h2>
<div class="past-present">
<div class="companies">
<div class="org">
<h3>Consectetur adipisicing:</h3>
<time datetime="2015-06-01">June 01, 2015</time> -
<time datetime="2017-12-31">December 31, 2017</time>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Error
nobis ipsa quas cum numquam atque ducimus alias, suscipit
provident quia, ullam, voluptas quasi vel doloremque fugit
asperiores ratione. Consequatur, veniam?
</p>
</div>
<!-- .org -->
<div class="org">
<h3>Doloremque asperiores:</h3>
<time datetime="2018-04-01">April 01, 2018</time> -
<time datetime="2022-10-31">October 31, 2022</time>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Error
nobis ipsa quas cum numquam atque ducimus alias, suscipit
provident quia, ullam, voluptas quasi vel doloremque fugit
asperiores ratione. Consequatur, veniam?
</p>
</div>
<!-- .org -->
</div>
<!-- .companies -->
<div class="cv">
<p>Currently self employed but open to joing a new time.</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea
adipisci quasi ullam suscipit itaque magni aspernatur accusantium
nisi. Facilis nostrum rerum aperiam molestias fugiat a, quae autem
laboriosam labore quia.
</p>
<p>
<a href="./img/resume.pdf" download="cv-john-doe" target="_blank"
>Download my resume</a
>
</p>
</div>
<!-- .cv -->
</div>
<!-- past-present -->
</div>
<!-- .past-employment-container -->
</section>
<!-- .past-employment -->
<footer>
<div class="footer-container">
<div class="footer-col">
<img src="./img/logo.png" alt="logo" />
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque
nostrum porro rem est ab ad accusantium eveniet exercitationem
corporis voluptas, dolores amet maxime facilis maiores! Ea corrupti
rerum sunt velit.
</p>
</div>
<div class="footer-col">
<h4>Contact options</h4>
<p>
<a
href="mailto:email@example.com?subject=Enquiry&body=Hello, I have a question"
>Email me</a
>
</p>
<p>Call me: <a href="tel:+1234567890">+1 (234) 567-8900</a></p>
<p>
<a
href="https://wa.me/1234567890?text=Hello,%20I%20have%20a%20question"
>Contact me on WhatsApp</a
>
</p>
</div>
<div class="footer-col">
<h4>Sitemap</h4>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>
</div>
<div class="bottombar">
Copyright © 2023 Your_Name. All rights reserved.
</div>
</footer>
</body>
</html>contact.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" />
<link rel="stylesheet" href="style.css" />
<link rel="shortcut icon" href="favicon.png" type="image/x-icon" />
<!-- font (google) -->
<link
href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap"
rel="stylesheet"
/>
<title>Contact me</title>
</head>
<body>
<header>
<nav>
<div class="logo-container">
<a href="index.html"><img src="img/logo.png" alt="logo" /></a>
</div>
<div class="navigation-container">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
</header>
<section class="contact">
<div class="contact-wrapper">
<h1>Contact me</h1>
<div class="contact-row">
<div class="greeting">
<p>Need help with designing a website?</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Velit
ratione ducimus voluptatum commodi officia eligendi consectetur
pariatur officiis corporis sunt ad perferendis, ullam debitis
possimus, dicta perspiciatis quibusdam reprehenderit modi.
</p>
<p>
Instead of a boring contact form, let's contact directly & using
any ways you prefer.
</p>
</div>
<div class="contact-method">
<h4>Contact options</h4>
<p>
<a
href="mailto:email@example.com?subject=Enquiry&body=Hello, I have a question"
>Email me</a
>
(hello@domain.com)
</p>
<p>Call me: <a href="tel:+1234567890">+1 (234) 567-8900</a></p>
<p>
<a
href="https://wa.me/1234567890?text=Hello,%20I%20have%20a%20question"
>Contact me on WhatsApp</a
>
</p>
</div>
</div>
</div>
<!-- .contact-wrapper -->
</section>
<!-- .contact -->
<footer>
<div class="footer-container">
<div class="footer-col">
<img src="./img/logo.png" alt="logo" />
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque
nostrum porro rem est ab ad accusantium eveniet exercitationem
corporis voluptas, dolores amet maxime facilis maiores! Ea corrupti
rerum sunt velit.
</p>
</div>
<div class="footer-col">
<h4>Contact options</h4>
<p>
<a
href="mailto:email@example.com?subject=Enquiry&body=Hello, I have a question"
>Email me</a
>
</p>
<p>Call me: <a href="tel:+1234567890">+1 (234) 567-8900</a></p>
<p>
<a
href="https://wa.me/1234567890?text=Hello,%20I%20have%20a%20question"
>Contact me on WhatsApp</a
>
</p>
</div>
<div class="footer-col">
<h4>Sitemap</h4>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>
</div>
<div class="bottombar">
Copyright © 2023 Your_Name. All rights reserved.
</div>
</footer>
</body>
</html>style.css
/* basic css (reset) */
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
background-color: #f3f4f6;
font-family: "Lato", sans-serif;
font-size: 1.1rem;
font-weight: 400;
/* available weights: 400, 700 & 400 italic */
}
img {
max-width: 100%;
height: auto;
}
ul {
padding: 0;
margin: 0;
}
figcaption {
font-size: 0.75rem;
font-style: italic;
color: #424242;
letter-spacing: 1px;
}
blockquote {
padding: 0;
margin: 0;
}
section {
padding: 90px 15px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0 0 10px;
color: #193549;
}
h1 {
font-size: 35px;
}
h2 {
font-size: 30px;
}
@media (min-width: 768px) {
h1 {
font-size: 70px;
}
h2 {
font-size: 60px;
}
}
.button_a {
display: inline-block;
text-decoration: none;
text-transform: uppercase;
font-weight: 700;
font-size: 1.125rem;
background-color: #e0413d;
padding: 15px;
border: 2px solid #c73330;
border-radius: 45px;
box-shadow:
0 4px 8px 0 rgba(0, 0, 0, 0.2),
0 6px 20px 0 rgba(0, 0, 0, 0.19);
transition: background-color 0.8s ease;
}
.button_a:hover {
background-color: #99130f;
}
/* global style ended above */
/* header navigation menu */
header {
background-color: #0c1733;
}
nav {
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
}
nav .logo-container {
max-width: 130px;
}
@media (min-width: 768px) {
nav .logo-container {
max-width: 250px;
}
}
nav .logo-container a img {
margin: 15px 5px;
}
nav .navigation-container {
width: 100%;
}
nav .navigation-container ul {
display: flex;
justify-content: flex-end;
align-items: center;
}
nav .navigation-container ul li {
list-style: none;
padding: 0;
margin: 0;
}
nav .navigation-container ul li a {
text-decoration: none;
text-transform: uppercase;
font-weight: 700;
font-size: 1rem;
font-style: italic;
color: #ffffff;
padding: 10px 5px;
transition: all 0.9s ease-out;
}
@media (min-width: 768px) {
nav .navigation-container ul li a {
font-size: 1.125rem;
padding: 30px 15px;
}
}
nav .navigation-container ul li a:hover {
background-color: #37415c;
color: #e0413d;
}
/* footer */
footer {
background-color: #193549;
padding: 90px 0 0;
}
footer .footer-container {
max-width: 1200px;
margin: 0 auto;
}
footer .footer-container p,
a,
h4 {
color: #ffffff;
}
footer .footer-container h4 {
margin: 0 0 10px;
}
footer .footer-container p,
a {
font-size: 0.875rem;
}
footer .footer-container img {
max-width: 200px;
}
footer .footer-container .footer-col {
margin: 0 15px 60px;
padding: 30px;
border-radius: 4px;
background: #15232d;
box-shadow: 2px 2px 2px #15232d;
box-shadow:
inset 2px 2px 2px hsla(0, 0%, 100%, 0.25),
inset -2px -2px 2px rgba(0, 0, 0, 0.25);
}
footer .footer-container .footer-col ul li {
list-style: none;
}
@media (min-width: 768px) {
footer .footer-container {
display: flex;
justify-content: space-between;
}
footer .footer-container .footer-col {
flex-basis: 32%;
}
}
footer .bottombar {
padding: 20px 15px;
background-color: #070e14;
text-align: center;
font-style: italic;
color: #ffffff;
}
/* home page - index.html */
.banner {
background-color: #7f53ac;
background-image: linear-gradient(315deg, #7f53ac 0%, #647dee 74%);
padding: 90px 15px;
text-align: center;
}
.banner h1 {
animation: changeColors 5s infinite;
}
@keyframes changeColors {
0% {
color: #ffffff;
}
25% {
color: #d1cdcd;
}
50% {
color: #aba7a7;
}
75% {
color: #5e5c5c;
}
100% {
color: #000000;
}
}
.banner p {
margin-bottom: 60px;
text-shadow: 1px 1px 4px #5c5a5a;
font-size: 1.125rem;
}
@media (min-width: 768px) {
.banner h1 {
font-size: 60px;
font-weight: 700;
}
}
.sec-intro {
background-color: #e9ebec;
}
.sec-intro .col {
max-width: 800px;
margin: 0 auto;
}
.sec-intro .col img {
padding: 0.25rem;
border: 1px solid #bbbbbb;
border-radius: 0.25rem;
}
.sec-core-services {
background-color: #def1fa;
}
.sec-core-services h2 {
text-align: center;
}
.sec-core-services .sec-core-services-wrapper {
display: block;
}
.sec-core-services .sec-core-services-wrapper .card {
margin-bottom: 60px;
}
@media (min-width: 768px) {
.sec-core-services .sec-core-services-wrapper {
display: flex;
justify-content: space-between;
}
.sec-core-services .sec-core-services-wrapper .card {
flex-basis: 30%;
}
}
.sec-completed-projects {
background-color: #ff9800;
text-align: center;
}
.sec-completed-projects h3 {
color: #ffffff;
}
.sec-completed-projects p {
margin-bottom: 60px;
}
@media (min-width: 768px) {
.sec-completed-projects h3 {
font-size: 2.725rem;
}
}
.sec-testimonials {
background-color: #1c1c1c;
background-image: url("./img/binding_dark.gif");
}
.sec-testimonials h3 {
color: #ff9800;
text-align: center;
}
.sec-testimonials
.sec-testimonials-wrapper
.sec-testimonials-wrapper-speaches
.card {
background-color: rgba(255, 152, 0, 0.3);
padding: 15px;
border-radius: 4px;
color: #ffffff;
font-style: italic;
font-size: 0.925rem;
line-height: 1.7;
margin: 0 0 60px;
box-shadow:
0 4px 8px 0 rgba(0, 0, 0, 0.2),
0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.sec-testimonials
.sec-testimonials-wrapper
.sec-testimonials-wrapper-speaches
.card
blockquote {
margin-bottom: 10px;
}
.sec-testimonials
.sec-testimonials-wrapper
.sec-testimonials-wrapper-speaches
.card
p {
margin: 0;
}
.sec-testimonials
.sec-testimonials-wrapper
.sec-testimonials-wrapper-promo-photo
img {
border-radius: 5px;
}
@media (min-width: 768px) {
.sec-testimonials h3 {
font-size: 50px;
}
.sec-testimonials .sec-testimonials-wrapper {
display: flex;
justify-content: space-between;
}
.sec-testimonials
.sec-testimonials-wrapper
.sec-testimonials-wrapper-speaches {
flex-basis: 50%;
}
.sec-testimonials
.sec-testimonials-wrapper
.sec-testimonials-wrapper-speaches
.card
img {
border: 2px solid #ff9800;
border-radius: 50%;
}
.sec-testimonials
.sec-testimonials-wrapper
.sec-testimonials-wrapper-promo-photo {
flex-basis: 45%;
}
}
.expertise {
background-color: #f2f2f2;
}
.expertise .expertise-container .expertise-wrapper .item {
background-color: #def1fa;
margin-bottom: 30px;
padding: 15px;
border: 1px solid #c8e8f7;
border-radius: 4px;
box-shadow: 0 1px 4px 0 rgba(135, 159, 171, 0.71);
}
.expertise .expertise-container .cta {
padding: 10px;
background-color: #a6e2ff;
border: 1px solid #5ecbff;
border-radius: 4px;
}
.expertise .expertise-container .cta p {
margin-bottom: 30px;
}
.expertise .expertise-container .cta a {
margin-bottom: 20px;
}
.expertise .expertise-container .cta img {
padding: 0.25rem;
border: 1px solid #5dcafc;
border-radius: 0.25rem;
}
@media (min-width: 768px) {
.expertise .expertise-container {
display: flex;
justify-content: space-between;
align-items: center;
}
.expertise .expertise-container .expertise-wrapper {
flex-basis: 60%;
}
.expertise .expertise-container .cta {
flex-basis: 35%;
}
.expertise .expertise-container .expertise-wrapper .programming-skills {
display: flex;
justify-content: space-between;
}
.expertise .expertise-container .expertise-wrapper .programming-skills .item {
flex-basis: 30%;
}
.expertise .expertise-container .expertise-wrapper .other-skills {
display: flex;
justify-content: space-between;
}
.expertise .expertise-container .expertise-wrapper .other-skills .item {
flex-basis: 48%;
}
}
/* About page */
.about {
background-color: #bcbec2;
}
.about .about-container .my-photo img {
padding: 0.25rem;
border: 1px solid #08151b;
border-radius: 0.25rem;
}
@media (min-width: 768px) {
.about .about-container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1100px;
margin: 0 auto;
}
.about .about-container .about-me {
flex-basis: 60%;
}
.about .about-container .my-photo {
flex-basis: 35%;
}
}
.why {
background-color: #def1fa;
}
.why .why-container {
max-width: 1100px;
margin: 0 auto;
}
.why .why-container h4 {
color: #193549;
}
.why .why-container .work-samples img {
margin-bottom: 30px;
border-radius: 4px;
}
@media (min-width: 768px) {
.why .why-container .work-samples {
display: flex;
justify-content: space-between;
}
.why .why-container .work-samples > div {
flex-basis: 32%;
}
.why .why-container .work-samples img {
opacity: 0.65;
transition: opacity 0.8s ease;
}
.why .why-container .work-samples img:hover {
opacity: 1;
}
}
.past-employment .past-employment-container .past-present .companies .org {
margin-bottom: 60px;
}
.past-employment .past-employment-container .past-present .companies .org time {
font-style: italic;
font-size: 1rem;
color: #0d3a58;
}
.past-employment .past-employment-container .past-present .cv {
background-color: #e0413d;
padding: 20px 10px;
border-radius: 4px;
}
.past-employment .past-employment-container .past-present .cv p:first-child {
font-weight: 700;
}
.past-employment .past-employment-container .past-present .cv a {
color: #ffffff;
font-weight: 700;
font-style: italic;
text-transform: uppercase;
letter-spacing: 1.2px;
transition: all 0.8s ease;
}
.past-employment .past-employment-container .past-present .cv a:hover {
color: #0c1733;
text-decoration: none;
}
@media (min-width: 768px) {
.past-employment .past-employment-container {
max-width: 1100px;
margin: 0 auto;
}
.past-employment .past-employment-container .past-present {
display: flex;
justify-content: space-between;
align-items: center;
}
.past-employment .past-employment-container .past-present .companies {
flex-basis: 48%;
}
.past-employment .past-employment-container .past-present .cv {
flex-basis: 48%;
}
}
/* Contact page */
.contact .contact-method {
background-color: #a6e2ff;
padding: 20px 10px;
border: 1px solid #5ecbff;
border-radius: 4px;
}
.contact .contact-method h4,
.contact .contact-method p,
.contact .contact-method a {
color: #222222;
}
.contact .greeting {
margin-bottom: 60px;
}
@media (min-width: 768px) {
.contact .contact-wrapper {
max-width: 1100px;
margin: 0 auto;
}
.contact .contact-wrapper .contact-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.contact .contact-wrapper .contact-row .greeting {
flex-basis: 50%;
}
.contact .contact-wrapper .contact-row .contact-method {
flex-basis: 40%;
}
}Download the “img” folder
If you wish to use the same images that I used in the demo, you can download the folder from my GitHub account.
Download img folderIf you found this project helpful, please support me by hitting the 'Star' icon on my GitHub Repository. Please use the following link.
Thanks for being awesome!
This guide focused on using only HTML and CSS to keep things simple and easy to understand. No JavaScript or frameworks were used so you can clearly learn the core styling techniques.
You also learned how HTML page linking works, where file names are directly used in the href attribute.
If you have any questions or suggestions, feel free to share them. This should give you a solid foundation to start building your own multi-page HTML website.
Do you need web design help? Feel free to reach out.
I am a freelance web developer helping other developers, designers, and clients. If you need web design-related help, feel free to reach out to me. Always a reasonable price and easy to communicate with.