• When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!

    Remember to credit artists when using work not your own.

Help Coding help, please?

nios

π”₯π”¦π”Ÿπ”’π”―π”«π”žπ”±π”¦π”«π”€
Hi! I'm new to coding, and I'm stuck on a lot of things...
  1. Font-family: I downloaded the fonts I want to display in my code from the Google Fonts page, but I'm still confused about how to input it in the code?
  2. Credit keeps changing sizes whenever I post the code outside of my Private Workshop.
  3. My code looks sooo unorganized. Everything looks redundant and too long, but I'm unsure of how to make the code look cleaner without messing the whole thing up.
My goals?
  1. Organize the codes to make it cleaner and simpler.
  2. I'm trying to merge three sets of code. I haven't finished the third set, but think I'll be fine once I get the hang of these two (lol I hope).
  3. Learn how to code tabs and transitions***
  4. Tackle this whole fonts/font-family thing *cries for help*
The function of the code?
  • A cast/roles list, I guess? Code_1 is the title page, and it is supposed to transition to Code_2 once the title name is clicked. Images shown on Code_2 are to act as tabs, which pops up a small CS. The small CS will be Code_3, but I'm in the midst of making it atm.

Code:
[class=credits]
margin: auto;
width: 300px;
height: auto;
font-size: 8px
text-align: left;
[/class]

[class=container]
position: relative;
width: 300px;
height: 360px;
background-color: #537497;
border-radius: 5px;
overflow: hidden;
margin-right: auto;
margin-left: auto;
padding: 0px;
[/class]

[class=bkgd]
position: absolute;
overflow: visible;
width: 270px;
height: 330px;
left: 15px;
top: 15px;
background: url(https://data.whicdn.com/images/132212075/original.gif);
background-size: 330%
border-radius: 0px;
border: 1px solid #FFF;
[/class]

[class=title]
position: absolute;
left: 24px;
top: 156px;
overflow: hidden;
width: 254px;
height: 48px;
text-align: center;
font-family: Times New Roman;
font-style: normal;
font-weight: bold;
font-size: 20px;
color: #FFF;
letter-spacing: 0px;
[/class]

[div class=credits]coded by [USER=72848]@nios[/USER][/div]
[div class=container]

Code:
[class=credits]
margin: auto;
width: 300px;
height: auto;
font-size: 8px
text-align: left;
[/class]

[class=cast]
position: relative;
width: 300px;
height: 360px;
background-color: #537497;
border-radius: 5px;
overflow: hidden;
margin-right: auto;
margin-left: auto;
padding: 0px;
[/class]

[class=bkgd]
position: absolute;
overflow: visible;
width: 270px;
height: 330px;
left: 15px;
top: 15px;
background-color: #000;
border-radius: 0px;
border: 1px solid #fff;
[/class]

[class=img1]
position: absolute;
overflow: visible;
width: 92px;
height: 95px;
left: 44px;
top: 28px;
background: url(https://i.pinimg.com/originals/bb/c1/b9/bbc1b999ebf17ea2863a616e304ff8df.gif);
background-size: 140px;
background-position: 50%;
border-radius: 0px;
border: 1px solid #fff;
[/class]

[class=img2]
position: absolute;
overflow: visible;
width: 92px;
height: 95px;
left: 165px;
top: 28px;
background: url(https://media.giphy.com/media/11uBTkP2FNYMpy/giphy.gif);
background-size: 175px;
background-position: 20%;
border-radius: 0px;
border: 1px solid #fff;
[/class]

[class=img3]
position: absolute;
overflow: visible;
width: 92px;
height: 95px;
left: 44px;
top: 133px;
background: url(https://i.pinimg.com/originals/8c/d9/17/8cd9176516bbaa4b803f6c5fdf240303.gif);
background-size: 230px;
background-position: 45%;
border-radius: 0px;
border: 1px solid #fff;
[/class]

[class=img4]
position: absolute;
overflow: visible;
width: 92px;
height: 95px;
left: 165px;
top: 133px;
background: url(https://i.pinimg.com/originals/c9/0c/e4/c90ce4e8f1250160b2dc30f3cfdb4818.gif);
background-size: 100px;
border-radius: 0px;
border: 1px solid #fff;
[/class]

[class=img5]
position: absolute;
overflow: visible;
width: 92px;
height: 95px;
left: 44px;
top: 238px;
background: url(https://i.pinimg.com/originals/c2/e6/a3/c2e6a3417e1880df24b172fd9b915c8f.gif);
background-size: 100px;
border-radius: 0px;
border: 1px solid #fff;
[/class]

[class=img6]
position: absolute;
overflow: visible;
width: 92px;
height: 95px;
left: 165px;
top: 238px;
background: url(https://i.pinimg.com/originals/4b/e0/d6/4be0d6f0d0c23c2ff002dae87644a20e.gif);
background-size: 150px;
background-position: 30% -3%;
border-radius: 0px;
border: 1px solid #fff;
[/class]

[div class=credits]coded by [USER=72848]@nios[/USER][/div]

[div class=cast]
[div class=bkgd][/div]
[div class=img1][/div]
[div class=img2][/div]
[div class=img3][/div]
[div class=img4][/div]
[div class=img5][/div]
[div class=img6][/div]
[/div]

[class=credits] margin: auto; width: 300px; height: auto; font-size: 8px text-align: left; [/class] [class=container] position: relative; width: 300px; height: 360px; background-color: #000; border-radius: 5px; overflow: hidden; margin-right: auto; margin-left: auto; padding: 0px; [/class] [class=bkgd] position: absolute; overflow: visible; width: 270px; height: 330px; left: 15px; top: 15px; background: url(https://data.whicdn.com/images/132212075/original.gif); background-size: 330% border-radius: 0px; border: 1px solid #FFF; [/class] [class=title] position: absolute; left: 24px; top: 156px; overflow: hidden; width: 254px; height: 48px; text-align: center; font-family: Times New Roman; font-style: normal; font-weight: bold; font-size: 20px; color: #FFF; letter-spacing: 0px; [/class] [div class=credits]coded by nios nios [/div] [div class=container] [div class=bkgd][/div] [div class=title]Rise of the Demigods[/div] [/div] [class=credits] margin: auto; width: 300px; height: auto; font-size: 8px text-align: left; [/class] [class=cast] position: relative; width: 300px; height: 360px; background-color: #000; border-radius: 5px; overflow: hidden; margin-right: auto; margin-left: auto; padding: 0px; [/class] [class=bkgd] position: absolute; overflow: visible; width: 270px; height: 330px; left: 15px; top: 15px; background-color: #000; border-radius: 0px; border: 1px solid #fff; [/class] [class=img1] position: absolute; overflow: visible; width: 92px; height: 95px; left: 44px; top: 28px; background: url(https://i.pinimg.com/originals/bb/c1/b9/bbc1b999ebf17ea2863a616e304ff8df.gif); background-size: 140px; background-position: 50%; border-radius: 0px; border: 1px solid #fff; [/class] [class=img2] position: absolute; overflow: visible; width: 92px; height: 95px; left: 165px; top: 28px; background: url(https://media.giphy.com/media/11uBTkP2FNYMpy/giphy.gif); background-size: 175px; background-position: 20%; border-radius: 0px; border: 1px solid #fff; [/class] [class=img3] position: absolute; overflow: visible; width: 92px; height: 95px; left: 44px; top: 133px; background: url(https://i.pinimg.com/originals/8c/d9/17/8cd9176516bbaa4b803f6c5fdf240303.gif); background-size: 230px; background-position: 45%; border-radius: 0px; border: 1px solid #fff; [/class] [class=img4] position: absolute; overflow: visible; width: 92px; height: 95px; left: 165px; top: 133px; background: url(https://i.pinimg.com/originals/c9/0c/e4/c90ce4e8f1250160b2dc30f3cfdb4818.gif); background-size: 100px; border-radius: 0px; border: 1px solid #fff; [/class] [class=img5] position: absolute; overflow: visible; width: 92px; height: 95px; left: 44px; top: 238px; background: url(https://i.pinimg.com/originals/c2/e6/a3/c2e6a3417e1880df24b172fd9b915c8f.gif); background-size: 100px; border-radius: 0px; border: 1px solid #fff; [/class] [class=img6] position: absolute; overflow: visible; width: 92px; height: 95px; left: 165px; top: 238px; background: url(https://i.pinimg.com/originals/4b/e0/d6/4be0d6f0d0c23c2ff002dae87644a20e.gif); background-size: 150px; background-position: 30% -3%; border-radius: 0px; border: 1px solid #fff; [/class] [div class=credits]coded by nios nios [/div] [div class=cast] [div class=bkgd][/div] [div class=img1][/div] [div class=img2][/div] [div class=img3][/div] [div class=img4][/div] [div class=img5][/div] [div class=img6][/div] [/div]
Thank you in advance for helping me <3 I've been reading through the tutorials and threads, but it still didn't make any sense to me. I've been doing this for like two days (I've been watching sox sox 's tutorials lol), so I'm still hecka slow ;-;
 
hey!! im a lil busy tonight, but a lot of these have quick fixes that aren't intuitive (I definitely missed them for the entire first few months I started coding), so id love to help!
 
hey!! im a lil busy tonight, but a lot of these have quick fixes that aren't intuitive (I definitely missed them for the entire first few months I started coding), so id love to help!
aah! Thankyou and I'm sorry for bothering you /.\ your tutorials were super helpful^^ I'm just a slow learner
 
aah! Thankyou and I'm sorry for bothering you /.\ your tutorials were super helpful^^ I'm just a slow learner
oh shhhh not bothering me at all! those videos are a little outdated tbh and ive learned a lot of better techniques since i uploaded them!
 
Hey nios -waves- Your stuff looks great (although the RP might be dead xD ). In terms of organizing your codes to makes them cleaner and simpler, honestly there's not much you need to do. In my opinion, your codes look great! Very clear and organized and simple. The only thing that could possibly be useful is going through each class and making sure you have your tags in a consistent order that makes sense (to you), and checking to see if there isn't anything you can get rid of or condense. Other than that, I think you've done a really great job (especially for someone new to this~)!

In terms of fonts, usually with Google Fonts using the code font-family: font name here; should work but, to be honest, I've found it to be somewhat hit and miss at times, especially depending on whether it's in a div or a class. Play around with it a little but, if it's being annoying and refusing to work, just use [font=font name here][/font] around your text inside the div itself, 'cause that one always works ^^
 
Hey nios -waves- Your stuff looks great (although the RP might be dead xD ). In terms of organizing your codes to makes them cleaner and simpler, honestly there's not much you need to do. In my opinion, your codes look great! Very clear and organized and simple. The only thing that could possibly be useful is going through each class and making sure you have your tags in a consistent order that makes sense (to you), and checking to see if there isn't anything you can get rid of or condense. Other than that, I think you've done a really great job (especially for someone new to this~)!

In terms of fonts, usually with Google Fonts using the code font-family: font name here; should work but, to be honest, I've found it to be somewhat hit and miss at times, especially depending on whether it's in a div or a class. Play around with it a little but, if it's being annoying and refusing to work, just use [font=font name here][/font] around your text inside the div itself, 'cause that one always works ^^

Heyoo Ayama! Yeah- I think it is, but I needed inspiration xD Thank you, tho! I'm just worried the finished code will be too long and confusing for anyone who wants to use them. When I merge everything together, I want to reorganize the order of classes and etc... I just hope it doesn't go kapoot-
I had a feeling I would have to use [font=font name here][/font] inside the div. I've been doing the same for the credit's font size [size= #px][/size]. Although, I have been seeing people use [font-family: "font name", "font name"][/font], so that's something I might have to try too?
 
Heyoo Ayama! Yeah- I think it is, but I needed inspiration xD Thank you, tho! I'm just worried the finished code will be too long and confusing for anyone who wants to use them. When I merge everything together, I want to reorganize the order of classes and etc... I just hope it doesn't go kapoot-
I had a feeling I would have to use [font=font name here][/font] inside the div. I've been doing the same for the credit's font size [size= #px][/size]. Although, I have been seeing people use [font-family: "font name", "font name"][/font], so that's something I might have to try too?
Yeah for size and font you do often have to play around until you figure out what works (I've had my frustrations with it as well). For the finished code, I definitely wouldn't worry about it as long as you keep things organized and consistent. The only thing you'll need to be careful on is naming your classes, 'cause for example both code 1 and code 2 here have classes named 'credits' and 'bkgd', so you'll have to do some renaming to differentiate.
 
hey love! now that I have time to sit and write this out...

so I definitely am not the best person to go to for bbscript/bbscript+ stuff (animations, transitions, etc.), and Ayama Ayama got the font thing covered, so I'll show you how to make your code more neat/condensed! For starters, your code doesn't look bad and is pretty simple to read, if that's what you're worried about. The only reason I'd condense your code is for your own sanity if you wanna change a property and not have to change it in 2045495 places, or if you find a bug and have to figure out which class it's in. this is one of the best-practices in software development that really distinguishes a more experienced developer: avoid code duplication!

so if you look back at my older codes, you'll see a whole lot of what you're doing in that second code with the pictures:
Code:
[class=img1]
position: absolute;
overflow: visible;
width: 92px;
height: 95px;
left: 44px;
top: 28px;
background: url(https://i.pinimg.com/originals/bb/c1/b9/bbc1b999ebf17ea2863a616e304ff8df.gif);
background-size: 140px;
background-position: 50%;
border-radius: 0px;
border: 1px solid #fff;
[/class]

[class=img2]
position: absolute;
overflow: visible;
width: 92px;
height: 95px;
left: 165px;
top: 28px;
background: url(https://media.giphy.com/media/11uBTkP2FNYMpy/giphy.gif);
background-size: 175px;
background-position: 20%;
border-radius: 0px;
border: 1px solid #fff;
[/class]

[class=img3]
position: absolute;
overflow: visible;
width: 92px;
height: 95px;
left: 44px;
top: 133px;
background: url(https://i.pinimg.com/originals/8c/d9/17/8cd9176516bbaa4b803f6c5fdf240303.gif);
background-size: 230px;
background-position: 45%;
border-radius: 0px;
border: 1px solid #fff;
[/class]

[class=img4]
position: absolute;
overflow: visible;
width: 92px;
height: 95px;
left: 165px;
top: 133px;
background: url(https://i.pinimg.com/originals/c9/0c/e4/c90ce4e8f1250160b2dc30f3cfdb4818.gif);
background-size: 100px;
border-radius: 0px;
border: 1px solid #fff;
[/class]

[class=img5]
position: absolute;
overflow: visible;
width: 92px;
height: 95px;
left: 44px;
top: 238px;
background: url(https://i.pinimg.com/originals/c2/e6/a3/c2e6a3417e1880df24b172fd9b915c8f.gif);
background-size: 100px;
border-radius: 0px;
border: 1px solid #fff;
[/class]

[class=img6]
position: absolute;
overflow: visible;
width: 92px;
height: 95px;
left: 165px;
top: 238px;
background: url(https://i.pinimg.com/originals/4b/e0/d6/4be0d6f0d0c23c2ff002dae87644a20e.gif);
background-size: 150px;
background-position: 30% -3%;
border-radius: 0px;
border: 1px solid #fff;
[/class]

[div class=img1][/div]
[div class=img2][/div]
[div class=img3][/div]
[div class=img4][/div]
[div class=img5][/div]
[div class=img6][/div]

see how long your classes are? there's a whoooole bunch of repeated properties here that aren't necessary, since all of your images have the same position type/overflow/width/height/border etc. the way that I structure this type of code when I work in html is how I've come to structure it in bbcode, like this:
Code:
[class=imgs]
position: absolute;
overflow: visible;
width: 92px;
height: 95px;
border-radius: 0px;
border: 1px solid #fff;
[/class]

[class=img1]
left: 44px;
top: 28px;
background: url(https://i.pinimg.com/originals/bb/c1/b9/bbc1b999ebf17ea2863a616e304ff8df.gif);
background-size: 140px;
background-position: 50%;
[/class]

[class=img2]
left: 165px;
top: 28px;
background: url(https://media.giphy.com/media/11uBTkP2FNYMpy/giphy.gif);
background-size: 175px;
background-position: 20%;
[/class]

[class=img3]
left: 44px;
top: 133px;
background: url(https://i.pinimg.com/originals/8c/d9/17/8cd9176516bbaa4b803f6c5fdf240303.gif);
background-size: 230px;
background-position: 45%;
[/class]

[class=img4]
left: 165px;
top: 133px;
background: url(https://i.pinimg.com/originals/c9/0c/e4/c90ce4e8f1250160b2dc30f3cfdb4818.gif);
background-size: 100px;
[/class]

[class=img5]
left: 44px;
top: 238px;
background: url(https://i.pinimg.com/originals/c2/e6/a3/c2e6a3417e1880df24b172fd9b915c8f.gif);
background-size: 100px;
[/class]

[class=img6]
left: 165px;
top: 238px;
background: url(https://i.pinimg.com/originals/4b/e0/d6/4be0d6f0d0c23c2ff002dae87644a20e.gif);
background-size: 150px;
background-position: 30% -3%;
[/class]

[div class="imgs img1"][/div]
[div class="imgs img2"][/div]
[div class="imgs img3"][/div]
[div class="imgs img4"][/div]
[div class="imgs img5"][/div]
[div class="imgs img6"][/div]
so what i'm doing here instead is making a generic "imgs" class, which i assign to all the images. this class holds all the properties that are shared among all of your img classes, so if you decide you wanna make all your pics wider, you can just change the width property one spot rather than six. then your img(1-6) classes can have just the properties that are unique to each image, like positioning and background-size.



the only other thing that i'd mess around with in your images is the use of a flexbox, instead of positioning all your images manually with the "left" and "top" properties (which is how i did it in my adobe xd series, but i've come to learn that that's really tedious and inflexible). here's an example of how I used a flexbox in my melons code, which has a similar gallery at the bottom! the classes "gallery", "galpic", and "column" are the ones that pertain to the flexbox.
[class=splash] position: relative; box-sizing: border-box; background: #E5E5E5; width: 20em; height: 400px; background-color: #EE3462; padding: 0; border-radius: 1em; margin-top: -400px; margin-bottom: auto; margin-left: auto; margin-right: auto; [/class] [class=box] position: relative; width: 17.35em; height: 360px; left: 0.65em; top: 0.6em; background-color: #241117; border-radius: 1em; border: 0.675em solid #8CC63F; [/class] [class=intro] position: absolute; top: 5.75em; overflow: hidden; width: 100%; height: auto; text-align: center; font-style: normal; font-weight: normal; font-size: 1.4em; color: #E0DDCA; text-transform: lowercase; animation:{post_id}throb 10s linear infinite; [/class] [animation=shake] [keyframe=0]transform: translate(1px, 1px) rotate(5deg);[/keyframe] [keyframe=10]transform: translate(-1px, -2px) rotate(-5deg);[/keyframe] [keyframe=20]transform: translate(1px, 1px) rotate(5deg);[/keyframe] [keyframe=30]transform: translate(-1px, -2px) rotate(-5deg);[/keyframe] [keyframe=40]transform: translate(1px, 1px) rotate(5deg);[/keyframe] [keyframe=50]transform: translate(-1px, -2px) rotate(-5deg);[/keyframe] [keyframe=60]transform: translate(1px, 1px) rotate(5deg);[/keyframe] [keyframe=70]transform: translate(-1px, -2px) rotate(-5deg);[/keyframe] [keyframe=80]transform: translate(1px, 1px) rotate(5deg);[/keyframe] [keyframe=90]transform: translate(-1px, -2px) rotate(-5deg);[/keyframe] [keyframe=100]transform: translate(1px, 1px) rotate(5deg);[/keyframe] [/animation] [animation=throb] [keyframe=0]transform: scale(1.02);[/keyframe] [keyframe=10]transform: scale(0.98);[/keyframe] [keyframe=20]transform: scale(1.02);[/keyframe] [keyframe=30]transform: scale(0.98);[/keyframe] [keyframe=40]transform: scale(1.02);[/keyframe] [keyframe=50]transform: scale(0.98);[/keyframe] [keyframe=60]transform: scale(1.02);[/keyframe] [keyframe=70]transform: scale(0.98);[/keyframe] [keyframe=80]transform: scale(1.02);[/keyframe] [keyframe=90]transform: scale(0.98);[/keyframe] [keyframe=100]transform: scale(1.02);[/keyframe] [/animation] [class=melonslice] position: relative; overflow: visible; width: 5em; height: 5em; top: 10.25em; margin-left: auto; margin-right: auto; background: url(https://imgur.com/8nMcuCy.png); background-size: 100%; animation:{post_id}shake 5s linear infinite; [/class] [class name=melonslice state=hover] background: url(https://i.imgur.com/tPxQ0R3.png); animation:{post_id}shake 5s linear infinite; background-size: 100%; transition-duration: 0s; top: 10.6em; [/class] [script class=melonslice on=click] addClass slideup splash [/script] [class=slideup] animation-name: {post_id}slup; animation-duration:1.7s; animation-fill-mode:forwards; [/class] [class=slidedown] animation-name: {post_id}slown; animation-duration:1.7s; animation-fill-mode:forwards; [/class] [class=bkgd] left: 0em; position: relative; overflow-x: hidden; width: 20em; padding: 0px; background-color: #241117; margin: auto; border-radius: 1em; [/class] [class=bkgdcont] cursor: url('https://i.imgur.com/fTiQP63.png'), auto; position: relative; box-sizing: border-box; width: 21.5em; overflow-y: scroll; overflow-x: hidden; height: 400px; background-color: #241117; border-radius: 1em; padding-right: 150px; [/class] [animation=slup] [keyframe=0]transform: translateY(0%);[/keyframe] [keyframe=100]transform: translateY(-100%);visibility:hidden;[/keyframe] [/animation] [animation=slown] [keyframe=0]transform: translateY(-100%);[/keyframe] [keyframe=100]transform: translateY(0%);[/keyframe] [/animation] [class=title] position: absolute; left: 4%; top: 2%; overflow: hidden; width: 45%; height: 10em; text-align: left; font-style: normal; font-weight: normal; text-transform: lowercase; font-size: 1.8em; line-height: .8em; color: #E9EEA7; [/class] [class=gallery] position: absolute; left: 0%; top: 1em; overflow: hidden; width: 95%; height: 27em; display: flex; flex-direction: row; justify-content: space-evenly; [/class] [class=column] width: 45%; height: 9em; margin-left: 0.5em; [/class] [class=galpic] width: 90%; height: 90%; background-position: 0% 0%; margin-bottom: 0.5em; border-radius: 1em; [/class] [class name=galpic state=hover] animation:{post_id}throb 5s linear infinite; transition-duration: 0.2s; border: 1px solid #EE3462; [/class] [class=credit] position: relative; overflow: hidden; width: 100%; height: auto; text-align: center; font-style: normal; font-weight: normal; font-size: .5em; color: #EE3462; opacity: 0.3; [/class] [div class=bkgd][div class=bkgdcont] [div class=gallery] [div class=column] [div class=galpic style="background: url(https://i.pinimg.com/originals/e7/aa/d8/e7aad80e6ba12730db82d82a33c40e92.gif); background-size: 100%;"][/div] [div class=galpic style="background: url(https://i.pinimg.com/564x/c5/9c/9b/c59c9b5dc033ec7c3ea9fd67716aa0df.jpg); background-size: 110%;"][/div] [div class=galpic style="background: url(https://i.pinimg.com/originals/cd/a3/45/cda345a8fa7c6d2ce37a59aa59419b4f.gif); background-size: 100%;"][/div] [/div] [div class=column] [div class=galpic style="background: url(https://i.pinimg.com/474x/11/c1/97/11c1973ad99b69d2568401f5f617141c.jpg); background-size: 110%;"][/div] [div class=galpic style="background: url(https://i.pinimg.com/originals/9e/5a/fe/9e5afebba3aa366c6db280bedf8784b9.gif); background-size: 120%; background-position: 50% 0%;"][/div] [div class=galpic style="background: url(https://i.pinimg.com/474x/e5/80/0c/e5800c67dd05a84a35408c72da9550ef.jpg); background-size: 110%;"][/div] [/div] [/div] [/div] [div class=splash][div class=box][div class=melonslice][/div][div class=intro]take a bite![/div][/div][/div][/div][div class=credit]code by sox sox [/div]

Code:
[nobr]
    [class=splash]
        position: relative;
        box-sizing: border-box;
        background: #E5E5E5;
        width: 20em;
        height: 400px;
        background-color: #EE3462;
        padding: 0;
        border-radius: 1em;
        margin-top: -400px;
        margin-bottom: auto;
        margin-left: auto;
        margin-right: auto;
    [/class]
    [class=box]
        position: relative;
        width: 17.35em;
        height: 360px;
        left: 0.65em;
        top: 0.6em;
        background-color: #241117;
        border-radius: 1em;
        border: 0.675em solid #8CC63F;
    [/class]
    [class=intro]
        position: absolute;
        top: 5.75em;
        overflow: hidden;
        width: 100%;
        height: auto;
        text-align: center;
        font-style: normal;
        font-weight: normal;
        font-size: 1.4em;
        color: #E0DDCA;
        text-transform: lowercase;
        animation:{post_id}throb 10s linear infinite;
    [/class]
    [animation=shake]
        [keyframe=0]transform: translate(1px, 1px) rotate(5deg);[/keyframe]
        [keyframe=10]transform: translate(-1px, -2px) rotate(-5deg);[/keyframe]
        [keyframe=20]transform: translate(1px, 1px) rotate(5deg);[/keyframe]
        [keyframe=30]transform: translate(-1px, -2px) rotate(-5deg);[/keyframe]
        [keyframe=40]transform: translate(1px, 1px) rotate(5deg);[/keyframe]
        [keyframe=50]transform: translate(-1px, -2px) rotate(-5deg);[/keyframe]
        [keyframe=60]transform: translate(1px, 1px) rotate(5deg);[/keyframe]
        [keyframe=70]transform: translate(-1px, -2px) rotate(-5deg);[/keyframe]
        [keyframe=80]transform: translate(1px, 1px) rotate(5deg);[/keyframe]
        [keyframe=90]transform: translate(-1px, -2px) rotate(-5deg);[/keyframe]
        [keyframe=100]transform: translate(1px, 1px) rotate(5deg);[/keyframe]
    [/animation]
    [animation=throb]
        [keyframe=0]transform: scale(1.02);[/keyframe]
        [keyframe=10]transform: scale(0.98);[/keyframe]
        [keyframe=20]transform: scale(1.02);[/keyframe]
        [keyframe=30]transform: scale(0.98);[/keyframe]
        [keyframe=40]transform: scale(1.02);[/keyframe]
        [keyframe=50]transform: scale(0.98);[/keyframe]
        [keyframe=60]transform: scale(1.02);[/keyframe]
        [keyframe=70]transform: scale(0.98);[/keyframe]
        [keyframe=80]transform: scale(1.02);[/keyframe]
        [keyframe=90]transform: scale(0.98);[/keyframe]
        [keyframe=100]transform: scale(1.02);[/keyframe]
    [/animation]
    [comment]all vectors credit to vecteezy. you can find and edit the .pngs here: [MEDIA=imgur]a/PUT86Uh[/MEDIA][/comment]
    [class=melonslice]
        position: relative;
        overflow: visible;
        width: 5em;
        height: 5em;
        top: 10.25em;
        margin-left: auto;
        margin-right: auto;
        background: url(https://imgur.com/8nMcuCy.png);
        background-size: 100%;
        animation:{post_id}shake 5s linear infinite;
    [/class]
    [class name=melonslice state=hover]
        background: url(https://i.imgur.com/tPxQ0R3.png);
        animation:{post_id}shake 5s linear infinite;
        background-size: 100%;
        transition-duration: 0s;
        top: 10.6em;
    [/class]
    [script class=melonslice on=click]
        addClass slideup splash
    [/script]
    [class=slideup]
        animation-name: {post_id}slup;
        animation-duration:1.7s;
        animation-fill-mode:forwards;
    [/class]
    [class=slidedown]
        animation-name: {post_id}slown;
        animation-duration:1.7s;
        animation-fill-mode:forwards;
    [/class]
    [class=bkgd]
        left: 0em;
        position: relative; 
        overflow-x: hidden; 
        width: 20em;
       padding: 0px;
        background-color: #241117;
        margin: auto;
        border-radius: 1em;
    [/class]
    [class=bkgdcont]
        cursor: url('https://i.imgur.com/fTiQP63.png'), auto;
        position: relative;
        box-sizing: border-box;
        width: 21.5em;
        overflow-y: scroll; 
        overflow-x: hidden;
        height: 400px;
        background-color: #241117;
        border-radius: 1em;
        padding-right: 150px;
    [/class]
    [animation=slup]
        [keyframe=0]transform: translateY(0%);[/keyframe]
        [keyframe=100]transform: translateY(-100%);visibility:hidden;[/keyframe]
    [/animation]
    [animation=slown]
        [keyframe=0]transform: translateY(-100%);[/keyframe]
        [keyframe=100]transform: translateY(0%);[/keyframe]
    [/animation]
    [class=title]
        position: absolute;
        left: 4%;
        top: 2%;
        overflow: hidden;
        width: 45%;
        height: 10em;
        text-align: left;
        font-style: normal;
        font-weight: normal;
        text-transform: lowercase;
        font-size: 1.8em;
        line-height: .8em;
        color: #E9EEA7;
    [/class]
    [class=gallery]
        position: absolute;
        left: 0%;
        top: 1em;
        overflow: hidden;
        width: 95%;
        height: 27em;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
    [/class]
    [class=column]
        width: 45%;
        height: 9em;
        margin-left: 0.5em;
    [/class]
    [class=galpic]
        width: 90%;
        height: 90%;
        background-position: 0% 0%;
        margin-bottom: 0.5em;
        border-radius: 1em;
    [/class]
    [class name=galpic state=hover]
        animation:{post_id}throb 5s linear infinite;
        transition-duration: 0.2s;
        border: 1px solid #EE3462;
    [/class]
    [class=credit]
        position: relative;
        overflow: hidden;
        width: 100%;
        height: auto;
        text-align: center;
        font-style: normal;
        font-weight: normal;
        font-size: .5em;
        color: #EE3462;
        opacity: 0.3;
    [/class]

[div class=bkgd][div class=bkgdcont]
    [div class=gallery]
        [div class=column]
            [div class=galpic style="background: url(https://i.pinimg.com/originals/e7/aa/d8/e7aad80e6ba12730db82d82a33c40e92.gif); background-size: 100%;"][/div]
            [div class=galpic style="background: url(https://i.pinimg.com/564x/c5/9c/9b/c59c9b5dc033ec7c3ea9fd67716aa0df.jpg); background-size: 110%;"][/div]
            [div class=galpic style="background: url(https://i.pinimg.com/originals/cd/a3/45/cda345a8fa7c6d2ce37a59aa59419b4f.gif); background-size: 100%;"][/div]
        [/div]
        [div class=column]
            [div class=galpic style="background: url(https://i.pinimg.com/474x/11/c1/97/11c1973ad99b69d2568401f5f617141c.jpg); background-size: 110%;"][/div]
            [div class=galpic style="background: url(https://i.pinimg.com/originals/9e/5a/fe/9e5afebba3aa366c6db280bedf8784b9.gif); background-size: 120%; background-position: 50% 0%;"][/div]
            [div class=galpic style="background: url(https://i.pinimg.com/474x/e5/80/0c/e5800c67dd05a84a35408c72da9550ef.jpg); background-size: 110%;"][/div]
        [/div]
    [/div]
[/div]

[div class=splash][div class=box][div class=melonslice][/div][div class=intro][font=Jua]take a bite![/font][/div][/div][/div][/div][/nobr][div class=credit]code by [USER=2383][COLOR=#EE3462]sox[/COLOR][/USER][/div]

of course that's just a suggestion, but it's worth checking out in case you wanna add more pictures or mess with the spacing. all in all, I hope this helped, and feel free to ask me any other questions!
 
Oh my gosh yess! This makes sense haha. I had a feeling I would have to change a few of my class names, as Ayama Ayama had mentioned. Changing the class names won't affect the code, right? It won't crash? I'm sorry I'm still learning the lingo.
I also noticed that if I made a generic "imgs" class, I would have to make sure that that is included within the div class below [div class= "imgs img2"][/div]. I bet I would've missed that had I not asked for help lol. Your example does make it look 10x cleaner, which is what I'm striving for sox sox . I didn't get to finish watching your Dreamweaver series since I can't afford it. I do have a program called Netbeans IDE, but I wasn't sure if it will work the same way. Oh well-
The flexbox will have to go within each individual img class, correct?
 
Oh my gosh yess! This makes sense haha. I had a feeling I would have to change a few of my class names, as Ayama Ayama had mentioned. Changing the class names won't affect the code, right? It won't crash? I'm sorry I'm still learning the lingo.
I also noticed that if I made a generic "imgs" class, I would have to make sure that that is included within the div class below [div class= "imgs img2"][/div]. I bet I would've missed that had I not asked for help lol. Your example does make it look 10x cleaner, which is what I'm striving for sox sox . I didn't get to finish watching your Dreamweaver series since I can't afford it. I do have a program called Netbeans IDE, but I wasn't sure if it will work the same way. Oh well-
The flexbox will have to go within each individual img class, correct?
ahhh i'm glad i could help! to answer your questions:
  • nope! changing the class name won't crash it so long as you change it down in your div too!
  • now that i'm a student again and not working at my old job, i don't have dreamweaver anymore either lol tbh almost any IDE works so long as it has a "find+replace" function! netbeans should be fine, since it supports HTML. once you're comfortable enough manipulating code and the smaller details come naturally to you, you won't need to use any IDE at all! i've just recently begun coding directly in the rpn text editor.
  • the flexbox component is a little tricky to explain in words, since it's kind of like a grid but also kinda not. i'd recommend poking around this part of the code to get an idea for how it works:
    • Code:
      [div class=bkgd][div class=bkgdcont]
      [div class=gallery]
      [div class=column]
      [div class=galpic style="background: url(https://i.pinimg.com/originals/e7/aa/d8/e7aad80e6ba12730db82d82a33c40e92.gif); background-size: 100%;"][/div]
      [div class=galpic style="background: url(https://i.pinimg.com/564x/c5/9c/9b/c59c9b5dc033ec7c3ea9fd67716aa0df.jpg); background-size: 110%;"][/div]
      [div class=galpic style="background: url(https://i.pinimg.com/originals/cd/a3/45/cda345a8fa7c6d2ce37a59aa59419b4f.gif); background-size: 100%;"][/div]
      [/div]
      [div class=column]
      [div class=galpic style="background: url(https://i.pinimg.com/474x/11/c1/97/11c1973ad99b69d2568401f5f617141c.jpg); background-size: 110%;"][/div]
      [div class=galpic style="background: url(https://i.pinimg.com/originals/9e/5a/fe/9e5afebba3aa366c6db280bedf8784b9.gif); background-size: 120%; background-position: 50% 0%;"][/div]
      [div class=galpic style="background: url(https://i.pinimg.com/474x/e5/80/0c/e5800c67dd05a84a35408c72da9550ef.jpg); background-size: 110%;"][/div]
      [/div]
      [/div]
    • try putting your own pictures and formatting into it! the way that i understand it, the flexbox is just a series of columns in which you can add any number of rows, and they don't have to be equal (i thinkkk)!! so the way it's structured in the code above, it goes like: "in my flexbox, i have two columns. in each of those two columns, i have three rows (which happen to be square divs with pictures as the backgrounds)." i see a lot of people doing fancy things with flexboxes, even though i have no clue how they do it (lmao) but this is my very basic implementation!
    • EDIT: i can't believe i forgot to mention this! the way you declare a flexbox is by putting display: flex; flex-direction: row; justify-content: space-evenly; inside your main class that will become your flexbox. in my code, it's the "gallery" class. you don't have to put this in all of the image classes!
 
ahhh i'm glad i could help! to answer your questions:
  • nope! changing the class name won't crash it so long as you change it down in your div too!
  • now that i'm a student again and not working at my old job, i don't have dreamweaver anymore either lol tbh almost any IDE works so long as it has a "find+replace" function! netbeans should be fine, since it supports HTML. once you're comfortable enough manipulating code and the smaller details come naturally to you, you won't need to use any IDE at all! i've just recently begun coding directly in the rpn text editor.
  • the flexbox component is a little tricky to explain in words, since it's kind of like a grid but also kinda not. i'd recommend poking around this part of the code to get an idea for how it works:
    • Code:
      [div class=bkgd][div class=bkgdcont]
      [div class=gallery]
      [div class=column]
      [div class=galpic style="background: url(https://i.pinimg.com/originals/e7/aa/d8/e7aad80e6ba12730db82d82a33c40e92.gif); background-size: 100%;"][/div]
      [div class=galpic style="background: url(https://i.pinimg.com/564x/c5/9c/9b/c59c9b5dc033ec7c3ea9fd67716aa0df.jpg); background-size: 110%;"][/div]
      [div class=galpic style="background: url(https://i.pinimg.com/originals/cd/a3/45/cda345a8fa7c6d2ce37a59aa59419b4f.gif); background-size: 100%;"][/div]
      [/div]
      [div class=column]
      [div class=galpic style="background: url(https://i.pinimg.com/474x/11/c1/97/11c1973ad99b69d2568401f5f617141c.jpg); background-size: 110%;"][/div]
      [div class=galpic style="background: url(https://i.pinimg.com/originals/9e/5a/fe/9e5afebba3aa366c6db280bedf8784b9.gif); background-size: 120%; background-position: 50% 0%;"][/div]
      [div class=galpic style="background: url(https://i.pinimg.com/474x/e5/80/0c/e5800c67dd05a84a35408c72da9550ef.jpg); background-size: 110%;"][/div]
      [/div]
      [/div]
    • try putting your own pictures and formatting into it! the way that i understand it, the flexbox is just a series of columns in which you can add any number of rows, and they don't have to be equal (i thinkkk)!! so the way it's structured in the code above, it goes like: "in my flexbox, i have two columns. in each of those two columns, i have three rows (which happen to be square divs with pictures as the backgrounds)." i see a lot of people doing fancy things with flexboxes, even though i have no clue how they do it (lmao) but this is my very basic implementation!
    • EDIT: i can't believe i forgot to mention this! the way you declare a flexbox is by putting display: flex; flex-direction: row; justify-content: space-evenly; inside your main class that will become your flexbox. in my code, it's the "gallery" class. you don't have to put this in all of the image classes!
squeee! I was finally able to read this, but ahh! Cool, I can see if Netbeans has that function^^ and I will have to play around with this flexbox code. Just the name alone is intimidating haha...
This was super helpful! Thank you :DD
Lol btw I love how you color coded everything^ (lowkey might be one of those people with the case full of colored pens-) It really helped me understand.
I think that covers everything I was confused about. Animations such as hovers, tabs, and transitions will just be something I'll have to experiment with haha.
Thank you Ayama Ayama and sox sox for helping me <3 <3
 
squeee! I was finally able to read this, but ahh! Cool, I can see if Netbeans has that function^^ and I will have to play around with this flexbox code. Just the name alone is intimidating haha...
This was super helpful! Thank you :DD
Lol btw I love how you color coded everything^ (lowkey might be one of those people with the case full of colored pens-) It really helped me understand.
I think that covers everything I was confused about. Animations such as hovers, tabs, and transitions will just be something I'll have to experiment with haha.
Thank you Ayama Ayama and sox sox for helping me <3 <3
I'm one of those people that needs everything to be color coded so i feel u. anytime!!
 

Users who are viewing this thread

Back
Top