Mahiru Koizumi

<style>

@import url('https://fonts.googleapis.com/css?family=Grand+Hotel|Patrick+Hand+SC|Rokkitt');


::-webkit-scrollbar-thumb:vertical {background: #D74C59; height: 50px; Width: 10px;}

::-webkit-scrollbar-thumb:horizontal {background-color: #D74C59; width: 5px; height: 90%; !important;}


::-webkit-scrollbar {height: 1px; width: 1%; background-color: transparent;}

body {
background-image: url();
background-size: 100% 100%;
background-color: #FCEED5;
Overflow: hidden;
cursor: url(http://31.media.tumblr.com/tumblr_lqs4idHqTZ1qfoi4t.png), progress !important;
}

a {Text-decoration: none; Color: #fc5757; }
b {
Text-Shadow: #f97d72 2px 1px 1px;
Color: #000;
}
i {
Color: #f97d72;
Text-Shadow: #fff 2px 1px 1px;
text-decoration: none;
}
u {
border-bottom: 1px dotted #f97d72;
Color: #f97d72 }
h2 {
Text-Shadow: #fff 2px 1px 1px;
Color: #f97d72;
font-family: 'Grand Hotel', cursive;
font-size: 18px;
margin-top: 3px;
border-bottom: dotted 1.6px #fff;
text-align: center;
}

a:hover {
cursor: url(http://68.media.tumblr.com/tumblr_lqs4mecs4V1qfoi4t.png), progress !important;
}


.container {
position: fixed;
margin: auto;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
width: 610px;
height: 300px;
background: url(https://i.imgur.com/0aXf2Ao.png);
border: 4px solid #FFA39D;
box-shadow: #fff 0px 0px 10px;
}

.bar {
position: fixed;
margin: auto;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
Top: 150;
Height: 50px;
Width: 4000px;
background: url(https://previews.123rf.com/images/kotkoa/kotkoa1511/kotkoa151100214/48717376-The-floral-seamless-pattern-over-light-background-Flower-pattern-of-orange-hydrangea-flowers-over-wh-Stock-Illustration.jpg);
Background-size: 20%;
Border-top: 10px solid #fff;
Border-bottom: 10px solid #fff;
z-index: -1;
}

.little {
Position: absolute;
Bottom: 0;
left: 0;
Height: 300px;
}

.name {
Position: absolute;
top: 5px;
Left: 260px;
Font-family: 'Grand Hotel', cursive;
Font-size: 60px;
Text-Shadow: #D74C59 2px 1px 10px;
Color: #fff;
z-index: 3;
}

.quote {
Position: absolute;
bottom: 25px;
Left: 260px;
Font-family: 'Rokkitt', cursive;
Font-size: 20px;
Text-Shadow: #fff 2px 1px 8px;
Color: #D74C59;
z-index: 3;
}


#navbox {
Position: absolute;
left: 294px;
Top: 80;

}

.c1, .c2, .c3, .c4, .c5 {
z-index: 2;
position: absolute;
left: 0px;
top: 0px;
width: 55px;
height: 55px;
background: url(https://i.imgur.com/qzbNDlu.gif);
Background-size: 100% 130%;
Background-position: center center;
transition: 0.8s;
 z-index: 2;}
.c2 {
margin: 0px 0 0 60px;
 }

.c3 {
margin: 0px 0 0 120px;
 }

.c4 {
 margin: 0px 0 0 180px;
 }


.c1:hover, .c2:hover, .c3:hover, .c4:hover {
 background-color: #fff;
 }

.left {
position: absolute;
left: -330px;
top: 0px;
Top: -10;
Height: 300px;
Width: 250px;
background: url(https://i.imgur.com/0aXf2Ao.png);
Background-size: 20%;
Border: 10px solid #fff;
Padding: 5px;
z-index: 2;
}

.right {
position: absolute;
right: -330px;
top: 0px;
Top: -10;
Height: 300px;
Width: 250px;
background: url(https://i.imgur.com/0aXf2Ao.png);
Background-size: 20%;
Border: 10px solid #fff;
Padding: 5px;
z-index: 2;
}

.title {
Position: absolute;
Top: 5px;
Left: -15px;
Width: 300px;
Font-family: 'Patrick Hand SC', cursive;
Font-size: 30px;
Text-Shadow: #D74C59 2px 1px 8px;
Color: #fff;
Text-align: center;
}

.imgb {
Position: absolute;
Top: 50px;
Left: -10px;
Width: 280px;
Height: 60px;
Border-top: solid 3px #fff;
Border-bottom: solid 3px #fff;
}

.data {
position: absolute;
Top: 130px;
Left: 0px;
Width: 250px;
Height: 170px;
font-size: 12px;
overflow: auto;
padding: 5px;
}

.imga {
Width: 60px;
Height: 60px;
Margin-right: 5px;
Margin-left: 5px;
Color: #fff;
Text-align: center;
Border-left: solid 3px;
Border-right: solid 3px;
}

.slide {Position: absolute; Height: 100%; Width: 100%; Left: 0px; top: 9999px; Background: ; transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out;}

.slide:target {
Top: 0;
transition: all 1s ease-in-out;
z-index: 1; }

.friend {
Height: 80px;
Width: 98%;
}

.fpic {
Position: absolute;
Left: 3px;
Top 9px;
Height: 55px;
Width: 55px;
Border: solid 3px #D74C59;
Border-radius: 100%;
}

.finfo {
Position: absolute;
right: 3px;
Top 0px;
Height: 65px;
Width: 179px;
border: solid 1px #D74C59;
overflow: auto;
Font-size: 10px;
Line-height: 14px;
}

</style>

<div class="bar"></div>
<div class="container">
<div class="name">Mahiru Koizumi</div>
<img class="little" src="http://pm1.narvii.com/6193/00fb9e2b031f31ce678d8fc9bea12fcbb0150976_hq.jpg">
<div id="navbox">
 <div id="nav1"><a href="#1"><div class="c1"></div></a></div>
 <div id="nav2"><a href="#2"><div class="c2"></div></a></div>
 <div id="nav3"><a href="#3"><div class="c3"></div></a></div>
 <div id="nav4"><a href="#4"><div class="c4"></div></a></div>
</div>
<div class="quote">“Photos depict everything, whether it's beautiful or horrible. That's the truth contained in these images... That's why no matter what situation we're in, it's a photographer's duty to keep taking photos.”</div>

<div id="1" class="slide">
<div class="left">
<div class="title">Dossier</div>
<div class="imgb">
<center>
<img src="https://i.pinimg.com/236x/76/a6/d1/76a6d150b8afa1651d7ba434932d2206--mahiru-koizumi-cheese.jpg" class="imga">
<img src="https://s-media-cache-ak0.pinimg.com/236x/29/06/d0/2906d0520182a7e9ef38ed81f4f3cba0.jpg" class="imga">
<img src="http://ekladata.com/QW8Xnv3WscLTqEGdx0eOGXsup1w.png" class="imga">
</center></div>
<div class="data">
<table width="100%"><tr><td align="LEFT" width="50%" height="0">


<font color="#000" size="2">

Left:<br>

Left:<br>


Left:<br>


Left:<br>


Left:<br>


Left:<br>


Left:<br>



Left:<br>


Left:<br>


Left:</font>


</td>


<td align="right" width="50%" height="0">


<font color="#000" font size="2">

right<br>


right<br>


right<br>


right<br>


right<br>


right<br>


right<br>


right<br>


right<br>


right<br>






</font>


</td></tr></table>
</div>
</div>

<div class="right">
<div class="title">Inventory</div>
<div class="imgb">
<center>
<img src="https://s-media-cache-ak0.pinimg.com/originals/a7/01/35/a70135c31e8eb25bed59e9b8acb29a3f.jpg" class="imga">
<img src="https://i.imgur.com/mb2o6q9.jpg" class="imga">
<img src="http://images6.fanpop.com/image/photos/36400000/Mahiru-Koizumi-image-mahiru-koizumi-36498641-1000-716.jpg" class="imga">
</center></div>
<div class="data">
<b>bold</b> <i>itallic</i> <u>underline</u> <a href="" target="_blank">link</a>
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue vestibulum consequat. Vestibulum consequat tortor turpis, eget suscipit tortor maximus nec. Sed dignissim, odio at tincidunt condimentum, lacus nisi volutpat lectus, nec bibendum ligula diam eget turpis. Vestibulum cursus massa at nisi imperdiet, et gravida orci sodales. Nulla vehicula dapibus turpis eu auctor. Duis rutrum ligula sed magna tempor imperdiet. Quisque eleifend felis nec metus volutpat varius. Etiam ut tempus sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam nec scelerisque nulla, a consectetur arcu. Pellentesque nec auctor magna. Aenean elementum, quam eget dapibus lobortis, lacus massa pellentesque mauris, ac consectetur tortor tellus vitae diam. Sed fermentum varius ex, a luctus nunc pellentesque eu. Donec in tortor ac augue porttitor lobortis. Nunc nec massa enim. Quisque a tortor ac est sollicitudin tristique.

Aliquam ut nunc tincidunt, blandit quam id, malesuada nunc. Donec non massa ac magna volutpat ultricies. Mauris fermentum tortor id nisi pharetra, quis aliquam diam euismod. Nulla consectetur, urna quis dapibus pretium, sapien nulla luctus mauris, a luctus ligula velit sit amet tortor. Cras volutpat cursus arcu. Maecenas malesuada justo at felis faucibus gravida. Maecenas scelerisque rhoncus ex, a tincidunt purus dignissim venenatis. Duis et turpis ut leo condimentum hendrerit nec rutrum ex. Vivamus fringilla nisi non luctus ornare.

Fusce mauris mi, blandit non erat ut, laoreet ultrices lacus. Cras nec varius lorem. Nunc in risus nec mi lobortis ornare. Vestibulum finibus ultricies erat, quis lacinia nunc hendrerit non. Duis efficitur tortor eu turpis maximus, cursus euismod turpis convallis. Proin sodales leo arcu, vel laoreet diam feugiat a. Ut at dolor eu massa finibus pellentesque. Cras tempus lectus eget sem posuere accumsan. Duis feugiat massa vitae magna venenatis pretium. Suspendisse convallis massa a arcu imperdiet congue. Sed massa dui, feugiat fermentum augue ac, aliquet vestibulum arcu. Cras at vestibulum leo, a bibendum tortor.
</div>
</div>
</div>

<div id="2" class="slide">
<div class="left">
<div class="title">Personality</div>
<div class="imgb">
<center>
<img src="https://static.tumblr.com/a94ee65b146ed9f5b0a67ffbe884ca4c/eqiflac/Dt9omk90z/tumblr_static_filename_640_v2.jpg" class="imga">
<img src="https://vignette3.wikia.nocookie.net/thedreamdimension/images/8/83/Mahiru-Koizumi-dangan-ronpa-37501340-500-710.jpg/revision/latest?cb=20150409220853" class="imga">
<img src="https://s-media-cache-ak0.pinimg.com/736x/99/0b/f0/990bf0d413067f4bc0c5c6473c7da4ce--mahiru-koizumi-sword-art.jpg" class="imga">
</center></div>
<div class="data">
<b>bold</b> <i>itallic</i> <u>underline</u> <a href="" target="_blank">link</a>
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue vestibulum consequat. Vestibulum consequat tortor turpis, eget suscipit tortor maximus nec. Sed dignissim, odio at tincidunt condimentum, lacus nisi volutpat lectus, nec bibendum ligula diam eget turpis. Vestibulum cursus massa at nisi imperdiet, et gravida orci sodales. Nulla vehicula dapibus turpis eu auctor. Duis rutrum ligula sed magna tempor imperdiet. Quisque eleifend felis nec metus volutpat varius. Etiam ut tempus sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam nec scelerisque nulla, a consectetur arcu. Pellentesque nec auctor magna. Aenean elementum, quam eget dapibus lobortis, lacus massa pellentesque mauris, ac consectetur tortor tellus vitae diam. Sed fermentum varius ex, a luctus nunc pellentesque eu. Donec in tortor ac augue porttitor lobortis. Nunc nec massa enim. Quisque a tortor ac est sollicitudin tristique.

Aliquam ut nunc tincidunt, blandit quam id, malesuada nunc. Donec non massa ac magna volutpat ultricies. Mauris fermentum tortor id nisi pharetra, quis aliquam diam euismod. Nulla consectetur, urna quis dapibus pretium, sapien nulla luctus mauris, a luctus ligula velit sit amet tortor. Cras volutpat cursus arcu. Maecenas malesuada justo at felis faucibus gravida. Maecenas scelerisque rhoncus ex, a tincidunt purus dignissim venenatis. Duis et turpis ut leo condimentum hendrerit nec rutrum ex. Vivamus fringilla nisi non luctus ornare.

Fusce mauris mi, blandit non erat ut, laoreet ultrices lacus. Cras nec varius lorem. Nunc in risus nec mi lobortis ornare. Vestibulum finibus ultricies erat, quis lacinia nunc hendrerit non. Duis efficitur tortor eu turpis maximus, cursus euismod turpis convallis. Proin sodales leo arcu, vel laoreet diam feugiat a. Ut at dolor eu massa finibus pellentesque. Cras tempus lectus eget sem posuere accumsan. Duis feugiat massa vitae magna venenatis pretium. Suspendisse convallis massa a arcu imperdiet congue. Sed massa dui, feugiat fermentum augue ac, aliquet vestibulum arcu. Cras at vestibulum leo, a bibendum tortor.
</div>
</div>

<div class="right">
<div class="title">Background</div>
<div class="imgb">
<center>
<img src="https://i.pinimg.com/236x/db/85/3a/db853a0348ad9286e3845a77dfda1b5e--mahiru-koizumi-super-danganronpa.jpg" class="imga">
<img src="https://s-media-cache-ak0.pinimg.com/736x/22/2a/9e/222a9eabcae2d465621b4432788a5100.jpg" class="imga">
<img src="https://i.pinimg.com/736x/54/57/d2/5457d2f564aae35b7c3515e30d789e2d--mahiru-koizumi-super-danganronpa.jpg" class="imga">
</center></div>
<div class="data">
<b>bold</b> <i>itallic</i> <u>underline</u> <a href="" target="_blank">link</a>
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue vestibulum consequat. Vestibulum consequat tortor turpis, eget suscipit tortor maximus nec. Sed dignissim, odio at tincidunt condimentum, lacus nisi volutpat lectus, nec bibendum ligula diam eget turpis. Vestibulum cursus massa at nisi imperdiet, et gravida orci sodales. Nulla vehicula dapibus turpis eu auctor. Duis rutrum ligula sed magna tempor imperdiet. Quisque eleifend felis nec metus volutpat varius. Etiam ut tempus sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam nec scelerisque nulla, a consectetur arcu. Pellentesque nec auctor magna. Aenean elementum, quam eget dapibus lobortis, lacus massa pellentesque mauris, ac consectetur tortor tellus vitae diam. Sed fermentum varius ex, a luctus nunc pellentesque eu. Donec in tortor ac augue porttitor lobortis. Nunc nec massa enim. Quisque a tortor ac est sollicitudin tristique.

Aliquam ut nunc tincidunt, blandit quam id, malesuada nunc. Donec non massa ac magna volutpat ultricies. Mauris fermentum tortor id nisi pharetra, quis aliquam diam euismod. Nulla consectetur, urna quis dapibus pretium, sapien nulla luctus mauris, a luctus ligula velit sit amet tortor. Cras volutpat cursus arcu. Maecenas malesuada justo at felis faucibus gravida. Maecenas scelerisque rhoncus ex, a tincidunt purus dignissim venenatis. Duis et turpis ut leo condimentum hendrerit nec rutrum ex. Vivamus fringilla nisi non luctus ornare.

Fusce mauris mi, blandit non erat ut, laoreet ultrices lacus. Cras nec varius lorem. Nunc in risus nec mi lobortis ornare. Vestibulum finibus ultricies erat, quis lacinia nunc hendrerit non. Duis efficitur tortor eu turpis maximus, cursus euismod turpis convallis. Proin sodales leo arcu, vel laoreet diam feugiat a. Ut at dolor eu massa finibus pellentesque. Cras tempus lectus eget sem posuere accumsan. Duis feugiat massa vitae magna venenatis pretium. Suspendisse convallis massa a arcu imperdiet congue. Sed massa dui, feugiat fermentum augue ac, aliquet vestibulum arcu. Cras at vestibulum leo, a bibendum tortor.
</div>
</div>
</div>


<div id="3" class="slide">
<div class="left">
<div class="title">Friends</div>
<div class="imgb">
<center>
<img src="https://i.pinimg.com/736x/59/b7/5f/59b75fc1adbb6e719bbffe9e5e001891--mahiru-koizumi-book.jpg" class="imga">
<img src="https://s-media-cache-ak0.pinimg.com/originals/3c/dd/99/3cdd99b35b41ee66e5181ed44888f90b.jpg" class="imga">
<img src="https://uploads.scratch.mit.edu/users/avatars/232/1345.png" class="imga">
</center></div>
<div class="data">
<div class="friend"><img class="fpic"><div class="finfo"><h2>Name</h2>
Information here.</div></div><br>
<div class="friend"><img class="fpic"><div class="finfo"><h2>Name</h2>
Information here.</div></div><br><div class="friend"><img class="fpic"><div class="finfo"><h2>Name</h2>
Information here.</div></div><br>
<div class="friend"><img class="fpic"><div class="finfo"><h2>Name</h2>
Information here.</div></div><br>
<div class="friend"><img class="fpic"><div class="finfo"><h2>Name</h2>
Information here.</div></div><br>
<div class="friend"><img class="fpic"><div class="finfo"><h2>Name</h2>
Information here.</div></div><br>
<div class="friend"><img class="fpic"><div class="finfo"><h2>Name</h2>
Information here.</div></div><br>
<div class="friend"><img class="fpic"><div class="finfo"><h2>Name</h2>
Information here.</div></div><br>
<div class="friend"><img class="fpic"><div class="finfo"><h2>Name</h2>
Information here.</div></div><br>
<div class="friend"><img class="fpic"><div class="finfo"><h2>Name</h2>
Information here.</div></div><br>
<div class="friend"><img class="fpic"><div class="finfo"><h2>Name</h2>
Information here.</div></div><br>
<div class="friend"><img class="fpic"><div class="finfo"><h2>Name</h2>
Information here.</div></div><br>
</div>
</div>

<div class="right">
<div class="title">Out Of Cameras</div>
<div class="imgb">
<center>
<img src="https://i.imgur.com/edhFFMM.jpg" class="imga">
<img src="https://i.pinimg.com/736x/df/95/cb/df95cb68d577e30fd8bf608e8d793d8d--mahiru-koizumi-trigger-happy.jpg" class="imga">
<img src="http://static.tumblr.com/032a780e04647045ed6f4752092ad463/8k5nlzj/k9nmqhif9/tumblr_static_tumblr_mlgqhvfmwr1r0va9jo1_500.png" class="imga">
</center></div>
<div class="data">
<b>bold</b> <i>itallic</i> <u>underline</u> <a href="" target="_blank">link</a>
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue vestibulum consequat. Vestibulum consequat tortor turpis, eget suscipit tortor maximus nec. Sed dignissim, odio at tincidunt condimentum, lacus nisi volutpat lectus, nec bibendum ligula diam eget turpis. Vestibulum cursus massa at nisi imperdiet, et gravida orci sodales. Nulla vehicula dapibus turpis eu auctor. Duis rutrum ligula sed magna tempor imperdiet. Quisque eleifend felis nec metus volutpat varius. Etiam ut tempus sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam nec scelerisque nulla, a consectetur arcu. Pellentesque nec auctor magna. Aenean elementum, quam eget dapibus lobortis, lacus massa pellentesque mauris, ac consectetur tortor tellus vitae diam. Sed fermentum varius ex, a luctus nunc pellentesque eu. Donec in tortor ac augue porttitor lobortis. Nunc nec massa enim. Quisque a tortor ac est sollicitudin tristique.

Aliquam ut nunc tincidunt, blandit quam id, malesuada nunc. Donec non massa ac magna volutpat ultricies. Mauris fermentum tortor id nisi pharetra, quis aliquam diam euismod. Nulla consectetur, urna quis dapibus pretium, sapien nulla luctus mauris, a luctus ligula velit sit amet tortor. Cras volutpat cursus arcu. Maecenas malesuada justo at felis faucibus gravida. Maecenas scelerisque rhoncus ex, a tincidunt purus dignissim venenatis. Duis et turpis ut leo condimentum hendrerit nec rutrum ex. Vivamus fringilla nisi non luctus ornare.

Fusce mauris mi, blandit non erat ut, laoreet ultrices lacus. Cras nec varius lorem. Nunc in risus nec mi lobortis ornare. Vestibulum finibus ultricies erat, quis lacinia nunc hendrerit non. Duis efficitur tortor eu turpis maximus, cursus euismod turpis convallis. Proin sodales leo arcu, vel laoreet diam feugiat a. Ut at dolor eu massa finibus pellentesque. Cras tempus lectus eget sem posuere accumsan. Duis feugiat massa vitae magna venenatis pretium. Suspendisse convallis massa a arcu imperdiet congue. Sed massa dui, feugiat fermentum augue ac, aliquet vestibulum arcu. Cras at vestibulum leo, a bibendum tortor.
</div>
</div>
</div>