Music Website Using HTML and CSS
This project involves creating a visually appealing and fully functional music website using HTML and CSS. The website is designed to provide users with an engaging experience, allowing them to explore various music genres, artists, and albums.
Key features include:
Responsive Design: The website is fully responsive, ensuring it looks great on all devices, from desktops to smartphones.
Music Player: An integrated music player allows users to play, pause, and skip tracks seamlessly.
Navigation Menu: A user-friendly navigation menu helps visitors easily browse through different sections of the website.
Artist and Album Pages: Dedicated pages for artists and albums provide detailed information and track listings.
Search Functionality: Users can search for their favorite songs, artists, or albums quickly and efficiently.
Stylish Layout: The website features a modern and stylish layout, with a focus on aesthetics and user experience.
Interactive Elements: Hover effects, animations, and other interactive elements enhance the overall user experience.
This project is perfect for showcasing your web development skills and creating a platform for music lovers to enjoy their favorite tunes.
Music Player: An integrated music player allows users to play, pause, and skip tracks seamlessly.
Navigation Menu: A user-friendly navigation menu helps visitors easily browse through different sections of the website.
Artist and Album Pages: Dedicated pages for artists and albums provide detailed information and track listings.
Search Functionality: Users can search for their favorite songs, artists, or albums quickly and efficiently.
Stylish Layout: The website features a modern and stylish layout, with a focus on aesthetics and user experience.
Interactive Elements: Hover effects, animations, and other interactive elements enhance the overall user experience.
This project is perfect for showcasing your web development skills and creating a platform for music lovers to enjoy their favorite tunes.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Music Website</title>
</head>
<link rel="stylesheet" href="musicstyle.css">
<script src="https://kit.fontawesome.com/9161e67940.js"
crossorigin="anonymous"></script>
<body>
<header>
<nav class="container">
<div class="logo">
myMusic
</div>
<ul>
<a href="#hero">
<li>Overview</li>
</a>
<a href="#music">
<li>Music</li>
</a>
<a href="#video">
<li>Video</li>
</a>
<a href="#gift">
<li>Gift cards</li>
</a>
</ul>
</nav>
</header>
<main>
<section class="hero-section" id="hero">
<div class="container">
<h1>myMusic</h1>
<h3>Your music, movies, and TV shows take center stage.</h3>
<p>
myMusic is the best way to organize and enjoy the music, movie.
Tv shows you already have- and shop for the ones you want.
All the entertainement mytunes has to offer on your Mac and PC.
</p>
</div>
</section>
<section class="music-section" id="music">
<div class="container">
<h2><span><i class="fa fa-music"></i></span>
Music
</h2>
<h4>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Provident qui, nobis maiores aperiam natus quod sed corrupti
quam labore doloribus illum. Maiores, dolor alias provident sunt
corporis nam! Nemo tempore fugit deserunt, veniam minima quas?</h4>
<button class="primary-btn">
Start Your Trial Now
</button>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta,
modi!</p>
<div class="ipad-iphone-img">
<img src="images/ipad-iphone.png" alt="iphoneipad">
</div>
</div>
</section>
<section class="about-music container">
<h3>The movie and TV collection you always wished for. Granted.</h3>
<p>With over 100,000 movies and TV shows to choose from, there’s always
something great to watch on myTunes and if you watch on Orange TV 4K,
you’ll be able to enjoy a tremendous selection of your favorite
content in 4K HDR. So get ready to enjoy episodes of your favorite TV
shows or hit movies you’ve been waiting to see — anytime, anywhere.
Just tap to play, or even download if you’re going
somewhere you won’t have Wi-Fi</p>
<button class="secondary-btn">
READ MORE
</button>
<div class="mac-img">
<img src="images/mac.png" alt="macbook">
</div>
</section>
<section class="video-section" id="video">
<div class="container">
<h3>A world of entertainement. Available wherever you are.</h3>
<p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Optio,
facilis. Accusantium nisi aliquam labore aut architecto
molestiae explicabo provident. Sapiente atque, nobis quis,
odit tempore voluptas
aspernatur molestiae nihil in mollitia distinctio maxime vitae
doloremque illo reprehenderit expedita similique vero aut quidem
ipsa rerum, quibusdam fugiat voluptatibus. Animi similique
adipisci sunt maiores velit illum aut
unde dolorum enim, impedit accusamus cumque
sequi illo, fuga harum odio saepe explicabo dolores possimus
quia soluta cupiditate. Aliquid fugit vel, repellendus est
impedit nam quasi
ducimus error doloribus. Ex minima veniam dolores, in repudiandae error,
culpa possimus quos amet eiusperferendis iste totam dolorem
fuga, deserunt eius voluptas facilis eveniet nulla. Unde sed atque, eum nihil
odio aliquid enim
dolores alias? Consectetur veniam ipsum facilis iure dolor
impedit sint obcaecati laboriosam quas officiis. Veritatis aspernatur quis sit
minima soluta maiores dolore eius? Odit aliquam nulla ipsum modi inventore nisi
quis facilis labore explicabo magnam totam reprehenderit fuga, minima ipsam vero
quam amet dolore nemo excepturi unde? Eaque, deleniti quo quibusdam sint facere a,
delectus saepe dolor voluptas vel iure, earum aliquid veniam modi eius.
Ut consectetur laudantium asperiores debitis quas laborum dolorem, voluptas nam?
Sit sint earum, exercitationem magni quasi incidunt veniam consequatur ad dicta
ipsum est a veritatis, quidem tenetur consectetur.
Illum, nulla.</p>
</div>
</section>
<div class="container">
<section class="gift-section" id="gift">
<div class="gift-card">
<img src="images/gift_card.png" alt="gift-card"/>
</div>
<div class="gift-content">
<h3>Gift Card</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quae numquam saepe delectus iusto aliquam aliquid odit tenetur
dolor, temporibus doloremque sed nihil. Exercitationem iste eos
sed, repudiandae dolorum asperiores aut eius natus dignissimos enim.
Itaque eos non voluptatibus sed aperiam deleniti perspiciatis
totam quibusdam illum iste iusto voluptatum, velit debitis eius,
amet iure temporibus error voluptas quidem atque. Accusantium,
unde veritatis! Minima dolor consequuntur placeat, alias quos quasi
quisquam officiis commodi repellat deserunt eveniet rem aliquam
tempore accusantium animi voluptatem iste veniam ipsam doloremque
explicabo! Voluptatum, saepe ut sed vel fugiat placeat except Uri
consequuntur, facere quasi sequi ipsum ex quo, asperiores enim.
Totam debitis vero doloribus. Officiis eligendi natus consequuntur
totam dignissimos cupiditate obcaecati consectetur animi rerum,
rem cumque quae commodi et quaerat nostrum illo quam alias! Unde quasi
neque obcaecati quo fugiat delectus omnis asperiores, nobis recusandae
corporis est dolor eum sit perspiciatis reiciendis a accusamus? Veniam,
iusto cum laudantium modi recusandae saepe? Quo nesciunt, earum
quidem distinctio animi incidunt aliquid accusantium adipisci
iste similique nobis aut error consequuntur modi facilis aperiam quas
maxime minima cumque. At placeat debitis quisquam temporibus amet odio voluptate
s omnis, perferendis, distinctio dolore animi dolorum
odit dolor velit rerum sed nulla.
Exercitationem, aliquam porro.</p>
<p>Already have an Orange MyTunes Music Gift Card?</p>
<hr/>
<div>
<button class="secondary-btn">
Read ME
</button>
</div>
</div>
</section>
</div>
</main>
<footer>
<section class="footer-upper">
<div class="container">
<div class="footer-links">
<h4>Shop & Learn</h4>
<ul>
<li>Music</li>
<li>Movies</li>
<li>Shows</li>
<li>Apps</li>
<li>Gift Cards</li>
</ul>
</div>
<div class="footer-links">
<h4>Orange Store</h4>
<ul>
<li>Find a Store</li>
<li>Today at Orange</li>
<li>Financing</li>
<li>Orange Camp</li>
<li>Order Status</li>
</ul>
</div>
<div class="footer-links">
<h4>Education & Business</h4>
<ul>
<li>Orange & Education</li>
<li>Shop for Collage</li>
<li>Orange & Business</li>
<li>Shop for Business</li>
<li>Jobs</li>
</ul>
</div>
<div class="footer-links">
<h4>About Orange</h4>
<ul>
<li>Newsroom</li>
<li>Orange Leadership</li>
<li>Investors</li>
<li>Envents</li>
<li>Contact Orange</li>
</ul>
</div>
</div>
</section>
<section class="footer-lower">
<p><b>Copyright © 2022 myMusic</p>
</section>
</footer>
</body>
</html>
CSS
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,
400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
:root{
--purple500: #281154;
--purple300: #270082;
--purple600: #1b0058;
--body: #f9f6ff;
--maxwidth:1200px;
}
* {
margin:0;
padding:0;
box-sizing: border-box;
}
html, body {
font-family: "Roboto", sans-serif;
font-weight:300;
line-height:1.4;
scroll-behavior: smooth;
}
section{
scroll-margin:50px;
}
ul {
list-style:none;
}
a {
text-decoration:none;
color:white;
}
.container {
max-width:1200px;
margin:0 auto;
}
header {
background-color: var(--purple300);
position: sticky;
top:0;
z-index: 100;
}
nav {
display:flex;
justify-content:space-between;
color:white;
align-items: center;
padding: 15px 0;
}
.logo{
font-size:32px;
font-weight:600;
}
nav ul{
display:flex;
gap:20px;
}
nav ul li{
border-bottom: 2px solid transparent;
transition:0.2s ease-in;
}
nav ul li:hover {
border-bottom: 3px solid white;
transition:0.2s ease-in;
}
.hero-section {
background-image: url(images/hero_image.png);
height: 100vh;
display:grid; /*Sabse easy way hai text ko center me lana agar hum container ke liye grid use karte hn to*/
color:white;
place-items: center;
text-align: center;
}
.hero-section .container {
display:flex;
flex-direction:column;
gap: 30px;
}
.hero-section h1{
font-size:96px;
}
.hero-section h3{
font-size: 32px;
}
.music-section{
padding-top:50px;
background:var(--purple500)
}
.music-section .container{
display:flex;
flex-direction: column;
gap:30px;
justify-content: center;
align-items: center;
color:white;
}
.ipad-iphone-img{
margin-top: -400px;
position: relative;
top:400px;
}
button{
padding:10px 15px;
border:none;
transition:0.2s ease-in-out;
}
button:hover{
transition:0.2s ease-in-out;
opacity:0.8;
color: white;
}
.primary-btn{
background-color:red;
color: white;
}
.primary-btn:hover
{
background-color:blue;
}
.secondary-btn{
background-color: var(--purple300);
color:white;
}
.about-music{
padding-top: 500px;
display:grid;
place-items: center;
gap:50px;
text-align:center;
margin-bottom: 50px;
}
.video-section{
background-image:url(images/video.png);
min-height:800px;
display:grid;
Place-items: center;
color:white;
text-align: center;
}
.video-section .container{
flex-direction: column;
display: flex;
gap:30px;
margin-top:-200px;/*to uplift it from center*/
}
.hero-section .video-section{
position:relative;
background-position:center;
background-size:cover;
background-repeat:no-repeat;
}
.gift-section{
display: flex;
justify-content: center;
margin:100px 0;
gap:50px;
}
.gift-content{
display:flex;
flex-direction:column;
gap:20px;
}
.footer-upper{
background-color: var(--purple600);
padding:20px;
}
.footer-upper .container{
display:flex;
color:white;
justify-content: space-between;
}
.footer-upper h4{
padding-bottom: 10px;
border-bottom:2px solid white;
margin-bottom:10px;
}
.footer-lower{
background-color: var(--purple300);
padding:20px;
color:white;
display:flex;
justify-content:center;
}
.gift-section{
scroll-margin:150px;
}
Comments
Post a Comment