Page — Champagne

<!DOCTYPE html PUBLIC>

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

<html>

<head>

<title>{Title}</title>

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

<!--

page: champagne
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>

<!-- Font Awesome Script -->

<link href="//use.fontawesome.com/releases/v6.0.0/css/all.css" rel="stylesheet">

<!-- Push Content Script -->

<script>
function opensite() {
document.getElementById("site").style.width = "100%";
document.getElementById("landing").style.marginLeft = "100%";
}
function closesite() {
document.getElementById("site").style.width = "0";
document.getElementById("landing").style.marginLeft = "0";
}
</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: #ddcccc;
color: white;
}

::-moz-selection {
background: #ddcccc;
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: #f5f5f5;
background-attachment: fixed;
background-image: url(https://i.imgur.com/FDLC39X.jpg);
background-position: center;
background-size: cover;
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;
}

#landing {
height: 10.5%;
left: calc(50% - 300px);
position: fixed;
transition: margin-left 0.5s;
top: 44.75%;
width: 600px;
}

.title {
color: #ffffff;
font-family: 'Karla', sans-serif;
font-size: 25px;
font-weight: 900;
margin-bottom: 10px;
text-align: center;
text-shadow: 2px 2px #ddcccc;
text-transform: uppercase;
}

.open {
background: #ddcccc;
color: #ffffff;
display: inline-block;
font-size: 0.9rem;
padding: 3px 5px 3px 5px;
text-transform: uppercase;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}

.open:hover, .open a:hover {
color: #cfcfcf;
}

.open a {
background: #ddcccc;
color: #ffffff;
}

.site-content {
background: rgba(255, 255, 255, 0.5);
height: 100%;
left: 0px;
overflow-x: hidden;
position: fixed;
top: 0px;
transition: 0.5s;
width: 0px;
}

#portfolio {
margin-bottom: 100px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
width: 790px;
}

.close {
border: 1px solid #d2d2d2;
border-right: none;
display: inline-block;
float: right;
font-size: 0.9rem;
padding: 3px 5px 3px 5px;
text-transform: uppercase;
}

#user-information {
background: #ffffff;
margin-bottom: 75px;
width: 790px;
}

.subtitle {
background: #ddcccc;
color: #ffffff;
display: inline-block;
font-size: 0.9rem;
margin: 20px;
padding: 3px 5px 3px 5px;
text-transform: uppercase;
}

.description {
padding: 20px;
padding-top: 0px;
}

.links {
border-top: 1px solid #d2d2d2;
font-size: 0.9rem;
padding: 15px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
text-transform: uppercase;
}

.links a {
margin: 5px;
}

#projects {
margin: -10px;
overflow: hidden;
width: 840px;
}

.projects-wrapper {
float: left;
height: 150px;
margin: 10px;
width: 250px;
}

.projects-image img {
height: 150px;
position: absolute;
width: 250px;
}

.projects-name {
background: rgb(221,204,204,0.5);
display: inline-block;
font-size: 0.9rem;
position: absolute;
padding: 3px 5px 3px 5px;
text-transform: uppercase;
}

.projects-name a {
color: #ffffff;
}

.projects-name a:hover {
color: #cfcfcf;
}

#contact {
margin-bottom: 75px;
margin-top: 75px;
}

.contact-info {
position: absolute;
width: 250px;
}

.contact-title {
background: #ddcccc;
color: #ffffff;
font-size: 0.9rem;
padding: 3px 5px 3px 5px;
text-transform: uppercase;
}

.contact-details {
color: #000000;
font-size: 0.9rem;
margin-top: 20px;
padding: 3px 5px 3px 5px;
text-transform: uppercase;
}

.askbox {
position: relative;
margin-left: 270px;
width: 520px;
}

#social {
font-size: 30px;
text-align: center;
width: 790px;
}

#social a {
color: #000000;
margin-left: 20px;
margin-right: 20px;
}

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

#credit {
bottom: 15px;
font-size: 0.7rem;
position: fixed;
right: 15px;
text-transform: uppercase;
}

#credit a {
color: #000000;
}

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

{CustomCSS}

</style>

</head>

<body>

<div id="landing">

<div class="title">Champagne</div>

<center>
<div class="open"><span onclick="opensite()">Enter Site</span></div>
<div class="open" style="margin-left: 10px;"><a href="/">Exit</a></div>
</center>

</div>

<div id="site" class="site-content">

<div id="portfolio">

<div id="user-information">

<div class="close"><a href="javascript:void(0)" onclick="closesite()">Close</a></div>

<div class="subtitle">The Night Is Filled With Silver Stars</div>

<div class="description">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.
</div>

<div class="links">
<a href="/">Link One</a>
<a href="/">Link Two</a>
<a href="/">Link Three</a>
<a href="/">Link Four</a>
<a href="/">Link Five</a>
</div>

</div>

<div id="projects">

<div class="projects-wrapper">

<div class="projects-image">
<img src="https://i.imgur.com/yhBGlZI.png"/>
<div class="projects-name">
<a href="/">Project Name</a>
</div>
</div>

</div>

<div class="projects-wrapper">

<div class="projects-image">
<img src="https://i.imgur.com/yhBGlZI.png"/>
<div class="projects-name">
<a href="/">Project Name</a>
</div>
</div>

</div>

<div class="projects-wrapper">

<div class="projects-image">
<img src="https://i.imgur.com/yhBGlZI.png"/>
<div class="projects-name">
<a href="/">Project Name</a>
</div>
</div>

</div>

<div class="projects-wrapper">

<div class="projects-image">
<img src="https://i.imgur.com/yhBGlZI.png"/>
<div class="projects-name">
<a href="/">Project Name</a>
</div>
</div>

</div>

<div class="projects-wrapper">

<div class="projects-image">
<img src="https://i.imgur.com/yhBGlZI.png"/>
<div class="projects-name">
<a href="/">Project Name</a>
</div>
</div>

</div>

</div>

<div id="contact">

<div class="contact-info">

<div class="contact-title">Contact Me</div>

<div class="contact-details">
<i class="fas fa-envelope" style="margin-right: 10px;"></i><a href="mailto:[email protected]">email@domain.com</a>
<br>
<i class="fas fa-globe-asia" style="margin-right: 10px;"></i><a href="/">website.com</a></div>

</div>

<div class="askbox">
<iframe frameborder="0" height="200" id="ask_form" scrolling="no" src="https://www.tumblr.com/ask_form/{Name}.tumblr.com" width="100%"></iframe>
</div>

</div>

<div id="social">
<a href="/" title="username"><i class="fab fa-facebook-f"></i></a>
<a href="/" title="username"><i class="fab fa-twitter"></i></a>
<a href="/" title="username"><i class="fab fa-instagram"></i></a>
<a href="/" title="username"><i class="fab fa-tumblr"></i></a>
<a href="/" title="username"><i class="fab fa-behance"></i></a>
</div>

</div>

</div>

<div id="credit"><a href="http://ghcstfaec.tumblr.com/" title="ghcstfaec" target="_blank">GHCST</a></div>

</body>

</html>