Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /* Last Update: 01/02/19 */
- /* PAGE BACKGROUND AND FONT */
- body {
- background:#000 url(http://wallpapercave.com/wp/Np83gl0.jpg) fixed;
- background-size:cover;
- font-family:'Kalam',serif;
- font-size:105%;
- }
- #title {
- font-family:serif;
- }
- /* MAIN DISPLAY COLORS */
- .color, .equip img {
- background-color:#4a1b10;
- border:2px solid #9e686b;
- box-shadow:0 0 4px #9e686b,
- 0 0 10px #9e686b;
- color:#fff;
- }
- #title {
- color:#fff;
- text-shadow:0 0 5px #8b0000;
- }
- #navbar {
- background:radial-gradient(ellipse at 100% 42%, transparent 58%, #4b0102 64%, #260000 77%);
- background:-o-radial-gradient(ellipse at 100% 42%, transparent 58%, #4b0102 64%, #260000 77%);
- background:-moz-radial-gradient(ellipse at 100% 42%, transparent 58%, #4b0102 64%, #260000 77%);
- background:-webkit-radial-gradient(ellipse at 100% 42%, transparent 58%, #4b0102 64%, #260000 77%);
- }
- #navbar a {
- color:#ddd;
- text-shadow:0 0 5px #4b0102;
- }
- #navbar a:hover {
- color:#fff;
- }
- a {
- text-decoration:none;
- color:#00bfff;
- text-shadow:0 0 2px #fff;
- }
- /* GOOGLE CHROME SCROLLBARS */
- ::-webkit-scrollbar {
- width:8px;
- height:8px;
- background-color:transparent;
- }
- ::-webkit-scrollbar-thumb {
- background-color:#ffffff;
- border-radius:5px;
- }
- /* CSS MEAT */
- #title {
- z-index:2;
- position:fixed;
- top:5%;
- left:13%;
- font-size:7.4vh;
- font-weight:bold;
- }
- #mugshot {
- z-index:1;
- position:fixed;
- top:0;
- height:100%;
- left:44%
- }
- #navbar {
- z-index:4;
- position:fixed;
- left:16%;
- bottom:5.5%;
- height:48%;
- width:38%;
- padding:4% 2% 0 2%;
- border-radius:50%;
- font-size:7vh;
- line-height:7.5vh;
- }
- #navbar a {
- position:relative;
- font-weight:bold;
- }
- #navbar a:hover {
- font-size:7.2vh;
- }
- .infobox {
- z-index:3;
- position:fixed;
- bottom:0;
- right:16%;
- height:30%;
- width:32%;
- padding:1%;
- border-radius:5px;
- opacity:0;
- overflow-y:auto;
- transition:0.8s;
- -o-transition:0.8s;
- -moz-transition:0.8s;
- -webkit-transition:0.8s;
- }
- .infobox:target {
- z-index:5;
- bottom:5%;
- opacity:0.9;
- }
- .infobox img {
- width:100%;
- }
- .equip, .connection {
- position:relative;
- width:100%;
- }
- .equip img {
- position:relative;
- height:4vw;
- width:4vw;
- border-radius:50%;
- }
- .equip h3 {
- position:absolute;
- top:1vw;
- left:5.5vw;
- margin:0;
- line-height:4vw;
- }
- .connection {
- height:auto;
- margin:2%;
- }
- .connection img {
- position:relative;
- width:50%;
- }
- .connection h3 {
- position:absolute;
- top:50%;
- right:0;
- width:50%;
- margin:0;
- text-align:center;
- transform:translateY(-50%);
- -o-transform:translateY(-50%);
- -moz-transform:translateY(-50%);
- -webkit-transform:translateY(-50%);
- }
- p {
- text-indent:5%;
- }
- #credit {
- position:fixed;
- height:17px;
- right:1%;
- bottom:0%;
- background-color:#ffffff;
- border-radius:5px;
- }
- HTML
- <link href="https://fonts.googleapis.com/css?family=Kalam:300" rel="stylesheet">
- <div id="title">
- <i>DANTE</i>
- </div>
- <img src="http://i613.photobucket.com/albums/tt217/sparda-kun/412394DevilMayCryFemaleDanteRUBEN.jpg" alt="" id="mugshot"/>
- <div id="navbar">
- <i>
- <a href="#01" style="left:12%;">STYLE</a><br/>
- <a href="#02" style="left:4%;">EQUIP</a><br/>
- <a href="#03">ITEM</a><br/>
- <a href="#04" style="left:6%;">ACTION</a><br/>
- <a href="#05" style="left:21%;">GUNS</a><br/>
- <a href="#00" style="left:44%;">EXIT</a>
- </i>
- </div>
- <div class="color infobox" id="01">
- <h2>Stats</h2>
- <p style="text-indent:0;">
- <b>Name:</b> Stat here
- <br/>
- <b>Species:</b> Stat here
- <br/>
- <b>Gender:</b> Stat here
- <br/>
- <b>Age:</b> Stat here
- <br/>
- <b>Hair:</b> Stat here
- <br/>
- <b>Eyes:</b> Stat here
- <br/>
- <b>Height:</b> Stat here
- <br/>
- <b>Weight:</b> Stat here
- <br/>
- <b>Build:</b> Stat here
- <br/>
- <b>Orientation:</b> Stat here
- </p>
- </div>
- <div class="color infobox" id="02">
- <h2>Equipment</h2>
- <div class="equip"><img src="http://vignette2.wikia.nocookie.net/p__/images/5/57/Dante-rebellion-devil-may-cry-sword.jpg/revision/latest?cb=20101114035203&path-prefix=protagonist"/><h3>Rebellion</h3></div>
- <p>
- Description here
- </p>
- <div class="equip"><img src="http://www.imfdb.org/images/thumb/2/2f/Ebony%26Ivory.jpg/400px-Ebony%26Ivory.jpg"/><h3>Ebony & Ivory</h3></div>
- <p>
- Description here
- </p>
- </div>
- <div class="color infobox" id="03">
- <h2>Story</h2>
- <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>
- <a href="https://s-media-cache-ak0.pinimg.com/236x/48/f5/77/48f5778e2e42ee5df34b098ffce5cf26.jpg" target="_blank">Link</a>
- <p>
- Paragraph two.
- </p>
- <p>
- Paragraph three.
- </p>
- <p>
- Paragraph four.
- </p>
- </div>
- <div class="color infobox" id="04">
- <h2>Connections</h2>
- <div class="connection">
- <img src="http://images6.fanpop.com/image/photos/38900000/devil-may-cry-4-trish-trish-38974420-1024-515.png"/>
- <h3>Trish</h3>
- </div>
- <div class="connection">
- <img src="http://i16.photobucket.com/albums/b3/crystalletje/dmc3chara-lady.jpg~original"/>
- <h3>Lady</h3>
- </div>
- <div class="connection">
- <img src="https://s-media-cache-ak0.pinimg.com/736x/6f/9e/79/6f9e7942397494e06f09f7a25188f657.jpg"/>
- <h3>Nero</h3>
- </div>
- </div>
- <div class="color infobox" id="05">
- <h2>OOC</h2>
- <ul>
- <li>Bullet one</li>
- <li>Bullet two</li>
- <li>Bullet three</li>
- <li>Bullet four</li>
- <li>Bullet five</li>
- <li>Bullet six</li>
- <li>Bullet seven</li>
- <li>Bullet eight</li>
- </ul>
- </div>
- <a href="http://bit.do/eePwi" target="_blank" title="GS#07">
- <img src="https://i.imgur.com/loleTtJ.png" id="credit"/>
- </a>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement