Pre-Dawn Coffee

Header 2

This is a premade layout template made to try and capture that just-woke-up early-morning feeling... it's wan, hazy, and quiet. The sun's not quite out yet, but it's not nighttime any more.

Click on the coffeepot to open the navigation menu! and if you scroll down, you can click the sun in the top left to return to the top of the page.

Header 3

This is bold. This is a link. This is italic.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.

Lorem ipsum dolor sit amet, consectetuer
Aliquam tincidunt mauris eu risus.

This is a blockquote. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

There is a filter applied to all images to make them a bit washed-out; hovering removes the filter. Check it out!

If you want to use this template, just copy and paste THIS into your html file:

<!DOCTYPE html>
<html lang="en-US">
<head>
<link rel="icon" type="image/x-icon" href="https://i.imgur.com/DM0LNmG.png"> 
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pre-Dawn Coffee</title>
<link href="https://fonts.upset.dev/css2?family=Prosto+One&display=swap" rel="stylesheet">
<link href="style.css" rel="stylesheet" type="text/css" media="all">
</head>

<body>

<h1>Pre-dawn Coffee</h1>

</ul>
</div>
</details>
</div>
</div>

<h2>Header 2</h2>
<p>This is a premade layout template made to try and capture that just-woke-up early-morning feeling... it's wan, hazy, and quiet. The sun's not quite out yet, but it's not nighttime any more.</p>

<p>Click on the coffeepot to open the navigation menu! and if you scroll down, you can click the sun in the top left to return to the top of the page.</p>

<h3>Header 3</h3>

<p><b>This is bold.</b> <a href="">This is a link.</a> <i>This is italic.</i></p>

<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer <li>Aliquam tincidunt mauris eu risus.</li>
</ul>

<blockquote><p>This is a blockquote. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>

<button>This is a button.</button>

<p>There is a filter applied to all images to make them a bit washed-out; hovering removes the filter. Check it out!</p>
<img src="https://i.imgur.com/daUKqhG.jpeg" width="300px">

<hr>

</div>

<div class="insertR">
<p>If you want, you could insert a box like this. There's "insertR" and "insertL"; insertR will float on the right, and insertL will float on the left (see below).</p> 
<p>Text wraps around them nicely.</p>
</div>

<div class="insertL">
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
</div>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>

</div>

And THIS into your style.css file:

/* if you want to change the colors, do that here! changing these will change colors for the whole layout.

note that the divbackground color has some transparency for the see-through effect, so keep that in mind if you want to change colors!

:root {
    --fontcolor: #37465f;
    --gradientdark: #6a77bd;
    --gradientlight: #A8ACFF;
    --divbackground: rgba(208, 218, 235, 0.7);
    --paleborder: #d0daeb;
    --sunshine: #f1edc8;
}

/* change the fonts here! */

body {
    font-family: Verdana, sans-serif;
    font-size: 10pt;
}

h1,h2,h3,h4 {
    font-family: "Prosto One", "Arial Black", Verdana, sans-serif;
}

/* vv here's the rest of the layout vv */

* {
    box-sizing: border-box;
    scrollbar-color: var(--gradientdark) var(--gradientlight);
}

::selection {
    background-color: var(--fontcolor);
    color: var(--paleborder)
}

body {
    background: var(--gradientlight);
    background: url(https://i.imgur.com/BO2nRFq.png)
        /* this is the lamppost background image. feel free to remove or change it! */
        ,
    linear-gradient(180deg, var(--gradientlight) 0%, var(--gradientdark) 100%);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    color: var(--fontcolor);

}

img {
    filter: saturate(50%) grayscale(60%);
    max-width: 100%;
    transition: 1s;
}

img:hover, img:focus {
    filter: none;
}

h1 {
    font-size: 38pt;
}

h2 {
    font-size: 24pt;
}

h3 {
    font-size: 18pt;
}

a {
    text-decoration: double underline 1px;
    font-weight: bold;
    color: var(--gradientdark);
}

a:hover, a:focus {
    filter: brightness(200%)
}

a:visited {filter:brightness(50%)}

blockquote {
    border-left: 2px solid var(--gradientdark);
    padding-left: 10px;
    font-style: italic;
    text-align: justify;
}

button {
    font-family: inherit;
    font-size: 8pt;
    border: 1px solid var(--gradientdark);
    background-color: var(--paleborder);
    padding: 4px;
    border-radius: 10px;
    color: var(--gradientdark);
    cursor: pointer;
}

button:hover,button:focus {
    border: 1px solid var(--paleborder)
}

button:active {
    background-color: var(--gradientlight);
}

hr {
    border-top: solid var(--gradientdark) 1px;
    border-bottom: none;
    margin-top: 25px;
    margin-bottom: 25px;
    width: 50%
}

.container {
    margin: 50px auto;
    width: 80%;
    max-width: 900px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.main {
    backdrop-filter: blur(9px) saturate(120%);
    -webkit-backdrop-filter: blur(9px) saturate(120%);
    background-color: var(--divbackground);
    width: 100%;
    border-radius: 75px;
    border: var(--paleborder) solid 1px;
    padding: 25px;
    position: relative;
}

#coffee {
    position: absolute;
    top: -120px;
    right: 0px;
    z-index: 10;
}

#coffee summary {
    list-style-type: none;
}

#coffee summary img {
    cursor: pointer
}

.menucontainer {
    position: relative;
}

.navmenu {
    position: absolute;
    background-color: var(--paleborder);
    border-radius: 0px;
    border: 1px solid var(--gradientdark);
    box-shadow: 0px 5px 10px var(--gradientdark);
    opacity: 0.87;
    width: 175px;
}

.navmenu ul {
    padding: 0;
    margin: 0;
}

.navmenu li {
    list-style-type: none;
    border-bottom: 1px solid var(--gradientdark);
    text-align: center;
    padding: 5px;
    background-color: var(--paleborder);
}

.navmenu li:hover, .navmenu li:focus {
    background-color: var(--gradientdark);
    color: var(--paleborder);
}

.navmenu a:hover, .navmenu a:focus {
    filter: none;
}

.topofpage a {
    height: 50px;
    width: 50px;
    background-color: var(--sunshine);
    box-shadow: 0px 0px 30px 10px var(--sunshine);
    border-radius: 100%;
    position: fixed;
    top: 20px;
    left: 20px;
    opacity: 0.7;
    transition:1s;
}

.topofpage a:hover, .topofpage a:focus {
    filter: none;
    opacity: 1
}

.insertR,.insertL {
    width: 30%;
    min-width:180px;
    height: 250px;
    border: var(--fontcolor) 1px solid;
    shape-outside: margin-box;
    overflow: auto;
    scrollbar-width: thin;
    padding: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    background-color: var(--paleborder);
    border-radius: 10px;
}

.insertR {
    margin-left: 15px;
    float: right
}

.insertL {
    margin-right: 15px;
    float: left;
}
@media only screen and (max-width: 650px) {
    .container {
        width: 95%
    }

.main {
        padding: 15px;
        border-radius: 50px
    }

h1 {
        font-size: 28pt
    }

h2 {
        font-size: 20pt
    }

.navmenu {
        left: -20%
    }

.topofpage a {
        height: 30px;
        width: 30px;
    }

#coffee {
        scale: 0.8
    }
}

If you want, you could insert a box like this. There's "insertR" and "insertL"; insertR will float on the right (that's this box here!), and insertL will float on the left.

You can keep your page in all one continuous box, or have multiple like in this example. This second box is here so you can see the insert boxes, in case you want to use them!

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.