HTML test thread

ViAdvena · Sep 11, 2016

This is where I will try ~~every html tutorial under the sun~~ post format that works with RPN.

Let's pray that the site doesn't break in the process.

Feel free to use/modify/taking apart the code here

ViAdvena · Sep 11, 2016

/*CSS here*/

/*Overall tab. Edit tab width and alignment here*/
.tabber{
width:70%;
margin:auto;
}

/*Edit tab label appearance here*/
.tabber input {display: none;}

.tabber label {
background: #EBEBEB;
font-weight: bold;
text-align: center;
border-radius:15px 0;

display: inline-block;
padding: 15px 25px;
transition:0.5s;
}
/*To make label change with hover*/
.tabber label:hover {
color: #95C130;
cursor: pointer;
}
/*To make label change after click*/
.tabber input:checked + label {
background: #95C130;
color: #fff;
}

/*Edit content appearance here*/
.tabber .content {
border: 1px solid #ccc;
border-radius:0 25px; /*rounding border edge*/
}
.tabber .content > div {
display: none;
padding: 20px 25px 5px;
animation: scale 0.5s ease-in-out;
}
@keyframes scale {
0% {opacity: 0;}
100% {opacity: 1;}
}
@media (max-width: 400px) {
.tabber {width:100%;}
.tabber .content {max-height:400px; overflow:auto;}
}

/*display tab content*/
.tabber #tab1:checked ~ .content #content1,
.tabber #tab2:checked ~ .content #content2,
.tabber #tab3:checked ~ .content #content3,
.tabber #tab4:checked ~ .content #content4 {
display: block;
}

Tab one Tab two Tab three Tab four

This is a pure CSS tabs without javascript

The code is a bit longer than the tabs with javascript

But the best part of pure CSS tab is that you can edit the content without having to go to source mode.

(Obligatory lorem ipsum for length test)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ultrices consectetur euismod. Suspendisse commodo odio eget eleifend maximus. Sed rutrum laoreet massa, in varius erat accumsan ac. Pellentesque enim leo, fermentum eget nulla a, viverra accumsan magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla auctor nisl arcu, nec vestibulum arcu lobortis vel. Proin vel tincidunt augue.

Sed ultricies fringilla ullamcorper. Phasellus a vehicula purus, sit amet vulputate elit. Nam tempor tellus nec velit dictum accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam consequat quam at ante commodo laoreet. Vestibulum interdum turpis at iaculis efficitur. Praesent commodo ligula nunc, in sollicitudin ante tempor ac. Cras vestibulum nec ex sit amet porttitor. Aenean euismod tristique mi et semper. Quisque vitae interdum erat. Praesent viverra volutpat interdum. Aenean elementum dui id tellus mattis ultricies.

Nam urna nulla, varius vel mi et, vestibulum malesuada odio. Nunc luctus enim vitae massa sodales, ac eleifend libero efficitur. Cras lacinia eget sapien tempor consectetur. Pellentesque sit amet sem eu eros maximus rhoncus. Sed in massa urna. Sed convallis nibh in hendrerit efficitur. Fusce semper tincidunt orci, eu porttitor nibh aliquet sit amet. Nulla congue mauris felis, viverra scelerisque ex dignissim vitae. Ut in est rutrum, laoreet tellus sit amet, ornare nisi. Etiam ac tellus sapien. Nulla semper augue lorem, convallis mollis elit luctus nec. Fusce suscipit luctus nulla nec pretium. Aenean sapien ipsum, dignissim eget augue nec, rutrum aliquam felis. Integer vel consectetur tellus, non condimentum tellus. Aenean id turpis et dolor laoreet vehicula. Aliquam lobortis efficitur diam ac efficitur.

Code

Code:

<p>
	&nbsp;
</p>

<style type="text/css">  /*CSS here*/

/*Overall tab. Edit tab width and alignment here*/
.tabber{ 
	width:70%; 
	margin:auto; 
}

/*Edit tab label appearance here*/
.tabber input {display: none;}

.tabber label {
	background: #EBEBEB; 
	font-weight: bold; 
	text-align: center;
	border-radius:15px 0;
	
	display: inline-block; 
	padding: 15px 25px;  
	transition:0.5s;
}
/*To make label change with hover*/
.tabber label:hover {
	color: #95C130; 
	cursor: pointer;
}
/*To make label change after click*/
.tabber input:checked + label {
	background: #95C130; 
	color: #fff;
}

/*Edit content appearance here*/
.tabber .content {
	border: 1px solid #ccc;
	border-radius:0 25px; /*rounding border edge*/
}
.tabber .content > div {
	display: none; 
	padding: 20px 25px 5px;
	animation: scale 0.5s ease-in-out;
}
@keyframes scale {
  0% {opacity: 0;} 
  100% {opacity: 1;}
}
@media (max-width: 400px) { /*For mobile*/
	.tabber {width:100%;}  
	.tabber .content {max-height:400px; overflow:auto;}
}

/*display tab content*/
.tabber #tab1:checked ~ .content #content1,
.tabber #tab2:checked ~ .content #content2,
.tabber #tab3:checked ~ .content #content3,
.tabber #tab4:checked ~ .content #content4 {
  display: block;
}
</style>

<div class="tabber">
	<!--Label for tabs. Add new tab here. Don't forget to edit display tab content in the CSS-->
	<input checked="checked" id="tab1" name="tabs" type="radio"> 
	<label for="tab1">Tab one</label> 
	
	<input id="tab2" name="tabs" type="radio"> 
	<label for="tab2">Tab two</label> 
	
	<input id="tab3" name="tabs" type="radio"> 
	<label for="tab3">Tab three</label> 
	
	<input id="tab4" name="tabs" type="radio"> 
	<label for="tab4">Tab four</label> 
	
	<!--Content of tabs. Add new tab contebt here-->
	<div class="content">
		<div id="content1">
			<p>
				This is a pure CSS tabs without javascript
			</p>
		</div>

		<div id="content2">
			<p>
				The code is a bit longer than the tabs with javascript
			</p>
		</div>

		<div id="content3">
			<p>
				But the best part of pure CSS tab is that you can edit the content without having to go to source mode. You can even edit the tab label. Just double click it.
			</p>
		</div>

		<div id="content4">
			<p>
				(Obligatory lorem ipsum for length test)
			</p>

			<p>
				&nbsp;
			</p>

			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ultrices consectetur euismod. Suspendisse commodo odio eget eleifend maximus. Sed rutrum laoreet massa, in varius erat accumsan ac. Pellentesque enim leo, fermentum eget nulla a, viverra accumsan magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla auctor nisl arcu, nec vestibulum arcu lobortis vel. Proin vel tincidunt augue.
			</p>

			<p>
				&nbsp;
			</p>

			<p>
				Sed ultricies fringilla ullamcorper. Phasellus a vehicula purus, sit amet vulputate elit. Nam tempor tellus nec velit dictum accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam consequat quam at ante commodo laoreet. Vestibulum interdum turpis at iaculis efficitur. Praesent commodo ligula nunc, in sollicitudin ante tempor ac. Cras vestibulum nec ex sit amet porttitor. Aenean euismod tristique mi et semper. Quisque vitae interdum erat. Praesent viverra volutpat interdum. Aenean elementum dui id tellus mattis ultricies.
			</p>

			<p>
				&nbsp;
			</p>

			<p>
				Nam urna nulla, varius vel mi et, vestibulum malesuada odio. Nunc luctus enim vitae massa sodales, ac eleifend libero efficitur. Cras lacinia eget sapien tempor consectetur. Pellentesque sit amet sem eu eros maximus rhoncus. Sed in massa urna. Sed convallis nibh in hendrerit efficitur. Fusce semper tincidunt orci, eu porttitor nibh aliquet sit amet. Nulla congue mauris felis, viverra scelerisque ex dignissim vitae. Ut in est rutrum, laoreet tellus sit amet, ornare nisi. Etiam ac tellus sapien. Nulla semper augue lorem, convallis mollis elit luctus nec. Fusce suscipit luctus nulla nec pretium. Aenean sapien ipsum, dignissim eget augue nec, rutrum aliquam felis. Integer vel consectetur tellus, non condimentum tellus. Aenean id turpis et dolor laoreet vehicula. Aliquam lobortis efficitur diam ac efficitur.
			</p>
		</div>
	</div>
</div>

<p>
	&nbsp;
</p>

Life. · Sep 11, 2016

ViAdvena said:
/*CSS here*/

/*Overall tab. Edit tab width and alignment here*/
.tabber{
width:70%;
margin:auto;
}

/*Edit tab label appearance here*/
.tabber input {display: none;}

.tabber label {
background: #EBEBEB;
font-weight: bold;
text-align: center;
border-radius:15px 0;

display: inline-block;
padding: 15px 25px;
transition:0.5s;
}
/*To make label change with hover*/
.tabber label:hover {
color: #95C130;
cursor: pointer;
}
/*To make label change after click*/
.tabber input:checked + label {
background: #95C130;
color: #fff;
}

/*Edit content appearance here*/
.tabber .content {
border: 1px solid #ccc;
border-radius:0 25px; /*rounding border edge*/
}
.tabber .content > div {
display: none;
padding: 20px 25px 5px;
animation: scale 0.5s ease-in-out;
}
@keyframes scale {
0% {opacity: 0;}
100% {opacity: 1;}
}
@media (max-width: 400px) {
.tabber {width:100%;}
.tabber .content {max-height:400px; overflow:auto;}
}

/*display tab content*/
.tabber #tab1:checked ~ .content #content1,
.tabber #tab2:checked ~ .content #content2,
.tabber #tab3:checked ~ .content #content3,
.tabber #tab4:checked ~ .content #content4 {
display: block;
}

Tab one Tab two Tab three Tab four

This is a pure CSS tabs without javascript

The code is a bit longer than the tabs with javascript

But the best part of pure CSS tab is that you can edit the content without having to go to source mode.

(Obligatory lorem ipsum for length test)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ultrices consectetur euismod. Suspendisse commodo odio eget eleifend maximus. Sed rutrum laoreet massa, in varius erat accumsan ac. Pellentesque enim leo, fermentum eget nulla a, viverra accumsan magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla auctor nisl arcu, nec vestibulum arcu lobortis vel. Proin vel tincidunt augue.

Sed ultricies fringilla ullamcorper. Phasellus a vehicula purus, sit amet vulputate elit. Nam tempor tellus nec velit dictum accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam consequat quam at ante commodo laoreet. Vestibulum interdum turpis at iaculis efficitur. Praesent commodo ligula nunc, in sollicitudin ante tempor ac. Cras vestibulum nec ex sit amet porttitor. Aenean euismod tristique mi et semper. Quisque vitae interdum erat. Praesent viverra volutpat interdum. Aenean elementum dui id tellus mattis ultricies.

Nam urna nulla, varius vel mi et, vestibulum malesuada odio. Nunc luctus enim vitae massa sodales, ac eleifend libero efficitur. Cras lacinia eget sapien tempor consectetur. Pellentesque sit amet sem eu eros maximus rhoncus. Sed in massa urna. Sed convallis nibh in hendrerit efficitur. Fusce semper tincidunt orci, eu porttitor nibh aliquet sit amet. Nulla congue mauris felis, viverra scelerisque ex dignissim vitae. Ut in est rutrum, laoreet tellus sit amet, ornare nisi. Etiam ac tellus sapien. Nulla semper augue lorem, convallis mollis elit luctus nec. Fusce suscipit luctus nulla nec pretium. Aenean sapien ipsum, dignissim eget augue nec, rutrum aliquam felis. Integer vel consectetur tellus, non condimentum tellus. Aenean id turpis et dolor laoreet vehicula. Aliquam lobortis efficitur diam ac efficitur.

Code

<p>
 
</p>

<style type="text/css"> /*CSS here*/

/*Overall tab. Edit tab width and alignment here*/
.tabber{
width:70%;
margin:auto;
}

/*Edit tab label appearance here*/
.tabber input {display: none;}

.tabber label {
background: #EBEBEB;
font-weight: bold;
text-align: center;
border-radius:15px 0;

display: inline-block;
padding: 15px 25px;
transition:0.5s;
}
/*To make label change with hover*/
.tabber label:hover {
color: #95C130;
cursor: pointer;
}
/*To make label change after click*/
.tabber input:checked + label {
background: #95C130;
color: #fff;
}

/*Edit content appearance here*/
.tabber .content {
border: 1px solid #ccc;
border-radius:0 25px; /*rounding border edge*/
}
.tabber .content > div {
display: none;
padding: 20px 25px 5px;
animation: scale 0.5s ease-in-out;
}
@keyframes scale {
0% {opacity: 0;}
100% {opacity: 1;}
}
@media (max-width: 400px) { /*For mobile*/
.tabber {width:100%;}
.tabber .content {max-height:400px; overflow:auto;}
}

/*display tab content*/
.tabber #tab1:checked ~ .content #content1,
.tabber #tab2:checked ~ .content #content2,
.tabber #tab3:checked ~ .content #content3,
.tabber #tab4:checked ~ .content #content4 {
display: block;
}
</style>

<div class="tabber">

<input checked="checked" id="tab1" name="tabs" type="radio">
<label for="tab1">Tab one</label>

<input id="tab2" name="tabs" type="radio">
<label for="tab2">Tab two</label>

<input id="tab3" name="tabs" type="radio">
<label for="tab3">Tab three</label>

<input id="tab4" name="tabs" type="radio">
<label for="tab4">Tab four</label>


<div class="content">
<div id="content1">
<p>
This is a pure CSS tabs without javascript
</p>
</div>

<div id="content2">
<p>
The code is a bit longer than the tabs with javascript
</p>
</div>

<div id="content3">
<p>
But the best part of pure CSS tab is that you can edit the content without having to go to source mode. You can even edit the tab label. Just double click it.
</p>
</div>

<div id="content4">
<p>
(Obligatory lorem ipsum for length test)
</p>

<p>
 
</p>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ultrices consectetur euismod. Suspendisse commodo odio eget eleifend maximus. Sed rutrum laoreet massa, in varius erat accumsan ac. Pellentesque enim leo, fermentum eget nulla a, viverra accumsan magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla auctor nisl arcu, nec vestibulum arcu lobortis vel. Proin vel tincidunt augue.
</p>

<p>
 
</p>

<p>
Sed ultricies fringilla ullamcorper. Phasellus a vehicula purus, sit amet vulputate elit. Nam tempor tellus nec velit dictum accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam consequat quam at ante commodo laoreet. Vestibulum interdum turpis at iaculis efficitur. Praesent commodo ligula nunc, in sollicitudin ante tempor ac. Cras vestibulum nec ex sit amet porttitor. Aenean euismod tristique mi et semper. Quisque vitae interdum erat. Praesent viverra volutpat interdum. Aenean elementum dui id tellus mattis ultricies.
</p>

<p>
 
</p>

<p>
Nam urna nulla, varius vel mi et, vestibulum malesuada odio. Nunc luctus enim vitae massa sodales, ac eleifend libero efficitur. Cras lacinia eget sapien tempor consectetur. Pellentesque sit amet sem eu eros maximus rhoncus. Sed in massa urna. Sed convallis nibh in hendrerit efficitur. Fusce semper tincidunt orci, eu porttitor nibh aliquet sit amet. Nulla congue mauris felis, viverra scelerisque ex dignissim vitae. Ut in est rutrum, laoreet tellus sit amet, ornare nisi. Etiam ac tellus sapien. Nulla semper augue lorem, convallis mollis elit luctus nec. Fusce suscipit luctus nulla nec pretium. Aenean sapien ipsum, dignissim eget augue nec, rutrum aliquam felis. Integer vel consectetur tellus, non condimentum tellus. Aenean id turpis et dolor laoreet vehicula. Aliquam lobortis efficitur diam ac efficitur.
</p>
</div>
</div>
</div>

<p>
 
</p>

Oh this looks pleasing on mobile! Although the tabs appear stacked but it works. Are all the tabs in a single line on a computer? (Just gonna follow this thread so I can see how coding appears on mobile :0)

ViAdvena · Sep 11, 2016

@LifeNovel Yep yep, the tab is single line on desktop. Good to know it looks neat on mobile

Life. · Sep 11, 2016

This is how it appears~

Fable · Sep 12, 2016

Sexy! It'll take me forever to reach the 5oo post requirement to play around with it myself. :\

ViAdvena · Sep 16, 2016

.gold {width:71%; }
.goldwrapper p {font-size:10pt; }
@media (max-width: 400px) {
.gold {width:100%; clear:both; display:inline-table;}
}

Aurelius

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ultrices consectetur euismod. Suspendisse commodo odio eget eleifend maximus. Sed rutrum laoreet massa, in varius erat accumsan ac. Pellentesque enim leo, fermentum eget nulla a, viverra accumsan magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla auctor nisl arcu, nec vestibulum arcu lobortis vel. Proin vel tincidunt augue.

Sed ultricies fringilla ullamcorper. Phasellus a vehicula purus, sit amet vulputate elit. Nam tempor tellus nec velit dictum accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam consequat quam at ante commodo laoreet. Vestibulum interdum turpis at iaculis efficitur. Praesent commodo ligula nunc, in sollicitudin ante tempor ac. Cras vestibulum nec ex sit amet porttitor. Aenean euismod tristique mi et semper. Quisque vitae interdum erat. Praesent viverra volutpat interdum. Aenean elementum dui id tellus mattis ultricies.

Nam urna nulla, varius vel mi et, vestibulum malesuada odio. Nunc luctus enim vitae massa sodales, ac eleifend libero efficitur. Cras lacinia eget sapien tempor consectetur. Pellentesque sit amet sem eu eros maximus rhoncus. Sed in massa urna. Sed convallis nibh in hendrerit efficitur. Fusce semper tincidunt orci, eu porttitor nibh aliquet sit amet. Nulla congue mauris felis, viverra scelerisque ex dignissim vitae. Ut in est rutrum, laoreet tellus sit amet, ornare nisi. Etiam ac tellus sapien. Nulla semper augue lorem, convallis mollis elit luctus nec. Fusce suscipit luctus nulla nec pretium. Aenean sapien ipsum, dignissim eget augue nec, rutrum aliquam felis. Integer vel consectetur tellus, non condimentum tellus. Aenean id turpis et dolor laoreet vehicula. Aliquam lobortis efficitur diam ac efficitur.

Sed ultricies fringilla ullamcorper. Phasellus a vehicula purus, sit amet vulputate elit. Nam tempor tellus nec velit dictum accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam consequat quam at ante commodo laoreet. Vestibulum interdum turpis at iaculis efficitur. Praesent commodo ligula nunc, in sollicitudin ante tempor ac. Cras vestibulum nec ex sit amet porttitor. Aenean euismod tristique mi et semper. Quisque vitae interdum erat. Praesent viverra volutpat interdum. Aenean elementum dui id tellus mattis ultricies.

Nam urna nulla, varius vel mi et, vestibulum malesuada odio. Nunc luctus enim vitae massa sodales, ac eleifend libero efficitur. Cras lacinia eget sapien tempor consectetur. Pellentesque sit amet sem eu eros maximus rhoncus. Sed in massa urna. Sed convallis nibh in hendrerit efficitur. Fusce semper tincidunt orci, eu porttitor nibh aliquet sit amet. Nulla congue mauris felis, viverra scelerisque ex dignissim vitae. Ut in est rutrum, laoreet tellus sit amet, ornare nisi. Etiam ac tellus sapien. Nulla semper augue lorem, convallis mollis elit luctus nec. Fusce suscipit luctus nulla nec pretium. Aenean sapien ipsum, dignissim eget augue nec, rutrum aliquam felis. Integer vel consectetur tellus, non condimentum tellus. Aenean id turpis et dolor laoreet vehicula. Aliquam lobortis efficitur diam ac efficitur.

Playing around with border-image and scroll (yes, those boxes are scrollable). A bit not mobile-frendly, but eh, at least it's still readable.

Code

Code:

<p>
	&nbsp;
</p>
<style type="text/css">
.gold {width:71%; }
.goldwrapper p {font-size:10pt; }
@media (max-width: 400px) {
.gold {width:100%;  clear:both;}
}</style>
<link href="https://fonts.googleapis.com/css?family=Alex+Brush" rel="stylesheet" type="text/css">
<p style=" font-family:'Alex Brush', Helvetica, sans-serif cursive; font-size:100pt; font-weight:normal; color:#f2b730; margin-left:10px;  margin-bottom:-30px; shape-image-threshold: 0.5; position:relative; float:left;  z-index:2; text-shadow: 0px 0px 2px #f2b730;">
	Aurelius
</p>

<div class="goldwrapper" style="border:50px solid #F2B730;  
border-image:url('http://i.imgur.com/Q3YCCpm.png') 50 50 round; 
border-image-outset: 10px;  
padding:10px; 
margin:auto; 
margin-top:15%; 
background-image:url('http://i.imgur.com/aeps0Do.png'); 
background-size:250px;">
	<p style="clear:both;">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ultrices consectetur euismod. Suspendisse commodo odio eget eleifend maximus. Sed rutrum laoreet massa, in varius erat accumsan ac. Pellentesque enim leo, fermentum eget nulla a, viverra accumsan magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla auctor nisl arcu, nec vestibulum arcu lobortis vel. Proin vel tincidunt augue.
	</p>

	<p>
		&nbsp;
	</p>
	<img alt="4slSlAr.png" src="https://www.rpnation.com/applications/core/interface/imageproxy/imageproxy.php?img=http://i.imgur.com/LKTWbtv.png&amp;key=25cc22319cca30630e1d8fb7e63879b4c53cfe5ce88ebde0e5faa104c05f9ec7" style="float:left; height:220px; position:relative; z-index:2;">
	<div class="gold" style="height:220px; margin:auto; padding:5px; border:40px solid #F2B730; border-image: url('http://i.imgur.com/Q3YCCpm.png') 50 50 round; box-sizing:content-box;">
		<div style="overflow:hidden;">
			<div style="height:210px;overflow:auto;  padding-right:15px; margin-right:-20px; text-align:right;">
				<p>
					Sed ultricies fringilla ullamcorper. Phasellus a vehicula purus, sit amet vulputate elit. Nam tempor tellus nec velit dictum accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam consequat quam at ante commodo laoreet. Vestibulum interdum turpis at iaculis efficitur. Praesent commodo ligula nunc, in sollicitudin ante tempor ac. Cras vestibulum nec ex sit amet porttitor. Aenean euismod tristique mi et semper. Quisque vitae interdum erat. Praesent viverra volutpat interdum. Aenean elementum dui id tellus mattis ultricies.
				</p>

				<p>
					Nam urna nulla, varius vel mi et, vestibulum malesuada odio. Nunc luctus enim vitae massa sodales, ac eleifend libero efficitur. Cras lacinia eget sapien tempor consectetur. Pellentesque sit amet sem eu eros maximus rhoncus. Sed in massa urna. Sed convallis nibh in hendrerit efficitur. Fusce semper tincidunt orci, eu porttitor nibh aliquet sit amet. Nulla congue mauris felis, viverra scelerisque ex dignissim vitae. Ut in est rutrum, laoreet tellus sit amet, ornare nisi. Etiam ac tellus sapien. Nulla semper augue lorem, convallis mollis elit luctus nec. Fusce suscipit luctus nulla nec pretium. Aenean sapien ipsum, dignissim eget augue nec, rutrum aliquam felis. Integer vel consectetur tellus, non condimentum tellus. Aenean id turpis et dolor laoreet vehicula. Aliquam lobortis efficitur diam ac efficitur.
				</p>
			</div>
		</div>
	</div>

	<p>
		&nbsp;
	</p>
	<img alt="4slSlAr.png" src="https://www.rpnation.com/applications/core/interface/imageproxy/imageproxy.php?img=http://i.imgur.com/jjWkMJa.png&amp;key=f3f767ecd8fd8b46056839716d3576c769d782f97d0e535da904cba83f068bdc" style="float:right; height:220px; position:relative; z-index:2;">
	<div class="gold" style="height:220px; margin:auto; margin-right:10%; border:40px solid #F2B730; border-image: url('http://i.imgur.com/Q3YCCpm.png') 50 50 round; box-sizing:content-box; padding:5px;">
		<div style="overflow:hidden;">
			<div style="height:200px;overflow:auto; padding:15px; margin-right:-20px; text-align:left;">
				<p>
					Sed ultricies fringilla ullamcorper. Phasellus a vehicula purus, sit amet vulputate elit. Nam tempor tellus nec velit dictum accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam consequat quam at ante commodo laoreet. Vestibulum interdum turpis at iaculis efficitur. Praesent commodo ligula nunc, in sollicitudin ante tempor ac. Cras vestibulum nec ex sit amet porttitor. Aenean euismod tristique mi et semper. Quisque vitae interdum erat. Praesent viverra volutpat interdum. Aenean elementum dui id tellus mattis ultricies.
				</p>

				<p>
					Nam urna nulla, varius vel mi et, vestibulum malesuada odio. Nunc luctus enim vitae massa sodales, ac eleifend libero efficitur. Cras lacinia eget sapien tempor consectetur. Pellentesque sit amet sem eu eros maximus rhoncus. Sed in massa urna. Sed convallis nibh in hendrerit efficitur. Fusce semper tincidunt orci, eu porttitor nibh aliquet sit amet. Nulla congue mauris felis, viverra scelerisque ex dignissim vitae. Ut in est rutrum, laoreet tellus sit amet, ornare nisi. Etiam ac tellus sapien. Nulla semper augue lorem, convallis mollis elit luctus nec. Fusce suscipit luctus nulla nec pretium. Aenean sapien ipsum, dignissim eget augue nec, rutrum aliquam felis. Integer vel consectetur tellus, non condimentum tellus. Aenean id turpis et dolor laoreet vehicula. Aliquam lobortis efficitur diam ac efficitur.
				</p>
			</div>
		</div>
	</div>

	<p>
		&nbsp;
	</p>
	<img alt="4slSlAr.png" src="https://www.rpnation.com/applications/core/interface/imageproxy/imageproxy.php?img=http://i.imgur.com/RQHu2W5.png&amp;key=06abdd4bbeedae6d5dd24daef8dd4a8a8451b40033da11abc4c7a955a5e39419" style="  float:left; height:220px; position:relative; z-index:2;">
	<div class="gold" style="height:220px; margin:auto; padding:5px; border:40px solid #F2B730; border-image: url('http://i.imgur.com/Q3YCCpm.png') 50 50 round; box-sizing:content-box;">
		<div style="overflow:hidden;">
			<div style="height:200px;overflow:auto; padding:15px; margin-right:-20px; text-align:right;">
				<p>
					Sed ultricies fringilla ullamcorper. Phasellus a vehicula purus, sit amet vulputate elit. Nam tempor tellus nec velit dictum accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam consequat quam at ante commodo laoreet. Vestibulum interdum turpis at iaculis efficitur. Praesent commodo ligula nunc, in sollicitudin ante tempor ac. Cras vestibulum nec ex sit amet porttitor. Aenean euismod tristique mi et semper. Quisque vitae interdum erat. Praesent viverra volutpat interdum. Aenean elementum dui id tellus mattis ultricies.
				</p>

				<p>
					Nam urna nulla, varius vel mi et, vestibulum malesuada odio. Nunc luctus enim vitae massa sodales, ac eleifend libero efficitur. Cras lacinia eget sapien tempor consectetur. Pellentesque sit amet sem eu eros maximus rhoncus. Sed in massa urna. Sed convallis nibh in hendrerit efficitur. Fusce semper tincidunt orci, eu porttitor nibh aliquet sit amet. Nulla congue mauris felis, viverra scelerisque ex dignissim vitae. Ut in est rutrum, laoreet tellus sit amet, ornare nisi. Etiam ac tellus sapien. Nulla semper augue lorem, convallis mollis elit luctus nec. Fusce suscipit luctus nulla nec pretium. Aenean sapien ipsum, dignissim eget augue nec, rutrum aliquam felis. Integer vel consectetur tellus, non condimentum tellus. Aenean id turpis et dolor laoreet vehicula. Aliquam lobortis efficitur diam ac efficitur.
				</p>
			</div>
		</div>
	</div>

	<p>
		&nbsp;
	</p>
</div>

Chordling · Sep 16, 2016

This is the best thread ever.

CupAndCough · Sep 16, 2016

Oh sweet baby christmas. I feel super intimidated now, I hope something close to this is able to be made with buttons while I learn how to do HTML.

ViAdvena · Sep 19, 2016

/*Using so the format can be adjusted to tablet and mobile.*/
/*for the big banner*/
#lkbanner{margin:auto; margin-top:70px; width:80%;}

/*for the picture and orange bubblse*/
#lksidebar{float:left; z-index:2; }

/*for the OOC information over picture*/
#lktexthover {z-index:3; position:absolute; opacity:0;}
#lktexthover:hover, #lktexthover:focus {opacity:100}

/*for post content*/
.lkcontent{
width:77%; border-left:100px double #000; box-sizing: content-box; position:relative;
}

/*for orange bubbles*/
.bubble#b1 {float:right;}
.bubble#b2 {float:left;}

/*For tablet so the format won't be too effed up*/
@media (max-width: 790px){
.lkcontent{
border-left:50px solid #000;
}
.bubble#b1, .bubble#b2 {float:right;}
}

/*For mobile so the format won't be too effed up*/
@media (max-width: 400px){
#lkbanner{ text-align:center; margin-top:-50px; z-index:3; width:100%;}
#lksidebar{float:none; text-align:center;z-index:1;}
.bubble{display:none;} /*Bubbles aren't displayed because they look messy on mobile*/
.lkcontent{
width:100%; border-left:30px solid #000; height:500px; overflow:auto; box-sizing: border-box;
}

}

Location:

Somewhere convenient

With:

Whoever near

Mood:

Whut

Lucian Ross

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ultrices consectetur euismod. Suspendisse commodo odio eget eleifend maximus. Sed rutrum laoreet massa, in varius erat accumsan ac. Pellentesque enim leo, fermentum eget nulla a, viverra accumsan magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla auctor nisl arcu, nec vestibulum arcu lobortis vel. Proin vel tincidunt augue.

Sed ultricies fringilla ullamcorper. Phasellus a vehicula purus, sit amet vulputate elit. Nam tempor tellus nec velit dictum accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam consequat quam at ante commodo laoreet. Vestibulum interdum turpis at iaculis efficitur. Praesent commodo ligula nunc, in sollicitudin ante tempor ac. Cras vestibulum nec ex sit amet porttitor. Aenean euismod tristique mi et semper. Quisque vitae interdum erat. Praesent viverra volutpat interdum. Aenean elementum dui id tellus mattis ultricies.

Nam urna nulla, varius vel mi et, vestibulum malesuada odio. Nunc luctus enim vitae massa sodales, ac eleifend libero efficitur. Cras lacinia eget sapien tempor consectetur. Pellentesque sit amet sem eu eros maximus rhoncus. Sed in massa urna. Sed convallis nibh in hendrerit efficitur. Fusce semper tincidunt orci, eu porttitor nibh aliquet sit amet. Nulla congue mauris felis, viverra scelerisque ex dignissim vitae. Ut in est rutrum, laoreet tellus sit amet, ornare nisi. Etiam ac tellus sapien. Nulla semper augue lorem, convallis mollis elit luctus nec. Fusce suscipit luctus nulla nec pretium. Aenean sapien ipsum, dignissim eget augue nec, rutrum aliquam felis. Integer vel consectetur tellus, non condimentum tellus. Aenean id turpis et dolor laoreet vehicula. Aliquam lobortis efficitur diam ac efficitur.

Trying opacity and hover (hint: hover mouse over the picture

if you're on touch device, tap it). Hopefully mobile friendly.

Code

Code:

<p>
	 
</p>
<link href="https://fonts.googleapis.com/css?family=Kelly+Slab|Raleway|Londrina+Solid|Spinnaker" rel="stylesheet" type="text/css">
<style type="text/css">
/*Using <style> so the format can be adjusted to tablet and mobile.*/
/*for the big banner*/
#lkbanner{margin:auto; margin-top:70px; width:80%;} 

/*for the picture and orange bubblse*/
#lksidebar{float:left; z-index:2; } 

/*for the OOC information over picture*/
#lktexthover {z-index:3; position:absolute; opacity:0;} 
#lktexthover:hover, #lktexthover:focus {opacity:100}

/*for post content*/
.lkcontent{
width:77%; border-left:100px double #000; box-sizing: content-box; position:relative;  
}

/*for orange bubbles*/
.bubble#b1 {float:right;}
.bubble#b2 {float:left;}

/*For tablet so the format won't be too effed up*/
@media (max-width: 790px){ 
.lkcontent{
border-left:50px solid #000; 
}
.bubble#b1, .bubble#b2 {float:right;}
}

/*For mobile so the format won't be too effed up*/
@media (max-width: 400px){
#lkbanner{ text-align:center; margin-top:-50px; z-index:3; width:100%;}
#lksidebar{float:none; text-align:center;z-index:1;}
.bubble{display:none;} /*Bubbles aren't displayed because they look messy on mobile*/
.lkcontent{
width:100%; border-left:30px solid #000; height:500px; overflow:auto; box-sizing: border-box;
}

}</style>

<div id="lksidebar" style="position:relative; ">
  <!--For OOC info and picture-->
	<div style="border:27px solid #000; border-radius:50%; overflow:hidden; position:relative; display:inline-block;">
      <!--OOC info-->
		<div id="lktexthover" style="background:rgba(255,255,255,0.6); height:100%; width:102%;padding:20px 35px 0px 35px;  text-align: center; overflow:auto; font-size:12pt; color:black; text-shadow: -1px 0 #F4B830,0 1px #F4B830,1px 0 #F4B830,0 -1px #F4B830; ">
          <!--Will have scrollbar if the text is too long-->
			<p>
				<strong>Location</strong>:
			</p>

			<p>
				Somewhere close
			</p>

			<p>
				<strong>With</strong>:
			</p>

			<p>
				Whoever near
			</p>

			<p>
				<strong>Mood</strong>:
			</p>

			<p>
				Whut
			</p>
           <!--This is to give a bottom space because padding-bottom doesn't work for some reason -_-; -->
			<div style="height:30px;">
				 
			</div>
		</div>
      
      <!--Picture-->
		<img alt="yCKhzwK.png?1" id="luke" src="https://www.rpnation.com/applications/core/interface/imageproxy/imageproxy.php?img=http://i.imgur.com/KksRHPC.png&key=a1015a9989635e1581d59e87a19ecb3960b195aefd28b8a0b2b21d845569d77b" style="height:240px;  background:#F4B830; border:20px solid #F4B830;  border-radius:50%; position:relative; float:left;">
	</div>

  <!--Orange bubbles-->
	<div style="margin:auto; width:80%;overflow:hidden;">
		<div class="bubble" id="b1" style="border:27px solid #000; border-radius:50%; height:170px; width:170px; background:#F4B830;">
			 
		</div>

		<div class="bubble" id="b2" style="border:27px solid #000; border-radius:50%; height:130px; width:130px; clear:both; background:#F4B830; ">
			 
		</div>

		<div class="bubble" style="border:27px solid #000; border-radius:50%; height:100px; width:100px; clear:both; margin:auto;  background:#F4B830; ">
			 
		</div>
	</div>
</div>

<!--Banner-->
<div id="lkbanner" style="min-height:110px; background-color:#000; border-radius:10px; border:25px solid #F4B830; position:relative;">
	<p style=" font-family:'Kelly Slab', cursive, Helvetica, sans-serif; letter-spacing: 3px; font-size:55pt; font-weight:normal; color:#F4B830;">
		<strong>Lucian Ross</strong>
	</p>
</div>

<!--Post content-->
<div style="width:90%;">
	<div class="lkcontent" style="padding:10px; margin:auto; margin-right:0px;">
		<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ultrices consectetur euismod. Suspendisse commodo odio eget eleifend maximus. Sed rutrum laoreet massa, in varius erat accumsan ac. Pellentesque enim leo, fermentum eget nulla a, viverra accumsan magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla auctor nisl arcu, nec vestibulum arcu lobortis vel. Proin vel tincidunt augue.
		</p>

		<p>
			 
		</p>

		<p>
			Sed ultricies fringilla ullamcorper. Phasellus a vehicula purus, sit amet vulputate elit. Nam tempor tellus nec velit dictum accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam consequat quam at ante commodo laoreet. Vestibulum interdum turpis at iaculis efficitur. Praesent commodo ligula nunc, in sollicitudin ante tempor ac. Cras vestibulum nec ex sit amet porttitor. Aenean euismod tristique mi et semper. Quisque vitae interdum erat. Praesent viverra volutpat interdum. Aenean elementum dui id tellus mattis ultricies.
		</p>

		<p>
			 
		</p>

		<p>
			Nam urna nulla, varius vel mi et, vestibulum malesuada odio. Nunc luctus enim vitae massa sodales, ac eleifend libero efficitur. Cras lacinia eget sapien tempor consectetur. Pellentesque sit amet sem eu eros maximus rhoncus. Sed in massa urna. Sed convallis nibh in hendrerit efficitur. Fusce semper tincidunt orci, eu porttitor nibh aliquet sit amet. Nulla congue mauris felis, viverra scelerisque ex dignissim vitae. Ut in est rutrum, laoreet tellus sit amet, ornare nisi. Etiam ac tellus sapien. Nulla semper augue lorem, convallis mollis elit luctus nec. Fusce suscipit luctus nulla nec pretium. Aenean sapien ipsum, dignissim eget augue nec, rutrum aliquam felis. Integer vel consectetur tellus, non condimentum tellus. Aenean id turpis et dolor laoreet vehicula. Aliquam lobortis efficitur diam ac efficitur.
		</p>
	</div>
</div>

ViAdvena · Sep 20, 2016

Hello! Just want whoever watch this thread to know that I make a html cheatsheet/guide here. Now if only I can edit it x_x

White Masquerade · Sep 23, 2016

xD. So I just accidentally moved my mouse over the image in your signature and I almost passed out. I am dead. That is excellent. I support this thread.

Bacon is fluffy · Sep 23, 2016

;-; I have to know how to do html to get cool stuff?

Mine Aren't cool like the op's,but I got the hang of a few things. But when I do the background one, it always tiles it and I can't seem to get pikachu's right ear without getting one at the bottom of the panel too.

I like tits

I am your father dude

Hi there, My name is bacon is fluffy. Not to be mistaken with bacon is greasy. I am not a greaser. I am a fluffer. A fluffy flufferkins. Sit boob boo sit, times 3 divided by 1. if the hypotenuse is a weekend with a bear, then you must square the entire project. Remember this, for it will save your life.

This is pika pika and thanks ViAdvena!

Edit 2: Using Vi's cheat sheet and a combination of w3 tutorials, I was able to get image float and some cool divisions with shadows and designs on my character sheet.

General Traits

Character Role: Main

Character Name: Albert Dae'dium

Alias: None

Gender: Male

Race: Human

Age: 24

Appearance

Height:5 foot 10

Weight: 180

Hair:black

Eyes: blue

Body Marks:Combat scars, burns

Biography

Birth Place: Maxwell, Norhad

Date of Birth: 973 CYAD

Nationality: Northerner

Personality: Albert developed a minimalist lifestyle early on, often only treasuring what he could cultivate in himself rather than what he could accomplish or possess. He has a strong sense of justice when it comes to protecting those he perceives to be weaker than him,but is steadfast with those who are on par with himself. Albert is prideful and not a man of many words, often seeking companionship because its a necessity rather than something he desires. To those he takes a liking to, he's loyal and devout person who'd sooner bite him tongue off than to give into enemy interrogation.

2 Positive Traits:

Protective

Selfless

2 Negative Traits:

Needlessly prideful

Uncooperative at times

Weaknesses:

Does not have a filter for his honesty, doesn't understand human social interaction all too well. Will stand by you in the depths of hell,but is hopeless when it comes to solidarity around a campfire.

History: Albert was born in the lower straits of society, with humble beginnings in Norhad. His mother a follower of the great spirits organization, brought him up on the teachings of spirits who gave their lives so he can be here. Never to yield to injustice or show undue reverence,but rather she brought him up with the respect for those who made gave him this chance for life both in the present, such as his family and the knights who keep public order. And the past, that being his ancestors and the great spirits who fought for their survival. His father on the other hand was a devoted knight in the Tarian order and taught him to be leery of others. His motto was to be honest,but to also filter out who you associate yourself with so that you can be honest.

Following in the footsteps of his parents who brought him up to be a steadfast and honest hardworking person, he set out to be a great knight just like he imagined his father to be. In reality his father was a foot soldier in the grand scheme of things,but Albert he was the coolest person in the world. He wanted to protect his home too and joined the military at a young age. His favorite past times usually involved operating the transportation in their border patrols and escort duties. Which gave him a profound love for papaopamus and technology. As he started to reach adulthood, he began educating himself further on naturism and eventually took up hunting, both as a practical skill for tracking his enemies,but also as a hobby. He often did not even kill his prey,but rather prided himself on being in tune with the deer who normally ran before one could even get in range to shoot them.

It was toward his 24th birthday that he decided to set out to the capital to find new opportunity. In his mind he had seen all of what Maxwell had to offer, but now he wanted to see more, to go further than his father had and reach new heights.

Occupation: Aspiring Knight apprentice

Life Skills: Tracking animals, repairing military technology, operating various forms of transportation such as trains,ships, and papaopamus pulled wagons.

Material Possessions

Clothing and Attire: Albert is usually fully armored, with heavy metal plates covering most of himself. His particular set of armor was crafted for mobility, but the plates aren't as thick as the standard issue sets his order issues. He has a lucky crimson cape he never lets go of, but in reality it's a refashioned blanket he never outgrew. He believes it is lucky and takes it everywhere he goes, ranging from his own bedroom to the battlefield.

Personal Items: His cape, a pendant his mother bestowed upon him upon answering the kingdom's call to arms.

Combat Section

Combateer:

Description: Combateers concentrate on close range combat, and are masters of attack and defense. They are self reliant always having others depend on them rather than vice versa. While they excel both in group and single combat, when engaging large numbers it may take some time to deal with all opponents.

Elements Affinity: Fire / Earth / Ice / Steel

Base Stats: HP: 9 / SE: 15 / CCA: 5 / ATK: 3 / DEF: 2 / EVA: 1/ EHM: 1 / SPT: 1

Special ability(ies):Intimidating presence, enemies tend to gravitate toward hurting him before his allies. Operating machinery and fixing low level H.A.C's.

Arte level 1

Name of Arte: Whispers of doom

Type: Support

Description:Enemies of Albert will become vexed in the presence of Albert, their combat anxiety making them tunnel vision on him and him alone.

Element:steel

Price:5 token points

Cost: 6 SE

Arte level 2

Name of Arte: Executioner's calling

Type: Attack

Description: Albert swings his titan blade in an arc with intimidating force, shattering steel, level 2 or lower barriers and the earth beneath it.

Element:steel

Price:10 token points

Cost: 12 SE

Arte level 3

Name of Arte: Earth's Embrace

Type: Enhancement

Description:Albert becomes one with the earth and summons the earth to his side, to intercept incoming attacks.

Element:Earth

Price:15 token points

Cost: 18 SE

Arte level 4

Name of Arte: Winter's embrace

Type: Attack

Description:Albert's blade becomes enshrouded in ice and his touch colder than the most severe blizzard, dropping the temperature to negative to anything he touches or is in his immediate vicinity.

Element:ice

Price:20 token points

Cost: 24SE

Arte level 5

Name of Arte: Firelord's Warcry

Type: Support

Description:In the heat of battle when all hope is lost, Albert lets out a final roar to raise the morale of his companions. Targeted allies gain +5 hp and +1 Attack dice to use at will.

Element:Fire

Price:25 token points

Cost: 30 SE

ViAdvena · Sep 24, 2016

.panleft, .panright {
width: 100%;
transition:left 0.5s; /*for sliding animation*/
}
.panleft {
left:95%; /*the box is shifted right under the main box to hide it from view*/
}
.panright {
left:-95%; /*the box is shifted left under the main box */
}
.pancont:hover .panleft , .pancont:focus .panleft, .pancont:hover .panright, .pancont:focus .panright,
.panleft:hover, .panleft:focus, .panright:hover, .panright:focus
{
left:0%; /*the box is shifted left/right to make it visible*/
}
.panmiddle {
width:100%;
top: -100%; /*the box is shifted up under the middle box*/
transition:top 0.5s linear;
}
.pancont:hover .panmiddle , .pancont:focus .panmiddle, .panmiddle:hover, .panmiddle:focus {
top:0%; /*the box is shifted down*/
}

[FONT= 'Special Elite']OVERVIEW[/FONT]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis turpis eget felis suscipit imperdiet. Duis sed neque quis augue gravida placerat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris aliquet aliquam porta. In non est eget turpis auctor vulputate.

Phasellus auctor nunc in interdum sollicitudin. Nam id nibh eget quam euismod sagittis quis vitae lorem. Curabitur vel turpis sem. Aliquam nec leo purus. Aliquam erat volutpat. Curabitur at bibendum odio, vitae tincidunt nisi. Vestibulum sed neque quis enim interdum maximus ac non justo. Pellentesque id lacus commodo, aliquam felis sit amet, lacinia risus. Sed egestas odio elementum euismod pellentesque.

Proin nec erat ultrices, rutrum metus eu, tristique leo. Quisque ultricies erat sollicitudin tempus vestibulum. Nunc id eleifend mauris. Ut at vulputate nulla, eget rhoncus ipsum. Etiam at nisl tempor, dapibus magna vitae, tincidunt orci. Curabitur porta leo at nulla feugiat volutpat.

[FONT= 'Special Elite']HISTORY[/FONT]

Donec ullamcorper id magna eget rutrum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam non risus non urna dapibus pulvinar.

Vestibulum est augue, pharetra non laoreet vitae, condimentum a purus. Morbi suscipit nisi at neque tincidunt gravida. Cras non aliquet lacus. Suspendisse id neque vehicula, aliquet est sit amet, euismod neque. Donec feugiat vehicula augue, pharetra cursus elit eleifend scelerisque. Sed semper ullamcorper massa vel vehicula. Aenean sed porttitor sapien, vitae auctor erat.

Aliquam euismod ex vel sapien fringilla facilisis. Proin ullamcorper metus at risus finibus, vel viverra lectus faucibus. Nullam a fermentum libero, in ultricies eros. Suspendisse vitae eros dolor.

[FONT= 'Special Elite']CURRENT EVENT[/FONT]

Suspendisse fermentum et sem in pellentesque. Phasellus ut arcu et mauris bibendum hendrerit. Praesent at commodo ex. Vivamus ut risus ut justo imperdiet finibus ac sit amet ex. Sed viverra faucibus consectetur. Donec tristique magna ac aliquet mollis.

Morbi quis varius enim. Aliquam volutpat, tellus nec volutpat varius, risus leo porttitor neque, a tempor est libero a justo. Praesent ultricies ex at tortor scelerisque sagittis. Curabitur malesuada quis ante nec suscipit. Ut ac purus non metus mattis dapibus. Vivamus nec libero ac lectus ornare tristique. Proin vel sem metus.

Ut non erat tincidunt, rhoncus lacus at, elementum risus. Aliquam et iaculis risus, a maximus magna. Nullam eget nulla imperdiet, ultrices metus pharetra, fringilla elit. Cras eleifend placerat elit et sollicitudin. Suspendisse mauris libero, fringilla eu ligula eu, lobortis mollis nulla. Mauris non turpis ultrices velit varius efficitur.

Playing with z-index, hover, and transition. Not mobile frendly x_x

Maybe I'll add css tutorial to the cheat sheet later...

Code:

Code:

<p>
	
</p>
<link href="https://fonts.googleapis.com/css?family=Special+Elite" rel="stylesheet">

<style type="text/css">
.panleft, .panright { 
  width: 100%; 
  transition:left 0.5s; /*for sliding animation*/
}
.panleft {
  left:95%; /*the box is shifted to the right, hidden under the main box*/
}
.panright {
  left:-95%; /*the box is shifted to the left, hidden under the main box */
}
.pancont:hover .panleft , .pancont:focus .panleft, .pancont:hover .panright, .pancont:focus .panright, 
.panleft:hover, .panleft:focus, .panright:hover, .panright:focus
{
  left:0%; /*the box is shifted left/right to make it visible*/
} 
.panmiddle { 
  width:100%; 
  top: -100%; /*the box is shifted up, hidden under the middle box*/
  transition:top 0.5s linear;
}
.pancont:hover .panmiddle , .pancont:focus .panmiddle, .panmiddle:hover, .panmiddle:focus {
  top:0%; /*the box is shifted down*/
}
</style>

<!--the whole container-->
<div class="pancont" style="color:#B5B5B5;">
  
  	<!--the left side-->
	<div style="width:30%; float:left; position:relative;"> 
      		<!--the left banner-->
		<div class="banleft" style="width:25px; height:400px; background:#B5B5B5; float:right; text-align:center; position: relative; z-index:2; box-shadow:0 0 5px 1px black;">
			<span style="font-family: 'Special Elite', cursive; font-size:18pt; font-weight:bold; color:#161616;">OVERVIEW</span>
		</div>  
      		<!--the left textbox-->
		<div class="panleft" style="background:#161616; height:400px; position: absolute; padding:0 20px 0 15px;  overflow: auto; ">
			<p>
				Insert long text here.
			</p>
		</div>
	</div>

  	<!--the right side-->
	<div style="width:30%;  float:right; position:relative;"> 
      		<!--the right banner-->
		<div class="banright" style="width:25px; height:400px; background:#B5B5B5; float:left; text-align:center; position: relative; z-index:2; box-shadow:0 0 5px 1px black;">
			<span style="font-family: 'Special Elite', cursive; font-size:18pt; font-weight:bold; color:#161616;">HISTORY</span>
		</div>
		<!--the right textbox-->
		<div class="panright" style="background:#161616; height:400px; position: absolute; overflow:hidden;">
			<div style="height:400px; padding:0 15px 0 40px; margin-right:-18px; overflow:auto;">
				<p>
				Insert more long text here.
				</p>
			</div>
		</div>
	</div>

  	<!--the main box-->
	<div class="panbox" style="width:40%; height:400px; background:#161616; background-image:url('http://i.imgur.com/vDmQDIR.png'); background-repeat:no-repeat; background-position:center; background-size: contain;  margin:auto; position:relative; z-index:3;  box-shadow:0 0 5px 1px black;"> 
	</div>

  	<!--the middle side-->
	<div style="width:40%; height:260px; margin:auto; position:relative ; ">
      		<!--the middle banner-->
		<div class="banmiddle" style="padding-top:5px; background:#B5B5B5; text-align:center; position:relative; z-index:2; box-shadow:0 0 5px 1px black;">
			<span style="font-family: 'Special Elite', cursive; font-size:18pt; letter-spacing:10px; font-weight:bold; color:#161616; line-height:1.2">CURRENT EVENT</span>
		</div>
		<!--the middle textbox-->
		<div class="panmiddle" style="background:#161616; position:relative; height:230px; overflow:hidden; ">
			<div style="height:230px; padding:0 15px; margin-right:-18px; overflow:auto;">
				<p>
				Insert another long text here.
				</p>
			</div>
		</div>
	</div>
</div>

Fullmetal32 · Sep 24, 2016

Where are you all getting this stuff??

eclipsa · Sep 24, 2016

....i desperately need to learn that one. where are you learning this??? it's amazing!

Bacon is fluffy · Sep 24, 2016

I think vi senpai was just knowledgeable of this stuff beforehand, so vi knows all the bells and whistles. xD

ViAdvena · Sep 24, 2016

I get the inspiration from drop down menu, so I googled how to make those stuffs with html, and then use it for those text box :v

ShadyAce · Sep 25, 2016

Please give me your talent, haha. These are stunning and so smooth and nice to look at. Just ugh. so beautiful.

inspired me to try to learn. try.

Pyosimros · Oct 7, 2016

Hey how did you remove the scrollbar from your overflows?

ViAdvena · Oct 7, 2016

Pyosimros said:
Hey how did you remove the scrollbar from your overflows?

I just added the explanation for that in here ^^

Pyosimros · Oct 7, 2016

ViAdvena said:
I just added the explanation for that in here ^^

Ah, thank you!

You are a savior my friend.

Minako · Oct 9, 2016

Lucky! I still have such a long way to go before I get to mess around with this ; ~;

macathan · Oct 10, 2016

AAHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH

You. You are amazing.

JujuBee · Oct 11, 2016

Dude your html is beautiful. Now I have to learn. Didn't know html could do all of those things!!!

The Pandora's Box one is the best!

HTML test thread

Schrödinger's cat

Schrödinger's cat

Forever Wandering

Schrödinger's cat

Forever Wandering

₮ⱧɆ ₥Ɏ₮Ⱨ, ₮ⱧɆ ⱠɆ₲Ɇ₦Đ, ₮ⱧɆ ₣₳฿ⱠɆ

Schrödinger's cat

Bardbarian, the Divine Chordia of Concordia

Sought Hope Here, Became Blind To It

Schrödinger's cat

Schrödinger's cat

QuirkyAngel's Red Oni

Wut'n th'name of davy jonez lockr is uh sall-add?

Schrödinger's cat

What doesn't kill you simply makes you stranger.

faerie sightings

Wut'n th'name of davy jonez lockr is uh sall-add?

Schrödinger's cat

♥ memes ♥

☆☆☆

Schrödinger's cat

☆☆☆

🎮Super High School Level Gamer: Chiaki Nanami🎮

grrr

Pettiest Bitch Out There

Users who are viewing this thread

Similar threads