💻|How to: 'Before you proceed' profile disclaimer!
Hello again! This is part 2 of the "How to:" HTML blog posts I'm doing. although I'll be real for a sec, its not really a 'how to' but more like a "copy paste this into your about me section and good luck lol" blog. This one is really basic, since I'm not necessarily good at this html thing (a newbie), you'll might want to spruce things up a bit with this one!
That being said, here's the image for what'll show up when someone clicks on your profile!
EVERYTHING is customizable here, so I recommend using the website Spacehey CSS Test in order to change whatever you want without having to save your profile over and over again to see if it worked.
even if all gifs, images, colors, and fonts are able to be changed, everything else you may not want to touch (I'm not stopping you though)
The Yellow is the gifs that you might want to change, the Green are the background images, and the Pink is the font link + font family, and finally, the Red is the text you'll want to replace. just insert anything into those texts, like disclaimers, warnings, or a tiny DNI list. (emphasis on the tiny, don't make it too long!) I do NOT recommend putting what your page is about or anything of your about me, since that essentially ruins the whole point of having this disclaimer page! Remember, once you insert these into your about me the colors wont stay, so be sure to know where and what you want to replace!
<<div id="profile">
<img src="https://64.media.tumblr.com/ba2d3514f9a20fa27e7d760802be9db3/6b71fdffdd9da139-a4/s250x400/f86f0d77f48fd04a824c8e21d0e36030446018ae.gifv"/>
<img src="https://64.media.tumblr.com/4b87f0e7a96639425ac9189dfd18e729/7ed8a1a0d702491a-ac/s100x200/df0c87e1b2c1260406309f4d51713c5158a3af38.gifv" height="266"/>
<h1><img src="https://64.media.tumblr.com/2f237b8d757da00950cc89a7bf6623fd/4c565790f5d81a1f-c6/s75x75_c1/d167c7f69f24f5574a1d759fa5b02d785d3f4bc9.gifv" height="30" /> Before you proceed!</h1>
<p>This profile [Insert Text]</p>
<ul>
<li>Insert Text</li>
<li>Insert Text</li>
<li>Insert Text</li>
<li>Insert Text</li>
</ul>
<a href="#profile"><img src="https://64.media.tumblr.com/a0f40c9dd868ac57b9d63a5b9fa863af/b8c367d069f8d22c-6e/s75x75_c1/5c53ec98d3aee823f7441ece15cd5d88a5da2e75.gifv" height="20" /> Proceed</a>
<a href="https://spacehey.com/home"><img src="https://64.media.tumblr.com/a0f40c9dd868ac57b9d63a5b9fa863af/b8c367d069f8d22c-6e/s75x75_c1/5c53ec98d3aee823f7441ece15cd5d88a5da2e75.gifv" height="20" /> Go Home</a>
<img src="https://64.media.tumblr.com/ba2d3514f9a20fa27e7d760802be9db3/6b71fdffdd9da139-a4/s250x400/f86f0d77f48fd04a824c8e21d0e36030446018ae.gifv"/>
<img src="https://64.media.tumblr.com/551f91ea2a9c1ff522df4cf2ce1af513/tumblr_mpc6pjjv9Z1su5dgwo1_400.gifv"/>
<link href='https://fonts.googleapis.com/css?family=Abel' rel='stylesheet'>
</div>
<style>
:root {
 --warning-background-color: white;
 --warning-text-color: black;
}
#profile {
 position: fixed;
 z-index: 100;
 top: 0;Â
 left: 0;
 width: 100vw;
 height: 100vh;
 padding: 50px 100px;
 font-size: 200%;
 background: url(https://i.pinimg.com/474x/43/b8/b3/43b8b347d83c776e0dfc2fcf61608d97.jpg) ;
 color: black;
 overflow-y: scroll;
 opacity: 1;
 transition: .2s;
}
#profile > * {
 width: 100%;
 max-width: 700px!important;
 margin: 20px auto;
 display: block;
}
#profile:target {
 opacity: 0;
 visibility: hidden;
}
#profile > a {
 text-align: center;
 font-weight: bold;
}
body {
  font-family: 'Abel';font-size: 22px;
}
#profile > ul {
 padding: 10px 50px;
 border: 4px inset;
 background: url(https://i.pinimg.com/236x/c0/93/25/c0932547bfcb7293823b91754e824e66.jpg) ;
}
</style>
Since this is more of a base than anything, no creds are needed, although apprieciated!
Report Blog Entry
Comments
Displaying 1 of 1 comments ( View all | Add Comment )
MAKO ♪
I love the way u format the code and colour it !!!! Its so awesum :D
TYSM MAKO💯
by Koda; ; Report