Scribd
Upload
17 views11 pages

White Black

Uploaded by

kiransekar95
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
17 views11 pages

White Black

Uploaded by

kiransekar95
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 11

<?

php
session_start();
if(!isset($_SESSION['username'])){
header('location:DAY3BOOTSTRAP.php');
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MP3 Player and Downloader</title>
<!-- Link to external CSS file -->
<link rel="stylesheet" href="C:\xampp\htdocs\23CSR110\DAY-2\
DAY3BOOTSTRAPCSS.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.15.4/css/all.min.css">
<link href="http://fonts.googleapis.com/css?family=Cookie" rel="stylesheet"
type="text/css">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<style>
#LOGO {
border-radius: 10px;
position: relative;
width: 50px; /* Adjusted for smaller logo */
height: 50px;
margin-right: 10px; /* Spacing between logo and title */
}
h1 {
text-shadow: 0px 0px 10px rgba(0, 255, 0, 0.7); /* Green glow effect */
color: #00FF00; /* Matching the shadow glow color */
display: inline-block; /* Align with the image */
}
.header {
display: flex;
align-items: center; /* Center the logo and title vertically */
justify-content: center; /* Center the header content horizontally */
}
.navbar {
width: 100%; /* Make the navbar occupy the entire screen width */
}
.active-link {
background-color:#00FF00 !important;
}

body {
font-family: Arial, sans-serif;
color: white;
background-color: black;
margin: 0;
padding: 0;
}
h1 {
color: #FFD700; /* Gold */
}

h2 {
color: #00FF00; /* Green */
}

.navbar {
border: 1px solid white;
background-color: #333333;
}

.navbar td {
padding: 10px;
text-align: center;
}

.navbar td:hover {
background-color: #555555; /* Hover effect for navigation */
cursor: pointer;
}

.audio-section {
text-align: center;
margin-top: 20px;
}

.audio-table {
border-collapse: collapse;
}

.audio-table td {
padding: 10px;
text-align: center;
}

.audio-table img {
width: 150px;
height: 150px;
border-radius: 10px; /* Rounded corners */
margin-bottom: 10px;
}

audio {
width: 100%; /* Ensure the audio controls are visible */
}

.audio-table p {
font-size: 14px;
}
footer {
position: fixed;
bottom: 0;
}

@media (max-height:800px) {
footer {
position: static;
}
header {
padding-top: 40px;
}
}

footer {
position: fixed;
bottom: 0;
}

@media (max-height:800px) {
footer {
position: static;
}
header {
padding-top: 40px;
}
}

.footer-distributed {
background-color: #2d2a30;
box-sizing: border-box;
width: 100%;
text-align: left;
font: bold 16px sans-serif;
padding: 50px 50px 60px 50px;
margin-top: 80px;
}

.footer-distributed .footer-left, .footer-distributed .footer-center, .footer-


distributed .footer-right {
display: inline-block;
vertical-align: top;
}

/* Footer left */

.footer-distributed .footer-left {
width: 30%;
}

.footer-distributed h3 {
color: #ffffff;
font: normal 36px 'Cookie', cursive;
margin: 0;
}

.footer-distributed h3 span {
color: #e0ac1c;
}

/* Footer links */

.footer-distributed .footer-links {
color: #ffffff;
margin: 20px 0 12px;
}
.footer-distributed .footer-links a {
display: inline-block;
line-height: 1.8;
text-decoration: none;
color: inherit;
}

.footer-distributed .footer-company-name {
color: #8f9296;
font-size: 14px;
font-weight: normal;
margin: 0;
}

/* Footer Center */

.footer-distributed .footer-center {
width: 35%;
}

.footer-distributed .footer-center i {
background-color: #33383b;
color: #ffffff;
font-size: 25px;
width: 38px;
height: 38px;
border-radius: 50%;
text-align: center;
line-height: 42px;
margin: 10px 15px;
vertical-align: middle;
}

.footer-distributed .footer-center i.fa-envelope {


font-size: 17px;
line-height: 38px;
}

.footer-distributed .footer-center p {
display: inline-block;
color: #ffffff;
vertical-align: middle;
margin: 0;
}

.footer-distributed .footer-center p span {


display: block;
font-weight: normal;
font-size: 14px;
line-height: 2;
}

.footer-distributed .footer-center p a {
color: #e0ac1c;
text-decoration: none;
;
}
/* Footer Right */

.footer-distributed .footer-right {
width: 30%;
}

.footer-distributed .footer-company-about {
line-height: 20px;
color: #92999f;
font-size: 13px;
font-weight: normal;
margin: 0;
}

.footer-distributed .footer-company-about span {


display: block;
color: #ffffff;
font-size: 18px;
font-weight: bold;
margin-bottom: 20px;
}

.footer-distributed .footer-icons {
margin-top: 25px;
}

.footer-distributed .footer-icons a {
display: inline-block;
width: 35px;
height: 35px;
cursor: pointer;
background-color: #33383b;
border-radius: 2px;
font-size: 20px;
color: #ffffff;
text-align: center;
line-height: 35px;
margin-right: 3px;
margin-bottom: 5px;
}

.footer-distributed .footer-icons a:hover {


background-color: #3F71EA;
}

.footer-links a:hover {
color: #3F71EA;
}

@media (max-width: 880px) {


.footer-distributed .footer-left, .footer-distributed .footer-center, .footer-
distributed .footer-right {
display: block;
width: 100%;
margin-bottom: 40px;
text-align: center;
}
.footer-distributed .footer-center i {
margin-left: 0;
}
}

</style>
</head>
<body background="b.jpg">
<center><br>
<div class="header">
<img src="mp3image.png" alt="MP3 Player Logo" id="LOGO">
<h1 style="text-shadow: 0px 0px 10px rgba(0, 255, 0, 0.7); color:
#00FF00;"><b>MP3 PLAYER AND DOWNLOADER</b></h1>

</div>
</center>
<br>

<!-- Bootstrap Navbar -->


<nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="padding-right:
500px;">
<div class="container">
<ul class="navbar-nav mr-auto">
<li class="nav-item active-link">
<a class="nav-link"><b style="color: white;">HOME</b></a>
</li>

<li class="nav-item">
<a class="nav-link" href="(shape of
You)Boostrap.php"><b>SONGS</b></a>
</li>
<li class="nav-item">
<a class="nav-link" href="C:\xampp\htdocs\23CSR110\DAY-3\
FAQ(original).html"><b>FAQS</b></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><b>CONTACT</b></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><b>ABOUT </b></a>
</li>
<li class="nav-item">
<a class="nav-link" href="C:\xampp\htdocs\23CSR110\DAY-3\
Login(original).html"><b style="padding-left: 1000PX;">LOGIN</b></a>
</li>
</ul>
</div>
</nav>

<!-- Navigation for signup and other information -->


<br><br>
<center>
<h2>NEW TO OUR MUSIC ZONE..</h2>
<h3 style="color: white;">Get access to all of your Favourite Songs in one
Zone.<br>It's Free and Easy.</h3>
<!-- Signup button with green color -->
<a href="C:\xampp\htdocs\23CSR110\DAY-3\DAY3SIGNUP.html" class="btn btn-
success">
<b>Sign Up Now</b>
</a>
welcome <?php
echo $_SESSION['username'];
?>
</center>
<br>

<hr style="border-top: 1px solid white;">


<h2 style="color: white; padding-left: 10px;"><i class="fas fa-music"></i> TOP
FREE MUSIC</h2>
<hr>

<!-- Horizontal layout for audio controls and their descriptions -->
<div class="audio-section">
<table class="table">
<tr>
<td>
<a href="(shape of You)Boostrap.php" style="text-decoration:
none;">
<img src="shapeofyou.webp" alt="Shape of You" class="img-
fluid" height="265" width="265">
<audio controls>
<source src="Shape-of-You(Pagal-World.Com.In).mp3"
type="audio/mpeg">
</audio>
<p style="text-decoration: none; color: white;">SHAPE OF
YOU</p>
</a>
</td>

<!-- Repeat similar structure for other songs -->


<td>
<img src="BELEIVER.webp" alt="Believer" height="265"
width="265">
<audio controls>
<source src="Imagine Dragons - Believer (Audio)"
type="audio/mpeg">
</audio>
<p style="text-decoration: none; color: white;">BELIEVER</p>

</td>

<td>
<img src="ENEMY.webp" alt="Enemy" height="265" width="265">
<audio controls>
<source src="Enemy(PaglaSongs).mp3" type="audio/mpeg">
</audio>
<p style="text-decoration: none; color: white;">ENEMY</p>
</td>

<td>
<img src="SKYFALL.webp" alt="Skyfall" height="265" width="265">
<audio controls>
<source src="James Bond - Skyfall.mp3" type="audio/mpeg">
</audio>
<p style="text-decoration: none; color: white;">SKYFALL</p>
</td>

<td>
<img src="MOCKINGBIRD.webp" alt="Mockingbird" height="265"
width="265">
<audio controls>
<source src="Eminem - Mockingbird.mp3" type="audio/mpeg">
</audio>
<p style="text-decoration: none; color: white;">MOCKINGBIRD</p>
</td>
</tr>
</table>
</div>

<hr style="border-top: 1px solid white;">


<h2 style="color: white; padding-left: 10px;"><i class="fas fa-chart-line"></i>
TRENDING NOW</h2>
<hr>

<!-- Horizontal layout for audio controls and their descriptions -->
<div class="audio-section">
<table class="table">
<tr>
<td>
<a href="shapeofyou.html" style="text-decoration: none;">
<img src="thebox.webp" alt="Shape of You" class="img-
fluid"height="265" width="265">
<audio controls>
<source src="The-Box(Pagal-World.Com.In).mp3"
type="audio/mpeg">
</audio>
<p style="text-decoration: none; color: white;">THE BOX</p>
</a>
</td>
<!-- Repeat similar structure for other songs -->
</td>
<td>
<img src="waydownwego.webp" alt="Believer" height="265"
width="265">
<audio controls>
<source src="Way-Down-We-Go_320(PaglaSongs).mp3"
type="audio/mpeg">
</audio>
<p style="text-decoration: none; color: white;">WAY DOWN WE GO</p>
</td>
<td>
<img src="darkside.webp" alt="Enemy" height="265" width="265">
<audio controls>
<source src="Darkside_320(PaglaSongs) (1).mp3"
type="audio/mpeg">
</audio>
<p style="text-decoration: none; color: white;">DARKSIDE</p>
</td>

<td>
<img src="xenogenesis.jpg" alt="Skyfall" height="265" width="265">
<audio controls>
<source src="James Bond - Skyfall.mp3" type="audio/mpeg">
</audio>
<p style="text-decoration: none; color: white;">XENOGENESIS</p>
</td>
<td>
<img src="everyday.jpg" alt="Mockingbird" height="265" width="265">
<audio controls>
<source src="Everyday-Normal-Guy-2_320(PaglaSongs).mp3"
type="audio/mpeg">
</audio>
<p style="text-decoration: none; color: white;">EVERYDAY NORMAL
GUY</p>
</td>
</tr>
</table>
</div>

<hr style="border-top: 1px solid white;">


<h2 style="color: white; padding-left: 10px;"><i class="fas fa-music"></i>
TAMIL SONGS</h2>
<hr>

<!-- Horizontal layout for audio controls and their descriptions -->
<div class="audio-section">
<table class="table">
<tr>
<td>
<a href="shapeofyou.html" style="text-decoration: none;">
<img src="coolie.jpg" alt="Shape of You" class="img-fluid"
height="265" width="265">
<audio controls>
<source src="Coolie Disco.mp3" type="audio/mpeg">
</audio>
<p style="text-decoration: none; color: white;">COOLIE
DISCO</p>
</a>
</td>

<!-- Repeat similar structure for other songs -->


<!-- Repeat similar structure for other songs -->
<td>
<img src="whistlepodu.webp" alt="Believer" height="265"
width="265">
<audio controls>
<source src="Whistle-Podu_320(PaglaSongs).mp3"
type="audio/mpeg">
</audio>
<p style="text-decoration: none; color: white;">WHISTLE
PODU</p>
</td>

<td>
<img src="ordinaryperson.webp" alt="Enemy" height="265"
width="265">
<audio controls>
<source src="Ordinary-Person_320(PaglaSongs).mp3"
type="audio/mpeg">
</audio>
<p style="text-decoration: none; color: white;">ORDINARY
PERSON</p>
</td>

<td>
<img src="master.jpg" alt="Skyfall" height="265" width="265">
<audio controls>
<source src="Master-the-Blaster_320(PaglaSongs).mp3"
type="audio/mpeg">
</audio>
<p style="text-decoration: none; color: white;">MASTER THE
BLASTER</p>
</td>

<td>
<img src="jigarthanda.webp" alt="Mockingbird" height="265"
width="265">
<audio controls>
<source src="Maamadurai.mp3" type="audio/mpeg">
</audio>
<p style="text-decoration: none; color: white;">MAAMADURA</p>
</td>
</tr>

</table>
</div>

<footer class="footer-distributed">

<div class="footer-left">

<p class="footer-links">
<a href="#">Home</a>
|
<a href="#">About</a>
|
<a href="#">Contact</a>
|
<a href="#">FAQ</a>
</p>

<p class="footer-company-name">Copyright © 2024 <strong>MP3</strong>


All rights reserved</p>
</div>

<div class="footer-center">
<div>
<i class="fa fa-map-marker"></i>
<p><span>INDIA</span>
</p>
</div>

<div>
<i class="fa fa-phone"></i>
<p>+91 9025720030</p>
</div>
<div>
<i class="fa fa-envelope"></i>
<p><a href="mailto:[email protected]">[email protected]</a></p>
</div>
</div>
<div class="footer-right">
<p class="footer-company-about">
<span>About the company</span>
<strong>MP3 PLAYER AND DOWNLOADER</strong> is a website where you
can listen to your favourite songs and download them easily
</p>
<div class="footer-icons">
<a href="#"><i class="fab fa-facebook"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-linkedin"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
</div>
</div>
</footer>

<!-- Bootstrap JS -->


<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></
script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

You might also like