Resource Amb's BBCode Adventure!

[cadence]

Hello! As you can see, I'm Ambie and this is my coding shop, sort of? I am, by no means, any good at coding, but I was decent at HTML and finally thought I'd give BBCode a shot. Despite what people say, I find BBCode much harder than HTML so I'm still learning the ropes here. What you'll witness here, if you decide to watch this thread, is my journey throughout learning to code. I would love for you to tell me how I'm doing (be honest, criticism is most welcome) and what I can do to improve. Send me helpful links or give some helpful tips! Or if you'd like, join this journey with me. Au revoir.

 

[cadence]

[class=Background1]
background-color:#3B4F47;
margin:auto;
width:500px;
height:500px;
padding:20px;
background-size:cover;
[/class]

[class=Hover1]
background-color:#BBC8BB;
height:250px;
padding:5px;
overflow:auto;
padding-left:30px;
padding-right:30px;
[/class]

[class name=Hover1 state=hover]
background-color:#DAD9DA;
height:250px;
padding:5px;
padding-left:30px;
overflow:auto;
padding-right:30px;
[/class]

[class=Image1]
background-image:url(https://i.pinimg.com/originals/b5/ec/12/b5ec1229c4bd5d615f288f1e026f5cea.jpg);
width:240px;
height:180px;
background-size:100% 100%;
[/class]
[class=Image2]
background-image:url(https://i.pinimg.com/564x/47/30/ba/4730ba3ff4f68cb7ec46d969fdda214c.jpg);
width:240px;
height:180px;
background-size:100% 100%;
[/class]
[div class=Background1]Short quote goes here ~!
[div class=Hover1]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce mauris neque, mattis id urna id, venenatis sagittis erat. Nullam arcu nulla, aliquam sit amet orci non, euismod tincidunt felis. Proin pharetra porttitor ex, sed dapibus lorem placerat a. Curabitur blandit, massa eget ultricies ultrices, justo mi maximus enim, ac tempus tellus tellus ut augue. Maecenas quis egestas est. In pharetra egestas eros in scelerisque. Fusce quis nunc ut velit rhoncus mollis. Sed eleifend aliquet eros sed pharetra. Curabitur quis orci at nibh malesuada tincidunt. Nulla eu sem pulvinar, porttitor odio nec, placerat ligula. Nulla facilisi. Morbi id convallis massa. Donec pretium blandit enim, vel bibendum arcu feugiat quis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce mauris neque, mattis id urna id, venenatis sagittis erat. Nullam arcu nulla, aliquam sit amet orci non, euismod tincidunt felis. Proin pharetra porttitor ex, sed dapibus lorem placerat a. Curabitur blandit, massa eget ultricies ultrices, justo mi maximus enim, ac tempus tellus tellus ut augue. Maecenas quis egestas est. In pharetra egestas eros in scelerisque. Fusce quis nunc ut velit rhoncus mollis. Sed eleifend aliquet eros sed pharetra. Curabitur quis orci at nibh malesuada tincidunt. Nulla eu sem pulvinar, porttitor odio nec, placerat ligula. Nulla facilisi. Morbi id convallis massa. Donec pretium blandit enim, vel bibendum arcu feugiat quis.

[/div]

[div class=Image1] [/div]

[div class=Image2] [/div]

Spoiler: Code

[class=Background1]
background-color:#3B4F47;
margin:auto;
width:500px;
height:500px;
padding:20px;
background-size:cover;
[/class]

[class=Hover1]
background-color:#BBC8BB;
height:250px;
padding:5px;
overflow:auto;
padding-left:30px;
padding-right:30px;
[/class]

[class name=Hover1 state=hover]
background-color:#DAD9DA;
height:250px;
padding:5px;
padding-left:30px;
overflow:auto;
padding-right:30px;
[/class]

[class=Image1]
background-image:url(https://i.pinimg.com/originals/b5/ec/12/b5ec1229c4bd5d615f288f1e026f5cea.jpg);
width:240px;
height:180px;
background-size:100% 100%;
[/class]
[class=Image2]
background-image:url(https://i.pinimg.com/564x/47/30/ba/4730ba3ff4f68cb7ec46d969fdda214c.jpg);
width:240px;
height:180px;
background-size:100% 100%;
[/class]
[div class=Background1][Font=Cedarville Cursive][color=white][size=7]Short quote goes here ~![/size][/color][/font]
[div class=Hover1][font=Raleway][size=3][color=#3B4F47][Justify][row][column=span4]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce mauris neque, mattis id urna id, venenatis sagittis erat. Nullam arcu nulla, aliquam sit amet orci non, euismod tincidunt felis. Proin pharetra porttitor ex, sed dapibus lorem placerat a. Curabitur blandit, massa eget ultricies ultrices, justo mi maximus enim, ac tempus tellus tellus ut augue. Maecenas quis egestas est. In pharetra egestas eros in scelerisque. Fusce quis nunc ut velit rhoncus mollis. Sed eleifend aliquet eros sed pharetra. Curabitur quis orci at nibh malesuada tincidunt. Nulla eu sem pulvinar, porttitor odio nec, placerat ligula. Nulla facilisi. Morbi id convallis massa. Donec pretium blandit enim, vel bibendum arcu feugiat quis.[/column][column=span4]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce mauris neque, mattis id urna id, venenatis sagittis erat. Nullam arcu nulla, aliquam sit amet orci non, euismod tincidunt felis. Proin pharetra porttitor ex, sed dapibus lorem placerat a. Curabitur blandit, massa eget ultricies ultrices, justo mi maximus enim, ac tempus tellus tellus ut augue. Maecenas quis egestas est. In pharetra egestas eros in scelerisque. Fusce quis nunc ut velit rhoncus mollis. Sed eleifend aliquet eros sed pharetra. Curabitur quis orci at nibh malesuada tincidunt. Nulla eu sem pulvinar, porttitor odio nec, placerat ligula. Nulla facilisi. Morbi id convallis massa. Donec pretium blandit enim, vel bibendum arcu feugiat quis.[/column][/row][/justify]

[/div]
[row][column=span4][div class=Image1]  [/div][/column]
[column=span4][div class=Image2]  [/div][/column][/row]

[/div]

 

[cherub.]

heyheyhey amb
so for your first code, i think it would be cool if you did a transition of some sort!! like this!
[class=Background1]
background-color:#3B4F47;
margin:auto;
width:500px;
height:500px;
padding:20px;
background-size:cover;
[/class]

[class=Hover1]
background-color:#BBC8BB;
transition: 0.8s;
height:250px;
padding:5px;
overflow:auto;
padding-left:30px;
padding-right:30px;
[/class]

[class name=Hover1 state=hover]
background-color:#DAD9DA;
transition: 0.8s;
height:250px;
padding:5px;
padding-left:30px;
overflow:auto;
padding-right:30px;
[/class]

[class=Image1]
background-image:url(https://i.pinimg.com/originals/b5/ec/12/b5ec1229c4bd5d615f288f1e026f5cea.jpg);
width:240px;
height:180px;
background-size:100% 100%;
[/class]
[class=Image2]
background-image:url(https://i.pinimg.com/564x/47/30/ba/4730ba3ff4f68cb7ec46d969fdda214c.jpg);
width:240px;
height:180px;
background-size:100% 100%;
[/class]
[div class=Background1]Short quote goes here ~!
[div class=Hover1]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce mauris neque, mattis id urna id, venenatis sagittis erat. Nullam arcu nulla, aliquam sit amet orci non, euismod tincidunt felis. Proin pharetra porttitor ex, sed dapibus lorem placerat a. Curabitur blandit, massa eget ultricies ultrices, justo mi maximus enim, ac tempus tellus tellus ut augue. Maecenas quis egestas est. In pharetra egestas eros in scelerisque. Fusce quis nunc ut velit rhoncus mollis. Sed eleifend aliquet eros sed pharetra. Curabitur quis orci at nibh malesuada tincidunt. Nulla eu sem pulvinar, porttitor odio nec, placerat ligula. Nulla facilisi. Morbi id convallis massa. Donec pretium blandit enim, vel bibendum arcu feugiat quis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce mauris neque, mattis id urna id, venenatis sagittis erat. Nullam arcu nulla, aliquam sit amet orci non, euismod tincidunt felis. Proin pharetra porttitor ex, sed dapibus lorem placerat a. Curabitur blandit, massa eget ultricies ultrices, justo mi maximus enim, ac tempus tellus tellus ut augue. Maecenas quis egestas est. In pharetra egestas eros in scelerisque. Fusce quis nunc ut velit rhoncus mollis. Sed eleifend aliquet eros sed pharetra. Curabitur quis orci at nibh malesuada tincidunt. Nulla eu sem pulvinar, porttitor odio nec, placerat ligula. Nulla facilisi. Morbi id convallis massa. Donec pretium blandit enim, vel bibendum arcu feugiat quis.

[/div]

[div class=Image1] [/div]

[div class=Image2] [/div]

[/div]

 

[cadence]

heyheyhey amb
so for your first code, i think it would be cool if you did a transition of some sort!! like this!
[class=Background1]
background-color:#3B4F47;
margin:auto;
width:500px;
height:500px;
padding:20px;
background-size:cover;
[/class]

[class=Hover1]
background-color:#BBC8BB;
transition: 0.8s;
height:250px;
padding:5px;
overflow:auto;
padding-left:30px;
padding-right:30px;
[/class]

[class name=Hover1 state=hover]
background-color:#DAD9DA;
transition: 0.8s;
height:250px;
padding:5px;
padding-left:30px;
overflow:auto;
padding-right:30px;
[/class]

[class=Image1]
background-image:url(https://i.pinimg.com/originals/b5/ec/12/b5ec1229c4bd5d615f288f1e026f5cea.jpg);
width:240px;
height:180px;
background-size:100% 100%;
[/class]
[class=Image2]
background-image:url(https://i.pinimg.com/564x/47/30/ba/4730ba3ff4f68cb7ec46d969fdda214c.jpg);
width:240px;
height:180px;
background-size:100% 100%;
[/class]
[div class=Background1]Short quote goes here ~!
[div class=Hover1]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce mauris neque, mattis id urna id, venenatis sagittis erat. Nullam arcu nulla, aliquam sit amet orci non, euismod tincidunt felis. Proin pharetra porttitor ex, sed dapibus lorem placerat a. Curabitur blandit, massa eget ultricies ultrices, justo mi maximus enim, ac tempus tellus tellus ut augue. Maecenas quis egestas est. In pharetra egestas eros in scelerisque. Fusce quis nunc ut velit rhoncus mollis. Sed eleifend aliquet eros sed pharetra. Curabitur quis orci at nibh malesuada tincidunt. Nulla eu sem pulvinar, porttitor odio nec, placerat ligula. Nulla facilisi. Morbi id convallis massa. Donec pretium blandit enim, vel bibendum arcu feugiat quis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce mauris neque, mattis id urna id, venenatis sagittis erat. Nullam arcu nulla, aliquam sit amet orci non, euismod tincidunt felis. Proin pharetra porttitor ex, sed dapibus lorem placerat a. Curabitur blandit, massa eget ultricies ultrices, justo mi maximus enim, ac tempus tellus tellus ut augue. Maecenas quis egestas est. In pharetra egestas eros in scelerisque. Fusce quis nunc ut velit rhoncus mollis. Sed eleifend aliquet eros sed pharetra. Curabitur quis orci at nibh malesuada tincidunt. Nulla eu sem pulvinar, porttitor odio nec, placerat ligula. Nulla facilisi. Morbi id convallis massa. Donec pretium blandit enim, vel bibendum arcu feugiat quis.

[/div]

[div class=Image1] [/div]

[div class=Image2] [/div]

[/div]

Hey, hey. That is very neat! Unfortunately, I don't know how. Could you give a hand or point me in the right direction? ;3

 

[macrombie]

transition: all 0.5 ease; in the class with your hover

;^)))

edit: there are obviously other ways and you can change the value but im pretty sure you can figure that out on your own

 

[cherub.]

ye like that ^
i just put transition: 0.8s;
in both hover classes though,,

 

[macrombie]

sometimes you can get cool delay effects when you put different variations on different classes for different things and it looks v noice as well

 

[Lyro]

In the upcoming next release of BBCode+, I have made it possible for people to define their own animations, allowing for even more control over transitions. Stay tuned!