Theme 43

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Theme</title>

<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=Questrial&display=swap" rel="stylesheet">

<style>

*{
box-sizing: border-box;
margin: 0;
padding: 0;
}

body{
background-color: #fff;
color: #111;
font-family: 'Questrial', sans-serif;
}

.headerwrapper{
display: flex;
flex-direction: column;
margin-bottom: 1rem;
}

.header{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
height: 200px;
background-image: url('https://i.imgur.com/aVk0nIs.png');
background-repeat: no-repeat;
background-position: center center;
}

.title{
color: #fff;
letter-spacing: 0.2rem;
text-shadow: 0 0 10px #111;
font-family: 'Questrial', sans-serif;
}

.nav{
background-color: #111;
width: 100%;
text-align: center;
padding: 0.5rem 0 0.5rem 0;
}

.nav ul{
display: flex;
justify-content: space-around;
}

.nav li{
display: inline;
}

.mainwrapper{
display: flex;
flex-direction: column;
gap: 1rem;
padding: 0 1rem 1rem 1rem;
margin: 0 auto;
max-width: 700px;
}

.box{
background-color: #eee;
}

.subheaders{
color: #fff;
font-weight: normal;
font-size: 18px;
background-color: #111;
}

.content{
padding: 1rem;
display: flex;
flex-direction: column;
gap: 1rem;
}

a{
text-decoration: underline;
color: #000;
}

a:visited{
color: #000;
}

#credit a{
text-decoration: none;
background: linear-gradient(90deg, rgba(250,31,193,1) 0%, rgba(29,85,255,1) 25%, rgba(13,246,252,1) 53%, rgba(0,255,102,1) 77%, rgba(251,255,56,1) 100%);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
}

#credit a:visited{
text-decoration: none;
background: linear-gradient(90deg, rgba(250,31,193,1) 0%, rgba(29,85,255,1) 25%, rgba(13,246,252,1) 53%, rgba(0,255,102,1) 77%, rgba(251,255,56,1) 100%);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
}

a:hover{
font-style: italic;
}

a:active{
font-style: italic;
font-weight: bold;
}

.nav a{
color: white;
text-decoration: none;
}

.nav a:visited{
text-decoration: none;
color: white;
}

#credit{
position: fixed;
bottom: 0;
right: 0;
font-size: 12px;
}

::-webkit-scrollbar{
width: 6px;
}

::-webkit-scrollbar-track{
background: linear-gradient(180deg, rgba(250,31,193,1) 0%, rgba(29,85,255,1) 25%, rgba(13,246,252,1) 53%, rgba(0,255,102,1) 77%, rgba(251,255,56,1) 100%);
}

::-webkit-scrollbar-thumb{
background-color: #111;
}

</style>

</head>

<body>

<div class="headerwrapper">

<div class="header">
<h1 class="title">Title Here</h1>
</div>

<div class="nav">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Gallery</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Resources</a></li>
<li><a href="">Misc</a></li>
</ul>
</div>

</div>

<div class="mainwrapper">

<!-- BOX 1 -->
<div class="box">
<h3 class="subheaders">Header Here</h3>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec ante at ante semper tempus nec vel nisl. Sed aliquet velit porttitor ullamcorper interdum. Integer ac lacus et odio volutpat sagittis non et elit. Nunc rutrum viverra justo, eu eleifend elit. Vestibulum molestie, diam vel ornare placerat, lectus ante imperdiet nisi, et efficitur velit elit tempus felis. Suspendisse nibh tellus, volutpat ac elit vel, dignissim viverra leo. Pellentesque eu <a href="">molestie diam</a>.</p>
</div>
</div>

<!-- BOX 2 -->
<div class="box">
<h3 class="subheaders">Header Here</h3>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec ante at ante semper tempus nec vel nisl. Sed aliquet velit porttitor ullamcorper interdum. Integer ac lacus et odio volutpat sagittis non et elit. Nunc rutrum viverra justo, eu eleifend elit. Vestibulum molestie, diam vel ornare placerat, lectus ante imperdiet nisi, et efficitur velit elit tempus felis. Suspendisse nibh tellus, volutpat ac elit vel, dignissim viverra leo. Pellentesque eu molestie diam.</p>
<p>Vivamus quis hendrerit turpis. Aenean quis pharetra nisl. Nunc facilisis tortor vel sapien sagittis, id fringilla nulla porta. Phasellus consectetur sapien et commodo hendrerit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nam laoreet ipsum at tortor ullamcorper bibendum. Quisque eleifend leo aliquet, pulvinar elit vitae, congue dolor. Morbi sodales dui egestas, egestas dui quis, gravida nisi.</p>
</div>
</div>

<!-- BOX 3 -->
<div class="box">
<h3 class="subheaders">Header Here</h3>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec ante at ante semper tempus nec vel nisl. Sed aliquet velit porttitor ullamcorper interdum. Integer ac lacus et odio volutpat sagittis non et elit. Nunc rutrum viverra justo, eu eleifend elit. Vestibulum molestie, diam vel ornare placerat, lectus ante imperdiet nisi, et efficitur velit elit tempus felis. Suspendisse nibh tellus, volutpat ac elit vel, dignissim viverra leo. Pellentesque eu molestie diam.</p>
</div>
</div>

</div>

<p id="credit"><a href="https://repth.neocities.org/index.html">©repth</a></p>

</body>

</html>