In this web development tutorial we will create a responsive Website suing HTML5 CSS3 and Sass/Scss in order to create a clone of the Dune novels website. I will use sass and scss in this project in order to take advantage of sass nesting properties and partials.
Nesting will help us write 10X quicker CSS and it is also extremely helpful when creating utility classes.
And _partial files are just magic as usual.
Dune website Project content:
- Intro & Project overview
- Project overview
- Project Structure
- Install Sass extension and setup sass
- Creating sass partial files
- Website sass variables
- Website configuration sass file
- Sass utilities partial file
- Creating comments in Sass / Scss
- Sass text alignment classes
- Background color classes
- Sass mixin
- Margin classes
- Create the website navigation bar using sass
- Navigation component in sass
- Website header
- Website Movie section
- Sass Button component
- Sass Form component
- Create the subscribe form using HTML and Sass classes
- Make website responsive using @media query
Useful Links:
Copy the code for this project “Build a Payroll Web App using JavaScript” from below and just follow along if you wish
Project Img:
1 Dune Website HTML code:
<!-- Navigation -->
<nav id="Navigation" class="d-flex bg-dark text-gold-light">
<ul class="d-flex">
<li><a href="">Novels</a></li>
<li><a href="">Author Bios</a></li>
<li><a href="">Buy Books</a></li>
</ul>
<img src="/dist/img/Dune-novels-logo6-med.jpg" alt="" />
<ul class="d-flex">
<li><a href="">Latest News Signup</a></li>
<li><a href="">News</a></li>
<li><a href="">Contact</a></li>
</ul>
<a href="#" class="btn" id="nav-btn"
><i class="fas fa-bars fa-2x text-gold-mid"></i
></a>
</nav>
<!-- Header -->
<header id="Header" class="container">
<h2 class="text-center f-milonga text-xxl text-gold-mid">
IT`S TIME...#DuneMovie coming October 22
</h2>
<img src="/dist/img/Messages-Image20874076.png" alt="" class="d-flex" />
</header>
<section id="Movie" class="container d-flex">
<h2 class="text-center text-xxl text-gold-mid">
IT`S TIME...#DuneMovie coming October 22
</h2>
<a href="" class="btn text-gold">
<i class="far fa-play-circle fa-4x"></i>
</a>
<img src="/dist/img/DuneLogo-smaller.jpg" alt="" />
</section>
<!-- Latest-news -->
<section id="Latest-news" class="container">
<h2 class="text-center text-xxl text-gold-mid">Latest news</h2>
<h3 class="text-lg">DUNE: HOUSE ATREIDES monthly comic issues #1–8</h3>
<p>
Issue #6 (of 12) of the BOOM! Studios adaptation of Brian and Kevin's
Dune: House Atreides was just released. The covers are gorgeous and
showcase a variety of talent. Below are the covers for the first eight
issues. You can find them, and maybe some of the special variant covers,
at your local comic book store.
</p>
<a href="http://www.comicshoplocator.com" class="text-gold"
>http://www.comicshoplocator.com</a
>
<div class="d-flex">
<img src="/dist/img/Covers1thru8.jpg" alt="" />
</div>
<button class="btn btn-gold">
<i class="fas fa-book-open"></i> Comic Shop Locator
</button>
<!-- Lady of Caladan Cover Reveal -->
<h3 class="text-lg">Lady of Caladan Cover Reveal</h3>
<p>
We’re pleased to share the new cover for THE LADY OF CALADAN, excellent
work by Matt Griffin, who also did the cover for THE DUKE OF CALADAN.
Brian and Kevin have turned in the 8th and final production draft of the
manuscript, and Tor Books will release the book on September 21.
</p>
<div class="d-flex">
<img src="/dist/img/LadyofCaladanCoverRelease.jpeg" alt="" />
</div>
<button class="btn btn-gold">
<i class="fab fa-amazon"></i> Preorder on Amazon
</button>
</section>
<section id="Sign-up" class="container">
<h2 class="text-center text-xxl text-gold-mid">
Sign up for the latest Dune News
</h2>
<form class="form">
<h2 class="text-lg mb-3">Subscribe</h2>
<div class="input-group">
<label for="">Email </label>
<input type="email" placeholder="Enter your email address" />
</div>
<div class="input-group">
<label for="">Name </label>
<input type="text" placeholder="Enter your full name" />
</div>
<div class="input-group">
<label for="">Postal (Zip) Code </label>
<input type="number" placeholder="Enter your (Zip) Code" />
</div>
<div class="input-group">
<label for="">Country</label>
<input type="text" placeholder="Enter your Country" />
</div>
<button type="submit" class="btn btn-gold">Subscribe</button>
</form>
</section>
2 Dune Website CSS code:
@import url("https://fonts.googleapis.com/css2?family=Milonga&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css");
*,
::after,
::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a,
li {
list-style: none;
text-decoration: none;
}
body {
font-family: "Playfair Display", serif;
background-color: #000000;
color: #cfb591;
}
section {
margin: auto;
}
.text-dark {
color: #000000;
}
.text-gold {
color: #be984f;
}
.text-gold-mid {
color: #e0af70;
}
.text-gold-light {
color: #cfb591;
}
.text-sm {
font-size: 0.8rem;
}
.text-md {
font-size: 1.1rem;
}
.text-lg {
font-size: 1.4rem;
}
.text-xl {
font-size: 1.8rem;
}
.text-xxl {
font-size: 2.1rem;
}
.text-start {
text-align: left;
}
.text-center {
text-align: center;
}
.text-end {
text-align: right;
}
.bg-dark {
color: #000000;
}
.bg-gold {
color: #be984f;
}
.bg-gold-light {
color: #cfb591;
}
.container {
max-width: 1220px;
margin: auto;
padding: 0 2rem;
}
.d-flex {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.d-flex-column {
flex-direction: column;
}
.f-milonga {
font-family: "Milonga", cursive;
}
.m-1 {
margin: 1rem;
}
.m-2, .form {
margin: 2rem;
}
.m-3 {
margin: 3rem;
}
.m-4 {
margin: 4rem;
}
.m-5 {
margin: 5rem;
}
.mb-1 {
margin-bottom: 1rem;
}
.mb-2 {
margin-bottom: 2rem;
}
.mb-3 {
margin-bottom: 3rem;
}
.mb-4 {
margin-bottom: 4rem;
}
.mb-5 {
margin-bottom: 5rem;
}
.ms-1 {
margin-right: 1rem;
}
.ms-2 {
margin-right: 2rem;
}
.ms-3 {
margin-right: 3rem;
}
.ms-4 {
margin-right: 4rem;
}
.ms-5 {
margin-right: 5rem;
}
.btn {
font-family: inherit;
border: none;
cursor: pointer;
margin: 0.25rem 0.125rem;
padding: 0.375rem 0.75rem;
display: inline-block;
font-weight: 400;
font-size: 1rem;
line-height: 1.5;
text-align: center;
vertical-align: middle;
border: 1px solid #000;
border-radius: 0.25rem;
}
.btn-gold {
background: #be984f;
color: #fff;
box-shadow: 0 0 15px 3px rgba(190, 152, 79, 0.25);
transition: 0.3s ease;
}
.btn-gold:hover {
background: #b28b42;
box-shadow: 0 0 15px 3px rgba(190, 152, 79, 0.4);
transition: 0.3s ease;
}
#Navigation {
justify-content: space-around;
}
#Navigation img {
height: 90px;
}
#Navigation a {
color: #cfb591;
}
#Navigation ul li {
padding: 0 1.2rem;
position: relative;
}
#Navigation ul li a {
font-weight: 500;
}
#Navigation ul li:hover::before {
content: "";
position: absolute;
bottom: -0.5rem;
left: 0;
width: 100%;
height: 1px;
background: #cfb591;
animation: fadeIn 1s ease;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#Navigation #nav-btn {
display: none;
}
.form {
background-color: #001d25;
padding: 2rem;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-direction: column;
align-items: flex-start;
}
.form-column {
flex-direction: column;
}
.form .input-group {
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-direction: column;
align-items: flex-start;
margin-bottom: 2rem;
}
.form .input-group-column {
flex-direction: column;
}
.form .input-group label {
margin-bottom: 0.5rem;
}
.form .input-group input {
display: block;
width: 100%;
padding: 0.375rem 0.75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
border-radius: 0.25rem;
}
.form .input-group input::-webkit-outer-spin-button, .form .input-group input::-webkit-inner-spin-button {
appearance: none;
}
#Header {
height: 85vh;
}
#Header h2 {
margin-top: 3rem;
font-weight: 100;
animation: fadeIn 5s ease;
}
@keyframes fadeIn {
0% {
opacity: 0;
filter: blur(5px);
transform: scale(0.5);
}
50% {
transform: scale(1.1);
}
100% {
opacity: 1;
}
}
#Header img {
margin: 20vh auto;
animation: fadeIn 5s ease;
}
@keyframes fadeIn {
0% {
opacity: 0;
filter: blur(5px);
transform: scale(0.5);
}
50% {
transform: scale(1.1);
}
100% {
opacity: 1;
}
}
#Movie {
height: 100vh;
}
#Movie h2 {
padding: 0 1.4rem;
}
#Movie i {
transition: 0.3s ease;
}
#Movie i:hover {
color: #cfb591;
transition: 0.3s ease;
}
#Movie img {
height: 300px;
}
#Latest-news h2 {
margin-top: 1rem;
}
#Latest-news h3 {
margin-top: 5rem;
margin-bottom: 2rem;
}
#Latest-news a:hover {
text-decoration: underline;
}
#Latest-news img {
width: 570px;
margin: auto;
margin: 3rem 0;
}
#Latest-news button {
max-width: 300px;
}
@media screen and (max-width: 1220px) {
#Header {
height: 85vh;
}
#Header h2 {
margin-top: 3rem;
font-weight: 100;
animation: fadeIn 5s ease;
}
@keyframes fadeIn {
0% {
opacity: 0;
filter: blur(5px);
transform: scale(0.5);
}
50% {
transform: scale(1.1);
}
100% {
opacity: 1;
}
}
#Header img {
margin: 20vh auto;
}
#Movie {
flex-direction: column;
}
#Movie h2,
#Movie i {
margin-bottom: 2.1rem;
}
}
@media screen and (max-width: 600px) {
#Navigation ul {
display: none;
}
#Header img {
margin: 20vh auto;
transform: scale(0.4);
}
#Movie h2 {
font-size: 1.4rem;
}
#Movie img {
height: 280px;
}
#Latest-news {
text-align: center;
}
#Latest-news img {
width: 380px;
}
}
h4 {
font-family: "Playfair Display", serif;
}
3 Dune Website style.scss code:
@import "variables";
@import "config";
@import "mixin";
@import "utilities";
// Components
@import "./components/btn";
@import "./components/nav";
@import "./components/form";
// Responsive
@import "responsive";
h4 {
font-family: "Playfair Display", serif;
}4 Dune Website variables SASS code:
// Colors:
$dark: #000000;
$gold: #be984f;
$gold-mid: #e0af70;
$gold-light: #cfb591;
// Size
$sm: 0.8rem;
$md: 1.1rem;
$lg: 1.4rem;
$xl: 1.8rem;
$xxl: 2.1rem;
5 Dune Website config SASS code:
*,
::after,
::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a,
li {
list-style: none;
text-decoration: none;
}
// Font Families
@import url("https://fonts.googleapis.com/css2?family=Milonga&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
body {
font-family: "Playfair Display", serif;
background-color: $dark;
color: $gold-light;
}
section {
margin: auto;
}
// Icons
// font-awesome cdn
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css");
// Bootstrap 5 cdn
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css");
6 Dune Website mixin SASS code:
@mixin d-flex {
display: flex;
flex-direction: row;
&-column {
flex-direction: column;
}
justify-content: center;
align-items: center;
}
@mixin fadeIn {
animation: fadeIn 5s ease;
@keyframes fadeIn {
0% {
opacity: 0;
filter: blur(5px);
transform: scale(0.5);
}
50% {
transform: scale(1.1);
// transform: translateX(-20px);
}
// 55% {
// transform: translateX(5px);
// }
100% {
opacity: 1;
}
}
}
7 Dune Website utilities SASS code:
// TEXT
.text {
// Text Color
&-dark {
color: $dark;
}
&-gold {
color: $gold;
}
&-gold-mid {
color: $gold-mid;
}
&-gold-light {
color: $gold-light;
}
// Text Size
&-sm {
font-size: $sm;
}
&-md {
font-size: $md;
}
&-lg {
font-size: $lg;
}
&-xl {
font-size: $xl;
}
&-xxl {
font-size: $xxl;
}
// Alignment
&-start {
text-align: left;
}
&-center {
text-align: center;
}
&-end {
text-align: right;
}
}
// Background
.bg {
&-dark {
color: $dark;
}
&-gold {
color: $gold;
}
&-gold-light {
color: $gold-light;
}
}
.container {
max-width: 1220px;
margin: auto;
padding: 0 2rem;
}
.d-flex {
@include d-flex;
}
// Font Family
.f {
&-milonga {
font-family: "Milonga", cursive;
}
}
// Margins & Paddings
.m {
&-1 {
margin: 1rem;
}
&-2 {
margin: 2rem;
}
&-3 {
margin: 3rem;
}
&-4 {
margin: 4rem;
}
&-5 {
margin: 5rem;
}
&b-1 {
margin-bottom: 1rem;
}
&b-2 {
margin-bottom: 2rem;
}
&b-3 {
margin-bottom: 3rem;
}
&b-4 {
margin-bottom: 4rem;
}
&b-5 {
margin-bottom: 5rem;
}
&s-1 {
margin-right: 1rem;
}
&s-2 {
margin-right: 2rem;
}
&s-3 {
margin-right: 3rem;
}
&s-4 {
margin-right: 4rem;
}
&s-5 {
margin-right: 5rem;
}
}
8 Dune Website SASS button component code:
.btn {
font-family: inherit;
border: none;
cursor: pointer;
margin: 0.25rem 0.125rem;
padding: 0.375rem 0.75rem;
display: inline-block;
font-weight: 400;
font-size: 1rem;
line-height: 1.5;
text-align: center;
vertical-align: middle;
border: 1px solid #000;
border-radius: 0.25rem;
&-gold {
background: $gold;
color: #fff;
box-shadow: 0 0 15px 3px rgba($color: $gold, $alpha: 0.25);
&:hover {
background: darken($gold, 5%);
box-shadow: 0 0 15px 3px rgba($color: $gold, $alpha: 0.4);
transition: 0.3s ease;
}
transition: 0.3s ease;
}
}
9 Dune Website SASS Navigation component code:
#Navigation {
img {
height: 90px;
}
justify-content: space-around;
a {
color: $gold-light;
}
ul {
li {
padding: 0 1.2rem;
position: relative;
a {
font-weight: 500;
}
&:hover::before {
content: "";
position: absolute;
bottom: -0.5rem;
left: 0;
width: 100%;
height: 1px;
background: $gold-light;
animation: fadeIn 1s ease;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
}
}
#nav-btn {
display: none;
}
}
10 Dune Website SASS Form component code:
.form {
background-color: #001d25;
padding: 2rem;
@include d-flex;
flex-direction: column;
align-items: flex-start;
@extend .m-2;
.input-group {
width: 100%;
@include d-flex;
flex-direction: column;
align-items: flex-start;
margin-bottom: 2rem;
label {
margin-bottom: 0.5rem;
}
input {
display: block;
width: 100%;
padding: 0.375rem 0.75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
border-radius: 0.25rem;
//todo: remove up & down arrows from input type number
&::-webkit-outer-spin-button,
&::-webkit-inner-spin-button {
appearance: none;
}
}
}
}
View the full video tutorial
Become a web developer!
Learn HTML CSS & Sass JavaScript Bootstrap and more...
