Derping
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Mandalorian</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="Text-container">
<p>This</p>
<p>is the</p>
<p>way</p>
</div>
<div class="helmet">
<div class="white-line"></div>
<div class="bottom"></div>
<div class="middle"></div>
<div class="middle-bk"></div>
<div class="bottom-right"></div>
<div class="bottom-left"></div>
<div class="inner-sh">
<div class="left-white"></div>
<div class="right-white"></div>
<div class="vert-white"></div>
<div class="bottom-white"></div>
</div>
<div class="bottom-white2"></div>
<div class="bottom-line"></div>
<div class="left-line1"></div>
<div class="left-line2"></div>
<div class="top-h-line1"></div>
<div class="top-h-line2"></div>
<div class="top-v-line1"></div>
<div class="top-v-line2"></div>
<div class="top-v-line3"></div>
<div class="top-v-line4"></div>
<div class="top-v-line5"></div>
<div class="corner-helmet"></div>
</div>
<div class="text">
<span>The</span>
<div class="white-line-text"></div>
<h1>Mandalorian</h1></div></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Mandalorian</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="Text-container">
<p>This</p>
<p>is the</p>
<p>way</p>
</div>
<div class="helmet">
<div class="white-line"></div>
<div class="bottom"></div>
<div class="middle"></div>
<div class="middle-bk"></div>
<div class="bottom-right"></div>
<div class="bottom-left"></div>
<div class="inner-sh">
<div class="left-white"></div>
<div class="right-white"></div>
<div class="vert-white"></div>
<div class="bottom-white"></div>
</div>
<div class="bottom-white2"></div>
<div class="bottom-line"></div>
<div class="left-line1"></div>
<div class="left-line2"></div>
<div class="top-h-line1"></div>
<div class="top-h-line2"></div>
<div class="top-v-line1"></div>
<div class="top-v-line2"></div>
<div class="top-v-line3"></div>
<div class="top-v-line4"></div>
<div class="top-v-line5"></div>
<div class="corner-helmet"></div>
</div>
<div class="text">
<span>The</span>
<div class="white-line-text"></div>
<h1>Mandalorian</h1></div></div>
</div>
</body>
</html>
@import url('https://fonts.cdnfonts.com/css/mandalore?styles=54564');
*{
margin:0;
padding:0;
z-index:1;
}
body{
font-family: 'Mandalore' , sans-serif;
color:white;
}
.container{
position:relative;
width:600px;
height:500px;
background:black;
display:flex;
justify-content:center;
align-items:center;
margin:1% auto;
}
.Text-container{
height:280px;
width:145px;
font-size:6rem;
text-align:center;
}
p:first-child{
letter-spacing:.2rem;
margin-top:-6px;
}
p:last-child{
letter-spacing:.1rem;
}
p:nth-child(2){
font-size:4rem;
}
p{
transform:scale(1,1.2);
padding-bottom:.5rem;
}
.helmet{
height:280px;
width:132px;
position:relative;
background:black;
}
.white-line{
position:absolute;
height:90px;
width:110px;
background:white;
border-radius: 0% 100% 100% 0% / 0% 100% 0% 100%;
top:2%;
}
/*banner */
.text{
position:absolute;
top:85%;
background:black;
width:600px;
height:170px;
display:flex;
justify-content:flex-end;
align-items:center;
flex-direction:column;
}
h1{
height:150px;
font-size:7rem;
padding:0;
letter-spacing:.3rem;
}
.white-line-text{
position:absolute;
width:90%;
height:8px;
background:white;
top:12%;
z-index:2;
}
span{
position:absolute;
width:50px;
height:30px;
padding:.5rem;
background:black;
z-index:13;
letter-spacing:.3rem;
transform:scale(1,.5);
font-size:2rem;
top:0%;
}
const audioURL = 'https://assets.codepen.io/3862739/itse-w.m4a'
let muvi;
const createAudio = () =>
new Muvis(audioURL, {
onLoad: (fileData) => playOrPause(muvi.isPlaying)
});
const handleClick = (_e) =>
muvi ? playOrPause(muvi.isPlaying) : (muvi = createAudio());
const playOrPause = (isPlaying) =>
isPlaying ? muvi.pause() : muvi.play();
document.body.addEventListener("click", handleClick);
#hello
echo "Hello";
cd ./derp/herp