nios
๐๐๐๐๐๐๐
Hi! I'm new to coding, and I'm stuck on a lot of things...
- 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?
- Credit keeps changing sizes whenever I post the code outside of my Private Workshop.
- 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?
- Organize the codes to make it cleaner and simpler.
- 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).
- Learn how to code tabs and transitions***
- 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
[/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
[/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 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
's tutorials lol), so I'm still hecka slow ;-;