Theme 20

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

<style>

body{
background-color: #ffb5ae;
background-image: url('https://i.imgur.com/74eNJUh.png');
background-repeat: repeat-x;
}

#all{
width: 600px;
position: relative;
top: 80px;
left: 50%;
transform: translateX(-50%);
}

#container{
width: 600px;
border: 1px solid #FF8A8B;
border-radius: 10px;
padding: 25px 15px 15px 15px;
background-color: #fff;
background-image: url('https://i.imgur.com/V2l2hct.png');
background-repeat: repeat-x;
font-size: 14px;
font-family: 'Garamond', serif;
letter-spacing: 1px;
text-align: justify;
position: absolute;
color: #5c3a3a;
}

#nav{
clear: right;
font-family: 'Garamond', serif;
display: inline;
}

#nav p{
text-align: right;
letter-spacing: -1px;
word-spacing: -4px;
font-size: 16px;
text-shadow: 1px 1px 0px #e6e6e6;
margin: 0px;
}

a{
color: #6cbdc4;
text-decoration: none;
}

a:hover{
color: #FD4D4F;
}

#header h1{
margin: 0px;
font-family: 'Garamond', serif;
font-weight: normal;
font-size: 28px;
text-align: right;
letter-spacing: -1px;
color: #FD4D4F;
clear: right;
}

#container h3{
margin: -13px -5px 5px 0px;
font-family: 'Garamond', serif;
font-weight: normal;
font-size: 16px;
text-align: right;
letter-spacing: -1px;
color: #5c3a3a;
opacity: 0.6;
clear: right;
}

#img{
float: left;
margin: 0px 10px 0px 0px;
border: 1px dashed #5c3a3a;
width: 246px;
opacity: 0.8;
transition: 0.3s;
}

#img:hover{
opacity: 1;
}

#title h1{
font-size: 106px;
font-family: 'Fleur De Leah', cursive;
text-shadow: 1px 1px 0px #fff;
font-weight: normal;
color: #FF8A8B;
margin: 0px;
float: left;
position: relative;
top: -106px;
right: -123px;
margin-left: -415px;
z-index: 3;
}

#head{
border-bottom: 1px dotted #FF8A8B;
}

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

::-webkit-scrollbar-track{
background-color: transparent;
}

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

#credit{
font-size: 12px;
position: fixed;
bottom: 0;
right: 0;
color: #a1726d;
font-family: 'Garamond', serif;
}

#credit a{
color: #fff;
}

</style>

</head>

<body>

<div id="all">

<div id="container">

<div id="head">

<div id="nav">

<p>
<a href="">Home</a>
<a href="">About</a>
<a href="">Gallery</a>
<a href="">Blog</a>
<a href="">Links</a>
<a href="">Other</a>
</p>

</div>

</div>

<div id="header">

<h1>title here title title</h1>

</div>

<h3>sub heading here</h3>

<img id="img" src="https://i.imgur.com/z58ZAyQ.jpg">

<!-- this is the main title -->
<div id="title"><h1>Title Here</h1></div>

<!-- keep the clears in the styles below on your first paragraphs if you want them to wrap around the image -->

<p style="margin-top:8px;clear:right;"><b>Lorem ipsum dolor</b> <i>sit amet, consectetur adipiscing elit</i>. <s>Pellentesque et varius</s> enim, nec iaculis nunc. Fusce consectetur in mauris eget pretium. Praesent maximus dui a sem ultricies maximus. Donec sit amet tellus ligula. Mauris id porttitor magna, id convallis ligula.</p>

<p style="clear:right;">Phasellus porta et tellus a finibus. Vivamus quis lectus dolor. Maecenas dictum aliquam lacus. Proin malesuada diam in libero elementum ornare nec id nulla. Morbi pellentesque, neque in venenatis mollis, libero felis iaculis nibh, in elementum sapien nisi bibendum enim. Donec maximus risus risus, gravida bibendum nunc porta eu. Sed tempus venenatis tortor, ac sollicitudin velit iaculis nec. Vestibulum eget ante augue. Vivamus scelerisque auctor diam, nec ultrices mi mollis sed. In consectetur ante odio, in ultricies lorem lacinia ut.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et varius enim, nec iaculis nunc. Fusce consectetur in mauris eget pretium. Praesent maximus dui a sem ultricies maximus. Donec sit amet tellus ligula. Mauris id porttitor magna, id convallis ligula.</p>

<p>Phasellus porta et tellus a finibus. Vivamus quis lectus dolor. Maecenas dictum aliquam lacus. Proin malesuada diam in libero elementum ornare nec id nulla. Morbi pellentesque, neque in venenatis mollis, libero felis iaculis nibh, in elementum sapien nisi bibendum enim. Donec maximus risus risus, gravida bibendum nunc porta eu. Sed tempus venenatis tortor, ac sollicitudin velit iaculis nec. Vestibulum eget ante augue. Vivamus scelerisque auctor diam, nec ultrices mi mollis sed. In consectetur ante odio, in ultricies lorem lacinia ut.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et varius enim, nec iaculis nunc.</p>

</div>

</div>

<div id="credit">Theme by <a href="https://repth.neocities.org/index.html">Repth</a> Lace dividers by <a href="https://www.deviantart.com/socksyy">Socksyy</a> on DA</div>

</body>

</html>