<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lovely Base</title>
<style>
:root {
--backgroundimage: url(""); /* background image */
--backgroundcolor: PaleVioletRed; /* background color */
--boxcolors: white; /* background color of boxes */
--fromtop: 3%; /* adjust how far everything is from the top */
--textboxheight: 350px; /* adjust height of main textbox */
--icon: url("/img/lovely/madokaicon.png"); /* icon below chat bubble */
--listmarker: "🌸 "; /* bullet points */
--linksmarker: url('/img/lovely/cake.gif'); /* bullet points for sidebar links */
--borderimage: url("/img/lace.png") 80 0 / 10px 0 / 8px 0px round; /* image border. documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/border-image */
--fontsize: 13px; /* font size */
--textcolor: black; /* text color */
--chattextcolor: Grey; /* chat bubble text color */
--outsidetextcolor: white; /* title text color */
--linkcolor: PaleVioletRed; /* link colors */
--hoverlinkcolor: MediumVioletRed; /* link colors when hovered */
--boldcolor: MediumVioletRed; /* bold text color */
--italicscolor: HotPink; /* italic text color */
--selecttextcolor: white; /* selection text color */
--selectbgcolor: PaleVioletRed; /* selection background color */
--scrollbarcolor: Pink; /* scrollbar color */
--scrollbarbgcolor: white; /* scrollbar background color */
--sideimage: url("/img/lovely/madoka.png"); /* side image, defaults to the right */
--imagesize: 70%; /* resize image, uses max-width */
--mobileimagesize: 50%; /* resizes image for mobile only, uses max-width */
--moveimagehorizontal: 0px; /* moves image. positive numbers move it to the left, negative to the right */
--moveimagevertical: -50px; /* moves image. positive numbers move it up, negative down */
}
html {
min-height: 100%;
background-color: var(--backgroundcolor);
background-image: var(--backgroundimage);
}
body {
margin: 0;
font-size: var(--fontsize);
font-family: Arial, sans-serif;
color: var(--textcolor);
}
img {
max-width: 100%;
}
a, a:visited {
color: var(--linkcolor);
}
a:hover {
color: var(--hoverlinkcolor);
}
i, em {
color: var(--italicscolor);
}
b, bold, strong {
color: var(--boldcolor);
}
ul {
padding-left: 20px;
}
li::marker {
content: var(--listmarker);
}
.links li::marker {
content: var(--linksmarker);
}
::selection, mark {
color: var(--selecttextcolor);
background-color: var(--selectbgcolor);
}
hr {
width: 70%;
}
.toptext, .bottomtext {
font-family: Segoe Script, sans-serif;
font-size: 25px;
color: var(--outsidetextcolor);
}
.bottomtext {
float: right;
width: 75.8%;
height: 150px;
overflow-x: hidden;
overflow-y: auto;
scrollbar-color: white transparent;
scrollbar-width: thin;
}
.boxcontainer {
display: block;
margin: var(--fromtop) auto 0;
width: 700px;
}
.box {
display: flex;
}
.side {
position: sticky;
flex: 20%;
margin-right: 27px;
}
.biobox {
margin-bottom: 12px;
width: 100%;
height: 165px;
border: 10px solid var(--boxcolors);
border-image: var(--borderimage);
overflow-y: auto;
background-color: var(--boxcolors);
scrollbar-color: var(--scrollbarcolor) var(--scrollbarbgcolor);
scrollbar-width: thin;
}
.chat {
width: 100%;
height: var(--chatboxheight);
border: 10px solid var(--boxcolors);
border-radius: 10px;
overflow-y: auto;
scrollbar-color: var(--scrollbarcolor) var(--scrollbarbgcolor);
scrollbar-width: thin;
color: var(--chattextcolor);
font-size: 12px;
text-align: center;
background-color: var(--boxcolors);
}
.triangle {
position: absolute;
margin-left: 80px;
width: 0;
height: 0;
border: 9px solid;
border-color: var(--boxcolors) transparent transparent transparent;
content: '';
}
.icon {
margin-top: 15px;
margin-left: 50px;
width: 75px;
height: 75px;
border-radius: 50%;
background-color: white;
background-image: var(--icon);
background-size: cover;
}
.main {
margin-bottom: 15px;
flex: 70%;
display: inline-block;
height: var(--textboxheight);
overflow-y: auto;
scrollbar-color: var(--scrollbarcolor) var(--scrollbarbgcolor);
scrollbar-width: thin;
background-color: var(--boxcolors);
border: 10px solid var(--boxcolors);
border-image: var(--borderimage);
}
.sideimg {
position: fixed;
margin-right: var(--moveimagehorizontal);
margin-bottom: var(--moveimagevertical);
z-index: -1;
max-width: var(--imagesize);
right: 0;
bottom: 0;
content: var(--sideimage);
}
.credit a {
position: fixed;
padding: 6px;
bottom: 0;
text-decoration: none;
font-size: 14px;
color: #852a68;
text-shadow: 2px 0 #141414;
}
/* mobile */
@media screen and (max-width: 480px) {
.boxcontainer {
margin: 65px auto;
width: 90%;
}
.box {
display: block;
}
.side {
display: flex;
}
.biobox {
flex: 50%;
}
.chatcontainer {
flex: 50%;
margin-bottom: 25px;
margin-left: 10px;
}
.chat {
height: 70px;
}
.icon {
margin-right: 31px;
margin-top: 15px;
}
.main {
min-width: 92.5%;
flex: 100%;
}
.triangle {
margin-left: 79.5px;
}
.bottomtext {
float: none;
width: 100%;
}
.sideimg {
margin-right: 0;
margin-bottom: 0;
max-width: var(--mobileimagesize);
z-index: 1;
}
}
</style>
</head>
<body>
<div class="boxcontainer">
<div class="toptext">my lovely little palace ^__^</div>
<div class="box">
<div class="side">
<div class="biobox">
<p>hi i'm ram<i>!!!!!!!!!!!!</i></p>
<p>and i am so yay i'm yay</p>
<ul class="links">
<li><a href="">home</a></li>
<li><a href="">about</a></li>
<li><a href="">art</a></li>
<li><a href="">music</a></li>
</ul>
</div>
<div class="chatcontainer">
<div class="chat">
<p><b>currently feeling:</b>
<br>to be honest... i don't really know ^__^</p>
</div>
<div class="triangle"></div>
<div class="icon"></div>
</div>
</div>
<div class="main">
<p>This is the base code for <i>Lovely</i>. <a href="https://raw.githubusercontent.com/astronautiic/ramthemes/main/lovely/index.html">The code is available here.</a></p>
<p>Download the assets <a href="https://github.com/astronautiic/ramthemes/raw/main/lovely/lovely.zip" download>here</a> (stamps not included<i>!</i>).
<br>The assets are linked using relative paths. If you don't want to change the image links, follow these instructions:</p>
<ol>
<li>In the Neocities "Home" menu, create a folder named "img"</li>
<li>Inside that folder, create another folder named "lovely"</li>
<li>Upload the assets into the "lovely" folder</li>
</ol>
<p>See the theme in use <a href="https://ranmpy.neocities.org/themes/lovely">here</a>. If you know a better way of coding this, <a href="https://github.com/astronautiic/ramthemes/blob/main/lovely/index.html">contribute here</a>.</p>
<p>Lace pattern was created by <a href="https://www.deviantart.com/tigers-stock/art/613-Lace-Lines-1-363078294">Tigers-stock</a>.
<hr>
<p>This is a paragraph! Here's how you make a link: <a href="https://neocities.org">Neocities</a>.</p>
<p>Here's how you can make <strong>bold</strong> and <em>italic</em> text.</p>
<p>Here's how you can add an image:</p>
<img src="/neocities.png">
<p>Here's how to make a list:</p>
<ul>
<li>First thing</li>
<li>Second thing</li>
<li>Third thing</li>
</ul>
<p>To learn more HTML/CSS, check out these <a href="https://neocities.org/tutorials">tutorials</a>!</p>
<hr>
<h2>Resources</h2>
<ul>
<li><a href="https://sugaa.tumblr.com/post/70120611883/favicon-masterpost">Favicons</a></li>
<li><a href="https://www.reddit.com/r/neocities/comments/p2ohhf/martindisks_messy_guide_to_having_custom_fonts_on/">How to add custom fonts</a></li>
</ul>
</div>
</div>
<div class="bottomtext">
put text or a marquee here :]
</div>
</div>
<div class="sideimg"></div>
<div class="credit"><a href="https://ranmpy.neocities.org" title="theme by ranmpy">✿</a></div> <!-- credit ^_^ please don't remove -->
</body>
</html>