<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<link
href="https://fonts.googleapis.com/css2?family=Sigmar+One&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" type="text/css" src="src/main.css" />
</head>
<body>
<div class='bar-top'></div>
<header>
<h1>
<svg id='logo' width="100%" height="100%" viewBox="0 0 344 115" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(1,0,0,1,-188.137,-210.642)">
<path id="thing-body" d="M188.137,324.904L489.611,324.904L480.911,317.673L531.472,309.008L479.293,303.514L502.708,288.969L476.664,290.102L511.807,253.886L461.994,277.286L467.147,257.193L439.99,258.235L445.621,228.014L414.189,252.824L401.573,228.325L387.975,250.968L372.492,210.642L346.316,250.159L345.616,217.858L315.395,254.895L302.513,227.756L295.047,257.17L267.425,234.198L263.703,264.419L243.027,245.323L234.792,277.24L214.358,269.349L218.983,289.475L190.999,296.041L217.678,302.222L188.137,324.904Z" style="fill:rgb(235,50,83);"/>
<g id="eye-l" transform="matrix(1,0,0,1,150.998,87.6619)">
<circle cx="239.156" cy="191.128" r="7.062" style="fill:white;"/>
</g>
<g id="eye-r" transform="matrix(1,0,0,1,183.7,98.1848)">
<circle cx="239.156" cy="191.128" r="7.062" style="fill:white;"/>
</g>
</g>
</svg>
Adam
</h1>
</header>
<div class='bar-bottom'></div>
</body>
</html>
#logo {
transform: translateY(.55em);
width: 3em;
margin-left: .9em;
}
.bar-top,
.bar-bottom {
height: 50px;
}
.bar-top {
background-color: #5b5a54;
}
.bar-bottom {
background-color: #eb3253;
}
header {
height: 300px;
background-color: #222;
display: flex;
flex-direction: column;
h1 {
display: flex;
flex-direction: column;
margin-bottom: 0;
margin-top: auto;
color: #e8f0fa;
font-family: 'Sigmar One', cursive;
font-size: 6em;
font-weight: 100;
&:first-letter {
font-size: 1.4em;
}
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.