Code: Select all
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>SouthKMusic</title>
<link rel="icon" href="favicon.png">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round" rel="stylesheet"> <link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/animate.css">
</head>
<body id="home">
<!--[if lte IE 9]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
<![endif]-->
<!-- Add your site or application content here -->
<header>
<div class="logotype">
<div class="logo">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<a href="index.html" class="grape">SOUTHKMUSIC</a>
</div>
<nav class="menu">
<ul>
<li><a href="#" class="black">Inicio</a></li>
<li><a href="artistas.html" class="black">Artistas</a></li>
<li><a href="top_20.html" class="black">Top<strong class="pink">20</strong></a></li>
</ul>
</nav>
</header>
<div class="home-landing">
<div class="home-content">
<h1 id="typer-size">
Los tenemos a todos
</h1>
<span id="typed"></span>
</div>
</div>
<div class="home-mid-container">
<section class="home-img-container animated fadeInLeft slow delay-1s"></section>
<section class="home-description-container animated zoomIn slow delay-2s">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit repudiandae soluta temporibus incidunt voluptatibus. Quia omnis vero unde necessitatibus non veniam, velit dicta eligendi illum sapiente neque doloremque, saepe fugit.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora neque omnis dicta officia, rerum error. Eius odit corporis voluptates ullam aliquid est quod odio impedit, deleniti in culpa laudantium aliquam.
</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit repudiandae soluta temporibus incidunt voluptatibus. Quia omnis vero unde necessitatibus non veniam, velit dicta eligendi illum sapiente neque doloremque, saepe fugit.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora neque omnis dicta officia, rerum error. Eius odit corporis voluptates ullam aliquid est quod odio impedit, deleniti in culpa laudantium aliquam.
</p>
</section>
</div>
<div class="home-text-container" alt="Photo by NeONBRAND on Unsplash">
<section>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit repudiandae soluta temporibus incidunt voluptatibus. Quia omnis vero unde necessitatibus non veniam, velit dicta eligendi illum sapiente neque doloremque, saepe fugit.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora neque omnis dicta officia, rerum error. Eius odit corporis voluptates ullam aliquid est quod odio impedit, deleniti in culpa laudantium aliquam.
</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit repudiandae soluta temporibus incidunt voluptatibus. Quia omnis vero unde necessitatibus non veniam, velit dicta eligendi illum sapiente neque doloremque, saepe fugit.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora neque omnis dicta officia, rerum error. Eius odit corporis voluptates ullam aliquid est quod odio impedit, deleniti in culpa laudantium aliquam.
</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit repudiandae soluta temporibus incidunt voluptatibus. Quia omnis vero unde necessitatibus non veniam, velit dicta eligendi illum sapiente neque doloremque, saepe fugit.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora neque omnis dicta officia, rerum error. Eius odit corporis voluptates ullam aliquid est quod odio impedit, deleniti in culpa laudantium aliquam.
</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit repudiandae soluta temporibus incidunt voluptatibus. Quia omnis vero unde necessitatibus non veniam, velit dicta eligendi illum sapiente neque doloremque, saepe fugit.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora neque omnis dicta officia, rerum error. Eius odit corporis voluptates ullam aliquid est quod odio impedit, deleniti in culpa laudantium aliquam.
</p>
</section>
</div>
<footer>
<div class="bg"></div>
<h5>Copyright ©. Jherson Martelo - UPB</h5>
<div class="logo">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</footer>
<script src="js/vendor/modernizr-3.6.0.min.js"></script>
<script src="js/vendor/typed.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script type="text/javascript">
var typed = new Typed('#typed',{
strings:["GIRLS' GENERATION","EXO","SEND NUDES","2NE1","iKON", "TWICE"],
loop: true,
typeSpeed:40,
backSpeed:40,
backDelay:1000,
smartBackspace:true
});
</script>
</body>
</html>
Code: Select all
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>SouthKMusic</title>
<link rel="icon" href="favicon.png">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round" rel="stylesheet"> <link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/animate.css">
</head>
<body id="artists">
<!--[if lte IE 9]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
<![endif]-->
<!-- Add your site or application content here -->
<header>
<div class="logotype">
<div class="logo">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<a href="index.html" class="blank">SOUTHKMUSIC</a>
</div>
<nav class="menu">
<ul>
<li><a href="index.html" class="blank">Inicio</a></li>
<li><a href="artistas.html" class="blank">Artistas</a></li>
<li><a href="top_20.html" class="blank">Top<strong class="pink">20</strong></a></li>
</ul>
</nav>
</header>
<div class="artists-landing">
<div class="artists-content">
<!-- <h1 id="typer-size"></h1> -->
<section class="hero-bg hero-content neon-hero neon hero-header">
<div class="hero-text">
<div class="title">ARTISTAS</div>
</div>
</div>
</div>
<div class="artists-mid-container">
<section class="wrapper">
<ul class="tabs">
<li class="active jyp">JYP</li>
<li class="sm">SM</li>
<li class="yg">YG</li>
</ul>
<ul class="tab__content">
<li class="sm active">
<div class="content__wrapper">
<div class="wrapper-left">
<div class="overlay jyp">
<div class="content">
Wonder Girls
</div>
</div>
<img src="img/jyp/wondergirls.jpg">
</div>
<div class="wrapper-right">
<img src="img/jyp/got7.jpg">
<div class="overlay jyp">
<div class="content">
GOT7
</div>
</div>
</div>
<div class="wrapper-left">
<div class="overlay jyp">
<div class="content">
Baek A Yeon
</div>
</div>
<img src="img/jyp/baekayeon.jpg">
</div>
<div class="wrapper-right">
<img src="img/jyp/suzy.jpg">
<div class="overlay jyp">
<div class="content">
Suzy
</div>
</div>
</div>
<div class="wrapper-left">
<div class="overlay jyp">
<div class="content">
Twice
</div>
</div>
<img src="img/jyp/twice.JPG">
</div>
<div class="wrapper-right">
<img src="img/jyp/nakjoon.jpg">
<div class="overlay jyp">
<div class="content">
NakJoon
</div>
</div>
</div>
</div>
</li>
<li>
<div class="content__wrapper">
<div class="wrapper-left">
<div class="overlay sm">
<div class="content">
Red Velvet
</div>
</div>
<img src="img/sm/redvelvet.jpg">
</div>
<div class="wrapper-right">
<img src="img/sm/shinee.jpg">
<div class="overlay sm">
<div class="content">
SHINee
</div>
</div>
</div>
<div class="wrapper-left">
<div class="overlay sm">
<div class="content">
Super Junior
</div>
</div>
<img src="img/sm/suju.jpg">
</div>
<div class="wrapper-right">
<img src="img/sm/snsd.jpg">
<div class="overlay sm">
<div class="content">
Girls' Generarion
</div>
</div>
</div>
<div class="wrapper-left">
<div class="overlay sm">
<div class="content">
EXO
</div>
</div>
<img src="img/sm/exo.jpg">
</div>
<div class="wrapper-right">
<img src="img/sm/fx.jpg">
<div class="overlay sm">
<div class="content">
f(x)
</div>
</div>
</div>
</div>
</li>
<li>
<div class="content__wrapper">
<div class="wrapper-left">
<div class="overlay yg">
<div class="content">
BIGBANG
</div>
</div>
<img src="img/yg/bigbang.jpg">
</div>
<div class="wrapper-right">
<img src="img/yg/blackpink.jpg">
<div class="overlay yg">
<div class="content">
BLACKPINK
</div>
</div>
</div>
<div class="wrapper-left">
<div class="overlay yg">
<div class="content">
WINNER
</div>
</div>
<img src="img/yg/winner.jpg">
</div>
<div class="wrapper-right">
<img src="img/yg/akmu.jpg">
<div class="overlay yg">
<div class="content">
AKMU
</div>
</div>
</div>
<div class="wrapper-left">
<div class="overlay yg">
<div class="content">
LEE HI
</div>
</div>
<img src="img/yg/leehi.jpg">
</div>
<div class="wrapper-right">
<img src="img/yg/epikhigh.jpg">
<div class="overlay yg">
<div class="content">
Epik High
</div>
</div>
</div>
</div>
</li>
</ul>
</section>
</div>
<footer>
<div class="bg"></div>
<h5>Copyright ©. Jherson Martelo - UPB</h5>
<div class="logo">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</footer>
<script src="js/vendor/modernizr-3.6.0.min.js"></script>
<script src="js/vendor/jquery-3.3.1.min.js"></script>
<script src="js/vendor/typed.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- <script type="text/javascript">
var typed = new Typed('#typed',{
strings:["GIRLS' GENERATION","EXO","SEND NUDES","2NE1","iKON", "TWICE"],
loop: true,
typeSpeed:40,
backSpeed:40,
backDelay:1000,
});
</script> -->
</body>
</html>
Code: Select all
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>SouthKMusic</title>
<link rel="icon" href="favicon.png">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round" rel="stylesheet"> <link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/icomoon/style.css">
</head>
<body id="top">
<!--[if lte IE 9]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
<![endif]-->
<!-- Add your site or application content here -->
<header>
<div class="logotype">
<div class="logo">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<a href="index.html" class="blank">SOUTHKMUSIC</a>
</div>
<nav class="menu">
<ul>
<li><a href="index.html" class="blank">Inicio</a></li>
<li><a href="artistas.html" class="blank">Artistas</a></li>
<li><a href="#" class="blank">Top<strong class="pink">20</strong></a></li>
</ul>
</nav>
</header>
<div class="artists-landing">
<div class="artists-content" id="top-content">
<!-- <h1 id="typer-size"></h1> -->
<section class="hero-bg hero-content neon-hero neon hero-header" alt="Photo by Thiago Barletta on Unsplash">
<div class="hero-text">
<div class="title">TOP 20</div>
</div>
</div>
</div>
<div class="top-mid-container">
<div class="background"></div>
<div class="music-player">
<div class="details">
<div id="left-side">
<span class="coverart">
<img src="../SouthKMusic/img/songs/1.jpg"></img>
</span>
</div>
</div>
</div>
<div><hr id="nine"></div>
<div id="right">
<div id="playlist">
<table id="playlist" class="no-select">
<thead>
<th></th>
<th>Top</th>
<th>Title</th>
<th>Artist</th>
<th>Album</th>
<th>Duration</th>
</thead>
<tbody></tbody>
</table>
</div>
</div>
<section id="interactions">
<div class="tracking-wrap">
<span class="song-current-time">--:--</span>
<input class="tracking-slider range" type="range" min="0" value="0" step="1">
<span class="song-length">--:--</span>
</div>
<div class="controls-bar">
<section id="controls">
<span class="icon-all_inclusive shuffle"></span>
<span class="icon-skip_previous previous"></span>
<span class="icon-play_arrow play-pause"></span>
<span class="icon-skip_next next"></span>
<span class="icon-repeat repeat on"></span>
</section>
<div id="volume">
<span class="icon-volume_down"></span>
<input class="volume-slider range" type="range" max="1" min="0" step="0.01" value="0.8">
<span class="icon-volume_up"></span>
</div>
</div>
</section>
<audio id="player"></audio>
</div>
<footer id="footer-top20">
<div class="bg"></div>
<h5>Copyright ©. Jherson Martelo - UPB</h5>
<div class="logo">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</footer>
<script src="js/vendor/modernizr-3.6.0.min.js"></script>
<script src="js/vendor/jquery-3.3.1.min.js"></script>
<script src="js/vendor/typed.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/music_player.js"></script>
<script src="js/main.js"></script>
<!-- <script type="text/javascript">
var typed = new Typed('#typed',{
strings:["GIRLS' GENERATION","EXO","SEND NUDES","2NE1","iKON", "TWICE"],
loop: true,
typeSpeed:40,
backSpeed:40,
backDelay:1000,
});
</script> -->
</body>
</html>
Code: Select all
/*! HTML5 Boilerplate v6.1.0 | MIT License | https://html5boilerplate.com/ */
/*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*/
/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */
html {
color: #222;
font-size: 1em;
line-height: 1.4;
}
/*
* Remove text-shadow in selection highlight:
* https://twitter.com/miketaylr/status/12228805301
*
* Vendor-prefixed and regular ::selection selectors cannot be combined:
* https://stackoverflow.com/a/16982510/7133471
*
* Customize the background color to match your design.
*/
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
/*
* A better looking default horizontal rule
*/
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
/*
* Remove the gap between audio, canvas, iframes,
* images, videos and the bottom of their containers:
* https://github.com/h5bp/html5-boilerplate/issues/440
*/
audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
}
/*
* Remove default fieldset styles.
*/
fieldset {
border: 0;
margin: 0;
padding: 0;
}
/*
* Allow only vertical resizing of textareas.
*/
textarea {
resize: vertical;
}
/* ==========================================================================
Browser Upgrade Prompt
========================================================================== */
.browserupgrade {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
/* ==========================================================================
Author's custom styles
========================================================================== */
.pink{
color: #D7304D;
}
.pink:hover{
color: #fff;
}
.blank{
color: #fff;
}
.black{
color: #000;
}
.grape{
color: #CE92D8;
}
::-webkit-scrollbar{
width: 10px;
}
::-webkit-scrollbar-track{
background-color: #E3E3E3;
border-radius: 4px;
}
::-webkit-scrollbar-thumb{
box-shadow: 2px 0 10px 0.2px black;
background: rgba(134, 121, 121, 0.582);
border-radius: 4px;
}
hr {
height: 1px;
background: white;
border: none;
outline: none;
margin: 3em 3em 5em;
position: relative;
}
@font-face{
font-family: 'VarelaRound';
src: url(../css/fonts/VarelaRound-Regular.otf);
}
@font-face{
font-family: 'Roboto';
src: url(../css/fonts/Roboto-Regular.ttf);
}
*{
box-sizing: border-box;
font-family: 'VarelaRound','Roboto', sans-serif;
}
html, body{
padding: 0;
margin:0;
width: 100%;
height: 100%;
}
body#home{
background: url(../img/home-landing.jpg);
background-attachment: fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
body#artists{
background: url(../img/home-text.jpg);
background-attachment: fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
body#top{
background: url(../img/top-hero.jpg);
background-attachment: fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
header{
height: 100px;
background-color: transparent;
display: grid;
grid-template-columns: auto auto auto auto;
}
.logotype{
width: 28%;
height: 88px;
float: left;
padding: 8px;
margin-left: 18px;
margin-top: 8px;
display: grid;
grid-template-columns: 60px auto;
grid-template-rows: 60px;
}
.logotype a{
text-decoration: none;
font-size: 38px;
letter-spacing: -3px;
font-weight: 800;
margin-left: 16px;
float: right;
position: relative;
text-align: center;
justify-content: center;
align-self: center;
}
.logo {
width: 50px;
height: 50px;
margin-right: 5px;
}
.logo div {
position: absolute;
width: 50px;
height: 50px;
border-radius: 20%;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
mix-blend-mode: multiply;
-webkit-animation: 2s cubic-bezier(0.66, -0.7, 0.27, 1.6) infinite;
animation: 2s cubic-bezier(0.66, -0.7, 0.27, 1.6) infinite;
}
.logo div:nth-child(1) {
background-color: #f4537d;
-webkit-animation-name: rotate-1;
animation-name: rotate-1;
}
.logo div:nth-child(2) {
background-color: #ddebf4;
-webkit-animation-name: rotate-2;
animation-name: rotate-2;
}
.logo div:nth-child(3) {
background-color: #f1369a;
-webkit-animation-name: rotate-3;
animation-name: rotate-3;
}
.logo div:nth-child(4) {
background: url(../img/logo.png) ;
background-size:contain;
background-position-y: 2px;
}
@-webkit-keyframes rotate-1 {
to {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
}
@keyframes rotate-1 {
to {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
}
@-webkit-keyframes rotate-2 {
to {
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
}
@keyframes rotate-2 {
to {
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
}
@-webkit-keyframes rotate-3 {
to {
-webkit-transform: rotate(315deg);
transform: rotate(315deg);
}
}
@keyframes rotate-3 {
to {
-webkit-transform: rotate(315deg);
transform: rotate(315deg);
}
}
.menu{
grid-column: 4;
margin: 0 auto;
position: relative;
text-align: center;
justify-content: center;
align-self: center;
}
.menu ul{
float: right;
}
.menu ul li{
cursor: pointer;
display: inline-block;
text-decoration: none;
}
.menu ul li:not(:first-child){
margin-left: 48px;
}
.menu ul li:last-child{
margin-right: 24px;
}
.menu ul li a{
color: #CEBBD8;
position: relative;
display: inline-block;
outline: none;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
font-weight: 700;
letter-spacing: 1.2px;
}
.menu ul li a:hover{
color: #D7304D;
text-decoration: none;
}
.menu ul li a:before, .menu ul li a:after {
content: '';
position: absolute;
width: 0%;
height: 2px;
bottom: -2px;
background: #D7304D;
}
.menu ul li a:before {
left: 0;
}
.menu ul li a:after {
right: 0;
background: transparent;
transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.menu ul li a:hover:before {
background: transparent;
width: 100%;
transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.menu ul li a:hover:after {
background: transparent;
width: 100%;
transition: 0s;
}
/* Start Home page */
@-webkit-keyframes sdb {
0% {
opacity: 0;
}
30% {
opacity: 1;
}
60% {
box-shadow: 0 0 0 60px rgba(0, 0, 0, 0.1);
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes sdb {
0% {
opacity: 0;
}
30% {
opacity: 1;
}
60% {
box-shadow: 0 0 0 60px rgba(0, 0, 0, 0.1);
opacity: 0;
}
100% {
opacity: 0;
}
}
.home-landing{
width: 100%;
height: 84vh;
}
.home-content{
display: table-cell;
position: absolute;
top: 40%;
left: 15%;
color: #CE92D8;
margin:0 auto;
text-transform: uppercase;
text-align: center;
}
.home-content h1{
padding: 0;
margin: 0 auto;
font-size: 5em;
font-weight: 700;
}
.home-content span{
font-family: 'Roboto', sans-serif;
}
.home-mid-container{
height: 100vh;
display: grid;
grid-template-columns: 50% auto;
align-self: center;
-webkit-clip-path: polygon(100% 16%, 100% 100%, 0 100%, 0 0);
clip-path: polygon(100% 16%, 100% 100%, 0 100%, 0 0);
background:url(../img/liquid-trip/png/bg-04.png);
background-size: cover;
background-repeat: no-repeat;
/* -webkit-box-shadow: 0 8px 6px -6px inset black;
-moz-box-shadow: 0 8px 6px -6px inset black;
box-shadow: 0 8px 13px -7px inset black, 0 -8px 13px -7px inset black; */
}
.home-img-container{
align-self: center;
background: url(../img/img1-content.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 80%;
height: 80%;
margin: 0 20px;
-webkit-box-shadow: 0 8px 6px -6px #7D24A6;
-moz-box-shadow: 0 8px 6px -6px #7D24A6;
box-shadow: 0 18px 20px -7px #7D24A6, 0 -3px 20px -7px #7D24A6;
}
.home-description-container{
align-self: center;
margin: 0 60px;
justify-content: space;
z-index: -10;
}
.home-text-container{
height: 80vh;
display: grid;
grid-template-columns: 50% auto;
background: url(../img/home-text.jpg);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position-y: 45%;
background-position-x: 100%;
align-self: center;
font-family: 'Roboto';
text-align: justify;
-webkit-clip-path: polygon(100% 0, 100% 92%, 0 100%, 0 0);
clip-path: polygon(100% 0, 100% 92%, 0 100%, 0 0);
}
.home-text-container section{
align-self: center;
margin: 0 50px;
font-size: 16px;
color: #fff;
}
/* End Home page */
/* Start Artists page*/
.artists-landing,
.artists-landing::after,
.artists-landing::before{
content: '';
width: 100%;
height: 60vh;
position: relative;
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: auto auto auto;
}
.artists-landing::before,
.artists-landing::after{
position: absolute;
content: '';
width: 50%;
height: 152px;
z-index: 1;
bottom: -14%;
background-color: #fff;
}
.artists-landing::before{
right: 50%;
transform: skew(0,6deg);
box-shadow: 8px 0 24px -8px black;
}
.artists-landing::after{
left: 49.99%;
transform: skew(0,-6deg);
box-shadow: 8px 0 24px -8px black;
}
.artists-content{
position: relative;
grid-column: 2;
grid-row: 2;
align-self: center;
text-align: center;
}
/* CSS3 Neon Text Effect */
.hero-bg.neon-hero .title {
cursor:pointer;
color: rgba(255, 255, 255, 0);
text-shadow: 0em 0em 3em #D7304D,
0em 0em 2em #D7304D,
1px 1px 5px #D7304D,
0px 0px 15px #D7304D,
1px 0px 0px white,
-1px 0px 2px rgba(0, 0, 0, .5);
}
#top-content .hero-bg.neon-hero .title{
text-shadow: 0em 0em 3em #2A9BF3,
0em 0em 2em #2A9BF3,
1px 1px 5px #2A9BF3,
0px 0px 15px #2A9BF3,
1px 0px 0px white,
-1px 0px 2px rgba(0, 0, 0, .5);
}
.hero-bg.neon-hero .title:hover {
color: #f4537d;
text-shadow: 0em 0em 5em #D7304D,
0em 0em 3em #D7304D,
0em 0em 2em #D7304D,
1px 1px 5px #D7304D,
0px 0px 10px #D7304D,
0px 0px 25px #D7304D,
0px 0px 45px #D7304D,
2px 1px 0px white,
-1px 0px 2px rgba(0, 0, 0, .5);
}
#top-content .hero-bg.neon-hero .title:hover{
color: #2A9BF3;
text-shadow: 0em 0em 5em #2A9BF3,
0em 0em 3em #2A9BF3,
0em 0em 2em #2A9BF3,
1px 1px 5px #2A9BF3,
0px 0px 10px #2A9BF3,
0px 0px 25px #2A9BF3,
0px 0px 45px #2A9BF3,
2px 1px 0px white,
-1px 0px 2px rgba(0, 0, 0, .5);
}
.hero-bg .title {
font-size: 5em;
letter-spacing: 0px;
color: #ffffff;
}
.hero-bg .hero-text {
justify-content: center;
text-align: center;
}
/* End CSS3 Neon Text Effect */
/* Start Artists description */
.artists-mid-container,
.top-mid-container{
max-width: 100%;
padding-top: 150px;
background-color: #ccc;
position: relative;
display: grid;
margin: 0;
left: 0;
}
.wrapper {
width: 100%;
margin: 0 auto;
}
.tabs {
margin: 0;
padding: 0;
display: grid;
grid-template-columns: auto auto auto;
width: 100%;
-webkit-transform: translateY(5px);
transform: translateY(5px);
}
.tabs > li {
transition-duration: 0.25s;
display: table-cell;
list-style: none;
text-align: center;
padding: 20px 20px 25px 20px;
position: relative;
overflow: hidden;
cursor: pointer;
color: white;
font-size: 3em;
}
.tabs > li:before {
z-index: -1;
position: absolute;
content: "";
width: 100%;
height: 120%;
top: 0;
left: 0;
background-color: rgba(255, 255, 255, 0.3);
-webkit-transform: translateY(100%);
transform: translateY(100%);
transition-duration: 0.25s;
border-radius: 5px 5px 0 0;
}
.tabs > li:hover:before {
-webkit-transform: translateY(70%);
transform: translateY(70%);
}
.tabs > li.active {
color: #000;
background-color: #D7304D;
border-radius: 4px;
}
.tabs > li.active:before {
transition-duration: 0.5s;
-webkit-transform: translateY(0);
transform: translateY(0);
color: #000;
}
.tabs > li:nth-child(1).active{
background-color: #2A9BF3;
box-shadow: 0 1px 35px rgba(42, 155, 243, 0.5);
}
.tabs > li:nth-child(2).active{
background-color: #D7304D;
box-shadow: 0 2px 25px rgba(255, 0, 130, 0.5);
}
.tabs > li:nth-child(3).active{
background-color: #000;
box-shadow: 0 2px 25px rgba(255, 255, 253, 0.5);
color: white;
}
.tab__content {
background-color: white;
position: relative;
width: 100%;
border-radius: 5px;
}
.tab__content > li {
width: 100%;
position: absolute;
top: 0;
left: 0;
display: none;
list-style: none;
}
.tab__content > li .content__wrapper {
text-align: center;
display: grid;
grid-template-columns: auto auto;
grid-template-rows: auto auto auto;
border-radius: 5px;
width: 100%;
background-color: white;
}
.colors {
text-align: center;
padding-top: 20px;
}
/* ----- artitst------ */
img{
display:block;
width: 100%;
height: auto;
}
.wrapper-left, .wrapper-right{
font-family: sans-serif;
width: 100%;
margin: 0 auto;
position: relative;
}
.content{
white-space: nowrap;
position:absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
color: #fff;
font-size: 60px;
font-weight: 700;
overflow: hidden;
}
.content span{
font-size: 24px;
display: block;
}
.overlay{
position: absolute;
bottom: 0;
top: 0;
right: 100%;
width: 0;
height: 100%;
transition: .5s ease;
overflow: hidden;
z-index:3;
}
li.jyp{
color: #2A9BF3;
}
li.sm{
color: #D7304D;
}
li.yg{
color: #000;
}
.overlay.jyp{
background-image: linear-gradient(to top, #2A9BF390, #2A9BF300);
}
.overlay.sm{
background-image: linear-gradient(to top, #D7304D90, #D7304D00);
}
.overlay.yg{
background-image: linear-gradient(to top, #00000090, #00000000);
}
.wrapper-left:hover .overlay,
.wrapper-right:hover .overlay{
right: 0;
width: 100%;
}
/* End Artists description */
/* End Artists page */
/* Start top20 page */
.top-mid-container{
display: grid;
grid-template-columns: 25% 3px auto;
position: relative;
/* background-color: white; */
/* filter: blur(15px) grayscale(75%) opacity(20%); */
}
.background{
position: absolute;
background-image: url(../img/songs/1.jpg);
background-attachment: fixed;
background-size: 100%;
width: 99%;
height: 98%;
filter: blur(15px) grayscale(45%) opacity(70%);
}
.music-player {
font-family: 'Open Sans', sans-serif;
font-weight: 300;
position: relative;
align-self: center;
margin: 0 auto;
z-index: 12;
}
hr#nine {
background-image:linear-gradient(to left, #3734db, #10d7af);
width:2px;
height:60vh;
box-shadow:2px 0 19px 2px #2A9BF3;
grid-column: 2;
margin: 0 auto;
}
hr#nine::before {
border: 1px solid blue;
padding: 1em 1.25em;
border-radius: 50%;
}
.details {
padding: 2em;
}
.details #left-side {
float: left;
width: 100%;
}
.coverart img {
display: block;
width: 90%;
margin: auto;
box-shadow: 0 3px 13px 2px rgb(119, 116, 116);
transition: width 0.3s ease;
}
.coverart img:hover{
width:100%;
}
div#right{
grid-column: 3;
margin-left: 10px;
position: relative;
display: grid;
grid-template-columns: auto;
grid-template-rows: auto auto;
}
.no-select {
-webkit-touch-callout: none;
/* iOS Safari */
-webkit-user-select: none;
/* Safari */
-khtml-user-select: none;
/* Konqueror HTML */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* Internet Explorer/Edge */
user-select: none;
}
#playlist {
width: auto;
height: 63vh;
overflow-y: scroll;
overflow-x: hidden;
}
#playlist table {
width: 100%;
color: #fff;
}
#playlist table th,
#playlist table td {
padding: 5px 3%;
vertical-align: middle;
text-align: left;
}
#playlist table th {
color: rgb(241, 78, 105);
font-size: 1em;
padding-top: 15px;
cursor: default;
}
#playlist table tr {
cursor: pointer;
}
#playlist table th, td {
border-bottom: 1px groove rgba(129, 112, 112, 0.308);
}
#playlist table tr td.play-pause {
position: relative;
height: 30px;
width: 30px;
}
#playlist table tr td.play-pause:before {
position: absolute;
height: 25px;
content: url(../css/icomoon/PNG/play_circle_filled_white.png);
transform: scale(1.5);
justify-content: space-around;
top: 35%;
left: 37%;
z-index: 3;
}
#playlist table tr td.play-pause:after {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
content: "";
background: rgba(54, 55, 47, 0.432);
}
#playlist table tr td.play-pause:before, #playlist table tr td.play-pause:after {
visibility: hidden;
}
#playlist table tr td.play-pause img {
height: 50px;
width: 50px;
}
#playlist table tr td:nth-child(2) {
color: #F3F3F1;
}
#playlist table tr.playing td {
background: #1a1a16;
color: #5FBFA4;
}
#playlist table tr.playing td:nth-child(2) {
color: #A7DCCD;
}
#playlist table tr:hover td {
background: rgba(54, 55, 47, 0.336);
}
#playlist table tr:hover td.play-pause:before, #playlist table tr:hover td.play-pause:after {
visibility: visible;
}
#interactions {
grid-column: 1/4;
position: relative;
bottom: 0;
left: 0;
right: 0;
background: #ddd;
width: 100%;
height: 10vh;
padding-top: 10px;
box-shadow: 0 -3px 10px 0 rgba(20, 21, 18, 0.3);
}
.tracking-wrap {
display: flex;
justify-content: space-between;
align-items: center;
}
.tracking-wrap .song-current-time {
text-align: right;
color: #000;
}
.tracking-wrap .song-length {
text-align: left;
color: #000;
}
.tracking-wrap .song-current-time,
.tracking-wrap .song-length {
width: 10vw;
font-family: 'VarelaRound';
letter-spacing: 1px;
font-size: 0.6em;
}
.tracking-slider{
border-radius: 5px;
box-shadow: 0 0 .4em #2A9BF3,
0 0 .3em #2A9BF3,
1px 1px 5px #2A9BF3,
1px 0px 0px white,
-1px 0px 2px rgba(0, 0, 0, .5);
}
.range {
clear: both;
-webkit-appearance: none;
background: #272822;
box-shadow: 0 0 .4em #2A9BF3,
0 0 .3em #2A9BF3,
1px 1px 5px #2A9BF3,
1px 0px 0px white,
-1px 0px 2px rgba(0, 0, 0, .5);
cursor: pointer;
height: 3px;
margin: 0;
vertical-align: bottom;
width: 76vw;
transition: height 0.2s ease;
transition-delay: 1s;
}
.range:focus {
outline: none;
}
.range:hover {
height: 7px;
transition: height 0.2s ease;
}
.range:hover::-webkit-slider-thumb {
border-radius: 50%;
width: 20px;
height: 20px;
transition: height 0.3s ease, width 0.3s ease;
transition-delay: 0;
}
.range::-webkit-slider-thumb {
width: 0;
height: 0;
-webkit-appearance: none;
background: #F3F3F1;
border-radius: 8px;
box-shadow: inset 0 0 0 5px #eaeaea;
transition: height 0.5s ease, width 0.5s ease;
transition-delay: 1s;
}
.controls-bar {
display: flex;
justify-content: space-evenly;
}
#controls {
width: 80vw;
display: flex;
justify-content: space-around;
align-items: center;
align-content: center;
color: #2A9BF3;
}
#controls > span {
transform: scale(1.5);
padding: 13px;
margin: 0 10px;
cursor: pointer;
transition: color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
#controls > span.play-pause {
font-size: 1.1em;
padding: 10px;
padding-left: 1px;
}
#controls > span:before {
transition: text-shadow 0.3s ease;
}
#controls > span.on {
color: #2A9BF3;
border-color: #2A9BF3;
}
#controls > span:hover {
color: #A7DCCD;
transform: scale(1.6);
}
#controls > span:hover:before {
text-shadow: 0 0 5px #F3F3F1;
}
#controls > span:hover.on {
color: #A7DCCD;
border-color: #2A9BF3;
}
#volume {
max-width: 18vw;
padding: 0 5% 0 0;
display: flex;
align-items: center;
color:#2A9BF3;
}
#volume .icon-volume_down {
font-size: 1.1em;
}
#volume .icon-volume_up {
font-size: 1.1em;
}
#volume .volume-slider {
width: 10vw;
margin: 0 1vw;
}
/* End top20 page */
footer{
position: absolute;
width: 100%;
height: 20vh;
display: grid;
grid-template-columns:repeat(12,auto);
align-self: center;
background-image: url(../img/home-text.jpg);
background-attachment: fixed;
background-size: cover;
background-position-y: 45%;
background-color: transparent;
color: #fff;
-webkit-clip-path: polygon(100% 8%, 100% 100%, 0 100%, 0 0);
clip-path: polygon(100% 8%, 100% 100%, 0 100%, 0 0);
}
footer#footer-top20{
height: 15vh;
background-image: url(../img/top-hero.jpg);
background-attachment: fixed;
background-size: cover;
background-position-y: 45%;
background-color: transparent;
}
/* footer{
-webkit-clip-path: polygon(0 0, 0 59%, 100% 0);
clip-path: polygon(0 0, 0 59%, 100% 0);
background-color: #D7304D;
z-index: -2;
} */
footer.bg{
width: 100%;
height: 100%;
position: absolute;
-webkit-clip-path: polygon(0 0, 0 100%, 100% 0);
clip-path: polygon(0 0, 0 100%, 100% 0);
background-color: #f4537d;
z-index: 2;
}
footer div.logo{
z-index: 2;
position: relative;
width: 50px;
top: 25%;
margin: 0 auto;
grid-column: 12;
}
footer h5{
position: relative;
text-align: center;
justify-content: center;
align-self: center;
grid-column: 1;
}
/*Texto typer home*/
#typed{
color: #f4537d;
font-size: 3em;
}
/* end typer home */
/* ==========================================================================
Helper classes
========================================================================== */
/*
* Hide visually and from screen readers
*/
.hidden {
display: none !important;
}
/*
* Hide only visually, but have it available for screen readers:
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*
* 1. For long content, line feeds are not interpreted as spaces and small width
* causes content to wrap 1 word per line:
* https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
*/
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap; /* 1 */
}
/*
* Extends the .visuallyhidden class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
white-space: inherit;
}
/*
* Hide visually and from screen readers, but maintain layout
*/
.invisible {
visibility: hidden;
}
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/* ==========================================================================
EXAMPLE Media Queries for Responsive Design.
These examples override the primary ('mobile first') styles.
Modify as content requires.
========================================================================== */
@media only screen and (min-width: 35em) {
/* Style adjustments for viewports that meet the condition */
}
@media print,
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 1.25dppx),
(min-resolution: 120dpi) {
/* Style adjustments for high resolution devices */
}
/* ==========================================================================
Print styles.
Inlined to avoid the additional HTTP request:
https://www.phpied.com/delay-loading-your-print-css/
========================================================================== */
@media print {
*,
*:before,
*:after {
background: transparent !important;
color: #000 !important; /* Black prints faster */
-webkit-box-shadow: none !important;
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
/*
* Don't show links that are fragment identifiers,
* or use the `javascript:` pseudo protocol
*/
a[href^="#"]:after,
a[href^="javascript:"]:after {
content: "";
}
pre {
white-space: pre-wrap !important;
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
/*
* Printing Tables:
* http://css-discuss.incutio.com/wiki/Printing_Tables
*/
thead {
display: table-header-group;
}
tr,
img {
page-break-inside: avoid;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}