Pyo's HTML Dump

Pyosimros

Pyosimros

☆☆☆

Here I'll post all the surface-level codes I decide to make. Please note that I only attempt to make things look good for Google Chrome on 100% zoom (or whatever it's called), maximized. On mobile it may appear insanely squished so...RIP to that.
​


 
​


*Note that if, for some strange, strange reason you wanna take my codes...I will send my personal Samuel L. Jackson on your ass. * ^ *
​


 
​






 
​


“Why the fuck am I doing this to myself?”


 

PERSONALITY


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 


BACKGROUND


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.








a.gif​


 
​


“Why do I quote stuff?”


 

NAME


Idk

 


AGE


I dunno

 


GENDER


I dunno
 
Last edited by a moderator:
I'm not personally a fan of the scroll bar, but I would still love to learn your ways!
 
professor pretzal said:
Yeah, seriously - How do you make such freakin' great forms and stuff with this new coding chizz??


It looks super cool.
Click to expand...


PlaguedWithInsanity said:
tHIS IS BEAUTIFUL 


HOW DO YOU DO
Click to expand...

Thanks! Makes me all happy inside!


giphy.gif



I learned most of what I know from www.codeacademy.com (this is a paid promotion, there's no strikethrough on rich text so I'm adding this, "I'm kidding") and some of my lovely friends! ^^

Noivian said:
I'm not personally a fan of the scroll bar, but I would still love to learn your ways!
Click to expand...

Yaahhh I can agree. Though it's something I can't remove I'm afraid. * ^ *


But uuhhh...yah like I said earlier I basically learned the crap I know from www.codeacademy.com and some friends.
 
Pyosimros said:
Thanks! Makes me all happy inside!





I learned most of what I know from www.codeacademy.com (this is a paid promotion, there's no strikethrough on rich text so I'm adding this, "I'm kidding") and some of my lovely friends! ^^


Yaahhh I can agree. Though it's something I can't remove I'm afraid. * ^ *


But uuhhh...yah like I said earlier I basically learned the crap I know from www.codeacademy.com and some friends.
Click to expand...



Make I take a peek at the code? I've fixed problems like this before.
 
I figured out. You just need to go and delete all margins, overflows, and heights for the divs. It seemed to fix it for me. 






 
​


“Why the fuck am I doing this to myself?”


 

PERSONALITY


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 


BACKGROUND


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.









 
​


“Why do I quote stuff?”


 

NAME


Idk

 


AGE


I dunno

 


GENDER


I dunno
 
Alternatively, you can change the heights to 855px, 800px, and 770px respectively.






 
​


“Why the fuck am I doing this to myself?”


 

PERSONALITY


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 


BACKGROUND


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.









 
​


“Why do I quote stuff?”


 

NAME


Idk

 


AGE


I dunno

 


GENDER


I dunno
 
Last edited by a moderator:
I was wondering if this would work
 
Last edited by a moderator:
.person {border-top: 8px double #2a49ba;
border-right: 8px double #2a49ba;
border-bottom: 8px double #2a49ba;
background-color: ghostwhite;
width:570px;
height: 400px;
padding:10px;
margin: auto;}

.title {float: right;
left:330px;}

.text {float:right;
margin-right:25px;
width: 300px;
height: 210px;
overflow: auto;
color: #2a49ba;
z-index:3;
text-align: right;
font-family: Raleway;}

.text::-webkit-scrollbar {
display: none;}


BItfXLt.png




"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


rdYCrWC.png
 
Last edited by a moderator:
@Pyosimros If you don't mind, can you tell me html thingy did you use to do these tricks? Like it says IPS quote or something when I look at the code. But I have no idea what that is and was hoping you had a link I could read or something. :P  
 
monopoisoner said:
psst pyo that last code you posted is messed up af on wider screens
Click to expand...

WELL SCREW THE WIDER SCREENS!!!! I WILL NOT ALLOW EQUALITY IN THIS SITE >:DDDDDDD 


Oh shit. Yah pretty much anything other than my screen'll fuck it up bigtime. Guess I'll live with other people seeing absolute shit on their screens, while they still see shit when they're on the same thing as me! ;-;  


EDIT: Alright I fixed the thing >.>

Bacon is fluffy said:
@Pyosimros If you don't mind, can you tell me html thingy did you use to do these tricks? Like it says IPS quote or something when I look at the code. But I have no idea what that is and was hoping you had a link I could read or something. :P  
Click to expand...

Uuuhhh yah sure...


<div style="border-top: 8px double #2a49ba; border-right: 8px double #2a49ba; border-bottom: 8px double #2a49ba; background-color: ghostwhite; width:570px; height: 400px; padding:10px; margin: auto;">
<div style="float: right; left:330px;">
<img alt="rdYCrWC.png" src="https://www.rpnation.com/applications/core/interface/imageproxy/imageproxy.php?img=http://fontmeme.com/embed.php?text=Namey%20Name&name=Overdrive_Sunset.ttf&size=58&style_color=2B4ABA&amp;key=6b670a29c76e2486956171f69d78099cc49720f775a63b63cf5d7457b2834cd2">
</div>

<div style="float:right; margin-right:25px; width: 300px; height: 210px; overflow: auto; color: #2a49ba; z-index:3; text-align: right; font-family: Raleway; ">
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>

<div style="float:left; margin-left: -100px; margin-top: -334px; z-index:2;">
<img alt="rdYCrWC.png" src="https://www.rpnation.com/applications/core/interface/imageproxy/imageproxy.php?img=http://i.imgur.com/rdYCrWC.png&amp;key=c3a8709ce95709fe4f823f9c0759807f32d66fc44e39b81a8ec3f66c04d3bcf9">
</div>
</div>



Nobody said:
How does one do.


HOW DOES ONE DOOOO
Click to expand...

A couple hours on a tutorial site, and then blankly staring at the screen thinking, "...Shit I still don't understand this..."
 
Last edited by a moderator:
Hmpfh!


I don't need fancy coding!


But damn, that's a beautiful character sheet... *-*
 
DANNNNNNGG!!! I wish I could play with the HTML stuff and be as talented as you! D:
 
@import url('https://fonts.googleapis.com/css?family=Raleway');
@import url('https://fonts.googleapis.com/css?family=Open+Sans');

.bg {opacity:0;
-moz-transition-duration: 0.6s;
-webkit-transition-duration: 0.6s;
-o-transition-duration: 0.6s;
background: #f8f8ff;
width: 367px;
height: 434px;
font-size:14px;
margin-left: 16px;
margin-top: -3px;
}

.bg:hover { opacity: 1;
}

.tabs {
position: relative;
min-height: 500px;
min-width: 400px;
clear: both;
margin: 25px 0px px;
}
.tab {
float: left;
}
.tab label {
background: #faedb9;
padding: 10px;
margin-left: -1px;
position: relative;
left: 1px;
font-family: 'Open Sans';
color: white;
}
.tab [type=radio] {
display: none;
}
.content {
position: absolute;
top: 28px;
left: 0px;
background: #f8f8ff;
right: 0px;
bottom: 0px;
padding: 20px;
width: 368px;
height: 434px;
font-family: 'Open Sans';
overflow: auto;
}
[type=radio]:checked ~ label {
background: #f8f8ff;
color: #faedb9;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
z-index: 1;
}
.content::-webkit-scrollbar {
display: none;}

 



BASICS

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.




PERSONALITY


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.




BIOGRAPHY


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.




EXTRA INFO


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 
Last edited by a moderator:
Pyosimros said:
(Just saying this isn't mobile friendly at all...as in, you probably can't see 80% of the coding bad because you have to hover over the thing >.>)
Click to expand...

I can actually just click on the cover on mobile and the tabs will appear.
*looks proud of herself for absolutely no reason*


Very nice yet still neat looking code though!


And I only just noticed that the placeholder/cover part is a picture, you cheater!


> w >


< w <


.....
I'm sorry, I'll go away now.
 
Nano said:
I can actually just click on the cover on mobile and the tabs will appear.
*looks proud of herself for absolutely no reason*


Very nice yet still neat looking code though!


And I only just noticed that the placeholder/cover part is a picture, you cheater!


> w >


< w <


.....
I'm sorry, I'll go away now.
Click to expand...

Tbh I had the bulk of the code done for the thing if it wasn't a picture, but I just got lazy and just redid it on PS X'D 


Another potential hour of work condensed into just 5-10 mins so I'm not disappointed in myself. And ehhh, well at least it's mobile-friendly now at least!


Also thank you! <3 
 
You must log in or register to reply here.

Users who are viewing this thread

Total: 2 (members: 0, guests: 2)

Similar threads

Girl P0wer
Showcase James Cameron Clan / Character Idea Dump
Replies
0
Views
34
Girl P0wer
Girl P0wer
cheeseburger90210
Advice/Help Does this read like a horror?
Replies
3
Views
155
nerdy tangents
nerdy tangents
Bill Nye The Octopi
Viewpoint Ethics and the Internet: a discussion on role-playing
2
Replies
27
Views
515
GojiBean
GojiBean
riwole_
Advice/Help what 'recruit here' theme is the most popular?
Replies
6
Views
182
riwole_
riwole_
koishifan
Advice/Help Help with starting an rp and finding partners
Replies
4
Views
168
Edric Blight
Edric Blight
Back
Top