Theme 15

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>theme 15</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=Abril+Fatface&display=swap" rel="stylesheet">

<style>

body{
background-color: #cdd1d2;
}

#container{
background-color: #fff;
padding: 3px 8px 8px 8px;
border-radius: 15px;
width: 560px;
height: 418px;
}

#image{
position: absolute;
right: 100px;
bottom: 10px;
}

#image2{
position: absolute;
right: 130px;
top: 0px;
}

#header{
width: 343px;
padding: 0px;
text-align: center;
color: #cdd1d2;
text-transform: uppercase;
letter-spacing: 2px;
font-family: 'Abril Fatface', monospace;
}

#header h1{
margin: 0px;
}

#bubble{
position: relative;
width: 325px;
height: 346px;
background-color: #fff;
border: 4px solid #b4baba;
border-radius: 20px;
text-align: justify;
padding: 10px 5px 10px 10px;
color: #7a7b7b;
}

#bubble:before{
content: "";
width: 0px;
height: 0px;
position: absolute;
border-left: 10px solid #b4baba;
border-right: 10px solid transparent;
border-top: 10px solid #b4baba;
border-bottom: 10px solid transparent;
right: -20px;
bottom: 50px;
}

#bubble:after{
content: "";
width: 0px;
height: 0px;
position: absolute;
border-left: 7px solid #fff;
border-right: 7px solid transparent;
border-top: 7px solid #fff;
border-bottom: 7px solid transparent;
right: -10px;
bottom: 52px;
}

#content{
overflow: scroll;
overflow-x: hidden;
height: 347px;
padding: 0px 8px 5px 0px;
}

#bubble h2{
margin: 0px;
text-transform: uppercase;
font-family: 'Georgia', monospace;
letter-spacing: 3px;
font-size: 12px;
color: #989a9a;
}

#bubble p{
font-size: 13px;
font-family: 'Arial', sans-serif;
margin: 0px;
letter-spacing: 1px;
}

#all{
position: absolute;
top: 9%;
right: 18%;
width: 657px;
height: 430px;
}

#nav{
position: absolute;
right: 0px;
top: 35px;
}

#nav ul,li{
list-style-type: none;
padding-left: 0px;
margin: 0px;
}

#nav a{
font-family: 'Arial', sans-serif;
letter-spacing: 4px;
padding: 3px;
font-size: 10px;
text-transform: uppercase;
background-color: #fff;
display: block;
margin-bottom: 5px;
width: 75px;
text-align: center;
text-decoration: none;
color: #989a9a;
border-radius: 0px 15px 15px 0px;
}

#nav a:visited{
}

#nav a:hover{
color: #fde64f;
}

a{
text-decoration: none;
color: #cdd1d2;
}

a:visited{
}

a:hover{
color: #fde64f;
}

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

::-webkit-scrollbar-track{
border-radius: 5px;
}

::-webkit-scrollbar-thumb{
border-radius: 15px;
background-color: #cdd1d2;
}

#credit{
font-size: 13px;
position: fixed;
font-family: 'Tahoma', sans-serif;
bottom: 0;
right: 0;
}

#credit a{
color: #fff;
}

</style>

</head>

<body>

<div id="all">

<div id="nav">
<ul>
<li><a href="">home</a></li>
<li><a href="">profile</a></li>
<li><a href="">gallery</a></li>
<li><a href="">blog</a></li>
<li><a href="">other</a></li>
<li><a href="">misc</a></li>
</ul>
</div>

<div id="container">

<div id="image2"><img src="https://i.imgur.com/f3Y4g28.png" style="width:120px;"><img></div>

<div id="image"><img src="https://i.imgur.com/6AhZE2f.png" style="width:180px;"><img></div>

<div id="header"><h1>Title Here</h1></div>

<div id="bubble">

<div id="content">

<!-- REPLACE CONTENT BELOW WITH YOUR OWN -->

<h2>title</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dictum quis lacus at pulvinar. Donec ac lacinia felis. Maecenas interdum id est vel mollis. Quisque molestie facilisis lorem sit amet dictum. Praesent nec ante ut ante vehicula cursus sed nec purus. Morbi ac lacus eu risus finibus auctor. Sed varius nulla non semper tincidunt.</p>

<p><s>Maecenas</s> <i>est</i> <a href="">ipsum</a></p>

<!-- END CONTENT -->

</div>

</div>

</div>

</div>

<div id="credit"><a href="https://repth.neocities.org/index.html">@Repth</a></div>

</body>

</html>