Skip to content

Fix Issue #78 Navbar UI error on music.html #79

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
gkhabas76 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Fix Issue #78 Navbar UI error on music.html #79

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
289 changes: 155 additions & 134 deletions music.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,33 @@
<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/music.css">
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>

<!--header-->
<header id="header" class="sticky-top">
<!--navbar-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark font-italic">
<h2 class="font-italic" style="color: white;">
Play
<span class="badge badge-primary shadow">Activity</span>
</h2>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="css/music.css" />
<link
rel="stylesheet"
type="text/css"
href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
/>
<link
rel="stylesheet"
type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"
/>
</head>
<body>
<!--header-->
<header id="header" class="sticky-top">
<!--navbar-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark font-italic">
<div class="container">
<!--brand-->
<a href="home.html" class="navbar-brand">
<!--logo-->
<h2 class="font-italic">
Play
<span class="badge badge-primary shadow">Activity</span>
</h2>
</a>

<!--nav button-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navlinks">
Expand All @@ -29,11 +39,20 @@ <h2 class="font-italic" style="color: white;">
<ul class="navbar-nav text-center">
<!--home-->
<li class="nav-item active">
<a href="#" class="nav-link">Home</a>
<a href="home.html" class="nav-link">Home</a>
</li>
<!--products-->
<li class="nav-item ml-1">
<a href="#" class="nav-link">sports</a>
<a href="sport.html" class="nav-link">Sports</a>
</li>
<li class="nav-item ml-1">
<a href="dance.html" class="nav-link">Dance</a>
</li>
<li class="nav-item ml-1">
<a href="game.html" class="nav-link">Game</a>
</li>
<li class="nav-item ml-1">
<a href="books.html" class="nav-link">Books</a>
</li>


Expand All @@ -43,128 +62,130 @@ <h2 class="font-italic" style="color: white;">
</div>
</div>
</nav>
<!--nav end-->
</header>
<!--header end-->

<main>
<!--banner-->
<article id="banner" class="jumbotron jumbotron-fluid">
<div class="font-italic pl-4 mt-4 text-light">
<h1 class="display-1 font-italic">
Play
<span class="badge badge-primary shadow">Music</span>
<i class="far fa-play-circle"></i>
</h1>

<p class="lead mt-5">
Feel the music within you
<i class="fa fa-heart ml-1 text-danger"></i>
</p>
</div>
</article>
<!--banner end-->

<div class="container mt-4">

<h4 class="text-center font-italic mb-4">Music List
<span class="fa fa-star fa-lg text-warning"></span>
</h4>

<div class="row justify-content-center font-italic mt-4">

<div class="col-md-4">
<!--product card-->
<article class="card text-center font-italic mb-4">
<!--music tab -->
<iframe src="https://open.spotify.com/embed/playlist/37i9dQZF1DWWEJlAGA9gs0" width="350" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
<div class="card-body">
<!-- name-->
<h5 class="card-title">
Classical
</h5>





<!--more info button-->
<a href="#" class="btn btn-success mb-2">
<i class="fa fa-info-circle" aria-hidden="true"></i>
More info
</a>


<!--nav end-->
</header>
<!--header end-->

<main>
<!--banner-->
<article id="banner" class="jumbotron jumbotron-fluid">
<div class="font-italic pl-4 mt-4 text-light">
<h1 class="display-1 font-italic">
Play
<span class="badge badge-primary shadow">Music</span>
<i class="far fa-play-circle"></i>
</h1>

<p class="lead mt-5">
Feel the music within you
<i class="fa fa-heart ml-1 text-danger"></i>
</p>
</div>
</article>
<!--banner end-->

<div class="container mt-4">
<h4 class="text-center font-italic mb-4">
Music List
<span class="fa fa-star fa-lg text-warning"></span>
</h4>

<div class="row justify-content-center font-italic mt-4">
<div class="col-md-4">
<!--product card-->
<article class="card text-center font-italic mb-4">
<!--music tab -->
<iframe
src="https://open.spotify.com/embed/playlist/37i9dQZF1DWWEJlAGA9gs0"
width="350"
height="380"
frameborder="0"
allowtransparency="true"
allow="encrypted-media"
></iframe>
<div class="card-body">
<!-- name-->
<h5 class="card-title">Classical</h5>

<!--more info button-->
<a href="#" class="btn btn-success mb-2">
<i class="fa fa-info-circle" aria-hidden="true"></i>
More info
</a>
</div>
</article>
</div>
</article>
</div>

<div class="col-md-4">
<!--product card-->
<article class="card text-center font-italic mb-4">
<!--music tab -->
<iframe src="https://open.spotify.com/embed/playlist/37i9dQZF1DX5q67ZpWyRrZ" width="350" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
<div class="card-body">
<!-- name-->
<h5 class="card-title">
Indie Folk
</h5>
<!--more info button-->
<a href="#" class="btn btn-success mb-2">
<i class="fa fa-info-circle" aria-hidden="true"></i>
More info
</a>

<div class="col-md-4">
<!--product card-->
<article class="card text-center font-italic mb-4">
<!--music tab -->
<iframe
src="https://open.spotify.com/embed/playlist/37i9dQZF1DX5q67ZpWyRrZ"
width="350"
height="380"
frameborder="0"
allowtransparency="true"
allow="encrypted-media"
></iframe>
<div class="card-body">
<!-- name-->
<h5 class="card-title">Indie Folk</h5>
<!--more info button-->
<a href="#" class="btn btn-success mb-2">
<i class="fa fa-info-circle" aria-hidden="true"></i>
More info
</a>
</div>
</article>
</div>
<div class="col-md-4">
<!--product card-->
<article class="card text-center font-italic mb-4">
<!--music tab-->
<iframe
src="https://open.spotify.com/embed/playlist/37i9dQZF1DWTqYqGLu7kTX"
width="350"
height="380"
frameborder="0"
allowtransparency="true"
allow="encrypted-media"
></iframe>
<div class="card-body">
<!-- name-->
<h5 class="card-title">PUNJABI</h5>
<!--more info button-->
<a href="#" class="btn btn-success mb-2">
<i class="fa fa-info-circle" aria-hidden="true"></i>
More info
</a>
</div>
</article>
</div>
</article>
</div>
<div class="col-md-4">
<!--product card-->
<article class="card text-center font-italic mb-4">
<!--music tab-->
<iframe src="https://open.spotify.com/embed/playlist/37i9dQZF1DWTqYqGLu7kTX" width="350" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
<div class="card-body">
<!-- name-->
<h5 class="card-title">
PUNJABI
</h5>
<!--more info button-->
<a href="#" class="btn btn-success mb-2">
<i class="fa fa-info-circle" aria-hidden="true"></i>
More info
</a>
</div>
</article>
</div>
</div>
</div>
</main>
</main>

<footer id="footer" class="container-fluid mt-2">

<div class="d-flex justify-content-center">
<a href="#">
<i class="fab fa-instagram fa-2x"></i>
<footer id="footer" class="container-fluid mt-2">
<div class="d-flex justify-content-center">
<a href="#">
<i class="fab fa-instagram fa-2x"></i>
</a>
<a href="#">
<i class="fab fa-google-plus fa-2x"></i>
<a href="#">
<i class="fab fa-google-plus fa-2x"></i>
</a>
<a href="#">
<i class="fab fa-facebook fa-2x"></i>
<a href="#">
<i class="fab fa-facebook fa-2x"></i>
</a>
<a href="#">
<i class="fab fa-twitter fa-2x"></i>
<a href="#">
<i class="fab fa-twitter fa-2x"></i>
</a>
</div>
<p class="text-muted text-center mt-2 font-italic">

<!--copyright information-->
Copyright &copy; 2020 Music
</p>
</footer>





</body>
</html>
</div>
<p class="text-muted text-center mt-2 font-italic">
<!--copyright information-->
Copyright &copy; 2020 Music
</p>
</footer>
</body>
</html>