body{
background-color: #fff7fb;
font-family: 'FortySeven Micro NBP', sans-serif;
}
#container{
display: flex;
justify-content: center;
align-items: center;
width: 800px;
margin: 0 auto;
border: 1px solid #ff668a;
padding: 3px;
}
#box{
width: 800px;
background-color: #fff7fb;
color: #000;
border: 1px solid #ff668a;
}
#header{
margin-bottom: 10px;
padding: 10px;
border-bottom: 1px solid #ff668a;
background-image: linear-gradient(to right, #ff668a, #ffbfce);
color: #fff;
letter-spacing: 3px;
}
#header h1{
margin: 0px;
}
#side{
float: left;
width: 145px;
padding: 0px 0px 5px 10px;
overflow: hidden;
}
.sidebox{
border: 1px solid #ff668a;
margin: 0px 0px 5px 0px;
}
.sidecontent{
padding: 0px 0px 0px 5px;
color: #6e5057;
font-size: 17px;
letter-spacing: 1px;
}
.sidecontent ul, li{
margin: 0px;
list-style-type: none;
padding-left: 0px;
}
a{
text-decoration: none;
color: #ff668a;
}
a:visited{
color: #ff668a;
}
a:hover{
text-shadow: 0px 0px 2px #78beff;
}
#scrollcontainer{
padding: 5px;
}
#scrolly{
overflow: scroll;
overflow-x: hidden;
width: 110px;
height:110px;
border: 1px solid #ff668a;
margin: 0 auto;
text-align: center;
}
#scrollyheader{
margin: 0px;
border-bottom: 1px dotted #ff668a;
}
#main{
float: right;
width: 624px;
overflow: hidden;
padding: 0px 10px 5px 0px;
}
.mainboxes{
border: 1px solid #ff668a;
padding: 0px;
margin: 0px 0px 5px 0px;
}
.subheader{
background-image: linear-gradient(to right, #ff668a, #ffbfce);
border-bottom: 1px solid #ff668a;
padding: 3px;
color: #fff;
letter-spacing: 3px;
}
.subheader h3{
margin: 0px;
}
.mainboxescontent{
padding: 0px 15px 0px 15px;
color: #6e5057;
font-size: 17px;
}
#footer{
clear: both;
padding: 3px;
border-top: 1px solid #ff668a;
background-image: linear-gradient(to right, #ff668a, #ffbfce);
color: #fff;
font-size: 14px;
}
#footer p{
margin: 0px;
}
::-webkit-scrollbar{
width: 8px;
}
::-webkit-scrollbar-track{
background-color: #fff7fb;
}
::-webkit-scrollbar-thumb{
background-color: #ff668a;
}
#credit{
font-size: 12px;
position: fixed;
bottom: 0;
right: 0;
}
Welcome
Navigate
⊳ Link 1
⊳ Link 2
⊳ Link 3
⊳ Link 4
⊳ Link 5
Sub Header
⊳ Link 1
⊳ Link 2
⊳ Link 3
⊳ Link 4
⊳ Link 5
Other
Hello
Header
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et orci sit amet nunc fringilla rutrum. Aliquam finibus ipsum nec orci dignissim, id luctus dolor semper. Phasellus dictum mauris ut neque molestie hendrerit. Vestibulum at neque purus.
Cras est sapien, ultricies ut vulputate id, pellentesque malesuada arcu. Vestibulum efficitur quam in elit cursus vehicula. Praesent in tellus nisl. Vestibulum a massa lorem. Phasellus placerat velit sed feugiat pharetra.
Nulla vel ipsum odio. Integer hendrerit dui id enim porta, in dapibus elit sollicitudin. Vestibulum efficitur quam in elit cursus vehicula. Vestibulum at neque purus. Cras est sapien, ultricies ut vulputate id, pellentesque malesuada arcu.
Header
Maecenas et imperdiet odio. Ut nec lorem aliquam, maximus diam id, bibendum lorem. Suspendisse sit amet semper justo. Proin venenatis, neque vitae accumsan dignissim, mauris sem feugiat augue, et congue arcu massa eget dui.
Sed sit amet purus sapien. Sed porttitor vel enim sit amet aliquam. Aenean ornare nisi et viverra venenatis. Sed at sem nunc. Nulla vel ipsum odio. Integer hendrerit dui id enim porta, in dapibus elit sollicitudin.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et orci sit amet nunc fringilla rutrum. Aliquam finibus ipsum nec orci dignissim, id luctus dolor semper. Phasellus dictum mauris ut neque molestie hendrerit. Vestibulum at neque purus. Cras est sapien, ultricies ut vulputate id, pellentesque malesuada arcu. Vestibulum efficitur quam in elit cursus vehicula. Praesent in tellus nisl. Vestibulum a massa lorem. Phasellus placerat velit sed feugiat pharetra.
Footer 2021
@Repth