Skip to content

Commit

Permalink
added about section (#65)
Browse files Browse the repository at this point in the history 
* added about section

* made it non italic and added line height
  • Loading branch information
@GAGANRAGHAV
GAGANRAGHAV authored Dec 28, 2023
1 parent 6d6a79a commit f2102c5
Show file tree
Hide file tree
Showing 6 changed files with 533 additions and 7 deletions.
382 changes: 382 additions & 0 deletions about.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,382 @@
<!DOCTYPE html>
<html lang="en">

<head>
<title>Let's Play On Swetify</title>

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<!-- Open Graph Protocols -->
<meta property="og:title" content="Let's Play On Swetify" />
<meta property="og:description" content="Play and Sing with us Now !" />
<meta property="og:image" content="homepage/swetifylogo.jpg" />
<meta property="og:url" content="https://swetify.netlify.app/" />

<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Jost:ital@1&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,0,0"
rel="stylesheet" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css"/>
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="/homepage/swetifylogo.jpg" />

<!-- Font Awesome Kit -->
<script src="https://kit.fontawesome.com/32ceed9cc4.js" crossorigin="anonymous"></script>

<!-- Include Particle.js from CDN -->
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
crossorigin="anonymous" />

<!-- Custom CSS -->
<link href="swetify.css" type="text/css" rel="stylesheet" />

<!-- Css file for Get-In-Touch Section -->
<link href="getInTouch.css" type="text/css" rel="stylesheet" />


<!-- Custom Script -->
<script src="script.js" defer></script>

</head>



<body>
<div id="snackbar">Some text some message..</div>
<div id="container">

<div id="side-panel">

<!-- <div id="logo-img" alt="Logo img"></div> -->


<br>

<div style="padding-top: 80px;">
<a href="index.html#"><i class="glyphicon glyphicon-home"></i> Home</a>
<a href="index.html#popular categories"><i class="glyphicon glyphicon-music"></i> Popular Categories</a>
<a href="index.html#bestofartist"><i class="fa-solid fa-user"></i> Best of Artists</a>
<a href="index.html#liked"> <i class="fa-solid fa-heart"></i> Liked Music</a>
<a href="contact.html"><i class="fa-solid fa-phone"></i>Contact</a>
<a href="about.html"><i class="fa-regular fa-address-card"></i>About Us</a>

</div>
<!-- Add more links as needed -->
</div>

<nav id="header-nav" class="navbar navbar-default">
<h2 class="navbar-header">
<a href="index.html">
<span class="glyphicon glyphicon-headphones " id="headphones"></span> Swetify
</a>
</h2>
</nav>
<div id="content">
<div id="particles-js"></div>
<div class="video-filter"></div>
<!-- <video autoplay muted loop plays-inline id="myVideo">
<source src="homepage/website.mp4" type="video/mp4">
Your browser does not support the video tag.
</video> -->


<!-- Your main content goes here -->
<div id="cont2">


<!-- Get In Touch Section -->
<div class="container categories-heading" >
<!-- <span style="color: #ffc400;">Contact Us </span><br> -->
</div>
<div class="modal-box1" style="margin-top: -1rem;">

<img class="shvet-img" src="shvet.jpeg"></img>

<div class="big">



<div>
<h2><b>Hi 👋, Shwet here and I welcome you to Swetify!</b></h2>
<h2><b>It's a web application to find and play your favourite music.</b></h2>
</div>


<div>

<h3 class="content">




Are you passionate about web development and eager to contribute your skills to an exciting project? I invite you to be a pa

rt of Swetify, where we're exploring the world of music with the power of technology, and we need your help to make it sweeter than ever!

Looking for the perfect project to kickstart your web development journey and dive into the world of open source? Swetify is your golden opportunity
to take your first step towards mastering web technologies and contributing to a real-world project! HTML, CSS, and JavaScript serve as the foundation
for web development and provide an accessible entry point for newcomers to start their journey. As they progress, web developers can continue to build
on this foundation by exploring more advanced tools and technologies to create rich and interactive web experiences.

</h3>
</div>

</div>
</div>



</div>


<!-- footer section -->
<footer>
<div class="footer ">
<div class="footer-text">
<p>Made with ❤️ by <span class="title"><a href="#">Swetify
</a></span>Music Contributors
<br>
<span class="smallp">Make sure to star the repo</span>
<a href="https://github.com/ShwetKhatri2001/Swetify-Music" class="fa-brands fa-github icon"></a>
</p>
</div>
</div>
<button class="top" id="topbutton">
<a href="#" class="to-top">
<i class="fas fa-chevron-up"></i>
</a>
</button>
</footer>
</div>
</div>
</div>
<div class="main_div hidden" id="main_div">


<div class="music_container">

<h2 id="title">songtitle</h2>
<h3>
<marquee id="artist">artists</marquee>
</h3>
<div class="img_container" id="songimage">
<img src="songs-images/AtifAslam/DekhteDekhte.jpg" class="songimg" id="songimg" />
</div>
<audio src="songs-images/AtifAslam/DekhteDekhte.mp3"></audio>



<script>
function changeTab(clickedTab, functionName) {
// Remove 'active' class from all tabs
var tabs = document.querySelectorAll('.nav-link');
tabs.forEach(function (tab) {
tab.classList.remove('active');
});
// Add 'active' class to the clicked tab
clickedTab.classList.add('active');
// Call the corresponding function
window[functionName]();
}
</script>
</script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"></script> -->
<script src="swetify.js"></script>
<script src="scroll-reveal.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://smtpjs.com/v3/smtp.js"></script>
<script>
function validateEmail() {
var email = document.getElementById('EMAIL').value;
console.log(email);
var error = document.getElementById('error');
if (!email.match(/^[A-Za-z\._\-0-9]*[@][A-Za-z]*[\.][a-z]{2,4}$/)) {
error.innerHTML = "Please Enter a Valid Email Id";
error.style.color = "red";
return false;
}
error.innerHTML = "✅ ";
return true;
}

function Checkdata() {
var fname = document.getElementById("FNAME").value;
var lname = document.getElementById("LNAME").value;
var email = document.getElementById("EMAIL").value;
var text = document.getElementById("TEXT").value;
if (!fname || !lname || !email || !text) {

Swal.fire("Please Fill the data", "", "info");
}
}


</script>

<script>
// Function to handle slider functionality
function handleSlider(direction) {
const prevButton = document.getElementById('prev-slide');
const nextButton = document.getElementById('next-slide');
const slider = document.getElementById('centerdiv');
const scrollAmount = 300; // Adjust as needed

if (direction === 'next') {
slider.scrollLeft += scrollAmount;
} else if (direction === 'prev') {
slider.scrollLeft -= scrollAmount;
}
prevButton.style.display = slider.scrollLeft > 0 ? 'block' : 'none';
nextButton.style.display = slider.scrollLeft < (slider.scrollWidth - slider.clientWidth) ? 'block' : 'none';
}

// Attach event listeners to buttons
document.getElementById('prev-slide').addEventListener('click', function () {
handleSlider('prev');
});

document.getElementById('next-slide').addEventListener('click', function () {
handleSlider('next');
});
</script>




<script>
particlesJS("particles-js", {
"particles": {
"number": {
"value": 100,
"density": {
"enable": false,
"value_area": 900
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "star",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "http://wiki.lexisnexis.com/academic/images/f/fb/Itunes_podcast_icon_300.jpg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.5,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 4,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": false,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 5,
"direction": "left",
"random": false,
"straight": true,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": false,
"mode": "grab"
},
"onclick": {
"enable": true,
"mode": "repulse"
},
"resize": true
},
"modes": {
"grab": {
"distance": 200,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
});
</script>

</body>
</html>
Loading

0 comments on commit f2102c5

Please sign in to comment.