PROWAREtech
CSS: Mobile-Responsive Website for Beginners
HTML and CSS only.
This is a whole website that only uses HTML and CSS. There are four HTML pages and one CSS page. Download the whole lot here: BEGINNERWEBSITE.zip
Here is the home page.
Here is the services section on the about page.
Here is the products section on the about page.
Here is the about page on a mobile device with the menu toggled opened. The mobile hamburger menu icon is animated.
CLICK HERE FOR A TASTE OF THIS CODE. This is not the complete website, rather, it is all added to a single page as an example.
Here is the code.
<!DOCTYPE html>
<!-- INDEX.HTML -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HOME - ACME</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<a href="index.html">ACME</a>
<input type="checkbox" id="menu-toggle"><!-- used to toggle the menu state -->
<label for="menu-toggle">
<span></span>
</label>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="about.html#products">Products</a></li>
<li><a href="about.html#services">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</header>
<main>
<section>
<div>
<h1>Pure HTML & CSS Website</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis ipsum eveniet adipisci, optio nesciunt exercitationem nobis consequatur quos deserunt reprehenderit explicabo nisi voluptatem non vitae! Sunt quo porro similique nostrum accusamus iusto nulla. Exercitationem molestiae, quidem debitis eligendi autem recusandae, possimus quos dolorem dignissimos excepturi fuga, nemo dolor est tempora mollitia modi placeat ipsa aut aliquid sit voluptatibus officia? Ratione tempore aspernatur doloremque distinctio at explicabo, culpa iste dolorum. Eligendi minus expedita cupiditate quasi totam vero accusantium, ipsam fugiat saepe eveniet pariatur molestiae sequi vitae impedit natus sed quod perspiciatis qui distinctio quidem quas eaque laboriosam voluptatem consequuntur! Eveniet eligendi cumque ea libero? Soluta odio maiores excepturi natus, iste quae hic debitis dolores deserunt est. Soluta consequuntur perferendis voluptate ducimus velit ullam repellendus assumenda dolor eaque quia delectus unde repudiandae similique, eveniet nam quas omnis temporibus voluptas aliquid, sit laudantium adipisci hic quisquam? Nobis magni nam sint maiores alias id.</p>
<a class="btn" href="about.html">Read More</a>
</div>
<img src="https://picsum.photos/id/296/400/400">
</section>
</main>
<footer>
<div>
<form action="search.html" class="search-box">
<input type="text" name="q" autocomplete="off" autocapitalize="off" placeholder="enter search" required>
<button type="submit"><i class="search-icon"></i></button>
</form>
</div>
<div><a href="#!">Privacy Policy</a></div>
<div>Copyright ©2020 Acme, Inc.</div>
</footer>
</body>
</html>
<!DOCTYPE html>
<!-- ABOUT.HTML -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ABOUT - ACME</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<a href="index.html">ACME</a>
<input type="checkbox" id="menu-toggle"><!-- used to toggle the menu state -->
<label for="menu-toggle">
<span></span>
</label>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="about.html#products">Products</a></li>
<li><a href="about.html#services">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</header>
<main>
<section>
<div>
<h1>About ACME</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatem neque cumque eius consequatur illo quis, non, ea aliquid distinctio saepe animi eaque nisi necessitatibus nihil cum dolorum iste! Corporis culpa officia et saepe repudiandae, incidunt cum tempore hic est rem numquam rerum nisi sint omnis in, fuga odit ea unde quasi explicabo repellendus, labore inventore corrupti. Quia, laboriosam aliquid illum saepe impedit expedita veniam quibusdam, consequatur facere aspernatur, tempora voluptatum soluta ad. Ipsum, ex labore hic nisi velit commodi aut ipsam nemo aperiam quam odit molestias voluptates facilis, accusamus adipisci. Unde minima consequuntur corporis! Officiis recusandae modi, non doloribus quidem cumque dolor quibusdam enim sapiente vitae? Iste ratione numquam, inventore ipsum enim natus delectus laboriosam similique, quam quia culpa beatae repellat possimus excepturi a. Nesciunt pariatur iusto amet harum autem perspiciatis natus quos molestiae id. Animi soluta eveniet quis dolorem possimus omnis, aliquid amet facere inventore itaque eius perspiciatis quos.</p>
</div>
<img src="https://picsum.photos/id/2/400/400">
</section>
<section id="products">
<div>
<h1>About Products</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia optio, nam minus debitis aliquam ut quibusdam praesentium, unde nobis eum repellat dicta rerum illum, laborum reprehenderit itaque neque quae officia rem repellendus aperiam ad voluptate. Consequuntur excepturi animi distinctio! Ex consectetur quam facere doloribus nesciunt? Quod necessitatibus minima, cupiditate vitae quibusdam omnis illum accusantium saepe pariatur, quas laboriosam distinctio rem non, obcaecati magnam laborum iure? Quasi dolorum saepe voluptate praesentium, at accusamus nostrum quibusdam eos commodi odit. Ipsam maiores fugit a nobis tempora magnam aut. Fugit asperiores, facilis deleniti vitae, debitis reprehenderit dolorem ipsa, illum eos incidunt unde praesentium! Saepe exercitationem eveniet, illo error minima ullam quo excepturi, possimus perspiciatis, vel vitae rem molestiae! Impedit aliquid vitae vel assumenda? Dolores exercitationem illo vel mollitia iste earum ipsa ipsam ea vero ut laborum suscipit, dolor incidunt qui est porro ratione sint placeat. Ducimus dolorem numquam expedita suscipit ad voluptates molestiae sed?</p>
<a class="btn" href="#">Menu</a>
</div>
<img src="https://picsum.photos/id/292/400/400">
</section>
<section id="services">
<div>
<h1>About Services</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio eligendi impedit corporis quisquam possimus earum. Debitis quaerat cumque ipsa facere porro odit necessitatibus rem dolorum pariatur, et adipisci ab corporis eligendi quis animi earum sint illo blanditiis similique? Facere cumque dolorem itaque at magnam eos. Ut recusandae doloribus illum tempora reiciendis numquam, ex consectetur officia eligendi? Laudantium beatae excepturi officia inventore perferendis quisquam hic in molestias iusto, aliquam nulla dolores dolorem eos eaque unde nostrum quas veniam, eveniet consequatur. Perferendis nam est velit alias quas aspernatur aliquid rem necessitatibus, accusamus esse minus, sed iusto voluptatum consequuntur neque optio at molestiae tempora culpa? Sequi magni, in eos similique rem architecto odit ratione totam quibusdam molestias consectetur quis explicabo tempore vel harum laboriosam! Velit adipisci nulla deserunt nemo minus assumenda temporibus suscipit repellendus aperiam quam, amet ea repellat molestiae quidem placeat magnam iure, nesciunt perspiciatis totam laboriosam accusamus expedita quibusdam eveniet. Iure.</p>
<a class="btn" href="#">Menu</a>
</div>
<img src="https://picsum.photos/id/297/400/400">
</section>
</main>
<footer>
<div>
<form action="search.html" class="search-box">
<input type="text" name="q" autocomplete="off" autocapitalize="off" placeholder="enter search" required>
<button type="submit"><i class="search-icon"></i></button>
</form>
</div>
<div><a href="#!">Privacy Policy</a></div>
<div>Copyright ©2020 Acme, Inc.</div>
</footer>
</body>
</html>
<!DOCTYPE html>
<!-- CONTACT.HTML -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CONTACT - ACME</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<a href="index.html">ACME</a>
<input type="checkbox" id="menu-toggle"><!-- used to toggle the menu state -->
<label for="menu-toggle">
<span></span>
</label>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="about.html#products">Products</a></li>
<li><a href="about.html#services">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</header>
<main>
<section>
<div>
<h1>Contact</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti labore repudiandae aliquam id at eligendi quis quod dolore fugiat maxime. Veritatis optio sunt ut quod, hic molestias mollitia atque facilis itaque provident aspernatur sapiente perspiciatis doloremque, fuga vero incidunt? Ea molestias quasi veritatis laborum ab labore suscipit, ipsa iure maxime?</p>
<p>Reiciendis distinctio molestias non nostrum quaerat. Cumque recusandae id aliquam quam perferendis voluptatem amet rem ducimus, temporibus facere enim assumenda nostrum magnam explicabo quae veniam quod ullam velit? Vel quis molestiae a voluptas ducimus error, quidem in quo, nulla harum eaque molestias fugit nemo, quasi similique explicabo vitae rerum. Illum.</p>
<p>Quisquam dignissimos hic accusamus assumenda, reprehenderit tempore eius dolores molestiae inventore a aliquam ducimus dolor. Magnam dolorum fuga corporis nemo! Vitae voluptate asperiores tempora ipsum, aliquid incidunt laudantium reprehenderit ab voluptatem optio corrupti sed officia fuga fugiat blanditiis eius nihil aspernatur maiores ut, itaque, obcaecati quidem perspiciatis consequuntur! Tempore, inventore?</p>
</div>
<img src="https://picsum.photos/id/3/400/400">
</section>
</main>
<footer>
<div>
<form action="search.html" class="search-box">
<input type="text" name="q" autocomplete="off" autocapitalize="off" placeholder="enter search" required>
<button type="submit"><i class="search-icon"></i></button>
</form>
</div>
<div><a href="#!">Privacy Policy</a></div>
<div>Copyright ©2020 Acme, Inc.</div>
</footer>
</body>
</html>
<!DOCTYPE html>
<!-- SEARCH.HTML -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>SEARCH - ACME</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<a href="index.html">ACME</a>
<input type="checkbox" id="menu-toggle"><!-- used to toggle the menu state -->
<label for="menu-toggle">
<span></span>
</label>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="about.html#products">Products</a></li>
<li><a href="about.html#services">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</header>
<main>
<div style="text-align:center;">
<form class="search-box" style="display:inline-flex;margin:5px 0;">
<input type="text" name="q" autocomplete="off" autocapitalize="off" placeholder="enter search" style="margin-left:5px;width:250px;" required />
<button type="submit"><i class="search-icon"></i></button>
</form>
<script async src="https://cse.google.com/cse.js?cx=YOUR_CX_NUMBER_HERE"></script>
<div class="gcse-searchresults-only"></div>
</div>
</main>
<footer>
<div>
<form action="search.html" class="search-box">
<input type="text" name="q" autocomplete="off" autocapitalize="off" placeholder="enter search" required>
<button type="submit"><i class="search-icon"></i></button>
</form>
</div>
<div><a href="#!">Privacy Policy</a></div>
<div>Copyright ©2020 Acme, Inc.</div>
</footer>
</body>
</html>
/* STYLE.CSS */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/oswald/v30/TK3iWkUHHAIjg752Fz8Ghe4.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/oswald/v30/TK3iWkUHHAIjg752GT8G.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/oswald/v30/TK3iWkUHHAIjg752Fz8Ghe4.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/oswald/v30/TK3iWkUHHAIjg752GT8G.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* above code was downloaded from fonts.google.com; it is optional */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Oswald, sans-serif;
}
html,
body {
scroll-behavior: smooth;
background-color: white;
color: black;
}
a {
color: inherit;
text-decoration: double underline;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: black;
min-height: 70px;
padding-top: 0;
padding-bottom: 0;
padding-left: 70px;
padding-right: 70px;
}
header > a { /* company name */
color: white;
font-size: 25px;
font-weight: 700;
letter-spacing: 5px;
text-decoration: none;
}
header > ul {
display: flex;
align-items: center;
list-style: none;
}
header > ul a {
display: block;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
color: white;
text-decoration: none;
text-transform: lowercase;
outline: none;
}
header > ul a:hover,
header > ul a:focus {
background-color: crimson;
}
header > ul a:active {
background-color: magenta;
}
#menu-toggle,
#menu-toggle + label {
display: none;
}
main {
min-height: calc(100vh - 70px);
}
main > section {
display: flex;
justify-content: space-between;
align-items: center;
min-height: 100vh;
padding: 10vmin;
}
main > section:first-of-type {
min-height: calc(100vh - 70px);
}
main > section > div h1 {
font-size: 32px;
text-transform: uppercase;
margin-bottom: 10px;
}
main > section > div p {
font-size: 16px;
margin-top: 10px;
margin-bottom: 10px;
}
main > section > img {
display: block;
max-width: 400px;
width: 100%;
height: auto;
margin-left: 25px;
border-radius: 100%;
transition: transform .5s;
}
main > section > img:hover {
transform: scale(1.1);
}
main > section:nth-child(2n+1) {
background-color: white;
color: black;
}
main > section:nth-child(2n) {
background-color: black;
color: white;
}
.btn {
display: inline-block;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;
padding-right: 20px;
text-decoration: none;
font-size: 18px;
margin-top: 25px;
margin-bottom: 35px;
text-transform: uppercase;
outline: none;
border: none;
}
main > section:nth-child(2n+1) .btn {
background-color: black;
color: white;
}
main > section:nth-child(2n) .btn {
background-color: white;
color: black;
}
.btn:hover,
.btn:focus {
background-color: crimson !important;
color: white !important;
}
.btn:active {
background-color: magenta !important;
color: white !important;
}
footer {
min-height: 25vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: dimgray;
color: white;
}
footer > div {
padding: 5px;
}
footer a {
text-decoration: none;
color: inherit;
outline: none;
}
@media (max-width: 768px) {
main > section {
flex-direction: column;
justify-content: center;
padding: 10px;
}
main > section > img {
margin-left: 0;
}
header {
position: relative;
display: block;
padding-left: 20px;
padding-right: 15px;
}
header > a {
line-height: 70px;
}
header > ul {
display: block;
overflow: hidden;
height: 0;
transition: height .5s cubic-bezier(1, 0, 0, 1);
text-align: right;
}
header > ul a {
font-size: 20px;
line-height: 30px;
}
header > ul a:hover,
header > ul a:focus,
header > ul a:active {
background-color: transparent !important;
}
#menu-toggle + label {
display: block;
position: absolute;
top: 13px;
right: 13px;
padding: 19px 10px; /* 19px top and bottom, 10px left and right */
cursor: pointer;
}
#menu-toggle + label span,
#menu-toggle + label span::before,
#menu-toggle + label span::after {
content: "";
display: block;
position: relative;
background-color: white;
height: 2px;
width: 21px;
transition: .5s cubic-bezier(1, 0, 0, 1);
}
#menu-toggle + label span::before {
top: -8px;
}
#menu-toggle + label span::after {
top: 6px;
}
#menu-toggle:checked + label span {
transform: rotate(.375turn);
}
#menu-toggle:checked + label span::before,
#menu-toggle:checked + label span::after {
top: 0;
transform: rotate(90deg);
}
#menu-toggle:checked + label span::after {
top: -2px;
}
#menu-toggle:checked ~ ul {
height: 250px;
}
}
.search-icon::before {
content: url(data:image/svg+xml;base64,PHN2ZyBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTUuNTU4IDUxNS41NTgiIHZpZXdCb3g9IjAgMCA1MTUuNTU4IDUxNS41NTgiIGZpbGw9IiNmZmYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTM3OC4zNDQgMzMyLjc4YzI1LjM3LTM0LjY0NSA0MC41NDUtNzcuMiA0MC41NDUtMTIzLjMzMyAwLTExNS40ODQtOTMuOTYxLTIwOS40NDUtMjA5LjQ0NS0yMDkuNDQ1cy0yMDkuNDQ0IDkzLjk2MS0yMDkuNDQ0IDIwOS40NDUgOTMuOTYxIDIwOS40NDUgMjA5LjQ0NSAyMDkuNDQ1YzQ2LjEzMyAwIDg4LjY5Mi0xNS4xNzcgMTIzLjMzNy00MC41NDdsMTM3LjIxMiAxMzcuMjEyIDQ1LjU2NC00NS41NjRjMC0uMDAxLTEzNy4yMTQtMTM3LjIxMy0xMzcuMjE0LTEzNy4yMTN6bS0xNjguODk5IDIxLjY2N2MtNzkuOTU4IDAtMTQ1LTY1LjA0Mi0xNDUtMTQ1czY1LjA0Mi0xNDUgMTQ1LTE0NSAxNDUgNjUuMDQyIDE0NSAxNDUtNjUuMDQzIDE0NS0xNDUgMTQ1eiIvPjwvc3ZnPg==);
width: 100%;
height: auto;
}
.search-box {
display: inline-flex;
padding: 2px;
border: 2px solid black;
outline: none;
border-radius: 30px;
}
.search-box:focus-within {
border-color: slategray;
}
.search-box input {
outline: none;
border: none;
width: 0;
background-color: transparent;
color: black;
font-size: 16px;
padding: 0;
transition: width .4s cubic-bezier(0.18,0.89,0.32,1.33);
}
.search-box input::placeholder {
color: lightgray;
}
.search-box:hover input,
.search-box input:focus,
.search-box input:valid {
margin-left: 5px;
width: 250px;
}
.search-box button {
outline: none;
border: none;
cursor: pointer;
background-color: black;
padding: 8px;
width: 40px;
height: 40px;
border-radius: 50%;
-webkit-appearance: none;
}
.search-box:focus-within button {
background-color: red;
}
.search-box input:focus + button {
background-color: red;
}
Coding Video
Comment
