Page — (Your) Sweetheart

<!DOCTYPE html PUBLIC>

<html>

<head>

<title>{Title}</title>

<link rel="shortcut icon" href="{Favicon}">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!--

page: (your) sweetheart
designed and coded by ghcstfaec
see credits @ https://ghcstfaec.tumblr.com/credits

-->

<!-- Google Fonts Script -->

<link href="https://fonts.googleapis.com/css?family=Karla:400,400i,700,700i&display=swap" rel="stylesheet">

<!-- jQuery Script -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<!-- Styled Tooltips Script -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>

<script>
(function($){
$(document).ready(function(){
$("a[title]").style_my_tooltips({
tip_follows_cursor:true,
tip_delay_time:90,
tip_fade_speed:600,
attribute:"title"
});
});
})(jQuery);
</script>

<!-- Phosphor Icons Script -->

<script src="https://cdn.jsdelivr.net/npm/@phosphor-icons/[email protected]"></script>

<!-- Scroll To Top Script -->

<script type="text/javascript">
$(function() {
$(window).scroll(function() {
if($(this).scrollTop() != 0) {
$('#top').fadeIn();
}
else {
$('#top').fadeOut();
}
});
$('#top').click(function() {
$('body,html').animate({scrollTop:0},600);
});
});
</script>

<style type="text/css">

.tmblr-iframe--app-cta-button {
display: none!important;
}

::-webkit-scrollbar-thumb:vertical {
background: #000000;
}

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

::selection {
background: #ddaabb;
color: white;
}

::-moz-selection {
background: #ddaabb;
color: white;
}

#s-m-t-tooltip {
background: #000000;
border-radius: 5px;
color: #ffffff;
font-size: 0.9rem;
margin-top: 30px;
padding: 5px;
text-align: center;
text-transform: uppercase;
z-index: 999999999999999999999999999999999999;
}

body {
background: #ffffff;
color: #555555;
cursor: url(https://i.imgur.com/lhPqll6.png), progress;
font-family: 'Karla', sans-serif;
font-size: 1rem;
font-style: normal;
font-weight: 400;
hyphens: auto;
letter-spacing: 1px;
margin: 0px;
text-align: left;
text-transform: none;
word-wrap: break-word;
}

a {
color: #000000;
text-decoration: none;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}

a:hover {
color: #cfcfcf;
}

b {
font-weight: 700;
}

h1 {
font-size: 1.2rem;
font-weight: bold;
margin-block-start: 0em;
text-transform: lowercase;
}

h2 {
font-size: 1rem;
font-weight: bold;
margin-block-start: 0em;
}

blockquote {
border-left: 1px solid #d2d2d2;
margin: 5px;
padding-left: 5px;
}

#container {
margin-bottom: 100px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
width: 816px;
}

.main-wrapper {
align-items: flex-start;
display: flex;
flex-direction: row;
justify-content: flex-start;
width: 816px;
}

#line {
background: #d2d2d2;
height: 1px;
margin-top: 50px;
position: absolute;
width: 816px;
}

#image-info-wrapper {
margin-left: 100px;
width: 170px;
}

.image {
background: #ffffff;
border: 1px solid #d2d2d2;
height: 230px;
padding: 15px;
position: relative;
width: 170px;
}

.image img {
height: 230px;
width: 170px;
}

.info-wrapper {
margin-top: 20px;
width: 170px;
}

.info li {
align-items: center;
display: flex;
list-style: none;
margin-bottom: 10px;
}

#about-wrapper {
margin-left: 100px;
margin-top: 101px;
width: 346px;
}

.title-links-wrapper {
margin-bottom: 30px;
width: 346px;
}

.title {
color: #aaccdd;
font-family: 'Playfair Display', serif;
font-weight: bold;
font-size: 30px;
}

.links {
font-size: 0.9rem;
margin: -5px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
text-transform: uppercase;
}

.links a {
margin: 5px;
}

#navigation-wrapper {
border-top: 1px solid #d2d2d2;
margin-top: 30px;
padding-top: 30px;
}

.navigation-links {
font-size: 0.9rem;
margin: -5px;
align-items: center;
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-top: 10px;
text-transform: uppercase;
}

.navigation-links a {
margin: 5px;
}

#top {
background: #ffffff;
border: 1px solid #d2d2d2;
bottom: 66px;
color: #000000;
display: none;
font-size: 0.9rem;
font-variant: normal;
height: 0.9rem;
line-height: 1;
padding: 10px;
position: fixed;
right: 20px;
text-rendering: auto;
width: 0.9rem;
z-index: 1;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}

#top:hover {
color: #cfcfcf;
}

#credit {
bottom: 20px;
font-size: 0.9rem;
height: 36px;
position: fixed;
right: 20px;
text-transform: uppercase;
z-index: 1;
width: auto;
}

#credit a {
background: #ffffff;
border: 1px solid #d2d2d2;
color: #000000;
display: inline-block;
font-size: 0.9rem;
font-variant: normal;
height: 0.9rem;
line-height: 1;
padding: 10px;
width: 0.9rem;
}

#credit a:hover  {
color: #cfcfcf;
}

{CustomCSS}

</style>

</head>

<body>

<div id="container">

<div id="line"></div>

<div class="main-wrapper">

<div id="image-info-wrapper">

<div class="image"><img src="https://i.imgur.com/IaoA8c3.png"/></div>

<div class="info-wrapper">

<div class="info">
<li><i class="ph-bold ph-user-circle-gear" style="background: #ddaabb;border-radius: 5px;color: #ffffff;font-size: 0.9rem;height: 0.9rem;margin-right: 10px;padding: 10px;width: 0.9rem;"></i>Name Of User</li>
<li><i class="ph-bold ph-question" style="background: #ddaabb;border-radius: 5px;color: #ffffff;font-size: 0.9rem;height: 0.9rem;margin-right: 10px;padding: 10px;width: 0.9rem;"></i>Birthday + Age</li>
<li><i class="ph-bold ph-map-pin-line" style="background: #ddaabb;border-radius: 5px;color: #ffffff;font-size: 0.9rem;height: 0.9rem;margin-right: 10px;padding: 10px;width: 0.9rem;"></i>Location</li>
</div>

</div>

</div>

<div id="about-wrapper">

<div class="title-links-wrapper">

<div class="title">(Your) Sweetheart<font style="color: #000000;">.</font></div>

<div class="links">
<a href="/">Home</a>
<a href="/ask">Ask</a>
<a href="/archive">Archive</a>
</div>

</div>

Write your about here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<br><br>

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

<div id="navigation-wrapper">

<div class="title" style="font-size: 1rem;">Elsewhere</div>

<div class="navigation-links">
<a href="/">Link One</a>
<font style="color: #ddaabb;">•</font>
<a href="/">Link Two</a>
<font style="color: #ddaabb;">•</font>
<a href="/">Link Three</a>
<font style="color: #ddaabb;">•</font>
<a href="/">Link Four</a>
<font style="color: #ddaabb;">•</font>
<a href="/">Link Five</a>
<font style="color: #ddaabb;">•</font>
<a href="/">Link Six</a>
<font style="color: #ddaabb;">•</font>
<a href="/">Link Seven</a>
<font style="color: #ddaabb;">•</font>
<a href="/">Link Eight</a>
<font style="color: #ddaabb;">•</font>
<a href="/">Link Nine</a>
</div>

</div>

</div>

</div>

</div>

<div id="top" title="Back To Top"><i class="ph-bold ph-arrow-line-up"></i></div>

<!-- Start of Theme Credit -->

<div id="credit" title="ghcstfaec"><a href="https://ghcstfaec.tumblr.com/"><i class="ph-bold ph-clover"></i></a></div>

<!-- End of Theme Credit -->

</body>

</html>