low fidelity
๐๐๐๐พ๐ฝ ๐๐ ๐ฃ๐ช๐ณ๐ต๐ฉ ๐ฐ๐ง ๐ท๐ฆ๐ฏ๐ถ๐ด
hellooo, i'm very new to coding! aside from fiddling around with freebies, this one of the first code's i've made myself. it's supposed to be an in-character code.
unfortunately, i'm not sure what i'm doing wrong? the text box is all crazy, the title is misplaced, and i think i simply approached this the wrong way (but i don't really know the right way to make this ? so hmm.)
i wanted the top box to have a background image, title, and a hover to reveal text w/ a color background. aside from simply fiddling around without really knowing what i'm doing, it seems to have gone all wonky.
this is what i want my code to look like. (pardon my messy handwriting)
and what its actually looking like ^^"
here is the code !!
any and all help and suggestions are welcome. ;v;
unfortunately, i'm not sure what i'm doing wrong? the text box is all crazy, the title is misplaced, and i think i simply approached this the wrong way (but i don't really know the right way to make this ? so hmm.)
i wanted the top box to have a background image, title, and a hover to reveal text w/ a color background. aside from simply fiddling around without really knowing what i'm doing, it seems to have gone all wonky.
this is what i want my code to look like. (pardon my messy handwriting)
and what its actually looking like ^^"
here is the code !!
Code:
[nobr]
[class=backg]
position: relative;
width: 350px;
height: 350px;
border: 2px solid #639d9f;
overflow: hidden;
margin-right: auto;
margin-left: auto;
padding: 0;
[/class]
[class=topbackg]
position: absolute;
overflow: hidden;
width: 350px;
height: 70px;
left: 0px;
top: 0px;
bottom: 20px;
background: url(https://previews.123rf.com/images/terriana/terriana1605/terriana160500091/57298469-swirl-cloudy-pattern-in-chinese-style-cloud-pattern-cloudy-sky-seamless-backround.jpg);
[/class]
[class name=topbackg state=hover]
opacity: 1;
transition-duration:.7s;
[/class]
[class=textbox]
position: relative;
overflow: auto;
width: 340px;
height: 290px;
font-size: 9px;
font-weight: normal;
line-height: 10px;
padding: 5px;
text-align: justify;
[/class]
[class=textboxcontainer]
position: absolute;
overflow: hidden;
width: 332px;
height: 290px;
left: 5px;
top: 50px;
color: #000;
[/class]
[class=moodyblues]
position: absolute;
left: 112px;
top: -20px;
overflow: visible;
width: 239px;
height: 70px;
text-align: center;
font-family: Times New Roman;
font-style: normal;
font-weight: bold;
font-size: 30px;
color: #000;
[/class]
[div class=backg]
[div class=topbackg][/div]
[div class=textboxcontainer][div class=textbox][br][/br]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ipsum suspendisse ultrices gravida dictum fusce ut. Felis imperdiet proin fermentum leo. Mi sit amet mauris commodo quis imperdiet massa tincidunt nunc. Enim nulla aliquet porttitor lacus. Magna fringilla urna porttitor rhoncus dolor purus. Varius sit amet mattis vulputate enim nulla aliquet porttitor. Scelerisque fermentum dui faucibus in. Tellus rutrum tellus pellentesque eu tincidunt. Mauris augue neque gravida in. Sodales neque sodales ut etiam sit. Semper eget duis at tellus at.
[br][/br][br][/br]
Eu scelerisque felis imperdiet proin fermentum leo. Pellentesque dignissim enim sit amet venenatis urna cursus eget. Donec adipiscing tristique risus nec feugiat in fermentum posuere. Odio aenean sed adipiscing diam donec adipiscing tristique risus. Libero justo laoreet sit amet cursus sit amet dictum sit. Et tortor consequat id porta nibh venenatis cras sed. Volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Rutrum tellus pellentesque eu tincidunt tortor aliquam nulla facilisi cras. Vel pretium lectus quam id leo. Viverra maecenas accumsan lacus vel facilisis volutpat est velit. Consequat nisl vel pretium lectus quam id leo in. Orci a scelerisque purus semper eget duis at. Vitae justo eget magna fermentum iaculis eu non diam.
[br][/br][br][/br]
Mi bibendum neque egestas congue quisque egestas diam in arcu. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare. Sed faucibus turpis in eu mi bibendum neque egestas congue. At elementum eu facilisis sed odio morbi quis commodo. Elementum tempus egestas sed sed risus pretium. Neque vitae tempus quam pellentesque nec nam. Arcu risus quis varius quam. Lacus sed turpis tincidunt id aliquet risus feugiat in. Gravida cum sociis natoque penatibus et magnis dis. Sit amet tellus cras adipiscing enim. Volutpat consequat mauris nunc congue. In dictum non consectetur a erat nam at lectus urna. At augue eget arcu dictum varius duis at consectetur. Nibh sit amet commodo nulla facilisi. Diam vulputate ut pharetra sit amet aliquam id diam maecenas.
[br][/br][br][/br]
Risus nullam eget felis eget nunc. Et pharetra pharetra massa massa ultricies mi. Elementum sagittis vitae et leo duis ut diam quam nulla. Egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam. Scelerisque viverra mauris in aliquam sem. Nibh tellus molestie nunc non blandit massa enim nec. Sem nulla pharetra diam sit amet. Justo eget magna fermentum iaculis eu. Morbi non arcu risus quis varius. Integer enim neque volutpat ac tincidunt. Blandit volutpat maecenas volutpat blandit aliquam etiam. Et molestie ac feugiat sed lectus. Sit amet mauris commodo quis imperdiet massa tincidunt nunc. Dolor purus non enim praesent elementum facilisis. Tincidunt nunc pulvinar sapien et ligula. Ullamcorper a lacus vestibulum sed. Aliquet risus feugiat in ante metus dictum.
[/div][div]
[div class=moodyblues] moody blues [/div]
[div class=transparent][/div]
[/div]
[/div][/nobr]
any and all help and suggestions are welcome. ;v;