Musical website design in html and css3 (Part-1 & 2)

Logic Tycoon July 24, 2021

 Musical website design in html and css3 (Part-1 & 2) ✅

✅Step:1

  • Create Html page along with custom CSS file and link that CSS file with html page.
  • Image that in use you will find : https://pixabay.com/
 
<!DOCTYPE html>
<html>
<head>
	<title>MusicBox</title>
	<link rel="stylesheet" href="myStyle.css">
</head>
<body>
	<div class="container">
		
		<div id="myNav" class="overlay">
		  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
		  <div class="overlay-content">
		    <a href="#">About</a>
		    <a href="#">Services</a>
		    <a href="#">Clients</a>
		    <a href="#">Contact</a>
		  </div>
		</div>
 
		<div class="header">
			<span onclick="openNav()">☰ </span>
			
			<h2>MUSIC-BOX</h2>
		</div>
 
		<div class="box">
			<button class="btn btn-grad">follow</button>	
				<div class="tagline">
					<h1>DANCE</h1>
					<p>1000 tracks</p>
				</div>
		</div>
 
		<div class="box2">
			<button class="btn btn-grad2">follow</button>	
			<div class="tagline">
				<h1>JAZZ</h1>
				<p>1000 tracks</p>
			</div>
		</div>
		
		<div class="box3">
			<button class="btn btn-grad3">follow</button>	
				
			<div class="tagline">
				<h1>ROCK</h1>
				<p>1000 tracks</p>
			</div>
 
 
		</div>
 
		
	</div>
 
</body>
<script type="text/javascript">
	
    
function openNav() {
  document.getElementById("myNav").style.width = "100%";
}
 
function closeNav() {
  document.getElementById("myNav").style.width = "0%";
}
 
 
</script>
</html>
 
*
{
	margin:0;
	padding: 0;
	font-family: 'Montserrat', sans-serif;
}
h2
{
	position: absolute;
    left: 45%;
    top: 0;
    line-height: 90px;
    color: #fff;
 }
span
{
	font-size: 50px;
	color:#fff;
	cursor: pointer;
	margin-left: 20px;
}
span:hover
{
	color:#0bd0e2;
}
 
.overlay {
    height: 100%;
    width: 0px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.9);
    overflow-x: hidden;
    transition: 0.5s;
}
 
.overlay-content {
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
}
 
.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block;
    transition: 0.3s;
}
 
.overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
}
 
.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}
 
 
.header
{
	height: 90px;
	background: linear-gradient(rgba(69, 41, 81,0.8),rgba(69, 41, 81,0.7)), url(bgimg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}
.box
{
	height: 100vh;
	background: linear-gradient(rgba(0,221,229,0.8),rgba(0,221,229,0.7)), url(img3.jpg);
	position: relative;
	background-repeat: no-repeat;
	background-size: cover;
}
.box2
{
	height: 100vh;
	background: linear-gradient(rgba(201, 58, 94,0.8),rgba(201, 58, 94,0.7)), url(img2.jpg);
	position: relative;
	background-repeat: no-repeat;
	background-size: cover;
}
.box3
{
	height: 100vh;
	background: linear-gradient(rgba(155, 60, 196,0.8),rgba(155,60,196,0.7)), url(img.jpg);
	position: relative;
	background-repeat: no-repeat;
	background-size: cover;
}
.tagline
{
	transform: translate(-50%,-50%);
    position: absolute;
    left: 50%;
    top: 50%;
    font-family: 'Montserrat', sans-serif;
    color:#fff;
}
 h1
{
	font-size: 5rem;
	letter-spacing: 2px;
 
}
 p
{
	text-align: center;
	color:#ddd;
}
 
.btn {
 
  margin: 10px;
  padding: 20px 5%;
  text-align: center;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  font-weight: 900;
  box-shadow: 0 0 10px #000;
  border-radius: 50px;
  border:none;
  font-size: 20px;
  position: absolute;
  left: 75%;
  top: 20%;
  cursor: pointer;
 }
 
 
 
.btn-grad {background-image: linear-gradient(to right, #1FA2FF 0%, #12D8FA 51%, #1FA2FF 100%)}
.btn-grad:hover { background-position: right center; }
 
.btn-grad2 {background-image: linear-gradient(to right, #FF512F 0%, #DD2476 51%, #FF512F 100%)}
.btn-grad2:hover { background-position: right center; }
 
.btn-grad3 {background-image: linear-gradient(to right, #AA076B 0%, #61045F 51%, #AA076B 100%)}
.btn-grad3:hover { background-position: right center; }
📺 Watch Video Version of this Blog


❤️ Thanks for being with us 
 ________________ 🔗 Social Media Links ______________ 

☑️Follow us on Facebook : LogicTycoon 
☑️Follow us on Twitter: LogicTycoon 
☑️Follow us on Youtube: LogicTycoon

 ________________ 🌀 Watched More Videos _____________ 

 
     


 If you like it so Please Like Share & subscribe Our Channel.
Tags:

Post a Comment

0 Comments