-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.css
1 lines (1 loc) · 7.75 KB
/
main.css
1
@import url("https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700");a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;text-decoration:none}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}*{box-sizing:border-box}body{font-family:'Roboto', sans-serif;background:#19202a}.container{max-width:1400px;margin:0 auto}header{position:absolute;z-index:3;display:-ms-flexbox;display:flex;width:100%;-ms-flex-pack:justify;justify-content:space-between;padding:15px 30px}header .logo{width:14%}header .logo img{width:100%}header nav{-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center}header nav a{color:#ffffff;font-size:1.2em;font-weight:300;padding:0 10px}header .menu-btn{font-weight:700;color:#ffffff;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;padding:15px;font-size:1.6rem;display:none}.mobile-menu{background:#ffffff;display:none;-ms-flex-direction:column;flex-direction:column;padding:40px 0;position:absolute;height:35vh;width:50%;z-index:10;top:0;text-align:center;transform:translate3d(-120%, 0, 0);transition:all .4s ease-in-out;box-shadow:2px 0px 78px -15px rgba(0,0,0,0.75)}.mobile-menu.active{transform:translate3d(0, 0, 0)}.mobile-menu a{color:black;padding:15px}.mobile-menu a:hover{background:#ff5253;color:white}#top-section{position:relative;height:100vh}#top-section .blurred-bg{background-image:linear-gradient(45deg, #19202a 0%, rgba(176,38,183,0.27) 73%, rgba(125,185,232,0) 100%),url("https://i.postimg.cc/0j1nnbJc/london-graffiti-tunnel.jpg");background-size:cover;height:100vh;width:100%;filter:blur(39px) saturate(130%);position:absolute;z-index:1}#top-section .floating-img{position:absolute;z-index:2;width:100%;height:100vh;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:end;align-items:flex-end}#top-section .floating-img .diplo-img{width:56%}#top-section .floating-img .diplo-img img{width:100%;filter:contrast(120%)}#bio{position:relative;z-index:3;background:#222222;padding:100px 0}#bio .container{display:-ms-flexbox;display:flex}#bio p{color:#ffffff;width:50%;padding:0 50px;line-height:2.3;font-size:1em}#bio .logo-centered{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;width:50%;padding:0 50px}#bio .logo-centered img{max-width:100%}#media{background-image:url("https://i.postimg.cc/FHTPvr2H/hexagon-bg.jpg");background-size:cover;padding:100px 0}#media .title{font-size:2em;font-weight:300;text-transform:uppercase;padding:20px;text-align:center;width:100%;max-width:500px;margin:0 auto;color:#ffffff}#media .videos{display:-ms-grid;display:grid;padding:80px 50px 0;-ms-grid-columns:48% 48%;grid-template-columns:48% 48%;grid-gap:50px}#media .videos .video{border-radius:4px;overflow:hidden;height:300px;box-shadow:0px 13px 24px -8px rgba(0,0,0,0.75)}#media .videos .video iframe{height:100%}#music{padding:80px 0;position:relative}#music .blurred-bg{background-image:linear-gradient(45deg, #fffd3c 0%, rgba(176,38,183,0.27) 68%, rgba(125,185,232,0) 100%),url("https://i.postimg.cc/0j1nnbJc/london-graffiti-tunnel.jpg");background-size:cover;height:100%;width:100%;filter:blur(39px) saturate(130%);position:absolute;z-index:1}#music .container{display:-ms-flexbox;display:flex;padding:0 50px;position:relative;z-index:3}#music .container .info{width:50%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;color:#ffffff}#music .container .info .title{font-size:3.3em;font-weight:700;text-align:center;margin-bottom:15px}#music .container .info .sub-title{font-size:1em;font-weight:400;text-align:center;text-transform:capitalize;margin-bottom:100px}#music .container .info .singles{width:57%;display:-ms-grid;display:grid;-ms-grid-columns:50% 50%;grid-template-columns:50% 50%;grid-column-gap:16%;margin-bottom:80px}#music .container .info .singles li{font-size:1.5em;font-weight:300;margin-bottom:20px}#music .container .info .logos{display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3, 1fr);grid-gap:20px}#music .container .album-cover{width:50%;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}#music .container .album-cover img{width:50%}#tour{background:#222222;position:relative;z-index:4}#tour .top-img{background-image:url("https://i.postimg.cc/fbk8R4Nj/dip-group.jpg");background-repeat:no-repeat;background-size:cover;background-position:center center;filter:saturate(0%) contrast(150%);height:300px}#tour .tour-dates{background:#222222;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;padding:80px 0}#tour .tour-dates .title{text-align:center;color:#ffffff;text-transform:uppercase;font-size:2.2em;text-align:center;margin:0 0 80px}#tour .tour-dates .dates{display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2, 1fr);grid-column-gap:25px}#tour .tour-dates .dates li{color:#ffffff;font-size:1.2em;padding:9px 0;margin:10px}#tour .tour-dates .dates li .city{font-weight:700;padding:0 9px}#tour .tour-dates .dates li .location{font-weight:300;padding:0 9px}#tour .tour-dates .dates li .date{font-weight:500;color:#f14848}footer{background:#1b1b1b;position:relative;z-index:4;padding:2%;text-align:center;opacity:.9}footer img{max-width:12%}footer .designed-by{color:#ffffff;padding:5px 0}@media screen and (min-width: 1484px) and (max-width: 1630px){#top-section .floating-img .diplo-img{width:66%}}@media screen and (min-width: 1244px) and (max-width: 1483px){#top-section .floating-img .diplo-img{width:70%}}@media screen and (min-width: 1000px) and (max-width: 1243px){#top-section .floating-img .diplo-img{width:80%}}@media screen and (max-width: 999px){#top-section .floating-img .diplo-img{width:100%}#tour .top-img{height:211px}}@media screen and (max-width: 939px){#bio .container{-ms-flex-direction:column-reverse;flex-direction:column-reverse}#bio .container p{width:100%}#bio .container .logo-centered{width:100%;padding:0 50px 100px}}@media screen and (max-width: 769px){#top-section .floating-img{height:80vh}#media .container .videos{display:block}#media .container .videos .video{margin-bottom:25px}#music .container{-ms-flex-direction:column-reverse;flex-direction:column-reverse}#music .container .info{width:100%}#music .container .album-cover{width:100%;margin:10px 0 80px}#tour .top-img{height:157px}}@media screen and (max-width: 467px){header .logo{width:33%;padding:15px}header nav a{display:none}header .menu-btn{display:-ms-flexbox;display:flex;cursor:pointer}.mobile-menu{display:-ms-flexbox;display:flex}#music .container .info .singles{width:100%}#music .container .info .logos{-ms-grid-columns:1fr 1fr;grid-template-columns:1fr 1fr}#tour .top-img{height:101px}#tour .container .tour-dates .dates{text-align:center}#tour .container .tour-dates .dates li span{display:block}footer img{max-width:25%}}@media screen and (max-width: 375px){header .logo{width:38%;padding:15px}#music .container .info .logos{-ms-grid-columns:1fr;grid-template-columns:1fr}}