HTML test thread

Necessity4Fun · Oct 12, 2016

I finally did something that I thought was worth showing, so I came here to ~~boast~~ share it with the world!! Tho it's not really original just something more practical I guess >.<

I took the Pandora Box apart and playing with the settings and stuff made a thing for an RP, tho I didn't get to use it, yet~ (Mostly because V1 killed the purpose of the video making it hidden and then I gave up...)

But I re-did it better.

So, this is V2 for a box thingy for Kemonomimi Lyrics, Idea's RP XDD

[SIZE=16pt]~~Song that Will be Played~~[/SIZE]

*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*

Title of the Performance: Choreography Plan:

[Title here] Attires: N/A
Band Members and Positions: Stage: simple
[Insert info here] Effects and Props (up to four): N/A
Location: Total Price: N/A

.panmiddle_shizuka {
width:100%;
top: -260%; /*the box is shifted up, hidden under the middle box*/
transition:top 0.5s linear;
}
.pancont_shizuka:hover .panmiddle_shizuka , .pancont_shizuka:focus .panmiddle_shizuka, .panmiddle_shizuka:hover, .panmiddle_shizuka:focus {
top:0%; /*the box is shifted down*/
}
div.panbox_shizuka {
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
border-style: dotted;
border-width: 2px;
border-color: white;
border-radius: 10px;
}
div.banmiddle_shizuka {
border-style: dotted;
border-width: 2px;
border-color: white;
}

Of course, you would need to write and then play with the font size and the box sizes to make things fit everytime, but I think it looks cute and less boring than spoiler tags XDD (Not that I hate the spoilers, I just thought their seriousness didn't fit the idol performance mood? >w<)

Anyway! The code, if people want to play with this: (I'm sorry for the big amount spaces but I need them to make stuff look centred in two columns OWO)

<p>
<div class="pancont_shizuka" style="color:white;">
<div class="panbox_shizuka" style="width:800px; height:550px; background:lightpink; background-repeat:no-repeat; background-position:center; background-size: contain; margin:auto; position:relative; z-index:3; box-shadow:0 0 5px 1px grey;">
<p style="text-align: center;">
<span style="font-size:16pt; color:white; line-height:1.2">~~Song that Will be Played~~</span>
</p>

<p style="text-align: center;">
 
</p>

<div class="ipsEmbeddedVideo ipsEmbeddedVideo_limited" contenteditable="false">
<div>
<iframe allowfullscreen="true" frameborder="0" height="230" src="https://www.youtube.com/embed/AowEa0BXtus?feature=oembed" width="480"></iframe>
</div>
</div>

<p style="text-align: center;">
 
</p>
</div>

<div style="width:790px; height:150px; margin:auto; position:relative ; ">
<div class="banmiddle_shizuka" style="padding-top:5px; background:lightpink; text-align:center; position:relative; z-index:2; box-shadow:0 0 5px 1px grey;">
*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*
</div>

<div class="panmiddle_shizuka" style="background:lightpink; position:relative; height:230px; overflow:hidden; ">
<div style="height:190px; padding:0 8px; margin-right:-18px; overflow:auto;">
<p>
<span style="font-size:20px;">         </span>
</p>

<p>
<span style="font-size:20px;">         Title of the Performance:                                          Choreography Plan:</span>
</p>

<p>
<span style="font-size:20px;">                   [Title here]                                                             Attires: N/A<br>
      Band Members and Positions:                                         Stage: simple<br>
               [Insert info here]                                       Effects and Props (up to four): N/A<br>
                    Location:                                                            Total Price: N/A</span>
</p>
</div>
</div>
</div>

<p>
 
</p>

<p>
 
</p>
<style type="text/css">
.panmiddle_shizuka {
width:100%;
top: -260%; /*the box is shifted up, hidden under the middle box*/
transition:top 0.5s linear;
}
.pancont_shizuka:hover .panmiddle_shizuka , .pancont_shizuka:focus .panmiddle_shizuka, .panmiddle_shizuka:hover, .panmiddle_shizuka:focus {
top:0%; /*the box is shifted down*/
}
div.panbox_shizuka {
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
border-style: dotted;
border-width: 2px;
border-color: white;
border-radius: 10px;
}
div.banmiddle_shizuka {
border-style: dotted;
border-width: 2px;
border-color: white;
} </style>
</div>

Also, IDK how to make things look Ok on mobile yet. Sorry, mobile users >.<

PS: total HTML newbie here ; D

Elowyn · Oct 27, 2016

So... what exactly is this for? Am I allowed to use the formats posted here?

Wolf Rawrrr · Oct 28, 2016

@ViAdvena I have a question about your tab code from the first post.

Is it not possible to edit tabs in the normal view? When I click the tabs they don't actually switch the content, so no matter what I click it always shows tab1 content. The only way to edit the content of the other tabs seems to be in Source mode, which sucks.

Help? Such confuse *woof*

ViAdvena · Oct 28, 2016

@Nyctophiliac Yes you are ^^

@Wolf Rawrrr It should be possible to edit it without having to go to source mode o_o maybe there's a missing part in your code?

Wolf Rawrrr · Oct 28, 2016

Clicking the tabs while editing in normal mode makes them do the transition effects, colors change, even the content fades out - but what fades back in is always the same content of the first tab. Once posted, viewing the post works properly. However I just took a guess and changed this:

<input checked="checked" id="tab1" name="tabs" type="radio">

Start of tabber div, where labels come into play. I realized that the editor is constantly stuck in displaying whatever is defined here. So I put the id "tab2" and now it displays tab 2 content for all tabs (again, just while editing).

So I basically have to toggle this value in order to edit different tabs.

ViAdvena · Oct 28, 2016

Can I see the code? Or is it the same with the tab code in page one? Because I can't reproduce the problem with that code... @_@

Wolf Rawrrr · Oct 28, 2016

I copy/paste your source code into a reply box, and I can't switch tabs while editing. Are you saying you can?

/*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;
}

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. You can even edit the tab label. Just double click it.

(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.

ViAdvena · Oct 28, 2016

Oh I see. The tab breaks when there's multiple post with tabs in the same page, a bug that I haven't fixed yet >_> <_<

You should be able to edit the tabs in your post above

Elowyn · Oct 28, 2016

Found and Lost

does this work?

Why can't I write in the other tabs??

Wolf Rawrrr · Oct 28, 2016

Clicking tabs in Nyctophiliac's post switches tabs in my previous post, but not the other way around :S

So much weirdness. But that's not what I was pointing out, Vi. I just can't switch tabs while editing post, not without toggling the id flag in the piece of code I showed you. That seems to define which tab will be displaying in post editor.

ViAdvena · Oct 28, 2016

@Wolf Rawrrr Yes, that's why I said the tab breaks when there's multiple post with tabs in the same page. Have you tried the tab in your own private workshop?

Wolf Rawrrr · Oct 29, 2016

That's what I'm trying to say. It has nothing to do with multiple posts. I am working on a CSS character sheet using this in the workshop, and it's the same thing over there :/

I'm still able to do it, I just have to change that default tab id in the source to edit a different tab.

Sibelle Grey · Oct 29, 2016

I love your signature and I love this thread, it all looks so good.

I need to learn T~T (In the meantime, I'll just keep admiring your stuff).

Wolf Rawrrr · Oct 29, 2016

Oh and, @ViAdvena I was going to suggest something but forgot last time.

Perhaps you could advise people to customize their CSS classes by prefixing/suffixing them with their username (or part of). A unique identifier would help minimize, if not altogether eliminate code clashing. If only we could get everyone to do it *woof*

tsuneni · Nov 1, 2016

I've tried coding since I've reached 500 posts. No matter what I do, I can't seem to figure the simplest of coding out. Help?

Necessity4Fun · Nov 1, 2016

Elizabeth Duchamps said:
I've tried coding since I've reached 500 posts. No matter what I do, I can't seem to figure the simplest of coding out. Help?

What are you trying to do? OWO

tsuneni · Nov 1, 2016

Necessity4Fun said:
What are you trying to do? OWO

Preferably, I'd like to use the scrollbars. My problem is, how do we put in the coding? I find it in tutorials, but when I try to add it into a post, I can't figure out what to do...

Necessity4Fun · Nov 1, 2016

Elizabeth Duchamps said:
Preferably, I'd like to use the scrollbars. My problem is, how do we put in the coding? I find it in tutorials, but when I try to add it into a post, I can't figure out what to do...

I normally do my codding in the w3bschools testing thingy here

I just do it all like they do in the tutorials, then later use the source button up in the editor, to input it into RPN

Be careful and make sure you're not using coding like body, since it can break the site, and that Everything has a class (I tend to name the classes with the character name). This will avoid messing up with other people's posts.

Once you input the code in the source, click it again to preview and stuff.

If you use CSS, remember to start the code with an <p> tag, or the styling will get lost, for some reason >.<

I think this is all?

In normal coding you do CSS first and body stuff later. In here, it seems to like doing the opposite, but it will do so automatically the first time you test it. ^^

I hope this helps? At least a bit? >w<

PS: Oh! It's good to always test things in the private workshop first. Just in case things break...

I broke a thread once, It was scary >.<

fluticasone · Nov 2, 2016

because tagging is wonky for me i'll just reply here

regarding the tab issue: it's definitely an ID issue wherein you're using one ID across multiple posts, which leads you back to the first instance it was used

Noivian · Dec 13, 2016

@ViAdvena

Mind if I use your pandora box code?

Lord Pug · Dec 13, 2016

I'm definitely gonna use some of this. xD My dad is a computer programmer yet I still suck at HTML. I'm super rusty on it cuz JavaScript is just...so much easier. xD I'm such a nerd.

I'll give credit, btw...

ViAdvena · Dec 13, 2016

@Noivian @Lord Pug Sure, you can!

ViAdvena · Dec 14, 2016

.scontainer {
position:relative;
float:left;
margin-right:30px;
}

.photo{
width:200px;
height:200px;
border-radius:50%;
position:absolute; left:0; top:0; /*so the pic will be under the iris div*/
}

.iris {
width:200px;
height:200px;
overflow:hidden;
position:relative;
border-radius:50%;
border: 100px solid black;
transition: border 1s ease; /*border thickness animated for shutter effect*/

}

.iris:hover, .iris:focus {
border: 20px solid black; /*change border thickness*/
}

<p>

</p>
<style type="text/css">
.scontainer {
position:relative;
float:left;
margin-right:30px;
}

.photo{
width:200px;
height:200px;
border-radius:50%;
position:absolute; left:0; top:0; /*so the pic will be under the iris div*/
}

.iris {
width:200px;
height:200px;
overflow:hidden;
position:relative;
border-radius:50%;
border: 100px solid black;
transition: border 1s ease; /*border thickness animated for shutter effect*/

}

.iris:hover, .iris:focus {
border: 20px solid black; /*change border thickness*/
}</style>
<div class="scontainer">
<img alt="bGuC7dY.png" class="ipsImage photo" src="https://www.rpnation.com/applications/core/interface/imageproxy/imageproxy.php?img=http://i.imgur.com/bGuC7dY.png&key=b3e23eaea0241e6368834fd61a0a4fcc2daf2d0684ef2f83f53d5a1d7855dcea">
<div class="iris">

</div>
</div>

<div class="scontainer">
<img alt="tumblr_o99u579Si61ub4z3qo1_r1_250.jpg" class="ipsImage photo" src="https://www.rpnation.com/applications/core/interface/imageproxy/imageproxy.php?img=http://68.media.tumblr.com/fa569584cd52183e0293654d8b611293/tumblr_o99u579Si61ub4z3qo1_r1_250.jpg&key=721ac6900b24010650d790955456b0f15258d3dc6c4fa589e8284ef133fa9eeb">
<div class="iris">

</div>
</div>

<div class="scontainer">
<img alt="SDGtD6S.png" class="ipsImage photo" src="https://www.rpnation.com/applications/core/interface/imageproxy/imageproxy.php?img=http://i.imgur.com/SDGtD6S.png&key=79425f41d7b2ad9daa8a0724e0e71f6a1d8ed34d78803a1a23623da0324c53c4">
<div class="iris">

</div>
</div>
<div style="clear:both;">
<p>
 
</p>
</div>

Found this nifty iriswipe effect

nvsc123 · Jan 3, 2017

After hours of searching for a cool image effect, I finally found one, and it is amazing. Great work on your HTML. Definitely using (and learning from) some tricks here.

ewolf20 · Jan 13, 2017

ViAdvena said:
.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.

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

<p>
 
</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>
 
</p>
<img alt="4slSlAr.png" src="https://www.rpnation.com/applications/core/interface/imageproxy/imageproxy.php?img=http://i.imgur.com/LKTWbtv.png&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>
 
</p>
<img alt="4slSlAr.png" src="https://www.rpnation.com/applications/core/interface/imageproxy/imageproxy.php?img=http://i.imgur.com/jjWkMJa.png&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>
 
</p>
<img alt="4slSlAr.png" src="https://www.rpnation.com/applications/core/interface/imageproxy/imageproxy.php?img=http://i.imgur.com/RQHu2W5.png&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>
 
</p>
</div>

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

<p>
 
</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>
 
</p>
<img alt="4slSlAr.png" src="https://www.rpnation.com/applications/core/interface/imageproxy/imageproxy.php?img=http://i.imgur.com/LKTWbtv.png&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>
 
</p>
<img alt="4slSlAr.png" src="https://www.rpnation.com/applications/core/interface/imageproxy/imageproxy.php?img=http://i.imgur.com/jjWkMJa.png&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>
 
</p>
<img alt="4slSlAr.png" src="https://www.rpnation.com/applications/core/interface/imageproxy/imageproxy.php?img=http://i.imgur.com/RQHu2W5.png&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>
 
</p>
</div>

data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==

may i borrow this? maybe credit you for your good work?

HTML test thread

I'll keep trying, even if I'm not good enough...

word weaver

Wolf-Knight

Schrödinger's cat

Wolf-Knight

Schrödinger's cat

Wolf-Knight

Schrödinger's cat

word weaver

Wolf-Knight

Schrödinger's cat

Wolf-Knight

Worldweaver

Wolf-Knight

— princess.♥

I'll keep trying, even if I'm not good enough...

— princess.♥

I'll keep trying, even if I'm not good enough...

neru

Drinker of coffees

Is Satan a Beagle Puppy?!

Schrödinger's cat

Schrödinger's cat

LAUGH

the aspiring roleplayer

Users who are viewing this thread

Similar threads