Make a Music Website Using HTML and CSS

January 22, 2021

290

Make a Music Website Using HTML and CSS

Hello readers, Today in this blog you’ll learn how to create an Amazing Music Website Using HTML And CSS . Previously I have shared a Website with Animating using HTML & CSS only, now it’s time to create an cool Website animation Design With HTML & CSS Animated Website. You can Create a cool music website home page.

As you can see in the image, this is a amazing Music Website. In the image form, there is an image, a form, some texts. You can change this form according to your requirements if you have basic knowledge of HTML CSS.

Video Tutorial of Music Website Design Simple & Easy

I hope after watching this video you’ve understood the basic codes, concepts of this website. You can switch the position of website and image very easily, you need to change some values or change the class name..

Music Website Simple & Easy l Website Design (source code)

To create this program First, you need to create two Files one HTML File html editor and another one is CSS File. After creating these files just paste these following codes in your file. You can also download the source code files through the given link. In the source files, there you also get a background image of this program..

HTML SOURCE:<!DOCTYPE html><!– Created By Theinfowave –><head> <title>MP3 Website -Theinfowave</title> <link rel=”stylesheet” href=”style.css”></head> </p><br /><br /><br /> <nav><br /><br /><br /> <ul><br /><br /><br /> <div><br /><br /><br /> <h3>Music</h3><br /><br /><br /> </p></div><br /><br /><br /> <div><br /><br /><br /> <li><a href=”https://infobing.com/#”>home</a></li><br /><br /><br /> <li><a href=”https://infobing.com/#”>connect</a></li><br /><br /><br /> <li><a href=”https://infobing.com/#”>product</a></li><br /><br /><br /> <li><a href=”https://infobing.com/#”>contact</a></li><br /><br /><br /> <li><a href=”https://infobing.com/#”>about</a></li></div><br /><br /><br /> </nav><br /><br /><br /> <div> </div><br /><br /><br /> <div> </div><br /><br /><br /> <div><br /><br /><br /> <h1>THE<br />REAL<br />MUSIC</h1><br /><br /><br /> </div><br /><br /><br /> <p>

CSS SOURCE:

@import url(‘https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500’); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: ‘Poppins’, sans-serif; } nav{ line-height: 70px; background: rgb(0,0,0,0.5); padding: 0 80px; box-shadow: 0px 3px 10px rgba(0,0,0,0.3); } nav .container{ display: flex; text-decoration: row; justify-content: space-between; align-items: center; } nav .container h3{ font-size: 1.7em; font-weight: 800; text-transform: uppercase; font-style: italic; color: #fff; transition: all 0.3s; z-index: -1; } nav .container .nav-items{ display: flex; text-decoration: row; justify-content: space-between; align-items: center; width: 40%; } nav .container .nav-items li{ list-style: none; } nav .container .nav-items li a{ text-decoration: none; font-size: 1.1em; font-weight: 500; color: #fff; text-transform: uppercase; } nav .container .nav-items li a:hover{ color: #1abc9c; } .pic{ position: absolute; top: 0; left: 0; height: 100vh; width: 100%; background-image: url(e.jpg); background-size: cover; background-position: center; z-index: -2; } .overlay{ position: absolute; top: 0; left: 0; width: 100%; height: 100vh; object-fit: cover; background: rgb(0,0,0,0.3); z-index: -1; } .content{ position: absolute; top: 30%; left: 4%; } .content h1{ font-size: 90px; color: #fff; line-height: 100px; float: left; }

html css

how to create a music website using html and css.

I hope this helps you. Thank you for visiting and follow our Facebook and Twitter page to keep updated.

Previous articleAnimating Website Design Using HTML and CSS

Next articleHow Social Media Buttons with Tooltip HTML & CSS

1 COMMENT

What is Zip File:ZIP File कैसे बनाये - infobing January 13, 2022 At 8:53 am

[…] Make a Music Website Using HTML and CSS […]

Reply

Make a Music Website Using HTML and CSS

Make a Music Website Using HTML and CSS

html css

Related Articles

TOP 10 SITES FOR FREE ONLINE COURSES WITH CERTIFICATES

Google recognizes Gama Pehalwan in India as the most famous wrestler, with a birth anniversary Doodle

Prashanth Neel K.GF Chapter 1 : Four Year Old Prasant Neel Locked Up in Telgue: KGF Director

1 COMMENT

LEAVE A REPLY Cancel reply

Latest Articles

TOP 10 SITES FOR FREE ONLINE COURSES WITH CERTIFICATES

Google recognizes Gama Pehalwan in India as the most famous wrestler, with a birth anniversary Doodle

Prashanth Neel K.GF Chapter 1 : Four Year Old Prasant Neel Locked Up in Telgue: KGF Director

Navjot Singh Sidhu gets 1-year jail

Zara Phythian: ‘Dr Strange’ actress jailed for sexual abuse of teen girl

Make a Music Website Using HTML and CSS

Make a Music Website Using HTML and CSS

html css

Related Articles

1 COMMENT

LEAVE A REPLY Cancel reply

Stay Connected

Latest Articles