GS#09 Okami - Start Menu

GS#09ATC: Okami - Start Menu

CSS

/* Last Update: 01/10/19 */

/* IMPORT FOR SCROLL STYLING - PLACE NOTHING ABOVE */
@import url("https://dl.dropboxusercontent.com/s/tupdv03l0cqv0f4/scroll.css?dl=0");

/* PAGE BACKGROUND AND FONT */
body {
background:#f1f1d4 url(http://www.technobuffalo.com/wp-content/uploads/2015/06/Okami.jpg) center fixed;
background-size:cover;
text-align:left;
font-size:105%;
font-family:'Oregano', serif;
}

/* MAIN DISPLAY COLORS */
#start h1 {
background-color:rgba(125,109,86,0.8);
box-shadow:0 0 20px 10px rgba(125,109,86,0.8);
}
.scroll-body, .tab-body, .g-display img,
a[href="#00"], .g-display label {
background-color:#bfbba1;
box-shadow:0 0 1px 3px #000;
}
.scroll-body {
border-top:4px solid #595752;
border-bottom:4px solid #595752;
}
.scroll::before, .scroll::after,
.g-selection::before, .g-selection::after, .g-display::after {
background-color:#595752;
}
.scroll::before, .scroll::after,
.g-selection::before, .g-selection::after,
.g-display::after, .tab::before {
border:2px solid #000;
box-shadow:1px 2px 5px #000,
	0 0 6px inset #000;
}
.tab::before, .tab-body::before, .tab-body::after {
background-color:#5a6b5f;
}
.g-display img {
border-left:16px solid #595752;
border-right:16px solid #595752;
}
#menu a {
color:#000;
}
a[href="#00"], .g-display label {
border:4px solid #595752;
}
.tab a, label {
color:#2e8b57;
}
.tab a:hover, label:hover {
color:#fff;
}

/* GOOGLE CHROME SCROLLBARS */
::-webkit-scrollbar {
width:12px;
height:12px;
background-color:#ddd;
}
::-webkit-scrollbar-thumb {
background-color:#888;
}

/* TRANSITION SPEEDS */
#start, #menu, .tab, .g-display {
transition:1s;
-o-transition:1s;
-moz-transition:1s;
-webkit-transition:1s;
}

/* CSS MEAT */
#pull-menu, #start, #start h1, #menu,
.g-display {
left:50%;
transform:translate(-50%,-50%);
-o-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
}
#pull-menu, #start, #menu {
position:fixed;
top:80%;
height:18.5%;
text-align:center;
}
#start, #pull-menu {
width:33%;
}
#start {
z-index:2;
}
#pull-menu {
z-index:3;
display:inline-block;
opacity:0;
cursor:pointer;
}
#pull-menu:checked {
display:none;
}
#start h1 {
position:absolute;
top:50%;
width:100%;
margin:0;
border-radius:25px;
font-size:5.1vh;
}
#pull-menu:checked ~ #start {
opacity:0;
}
#pull-menu:checked ~ #menu {
z-index:4;
opacity:1;
}
#menu {
z-index:1;
width:26.4%;
opacity:0;
}
#menu .scroll-body, .g-selection .scroll-body {
padding:0;
overflow:hidden;
}
#menu a {
line-height:5vh;
font-size:3.8vh;
margin:0;
text-decoration:none;
}
#menu a:hover {
font-size:4.6vh;
}
.tab {
z-index:4;
position:fixed;
top:0;
bottom:0;
left:100%;
width:100%;
}
.tab:target {
z-index:5;
left:0;
}
a[href="#00"] {
z-index:4;
position:absolute;
top:1%;
left:2%;
width:150px;
text-align:center;
}
#bg {
z-index:2;
position:absolute;
top:7.5%;
left:0;
height:85%;
width:100%;
background-position:center;
background-size:auto 100%;
}
#infobox, #gallery, .obox {
z-index:5;
position:absolute;
}
#infobox {
top:70%;
left:25%;
height:30%;
width:50%;
}
#gallery {
top:7%;
left:0;
height:86%;
width:100%;
}
.g-selection {
display:inline-block;
position:relative;
left:6%;
height:20%;
width:86%;
margin-bottom:0.2%;
}
.g-selection img {
position:relative;
top:50%;
left:50%;
height:79.5vw;
transform-origin:0 0;
-o-transform-origin:0 0;
-moz-transform-origin:0 0;
-webkit-transform-origin:0 0;
}
.g-selection:nth-child(2n-1) img {
transform:rotate(-90deg) translate(-50%,-50%);
-o-transform:rotate(-90deg) translate(-50%,-50%);
-moz-transform:rotate(-90deg) translate(-50%,-50%);
-webkit-transform:rotate(-90deg) translate(-50%,-50%);
}
.g-selection:nth-child(2n) img {
transform:rotate(90deg) translate(-50%,-50%);
-o-transform:rotate(90deg) translate(-50%,-50%);
-moz-transform:rotate(90deg) translate(-50%,-50%);
-webkit-transform:rotate(90deg) translate(-50%,-50%);
}
.g-display {
z-index:7;
position:fixed;
top:-60%;
height:100%;
padding:0 1vw;
}
.g-display img {
display:block;
position:static;
height:95vh;
padding:1vh 1vw;
}
.g-display label {
position:absolute;
width:70%;
left:15%;
bottom:5%;
margin-left:-4px;
text-align:center;
}
input:checked + .g-display {
top:50%;
}
input {
display:none;
}
label {
cursor:pointer;
}
#statbox {
z-index:6;
position:absolute;
top:72.5%;
left:15%;
height:27.5%;
width:70%;
}
.obox {
top:10%;
bottom:10%;
width:45%;
}
#statbox p {
width:45%;
margin:0;
}
#infobox p {
text-indent:5%;
}
.obox li {
position:relative;
list-style:none;
height:18%;
width:100%;
margin:2% 0;
}
#statbox img, #infobox img, .obox img {
max-height:100%;
}
.tab a {
text-decoration:none;
font-weight:bold;
}
#credit {
position:fixed;
height:17px;
right:1%;
bottom:0%;
background-color:#fff;
border-radius:5px;
}

HTML

<link href="https://fonts.googleapis.com/css?family=Oregano" rel="stylesheet">

<input type="radio" name="pull-menu" id="pull-menu"/>
<div id="start">
<h1>Begin Story</h1>
</div>
<div class="scroll" id="menu">
<div class="scroll-body">
<a href="#01">New Game</a>
<br/><a href="#02">Continue</a>
<br/><a href="#03">Options</a>
</div>
</div>


<!-- DESCDENDING GALLERY PORTION -->
<input type="radio" name="display-image" id="p1"/>
<div class="g-display">
<img src="https://i.pinimg.com/originals/9c/b4/47/9cb447776ac4619471ea9af1e0430d0f.jpg" alt=""/>
<label for="p-reset">Back</label>
</div>
<input type="radio" name="display-image" id="p2"/>
<div class="g-display">
<img src="https://i.pinimg.com/originals/42/5c/a1/425ca15e8394fdd15890c775e4e238b6.jpg" alt=""/>
<label for="p-reset">Back</label>
</div>
<input type="radio" name="display-image" id="p3"/>
<div class="g-display">
<img src="https://i.pinimg.com/originals/6f/1a/78/6f1a782cb43ab650eb3b28a9465ca580.jpg" alt=""/>
<label for="p-reset">Back</label>
</div>
<input type="radio" name="display-image" id="p4"/>
<div class="g-display">
<img src="https://s3.amazonaws.com/cdn.roosterteeth.com/uploads/images/7ca8affd-d7ca-4816-ba81-5114e7a6d0d6/md/Aoitsuki4743f9403213c.jpg" alt=""/>
<label for="p-reset">Back</label>
</div>
<input type="radio" name="display-image" id="p-reset"/>


<div class="tab" id="01">
<div class="tab-body">
<a href="#00">Back</a>
<div id="bg" style="background-image:url(http://images4.fanpop.com/image/photos/22400000/Okami-okami-amaterasu-22450707-500-202.jpg);"></div>

<div class="scroll" id="infobox">
<div class="scroll-body">
<p>
Information and stuffity stuff stuff stufff. More stuuuufff. AND. MORE STUFF! Bippity boop bop biddly beep squap. Anyways, what do I usually do for examples when I need to fill space? OH YEAH! *ahem* Hello, people of Earth, I have come to devour you. Do not fear for it shall be a quick and painless death as I intake your entire planet. The sudden loss of atmospheric pressure and its protections will either freeze you in a millisecond or cause all of your blood to boil out of your body in a single instant. Hmm. I suppose that last one doesn't quite sound painless, but nonetheless it should be instantaneous.
</p>
</div>
</div>
</div></div>


<div class="tab" id="02">
<div class="tab-body">
<a href="#00">Back</a>
<div id="bg" style="background-image:url(http://images6.fanpop.com/image/photos/32400000/Ammy-okami-amaterasu-32460715-500-386.jpg);"></div>

<!-- GALLERY SELECTION PROTION -->
<div id="gallery">
<div class="scroll g-selection">
<label for="p1" class="scroll-body">
<img src="https://i.pinimg.com/originals/9c/b4/47/9cb447776ac4619471ea9af1e0430d0f.jpg" alt=""/>
</label>
</div>
<div class="scroll g-selection">
<label for="p2" class="scroll-body">
<img src="https://i.pinimg.com/originals/42/5c/a1/425ca15e8394fdd15890c775e4e238b6.jpg" alt=""/>
</label>
</div>
<div class="scroll g-selection">
<label for="p3" class="scroll-body">
<img src="https://i.pinimg.com/originals/6f/1a/78/6f1a782cb43ab650eb3b28a9465ca580.jpg" alt=""/>
</label>
</div>
<div class="scroll g-selection">
<label for="p4" class="scroll-body">
<img src="https://s3.amazonaws.com/cdn.roosterteeth.com/uploads/images/7ca8affd-d7ca-4816-ba81-5114e7a6d0d6/md/Aoitsuki4743f9403213c.jpg" alt=""/>
</label>
</div>
</div>

<div class="scroll" id="statbox">
<div class="scroll-body">
<p style="float:left;">
<b>Name:</b>
<br/>
<b>Species:</b>
<br/>
<b>Gender:</b>
<br/>
<b>Age:</b>
<br/>
<b>Hair:</b>
<br/>
<b>Eyes:</b>
<br/>
<b>Height:</b>
<br/>
<b>Weight:</b>
<br/>
<b>Build:</b>
<br/>
<b>Orientation:</b>
</p>
<p style="float:right;text-align:right;">
Stat here
<br>
Stat here
<br>
Stat here
<br>
Stat here
<br>
Stat here
<br>
Stat here
<br>
Stat here
<br>
Stat here
<br>
Stat here
<br>
Stat here
</p>
</div>
</div>
</div></div>


<div class="tab" id="03">
<div class="tab-body">
<a href="#00">Back</a>
<div id="bg" style="background-image:url(http://www.gamingilluminaughty.com/wp-content/uploads/2016/03/okami-desktop-wallpaper_044210170_238.jpg);"></div>

<div class="obox" style="left:2.5%;">
<li class="scroll"><div class="scroll-body">
Bullet one.
</div></li>

<li class="scroll"><div class="scroll-body">
Bullet two.
</div></li>

<li class="scroll"><div class="scroll-body">
Bullet three.
</div></li>

<li class="scroll"><div class="scroll-body">
Bullet four.
</div></li>

<li class="scroll"><div class="scroll-body">
Bullet five.
</div></li>
</div>

<div class="obox" style="right:2.5%;">
<li class="scroll"><div class="scroll-body">
<a href="https://s-media-cache-ak0.pinimg.com/236x/48/f5/77/48f5778e2e42ee5df34b098ffce5cf26.jpg" target="_blank">Link</a>
</div></li>

<li class="scroll"><div class="scroll-body">
<a href="https://s-media-cache-ak0.pinimg.com/236x/48/f5/77/48f5778e2e42ee5df34b098ffce5cf26.jpg" target="_blank">Link</a>
</div></li>

<li class="scroll"><div class="scroll-body">
<a href="https://s-media-cache-ak0.pinimg.com/236x/48/f5/77/48f5778e2e42ee5df34b098ffce5cf26.jpg" target="_blank">Link</a>
</div></li>

<li class="scroll"><div class="scroll-body">
<a href="https://s-media-cache-ak0.pinimg.com/236x/48/f5/77/48f5778e2e42ee5df34b098ffce5cf26.jpg" target="_blank">Link</a>
</div></li>

<li class="scroll"><div class="scroll-body">
<a href="https://s-media-cache-ak0.pinimg.com/236x/48/f5/77/48f5778e2e42ee5df34b098ffce5cf26.jpg" target="_blank">Link</a>
</div></li>
</div>
</div></div>

<a href="http://bitly.com/2vJNCgN" target="_blank" title="GS#09">
<img src="https://i.imgur.com/xgofQyf.png" id="credit"/>
</a>