Ictora's HTML Testy Stuff

[IctoraPost]

.ictora005 {
height: 100%;
}

.ictora005 .starr {
width: 0;
height: 0;
border-right: 100px solid transparent;
border-left: 100px solid transparent;
border-top: 72px solid gold;
position: absolute;
-webkit-animation: turny 20s infinite linear;
animation: turny 20s infinite linear;
top: 50%;
margin-top: -50px;
}

.ictora005 .starr::before, .ictora005 .starr::after {
content: "";
width: 0;
height: 0;
border-right: 100px solid transparent;
border-left: 100px solid transparent;
border-top: 72px solid gold;
position: absolute;
top: -74px;
}

.ictora005 .starr::before {
-ms-transform: rotate(-72deg);
-webkit-transform: rotate(-72deg);
transform: rotate(-72deg);
left: -96.5px;
}

.ictora005 .starr::after {
-ms-transform: rotate(72deg);
-webkit-transform: rotate(72deg);
transform: rotate(72deg);
left: -103.5px;
}

@keyframes turny {
from {-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg);}
to {-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);}
}

@-webkit-keyframes turny {
from {-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg);}
to {-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);}
}

HELLO
​

And welcome to my HTML Testy Stuff collection dump thingy!
​

This is where I'll be posting HTML and CSS testy stuff that I want to test and stuff. And show off.
​

I'm not a professional or anything, so please don't treat me like one. I just do this as a hobby.
​

Everything here is free to use, so feel free to use it! Just don't claim them as your own. Plz.
​

I've got some cool ideas for what to post here, so stay tuned!
​

ENJOY
​

 

[IctoraPost]

~ dust ~
​

 

[ewolf20]

hello. i made a character sheet out of one of fyuri templates 

 

[IctoraPost]

hello. i made a character sheet out of one of fyuri templates 

...Okay? You should tell that to @Fyuri, not me.

 

[ewolf20]

oh. sorry about that. I'll wait for your designs. 

 

[IctoraPost]

This is a thing I made some time ago. Hover tabs. It's also (relatively) mobile friendly.


.ictora001 {
position: relative;
max-width: 400px;
height: auto;
box-sizing: content-box;
border-radius: 20px;
}

.ictora001 div {
box-sizing: inherit;
}

.ictora001 p {
margin: 1em 0 !important;
}

.ictora001 > a {
pointer-events: none;
}

.ictora001 img {
width: 100%;
height: auto;
position: relative;
transition: 1s;
left: 0;
top: -100%;
z-index: 1;
border-radius: 20px;
box-sizing: inherit;
border: none;
padding: 0;
}

.ictora001:hover img {
left: 100%;
}

.ictora001 .title {
font-weight: lighter;
color: black;
font-size: 2em;
display: table;
height: 2.34em;
width: 100%;
text-align: center;
}

.ictora001 .title > span {
display: table-cell;
vertical-align: middle;
}

.ictora001 > div {
position: absolute;
width: 100%;
height: 100%;
font-family: Raleway, sans-serif;
text-align: center;
color: white;
overflow: hidden;
border-radius: 20px;
background-color: #eedddd;
z-index: 0;
}

.ictora001 .hovertabs {
width: 25%;
height: 100%;
float: left;
border-radius: 20px 20px 0 0;
line-height: 3em;
}

.ictora001 .hovertabs > div {
position: absolute;
width: calc(100% + 17px);
height: calc(100% - 7.8em + 17px);
top: 100%;
z-index: 1;
transition: 1s;
background-color: inherit;
overflow: scroll;
line-height: normal;
left: 0;
}

.ictora001 .hovertabs > div > div {
padding: 3% 7%;
text-align: justify;
}

.ictora001 .hovertabs:hover > div {
top: 7.68em;
}

@media screen and (max-width: 1220px) {
.ictora001 {
overflow: hidden;
margin: 0 auto;
}
}



Lorem Ipsum

Basic Info



Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pellentesque mi a elit posuere, eget rhoncus elit varius. Ut eget semper nulla, quis malesuada eros. Praesent scelerisque nibh ex. Aliquam faucibus non risus vitae vehicula. Sed tempus justo eu tellus condimentum dignissim. Duis justo quam, pellentesque fermentum congue accumsan, blandit sed lectus. Etiam et metus a urna interdum dignissim sed eleifend lorem. Praesent sodales sit amet elit lobortis vestibulum. Nulla sed vulputate tortor.


Nullam at diam quis velit fringilla accumsan et vel leo. Fusce pharetra, risus sed vehicula rhoncus, nisi nisi scelerisque orci, vitae molestie ipsum augue nec lacus. Sed facilisis ex sodales lorem efficitur, eget iaculis augue ultrices. Fusce porta lectus non ultricies gravida. Ut mattis congue diam ac consectetur. Sed at erat vitae est aliquam fermentum. Pellentesque vitae faucibus orci, in tempor arcu. Fusce varius mollis eros, mollis fringilla accumsan et vel leo. Fusce pharetra, risus sed vehicula rhoncus, nisi nisi scelerisque orci, vitae molestie ipsum augue aliquam tortor maximus eget. Morbi in est est.





Personality



Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae tortor malesuada eros elementum fringilla. Praesent vel scelerisque nisi. Mauris aliquam, libero in porttitor ultrices, quam ipsum aliquet est, et lacinia diam ante a tellus. Donec vulputate mauris ut mollis hendrerit. Cras viverra odio non sem mattis, consectetur dapibus lorem ornare. Vivamus metus enim, euismod eu urna a, vulputate dictum purus. In facilisis ut sapien eu vulputate. Donec et vestibulum arcu, ac tempor velit. Aenean et lacus finibus, fringilla elit sodales, volutpat ipsum. Fusce vitae nulla quis quam fermentum porta ut eget velit.


Morbi aliquet justo ligula, vel efficitur neque iaculis sed. In hac habitasse platea dictumst. Proin scelerisque magna est, eu bibendum libero sodales in. Cras malesuada enim pellentesque egestas aliquet. Duis eget felis felis. Ut massa dolor, ullamcorper quis pellentesque nec, tincidunt imperdiet tellus. Cras scelerisque nisl justo, ut fringilla justo vulputate ut. Sed vulputate massa felis, ut laoreet lectus viverra eu. In pretium dignissim vulputate. Integer vulputate sed lorem ac lobortis. Phasellus et tincidunt ante. Duis eget est vitae lorem tincidunt congue. Sed scelerisque nisl risus, ac molestie metus pellentesque vel.





Bio



Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sagittis aliquam euismod. Curabitur pretium accumsan scelerisque. Duis enim elit, pharetra vitae consequat sed, consectetur sit amet nisl. Nam at condimentum arcu, sit amet pellentesque orci. Nunc fermentum nunc nibh, at varius lorem rhoncus a. Vivamus quis diam eget neque sagittis gravida ac vel libero. Integer ut massa tempor, accumsan ipsum at, pharetra justo. Suspendisse rutrum massa vel dolor aliquam lacinia. Etiam non turpis vel diam fringilla porttitor. In eleifend justo ac sem tristique, finibus consequat ligula rutrum. Nullam vulputate fermentum nisl, et bibendum lacus porta vel. Phasellus pulvinar auctor nibh sed cursus. Aenean faucibus diam ex, eu lacinia mauris efficitur interdum. Sed quis sapien sed nisi consectetur aliquam.


Proin fermentum nisl non enim maximus, id mattis diam fringilla. Fusce sed ligula non leo vestibulum imperdiet quis ac eros. Cras eu quam ac tellus rutrum scelerisque vitae eu risus. Nam tempor nunc augue, non placerat arcu rutrum eget. Quisque vestibulum mi sit amet diam lacinia suscipit. Aenean non purus eget tortor congue egestas sit amet sit amet purus. Sed euismod erat magna, at auctor turpis mattis ac. Phasellus pulvinar eu libero vitae malesuada. Aliquam erat volutpat. Ut venenatis neque a magna ullamcorper, eu ultrices nisl venenatis. Pellentesque luctus lorem quis massa blandit eleifend. Etiam quis ante vel lectus congue faucibus suscipit et massa. Curabitur ac risus hendrerit ipsum ullamcorper imperdiet a tempus risus. Proin eleifend laoreet ligula, eu ultrices lacus pulvinar id. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.





Extra



Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis vehicula lorem. Donec sit amet mattis nulla. Integer ultrices nisl pellentesque mauris placerat tristique. Vivamus augue lacus, blandit at velit sit amet, hendrerit pharetra elit. Sed libero felis, volutpat vitae ante non, eleifend porttitor lectus. Morbi est dui, fermentum id tincidunt eu, cursus et ligula. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent laoreet ligula vel ex efficitur, et efficitur elit mattis. Proin dictum augue nibh, et finibus massa varius at.


Nunc quis sapien auctor, auctor justo a, gravida arcu. Morbi nec faucibus nulla, quis porttitor libero. Fusce pulvinar, massa viverra dictum dapibus, nunc augue gravida massa, a egestas purus erat non massa. Pellentesque hendrerit eleifend fermentum. Vestibulum feugiat ut diam nec pretium. Praesent ut dignissim diam, eu fermentum arcu. Vivamus nisl enim, congue vitae lacus sed, pulvinar hendrerit ante. Nunc eu fermentum leo, nec bibendum nulla. Duis posuere nisl sed diam tincidunt, et sagittis nulla tempus. Quisque a purus lobortis, consectetur dui nec, laoreet ipsum. Curabitur urna nunc, vulputate eu efficitur vitae, rutrum eget massa. Aliquam quam erat, tempus maximus tincidunt quis, tincidunt in quam. Nunc rutrum consectetur velit nec fringilla.

Spoiler

<p style="display: none;"></p>

<style type="text/css">

.ictora001 {
	position: relative;
	max-width: 400px;
	height: auto;
	box-sizing: content-box;
	border-radius: 20px;
}

.ictora001 div {
	box-sizing: inherit;
}

.ictora001 p {
	margin: 1em 0 !important;
}

.ictora001 .imagewrap {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.ictora001 img {
	width: 100%;
	height: auto;
	position: relative;
	transition: 1s;
	left: 0;
	top: -100%;
	z-index: 1;
	border-radius: 20px;
	box-sizing: inherit;
	border: none;
	padding: 0;
}

.ictora001:hover img {
	left: 100%;
}

.ictora001 .title {
	font-weight: lighter;
	color: black;
	font-size: 2em;
	display: table;
	height: 2.34em;
	width: 100%;
	text-align: center;
}

.ictora001 .title > span {
	display: table-cell;
	vertical-align: middle;
}

.ictora001 .content {
	position: absolute;
	width: 100%;
	height: 100%;
	font-family: Raleway, sans-serif;
	text-align: center;
	color: white;
	overflow: hidden;
	border-radius: 20px;
	background-color: #eedddd;
	z-index: 0;
}

.ictora001 .hovertabs {
	width: 25%;
	height: 100%;
	float: left;
	border-radius: 20px 20px 0 0;
	line-height: 3em;
}

.ictora001 .hovertabs > div {
	position: absolute;
	width: calc(100% + 17px);
	height: calc(100% - 7.8em + 17px);
	top: 100%;
	z-index: 1;
	transition: 1s;
	background-color: inherit;
	overflow: scroll;
	line-height: normal;
	left: 0;
}

.ictora001 .hovertabs > div > div {
	padding: 3% 7%;
	text-align: justify;
}

.ictora001 .hovertabs:hover > div {
	top: 7.68em;
}

@media screen and (max-width: 1220px) {
    .ictora001 {
        overflow: hidden;
        margin: 0 auto;
    }
}

</style>

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

<div class="ictora001">
	<div class="content">
		<span class="title"><span>Lorem Ipsum</span></span>
		<div class="hovertabs" style="background-color: #333333;">Basic&nbsp;Info
			<div>
				<div>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pellentesque mi a elit posuere, eget rhoncus elit varius. Ut eget semper nulla, quis malesuada eros. Praesent scelerisque nibh ex. Aliquam faucibus non risus vitae vehicula. Sed tempus justo eu tellus condimentum dignissim. Duis justo quam, pellentesque fermentum congue accumsan, blandit sed lectus. Etiam et metus a urna interdum dignissim sed eleifend lorem. Praesent sodales sit amet elit lobortis vestibulum. Nulla sed vulputate tortor.</p>
					<p>Nullam at diam quis velit fringilla accumsan et vel leo. Fusce pharetra, risus sed vehicula rhoncus, nisi nisi scelerisque orci, vitae molestie ipsum augue nec lacus. Sed facilisis ex sodales lorem efficitur, eget iaculis augue ultrices. Fusce porta lectus non ultricies gravida. Ut mattis congue diam ac consectetur. Sed at erat vitae est aliquam fermentum. Pellentesque vitae faucibus orci, in tempor arcu. Fusce varius mollis eros, mollis fringilla accumsan et vel leo. Fusce pharetra, risus sed vehicula rhoncus, nisi nisi scelerisque orci, vitae molestie ipsum augue aliquam tortor maximus eget. Morbi in est est.</p>
				</div>
			</div>
		</div>
		<div class="hovertabs" style="background-color: #4466aa;">Personality
			<div>
				<div>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae tortor malesuada eros elementum fringilla. Praesent vel scelerisque nisi. Mauris aliquam, libero in porttitor ultrices, quam ipsum aliquet est, et lacinia diam ante a tellus. Donec vulputate mauris ut mollis hendrerit. Cras viverra odio non sem mattis, consectetur dapibus lorem ornare. Vivamus metus enim, euismod eu urna a, vulputate dictum purus. In facilisis ut sapien eu vulputate. Donec et vestibulum arcu, ac tempor velit. Aenean et lacus finibus, fringilla elit sodales, volutpat ipsum. Fusce vitae nulla quis quam fermentum porta ut eget velit.</p>
					<p>Morbi aliquet justo ligula, vel efficitur neque iaculis sed. In hac habitasse platea dictumst. Proin scelerisque magna est, eu bibendum libero sodales in. Cras malesuada enim pellentesque egestas aliquet. Duis eget felis felis. Ut massa dolor, ullamcorper quis pellentesque nec, tincidunt imperdiet tellus. Cras scelerisque nisl justo, ut fringilla justo vulputate ut. Sed vulputate massa felis, ut laoreet lectus viverra eu. In pretium dignissim vulputate. Integer vulputate sed lorem ac lobortis. Phasellus et tincidunt ante. Duis eget est vitae lorem tincidunt congue. Sed scelerisque nisl risus, ac molestie metus pellentesque vel.</p>
				</div>
			</div>
		</div>
		<div class="hovertabs" style="background-color: #99aaaa;">Bio
			<div>
				<div>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sagittis aliquam euismod. Curabitur pretium accumsan scelerisque. Duis enim elit, pharetra vitae consequat sed, consectetur sit amet nisl. Nam at condimentum arcu, sit amet pellentesque orci. Nunc fermentum nunc nibh, at varius lorem rhoncus a. Vivamus quis diam eget neque sagittis gravida ac vel libero. Integer ut massa tempor, accumsan ipsum at, pharetra justo. Suspendisse rutrum massa vel dolor aliquam lacinia. Etiam non turpis vel diam fringilla porttitor. In eleifend justo ac sem tristique, finibus consequat ligula rutrum. Nullam vulputate fermentum nisl, et bibendum lacus porta vel. Phasellus pulvinar auctor nibh sed cursus. Aenean faucibus diam ex, eu lacinia mauris efficitur interdum. Sed quis sapien sed nisi consectetur aliquam.</p>
					<p>Proin fermentum nisl non enim maximus, id mattis diam fringilla. Fusce sed ligula non leo vestibulum imperdiet quis ac eros. Cras eu quam ac tellus rutrum scelerisque vitae eu risus. Nam tempor nunc augue, non placerat arcu rutrum eget. Quisque vestibulum mi sit amet diam lacinia suscipit. Aenean non purus eget tortor congue egestas sit amet sit amet purus. Sed euismod erat magna, at auctor turpis mattis ac. Phasellus pulvinar eu libero vitae malesuada. Aliquam erat volutpat. Ut venenatis neque a magna ullamcorper, eu ultrices nisl venenatis. Pellentesque luctus lorem quis massa blandit eleifend. Etiam quis ante vel lectus congue faucibus suscipit et massa. Curabitur ac risus hendrerit ipsum ullamcorper imperdiet a tempus risus. Proin eleifend laoreet ligula, eu ultrices lacus pulvinar id. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
				</div>
			</div>
		</div>
		<div class="hovertabs" style="background-color: #887777;">Extra
			<div>
				<div>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis vehicula lorem. Donec sit amet mattis nulla. Integer ultrices nisl pellentesque mauris placerat tristique. Vivamus augue lacus, blandit at velit sit amet, hendrerit pharetra elit. Sed libero felis, volutpat vitae ante non, eleifend porttitor lectus. Morbi est dui, fermentum id tincidunt eu, cursus et ligula. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent laoreet ligula vel ex efficitur, et efficitur elit mattis. Proin dictum augue nibh, et finibus massa varius at.</p>
					<p>Nunc quis sapien auctor, auctor justo a, gravida arcu. Morbi nec faucibus nulla, quis porttitor libero. Fusce pulvinar, massa viverra dictum dapibus, nunc augue gravida massa, a egestas purus erat non massa. Pellentesque hendrerit eleifend fermentum. Vestibulum feugiat ut diam nec pretium. Praesent ut dignissim diam, eu fermentum arcu. Vivamus nisl enim, congue vitae lacus sed, pulvinar hendrerit ante. Nunc eu fermentum leo, nec bibendum nulla. Duis posuere nisl sed diam tincidunt, et sagittis nulla tempus. Quisque a purus lobortis, consectetur dui nec, laoreet ipsum. Curabitur urna nunc, vulputate eu efficitur vitae, rutrum eget massa. Aliquam quam erat, tempus maximus tincidunt quis, tincidunt in quam. Nunc rutrum consectetur velit nec fringilla.</p>
				</div>
			</div>
		</div>
	</div>
	<div class="imagewrap"><img src="http://orig06.deviantart.net/8841/f/2015/039/1/9/anime_guy_with_red_eyes_by_anyuanima-d8h5ko2.jpg"></div>
</div>

.ictoraSpoilerCode .ipsSpoiler_header span {
visibility: hidden;
}

.ictoraSpoilerCode .ipsSpoiler_header span::before {
content: "Code";
visibility: visible;
}

 

[ewolf20]

Noice

 

[Aster]

love the codes! but is it just me or does the picture tend to float to the top?

 

[teenage witch]

love the code!!

 

[IctoraPost]

Noice

love the code!!

Thanks!

love the codes! but is it just me or does the picture tend to float to the top?

What do you mean by that?

 

[IctoraPost]

Not sure what to call these hidden hover tab things. Turned out pretty average. They look a bit plain, the transition's wonky, and they're not very mobile friendly. Eh.


.ictora006 {
text-align: center;
padding: 8px;
border: 2px solid grey;
border-radius: 6px 0 0 6px;
display: inline-block;
}

.icthidden {
width: auto;
max-width: 0;
position: absolute;
transition: 5s;
overflow: hidden;
margin: -10px 0 0 10px;
}

.ictora006:hover .icthidden {
max-width: 1000px;
}

.ictcontent {
float: right;
display: inline-block;
text-align: left;
white-space: nowrap;
padding: 8px;
border: 2px solid grey;
border-left: none;
border-radius: 0 6px 6px 0;

}

LoremIpsum dolor sit amet, consectetur adipiscing elit
HoverYou have just hovered over the thing
TitleStuff content things more stuff more content more things
KnifeA pointy thing at goes 'stabby stabby'
BookIt's got paper and words in it



Spoiler

<p style="display: none;"></p>

<style type="text/css">
	
.ictora006 {
	text-align: center;
	padding: 8px;
	border: 2px solid grey;
	border-radius: 6px 0 0 6px;
	display: inline-block;
}

.icthidden {
	width: auto;
	max-width: 0;
	position: absolute;
	transition: 5s;
	overflow: hidden;
	margin: -10px 0 0 10px;
}

.ictora006:hover .icthidden {
	max-width: 1000px;
}

.ictcontent {
	float: right;
	display: inline-block;
	text-align: left;
	white-space: nowrap;
	padding: 8px;
	border: 2px solid grey;
	border-left: none;
	border-radius: 0 6px 6px 0;

}

</style>


<span class="ictora006">Lorem<span class="icthidden"><span class="ictcontent">Ipsum dolor sit amet, consectetur adipiscing elit</span></span></span><br>
<span class="ictora006">Hover<span class="icthidden"><span class="ictcontent">You have just hovered over the thing</span></span></span><br>
<span class="ictora006">Title<span class="icthidden"><span class="ictcontent">Stuff content things more stuff more content more things</span></span></span><br>
<span class="ictora006">Knife<span class="icthidden"><span class="ictcontent">A pointy thing at goes 'stabby stabby'</span></span></span><br>
<span class="ictora006">Book<span class="icthidden"><span class="ictcontent">It's got paper and words in it</span></span></span><br>

.ictoraSpoilerCode .ipsSpoiler_header span {
visibility: hidden;
}

.ictoraSpoilerCode .ipsSpoiler_header span::before {
content: "Code";
visibility: visible;
}

 

[Bunny Hop]

Is it possible for me to edit the class names so that I can use it on the main site?

 

[IctoraPost]

.ictora007 {
width: 310px;
height: 500px;
overflow: hidden;
background: #e6e6e6;
}

.ictora007 > div {
width: calc(100% + 17px);
height: calc(100% + 17px);
overflow: scroll;
box-sizing: border-box;
padding: 3% 7%;
}



A very basic scroll thing without a scroll bar. Take it however you like. Since the ::-webkit-scrollbar property, the thing that allows scrollbars to be customised, only works on some browsers, this is a quick workabout to get rid of the ugly scrollbar usually seen. May be slightly mobile unfriendly.


Duis convallis rhoncus tellus in porta. Phasellus vitae nisl venenatis, ullamcorper tortor a, pulvinar erat. Sed commodo sollicitudin sapien, non hendrerit mi vehicula commodo. Vivamus eleifend egestas tempus. Vivamus ultrices faucibus nisi, et pellentesque velit posuere mattis. In hac habitasse platea dictumst. Pellentesque ut posuere erat. Donec tristique leo sem, id commodo sem maximus in. Mauris congue cursus nisi, eu luctus ligula mollis eu. Pellentesque ac augue eu ligula ullamcorper lacinia dictum non lectus. Nunc ac sem lorem.


Duis volutpat malesuada risus non tincidunt. Etiam facilisis ante a nulla volutpat, id efficitur ipsum auctor. Phasellus porttitor velit sit amet suscipit convallis. Phasellus molestie placerat diam, vel aliquet mauris consectetur id. Fusce vel urna hendrerit, lacinia tellus ut, lacinia nunc. Cras cursus diam quis est feugiat sagittis. Nam id tortor ac purus malesuada scelerisque eget quis diam. Proin ut felis sit amet est cursus dapibus. Suspendisse bibendum diam sem, nec bibendum ipsum eleifend at. Vivamus pharetra ex vehicula massa tempor gravida.









Spoiler

<p style="display: none;"></p>

<style type="text/css">
	
.ictora007 {
	width: 310px;
	height: 500px;
	overflow: hidden;
	background: #e6e6e6;
}

.ictora007 > div {
	width: calc(100% + 17px);
	height: calc(100% + 17px);
	overflow: scroll;
	box-sizing: border-box;
	padding: 3% 7%;
}

</style>

<div class="ictora007">
	<div>
		<p>A very basic scroll thing without a scroll bar. Take it however you like. Since the ::-webkit-scrollbar property, the thing that allows scrollbars to be customised, only works on some browsers, this is a quick workabout to get rid of the ugly scrollbar usually seen. May be slightly mobile unfriendly.</p>
		<p>&nbsp;</p>
		<p>Duis convallis rhoncus tellus in porta. Phasellus vitae nisl venenatis, ullamcorper tortor a, pulvinar erat. Sed commodo sollicitudin sapien, non hendrerit mi vehicula commodo. Vivamus eleifend egestas tempus. Vivamus ultrices faucibus nisi, et pellentesque velit posuere mattis. In hac habitasse platea dictumst. Pellentesque ut posuere erat. Donec tristique leo sem, id commodo sem maximus in. Mauris congue cursus nisi, eu luctus ligula mollis eu. Pellentesque ac augue eu ligula ullamcorper lacinia dictum non lectus. Nunc ac sem lorem.</p>
		<p>&nbsp;</p>
		<p>Duis volutpat malesuada risus non tincidunt. Etiam facilisis ante a nulla volutpat, id efficitur ipsum auctor. Phasellus porttitor velit sit amet suscipit convallis. Phasellus molestie placerat diam, vel aliquet mauris consectetur id. Fusce vel urna hendrerit, lacinia tellus ut, lacinia nunc. Cras cursus diam quis est feugiat sagittis. Nam id tortor ac purus malesuada scelerisque eget quis diam. Proin ut felis sit amet est cursus dapibus. Suspendisse bibendum diam sem, nec bibendum ipsum eleifend at. Vivamus pharetra ex vehicula massa tempor gravida.</p>
	</div>    
</div>

.ictoraSpoilerCode .ipsSpoiler_header span {
visibility: hidden;
}

.ictoraSpoilerCode .ipsSpoiler_header span::before {
content: "Code";
visibility: visible;
}