Welcome to my website Uptodate Academy. In this website I teach tutorials and share source code on some programming (HTML, CSS & JavaScript) tutorials.
Before we get started, do well to subscribe to my channel to never miss out on any update that I post every single day.
You can also visit my GitHub where I upload all the code I have.
In this tutorial topic "How to Make a Website | Music Website | Using HTML and CSS", we will learn how to create it following these simple easy steps. From the header navigation to the footer element, we will dissolve all of them here.
Share this to your programmer friends. If y'all learnt something today, make sure to let me in the comments.
Get Source Code.
If interested in watching the video before running the code below, you can click the play button to get started.
Code Begins
- First, create a folder with any name you like. Then, make the necessary files inside it.
- Create a file called index.html to serve as the main file.
- Create a file called style.css for the CSS code.
- Get a link to FontAwesome icon
- Finally, download the Images folder and put it in your project directory. This folder contains default showcase images for the website. You can also use your own images.
To start, add the following HTML codes to your index.html file. These codes include essential HTML markup with different semantic tags, such as div, form, input, button, image, etc., to build the website layout.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="/font-awesome.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create A Website</title>
</head>
<body>
<section class="header">
<nav class="nav-bar">
<div class="logo"><img src="images/logo.webp"></div>
<div class="links">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Pages</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="account">
<a href="#">Help</a>
<a href="#">|</a>
<a href="#">Login</a>
<a href="#">Create an account</a>
</div>
</nav>
</section>
<section class="body-description">
<div class="body-text">
<h1><span>Listen</span> to new music.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida.</p>
<div class="body-socials">
<div><a href="#"><i class="fa fa-facebook"></i></a></div>
<div><a href="#"><i class="fa fa-twitter"></i></a></div>
<div><a href="#"><i class="fa fa-instagram"></i></a></div>
<div><a href="#"><i class="fa fa-linkedin"></i></a></div>
</div>
<div class="body-buttons">
<button>download now</button>
<button>start free trial</button>
</div>
</div>
<div class="body-img">
<img src="images/hero-bg.webp" alt="">
</div>
</section>
<section class="unlimited-access">
<div class="access-title">
<h2>Unlimited Access to 100k tracks</h2>
</div>
<div class="access-description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum sus-pendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida.</p>
<button>Try it now</button>
</div>
</section>
<section class="how-it-works">
<div class="how2">
<h2>How it works</h2>
<div class="steps">
<div>
<div>
<img src="images/brain.webp" alt="">
</div>
<span>Create an account</span>
<p>Lorem ipsum dolor sit amet, consectetur adipi-scing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum sus-pendisse ultrices gravida.</p>
</div>
<div>
<div>
<img src="images/pointer.webp" alt="">
</div>
<span>Choose a plan</span>
<p>Donec in sodales dui, a blandit nunc. Pellen-tesque id eros venenatis, sollicitudin neque sodales, vehicula nibh. Nam massa odio, portti-tor vitae efficitur non.</p>
</div>
<div>
<div>
<img src="images/smartphone.webp" alt="">
</div>
<span>Download music</span>
<p>Ablandit nunc. Pellentesque id eros venenatis, sollicitudin neque sodales, vehicula nibh. Nam massa odio, porttitor vitae efficitur non, ultric-ies volutpat tellus.</p>
</div>
</div>
</section>
<section class="our-concept">
<div class="concepts">
<div class="concept-int">
<h2>Our Concept & artists</h2>
<p>Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="what-we-do">
<div>
<div>
<img src="images/1.webp" alt="">
</div>
<span>Soul Music</span>
</div>
<div>
<div>
<img src="images/2.webp" alt="">
</div>
<span>Live Concerts</span>
</div>
<div>
<div>
<img src="images/3.webp" alt="">
</div>
<span>Dj Sets</span>
</div>
<div>
<div>
<img src="images/4.webp" alt="">
</div>
<span>Live Streems</span>
</div>
</div>
</div>
</section>
<section class="subscription-session">
<div class="sub-session">
<div class="sub-details">
<div>
<h2>Subscription from $15/month</h2>
<h3>Start a free trial now</h3>
</div>
<div>
<p>Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<button>try it now</button>
</div>
</div>
<div class="what-to-offer">
<div class="do-to-offer">
<ul>
<li>
<img src="images/check-icon.webp" alt="">
<span>Play any track</span>
</li>
<li>
<img src="images/check-icon.webp" alt="">
<span>Listen offline</span>
</li>
<li>
<img src="images/check-icon.webp" alt="">
<span>No ad interruptions</span>
</li>
<li>
<img src="images/check-icon.webp" alt="">
<span>Unlimited skips</span>
</li>
<li>
<img src="images/check-icon.webp" alt="">
<span>High quality audio</span>
</li>
<li>
<img src="images/check-icon.webp" alt="">
<span>Shuffle play</span>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="premium-section">
<div class="go-premium">
<div class="premium-details">
<h2>Why go Premium</h2>
<p>Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="premium-specials">
<div class="premium-values">
<div>
<img src="images/1 (1).webp" alt="">
</div>
<div>
<h4>No ad interruptionsc</h4>
<span>Consectetur adipiscing elit</span>
</div>
</div>
<div class="premium-values">
<div>
<img src="images/2 (1).webp" alt="">
</div>
<div>
<h4>High Quality</h4>
<span>Ectetur adipiscing elit</span>
</div>
</div>
<div class="premium-values">
<div>
<img src="images/3 (1).webp" alt="">
</div>
<div>
<h4>Listen Offline</h4>
<span>Sed do eiusmod tempor</span>
</div>
</div>
<div class="premium-values">
<div>
<img src="images/4 (1).webp" alt="">
</div>
<div>
<h4>Download Music</h4>
<span>Adipiscing elit</span>
</div>
</div>
</div>
</div>
</section>
<footer class="footer">
<div class="footer-elements">
<div class="footer-head">
<img src="images/logo.webp" alt="">
<p>COPYRIGHT ©2024 ALL RIGHTS RESERVED | THIS TEMPLATE IS MADE WITH BY <a href="#">Gideon</a></p>
<div>
<a href="#"><i class="fa fa-instagram fa-lg"></i></a>
<a href="#"><i class="fa fa-pinterest fa-lg"></i></a>
<a href="#"><i class="fa fa-facebook fa-lg"></i></a>
<a href="#"><i class="fa fa-twitter fa-lg"></i></a>
<a href="#"><i class="fa fa-youtube fa-lg"></i></a>
</div>
</div>
<div class="x-footer-x">
<div>
<ul>
<h4>About us</h4>
<li><a href="#">Our story</a></li>
<li><a href="#">sol music blog</a></li>
<li><a href="#">history</a></li>
</ul>
</div>
<div>
<ul>
<h4>products</h4>
<li><a href="#">music</a></li>
<li><a href="#">subscription</a></li>
<li><a href="#">custom music</a></li>
<li><a href="#">footage</a></li>
</ul>
</div>
<div>
<ul>
<h4>playlists</h4>
<li><a href="#">newsletter</a></li>
<li><a href="#">careers</a></li>
<li><a href="#">press</a></li>
<li><a href="#">contact</a></li>
</ul>
</div>
</div>
</div>
</footer>
</body>
</html>
Finally, add the following CSS codes to your style.css file to make your AI image generator website beautiful and user-friendly. You can customize the different CSS properties, such as color, background, font, etc., to give a personalized touch to your website.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--bg1: #0a183d;
--clr1: #fc0254;
}
body {
background: var(--bg1);
position: relative;
overflow-x: hidden;
}
button {
cursor: pointer;
}
.header {
margin: 40px;
& .nav-bar {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
& .links ul {
list-style: none;
& li {
display: inline;
padding: 7px 15px;
margin: 0 10px;
& a {
color: #fff;
text-decoration: none;
font-family: system-ui;
}
}
}
& .account a {
color: #fff;
text-decoration: none;
margin: 0 10px;
font-family: system-ui;
&:first-child {
color: rgba(255,255,255,.5);
}
&:nth-child(2):hover {
cursor: default;
}
&:last-child {
color: var(--clr1);
}
}
}
}
.body-description {
position: relative;
height: 80dvh;
margin: 40px;
display: flex;
align-items: center;
justify-content: space-between;
& .body-text {
& h1 {
color: #fff;
font-size: 4.5em;
font-family: system-ui;
width: 400px;
font-weight: 500;
line-height: 70px;
& span {
color: var(--clr1);
}
}
& p {
color: #fff;
max-width: 500px;
font-size: 15px;
font-weight: 500;
font-family: system-ui;
margin: 30px 0;
margin-bottom: 15px;
line-height: 25px;
}
& .body-socials {
margin-bottom: 30px;
display: inline-flex;
& div {
width: 40px;
height: 40px;
border: 2px solid var(--clr1);
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
margin: 0 15px;
transition: 0.5s;
&:first-child {
margin-left: 0;
}
& a {
color: var(--clr1);
transition: 0.5s;
}
&:hover {
background: var(--clr1);
box-shadow: 0 0 20px var(--clr1),
0 0 25px var(--clr1),
0 0 35px var(--clr1);
}
&:hover a {
color: #fff;
}
}
}
& .body-buttons {
& button {
padding: 25px 35px;
color: #fff;
border-radius: 30px;
border: none;
outline: none;
background: var(--clr1);
text-transform: uppercase;
margin-right: 10px;
&:last-child {
text-align: right;
background: #383B70;
margin-right: none;
}
}
}
}
}
.unlimited-access {
background: #fff;
padding: 70px;
display: flex;
justify-content: center;
& .access-title {
& h2 {
font-size: 65px;
font-weight: 600;
line-height: 1;
color: #0a183d;
font-family: system-ui;
}
}
& .access-description {
& p {
font-size: 15px;
color: #6a7080;
line-height: 1.9;
font-weight: 500;
font-family: system-ui;
max-width: 1000px;
padding-top: 20px;
margin-bottom: 30px;
}
& button {
padding: 20px 55px;
color: #fff;
border-radius: 30px;
border: none;
outline: none;
background: var(--clr1);
text-transform: uppercase;
margin-right: 10px;
}
}
}
.how-it-works {
background-image: url(images/how-to-bg.jpg.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
padding: 20px;
& .how2 {
width: 90%;
margin: 50px auto;
& h2 {
font-size: 4em;
color: #fff;
font-family: system-ui;
font-weight: 500;
}
& .steps {
margin: 40px 0;
display: flex;
justify-content: center;
align-items: center;
& > div {
& div {
position: relative;
width: 60px;
height: 60px;
background: var(--clr1);
border-radius: 50%;
& img {
position: absolute;
top: 60%;
right: -10px;
transform: translateY(-50%);
}
}
& span {
display: block;
color: #fff;
margin: 20px 0;
font-size: 1.5em;
font-weight: 550;
font-family: system-ui;
}
& p {
font-size: 15px;
color: #fff;
opacity: 0.6;
font-family: system-ui;
font-weight: 400;
margin-right: 40px;
margin-bottom: 1rem;
line-height: 1.8;
}
}
}
}
}
.our-concept {
background: #fff;
padding: 20px;
display: flex;
justify-content: center;
& .concepts {
width: 90%;
margin: 50px auto;
& .concept-int {
display: flex;
justify-content: space-between;
& h2 {
font-size: 65px;
font-weight: 600;
line-height: 1;
color: #0a183d;
font-family: system-ui;
}
& p {
font-size: 15px;
color: #6a7080;
line-height: 1.9;
font-weight: 500;
font-family: system-ui;
max-width: 600px;
padding-top: 20px;
margin-bottom: 30px;
}
}
& .what-we-do {
margin-top: 50px;
display: grid;
grid-template-columns: repeat(4, 1fr);
& > div {
width: 270px;
& > div {
width: 100%;
height: 250px;
border-radius: 30px;
overflow: hidden;
}
& > div img {
width: 100%;
height: 100%;
border-radius: 30px;
transition: 0.5s;
&:hover {
transform: scale(1.1);
filter: grayscale(100%);
}
}
& span {
display: block;
text-align: center;
font-size: 1.2em;
font-weight: 600;
font-family: system-ui;
color: #0a183d;
margin-top: 10px;
}
}
}
}
}
.subscription-session {
padding: 20px;
display: flex;
justify-content: center;
& .sub-session {
width: 90%;
margin: 50px auto;
display: flex;
justify-content: space-between;
align-items: center;
& .sub-details > div:first-child {
& h2 {
font-size: 65px;
font-weight: 600;
line-height: 1;
color: #fff;
font-family: system-ui;
line-height: 1.3;
margin-bottom: 20px;
}
& h3 {
color: var(--clr1);
margin-bottom: 30px;
font-size: 30px;
font-weight: 500;
line-height: 1;
font-family: system-ui;
}
}
& .sub-details > div:last-child {
& p {
font-size: 15px;
color: #6a7080;
line-height: 1.9;
font-weight: 500;
font-family: system-ui;
margin-bottom: 30px;
max-width: 500px;
}
& button {
padding: 20px 55px;
color: #fff;
border-radius: 30px;
border: none;
outline: none;
background: var(--clr1);
text-transform: uppercase;
margin-right: 10px;
}
}
.what-to-offer {
width: 800px;
height: 450px;
background: rgba(255,255,255,0.05);
border-radius: 50px;
display: flex;
justify-content: center;
align-items: center;
& .do-to-offer {
& ul {
list-style: none;
& li {
color: #ffffff;
font-size: 20px;
margin-bottom: 25px;
font-family: system-ui;
& img {
margin-right: 20px;
width: 23px;
}
}
}
}
}
}
}
.premium-section {
background: #fff;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
& .go-premium {
width: 90%;
margin: 50px auto;
& .premium-details {
width: 100%;
display: flex;
justify-content: space-between;
margin-bottom: 50px;
& h2 {
font-size: 65px;
font-weight: 600;
color: #0a183d;
font-family: system-ui;
}
& p {
font-size: 15px;
color: #6a7080;
line-height: 1.9;
font-weight: 500;
font-family: system-ui;
margin-bottom: 30px;
padding-top: 20px;
max-width: 500px;
}
}
& .premium-specials {
width: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
& .premium-values {
& > div:first-child {
display: flex;
justify-content: center;
margin-bottom: 20px;
& img {
width: 190px;
height: 190px;
border-radius: 50%;
}
}
& > div:last-child {
font-family: system-ui;
& h4 {
font-size: 26px;
margin-bottom: 10px;
color: #0a183d;
font-weight: 600;
line-height: 1;
text-align: center;
}
& span {
display: block;
text-align: center;
font-size: 15px;
color: #6a7080;
font-weight: 500;
}
}
}
}
}
}
.footer {
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
& .footer-elements {
width: 90%;
margin: 50px auto;
display: flex;
justify-content: space-between;
& .footer-head {
& p {
font-size: 12px;
text-transform: uppercase;
font-weight: 500;
color: #505565;
padding: 10px 0 25px;
font-family: system-ui;
& a {
color: rgb(0,0,255);
text-decoration: none;
}
}
& div {
& a {
margin-right: 20px;
color: #505565;
}
}
}
& .x-footer-x {
display: flex;
width: 550px;
justify-content: space-between;
& div {
& ul {
list-style: none;
& h4 {
font-size: 16px;
color: #fff;
text-transform: uppercase;
margin-bottom: 30px;
font-family: system-ui;
font-weight: 600;
line-height: 1;
}
}
& a {
display: inline-block;
color: #6a7080;
font-size: 14px;
margin-bottom: 10px;
text-decoration: none;
line-height: 1.5;
font-weight: 400;
font-family: system-ui;
text-transform: capitalize;
} }
}
}
}
Conclusion and Final word
Now, we have reached the end of our code, for any information, you can comment any problem or code-not-working issues to resolve it, am always with you. You can also visit my YouTube Channel for more updates on HTML, CSS & JavaScript Designs. I believe you can create "a complete Website | Music Website | Using HTML and CSS". and do so much more with codes. Go extremely far in exploring the world of HTML, CSS & JavaScript, its gonna be fun, trust me 😃.
Happy Coding Journey 🚀
0 Comments
We are happy to hear from you.