Skip to content
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

Jump to bottom

Fixed the appearance of Welcome line #134

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Fixed the appearance of Welcome line #134

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5474c6a
Fixed the apperence of Welcome line
Prutha-Upadhyay Jan 29, 2024
346a95a
Spacing, text apperance and font
Prutha-Upadhyay Feb 11, 2024
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
2 changes: 1 addition & 1 deletion Pages/pages.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ body {

html {
font-size: 62.5%;
font-family: "Jost", sans-serif;
font-family:'Poppins', sans-serif;
scroll-behavior: smooth;
}

Expand Down
4 changes: 2 additions & 2 deletions getInTouch.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
padding:2vh ;
border-radius:0 10px 10px 0;
box-shadow:0px 4px 14px 3px black;
font-family:"Montserrat";
font-family:'Poppins', sans-serif;:"Montserrat";

}
*{
Expand Down Expand Up @@ -107,7 +107,7 @@
justify-content: center;
z-index: 100;
margin-bottom: 50px;
font-family:"Montserrat";
font-family:'Poppins', sans-serif;:"Montserrat";

}

Expand Down
49 changes: 26 additions & 23 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,11 +45,16 @@
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap" rel="stylesheet" />
<link href="swetify.css" type="text/css" rel="stylesheet" />
<link rel="icon" type="image/x-icon" href="/homepage/swetifylogo.jpg" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,0,0" />
<script src="https://kit.fontawesome.com/32ceed9cc4.js"></script>
<script src="https://unpkg.com/[email protected]/dist/scrollreveal.min.js"></script>
<script src="script.js"></script>


</head>

<body>
Expand Down Expand Up @@ -113,8 +118,7 @@
</a>
</li>
<li onclick="hidevisible()">
<a href="#popular categories" id="popular-categories"><span class="glyphicon glyphicon-music"></span><br
class="hidden-xs" />Popular Categories
<a href="#popular categories" id="popular-categories"><span class="glyphicon glyphicon-music"></span> <br class="hidden-xs" />Popular Categories
</a>
</li>
<li onclick="hidevisible()">
Expand All @@ -127,7 +131,9 @@
</div>
</div>
</nav>

</header>



<!-- Custom CSS -->
Expand All @@ -145,11 +151,9 @@
<div id="snackbar">Some text some message..</div>
<div id="container">

<div id="side-panel">
<div id="side-panel" >

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

g
<br>

<div style="padding-top: 80px;">
Expand Down Expand Up @@ -197,18 +201,12 @@ <h2 class="navbar-header">

<!-- Your main content goes here -->
<div id="cont2">
<div style="padding:28vh 0px ; height: 100vh; margin-top: 80px; text-align: center; ">
<h1>
Welcome to Swetify Music
</h1>
<div class="container" style="margin-top: 9px; ">
<h1 style="color: #EBD9B4; text-shadow: rgb(132, 102, 251) 1px 0 7px;">Welcome to Swetify Music</h1>
<br>
<i style="font-size: 18px;">The ultimate music streaming platform for real music enthusiasts.</i><br>

<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="6em" width="1em"
xmlns="http://www.w3.org/2000/svg"
style="color: #ffc400; animation: scrollbelow 1.2s infinite forwards; font-size: 90px;">
<path
d="M12.0001 19.1643L18.2072 12.9572L16.793 11.543L12.0001 16.3359L7.20718 11.543L5.79297 12.9572L12.0001 19.1643ZM12.0001 13.5144L18.2072 7.30728L16.793 5.89307L12.0001 10.686L7.20718 5.89307L5.79297 7.30728L12.0001 13.5144Z">
<i>The ultimate music streaming platform for real music enthusiasts.</i><br>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12.0001 19.1643L18.2072 12.9572L16.793 11.543L12.0001 16.3359L7.20718 11.543L5.79297 12.9572L12.0001 19.1643ZM12.0001 13.5144L18.2072 7.30728L16.793 5.89307L12.0001 10.686L7.20718 5.89307L5.79297 7.30728L12.0001 13.5144Z">
</path>
</svg>
</div>
Expand Down Expand Up @@ -408,9 +406,12 @@ <h3 id="bestofartist"> Best Of Artists </h3>
</div>
</div>
</div>
<div class="container-brake">
<div class="cont3 fluid-container">
<div class="container categories-heading" id="your spotify music">
<div class="container-wrapper">


<div class="container-b">
<div class="cont3">
<div class="categories-heading" id="your spotify music">
<span style="color: #ffc400;"> Your Spotify Music </span>
</div>
<div class="login-container" id="login_container">
Expand Down Expand Up @@ -462,16 +463,18 @@ <h3 id="bestofartist"> Best Of Artists </h3>
<div id="top_artists_list"></div>
</div>
</div>
</div>
<!-- the liked list -->
<div class="container categories-heading" id="container-liked-list">
<div class="categories-heading" id="container-liked-list">
<span style="color: #ffc400;"> Your Favourite Music</span><br>
<div class="welcome-text">
<p style="font-weight: 100; color: rgb(202, 202, 202); padding-top: 40px;">If you like a music it would
<p style="font-weight: 100; color: rgb(202, 202, 202); padding-top: 30px;padding: 30px; text-align: center;">If you like a music it would
appear here !</p>
</div>
</div>
<div id="fav-list">
</div>
</div>
</div>




Expand Down
104 changes: 85 additions & 19 deletions swetify.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,66 @@
body {
margin: 0;
font-family:'Poppins', sans-serif;
/* background-color: #f8f8f8; */
}

.container {
padding: 28vh 0;
height: 100vh;
margin-top: 80px;
text-align: center;
box-shadow: #ffc400;
}

.container>h1 {
color: #EBD9B4;
font-size: 2.5em;
margin-bottom: 10px;
text-shadow: #FC0 1px 0 10px;
}

i {
color: #C4DFDF;
font-size: 18px;
}

svg {
color: #ffc400;
height: 90px;
width: 90px;
animation: scrollbelow 1.2s infinite forwards;
fill: #ffc400;
transition: fill 0.5s;
}

@keyframes scrollbelow {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);

}
40% {
transform: translateY(10px);
}
60% {
transform: translateY(5px);
}
}
@media (max-width: 767px) {
#nav-list > li {
display: block;
width: 100%;
}
}
.navbar-nav {
width: auto;
}
#side-panel {
white-space: nowrap;
}
#side-panel a {
display: inline-block;
margin-bottom: 10px; /* Optional: Adjust spacing between links */
}
body {

font-size: 14px;
Expand All @@ -18,6 +81,7 @@ body {
height: 100vh;
}


#myVideo{
top:0;
overflow: hidden;
Expand Down Expand Up @@ -219,7 +283,7 @@ nav {
justify-content: space-between;
align-items: center;
margin-bottom: 0;
font-family: "Montserrat", sans-serif;
font-family:'Poppins', sans-serif;
}

#logo-img {
Expand Down Expand Up @@ -330,16 +394,16 @@ nav a{
/******** Home Page Main Content Styles ***********/

.categories-heading {

font-family: sans-serif;
text-align: center;
font-family:'Poppins', sans-serif;
font-size: 3em;
color: white;
opacity: 0.8;
font-weight: 800;
margin-top: 20px;
transition: width 2s, opacity 2s;
padding: 40px;
text-align: center;
/* padding: 10px; */
/* text-align: center; */

}

Expand Down Expand Up @@ -386,7 +450,7 @@ nav a{
}

.category-title {
font-family: "Montserrat", sans-serif;
font-family:'Poppins', sans-serif;
border-radius: 10%;
position: relative;
border: 2px solid #3f0c1f;
Expand All @@ -400,7 +464,7 @@ nav a{
height: 100%;
position: absolute;
top: 50%;
font-family:'Times New Roman', Times, serif;
font-family:'Poppins', sans-serif;
font-weight: 500;
right: 0;
padding-top: 3%;
Expand Down Expand Up @@ -469,7 +533,7 @@ nav a{
}

.slider-title {
font-family: "Montserrat", sans-serif;
font-family:'Poppins', sans-serif;
border-radius: 30px;
position: absolute;
bottom: 8%;
Expand Down Expand Up @@ -540,7 +604,7 @@ nav a{
}

.footer p {
font-family: "Montserrat", sans-serif;
font-family:'Poppins', sans-serif;
color: white;
font-size: 2rem;
text-align: center;
Expand Down Expand Up @@ -583,8 +647,8 @@ nav a{

.footer ul {
color: white;
/* font-family: "Lobster", cursive; */
font-family: "Montserrat", sans-serif;

font-family:'Poppins', sans-serif;
font-size: 20px;
list-style: disc;
}
Expand Down Expand Up @@ -673,7 +737,7 @@ footer .top:hover {
padding: 80px;
padding-top: 100px;
box-sizing: border-box;
font-family: "Montserrat", sans-serif;
font-family:'Poppins', sans-serif;
display: none;
position: absolute;
height: 100%;
Expand All @@ -697,7 +761,7 @@ footer .top:hover {
/********** main and music containers styles ***********/

.main_div {
font-family: "Jost", sans-serif;
font-family:'Poppins', sans-serif;
width: 96vw;
height: 96vh;
display: grid;
Expand Down Expand Up @@ -1151,7 +1215,7 @@ input[type="checkbox"]:checked+.like_icon {
display: none;
}

.navbar-brand h1 {
.navbar-brand h1 {
font-size: 1.7em;
}

Expand Down Expand Up @@ -1313,7 +1377,9 @@ input[type="checkbox"]:checked+.like_icon {
/* liked song list */

.container-liked-list {
margin: 20px;
margin: 10px;
margin-top: 3px;

/* position: relative;
bottom: 40px;
right: 10px;
Expand All @@ -1326,7 +1392,7 @@ input[type="checkbox"]:checked+.like_icon {
margin: auto;
box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.3);
border: 10px solid whitesmoke;
font-family: "Arial", sans-serif;
font-family:'Poppins', sans-serif;
height: 200px;
width: 90%;
overflow-y: auto;
Expand All @@ -1335,12 +1401,12 @@ input[type="checkbox"]:checked+.like_icon {

table {
width: 100%;
font-family: Verdana;
font-family:'Poppins', sans-serif;
}

.headT {
color: black;
font-family: Arial, sans-serif;
font-family:'Poppins', sans-serif;
font-size: large;
font-weight: lighter;
position: sticky;
Expand Down Expand Up @@ -1418,7 +1484,7 @@ tr:hover {
.welcome-text {
color: rgb(176, 176, 176);
font-size: 20px;
padding-bottom: 20px;
/* padding-bottom: 20px; */

}

Expand Down