dazzling
blurry
heya there! i've been pretty stumped by this. there's a huge space above the code, and i'm pretty sure i got all the clutter out and that stuff. but i would really appreciate any help!!
this is the code in action (ft. giant space)::
[class=bg]
position: relative;
box-sizing: border-box;
width: 500px;
height: 400px;
background-color: #BBE9E9;
overflow: hidden;
margin-right: auto;
margin-left: auto;
padding: 0;
[/class]
[class=textbox]
opacity: 0.50;
background-color: #FFFFFF;
box-shadow: 3px 3px 6px #3B3B3B;
position: absolute;
overflow: visible;
width: 347px;
height: 206px;
left: 123px;
top: 143px;
[/class]
[class=name]
position: absolute;
left: 0px;
top: 51px;
overflow: hidden;
width: 391px;
height: 65px;
text-align: center;
font-family: MS UI Gothic;
font-style: lowercase;
font-weight: normal;
font-size: 35px;
color: #707070;
[/class]
[class=img]
position: absolute;
overflow: visible;
width: 88px;
height: 400px;
left: 0px;
top: 0px;
background: url(https://66.media.tumblr.com/ab767f595c2c0ecaae4be070e65ccd1c/tumblr_ox3bkkgRgY1w67d19o1_400.jpg);
background-size: 340%;
box-shadow: 3px 3px 5px #3B3B3B;
[/class]
[class=status]
position: absolute;
left: 124px;
top: 106px;
overflow: hidden;
width: 190px;
height: 20px;
text-align: left;
font-family: Nirmala UI;
font-style: normal;
font-weight: normal;
font-size: 12px;
color: rgba(112,112,112,1);
[/class]
[class=text]
position: relative;
overflow: auto;
width: 350px;
height: 183px;
text-align: justify;
font-family: Malgun Gothic;
font-style: normal;
font-weight: normal;
font-size: 12px;
padding-right:10px;
[/class]
[class=textcontainer]
position: absolute;
left: 131px;
top: 155px;
overflow: hidden;
width: 330px;
height: 183px;
color: rgba(112,112,112,1);
[/class]
[div class=bg]
[div class=textbox][/div]
[div class=name]name here[/div]
[div class=img][/div]
[div class=status]statuses go here[/div]
[div class=textcontainer][div class=text]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Etiam sit amet nisl purus in mollis. Elementum sagittis vitae et leo duis ut. Quam viverra orci sagittis eu volutpat odio facilisis mauris. In cursus turpis massa tincidunt dui ut ornare. Congue nisi vitae suscipit tellus mauris. Ante metus dictum at tempor. Proin sagittis nisl rhoncus mattis. Ut etiam sit amet nisl purus in mollis nunc sed. Gravida cum sociis natoque penatibus. Et egestas quis ipsum suspendisse ultrices gravida dictum fusce ut. Nunc sed augue lacus viverra vitae congue. Donec et odio pellentesque diam. Amet est placerat in egestas erat.
Quam pellentesque nec nam aliquam. Hendrerit dolor magna eget est lorem. Eget nulla facilisi etiam dignissim diam quis enim. Commodo viverra maecenas accumsan lacus vel facilisis volutpat est. Pellentesque nec nam aliquam sem et tortor consequat id. Eu non diam phasellus vestibulum lorem. Potenti nullam ac tortor vitae purus faucibus. Nisi lacus sed viverra tellus in hac habitasse platea dictumst. Ante metus dictum at tempor commodo ullamcorper. Nunc aliquet bibendum enim facilisis gravida neque convallis a cras. In aliquam sem fringilla ut morbi. Cursus sit amet dictum sit.
Eget nullam non nisi est. Mauris sit amet massa vitae tortor condimentum lacinia quis vel. Lacus viverra vitae congue eu consequat. Nisl rhoncus mattis rhoncus urna neque viverra. Quis commodo odio aenean sed adipiscing diam. Mi eget mauris pharetra et ultrices neque ornare aenean. Venenatis urna cursus eget nunc scelerisque viverra mauris. Sagittis nisl rhoncus mattis rhoncus urna neque viverra justo. Risus ultricies tristique nulla aliquet enim tortor. Bibendum ut tristique et egestas quis ipsum. Hendrerit gravida rutrum quisque non tellus orci ac. Leo vel fringilla est ullamcorper eget. Ut tristique et egestas quis ipsum suspendisse ultrices. Dictumst quisque sagittis purus sit amet volutpat consequat mauris.
Ornare lectus sit amet est placerat in egestas erat imperdiet. Quis hendrerit dolor magna eget est lorem ipsum. Pellentesque massa placerat duis ultricies. Ut consequat semper viverra nam libero. Lorem ipsum dolor sit amet consectetur adipiscing elit. Tempus iaculis urna id volutpat lacus laoreet non curabitur gravida. Purus in mollis nunc sed id semper risus. Faucibus turpis in eu mi bibendum neque. Ut pharetra sit amet aliquam id diam. Tincidunt arcu non sodales neque sodales ut etiam sit. Dictum non consectetur a erat nam. Id diam vel quam elementum pulvinar etiam non quam. Ornare suspendisse sed nisi lacus sed viverra. Mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et netus. Convallis aenean et tortor at. Urna et pharetra pharetra massa. Massa eget egestas purus viverra. Volutpat odio facilisis mauris sit amet. Hendrerit gravida rutrum quisque non tellus orci ac auctor augue. Tristique et egestas quis ipsum suspendisse ultrices gravida dictum fusce.
Purus ut faucibus pulvinar elementum integer. Urna et pharetra pharetra massa massa ultricies mi quis hendrerit. Id porta nibh venenatis cras. In eu mi bibendum neque egestas. Egestas sed tempus urna et pharetra pharetra. Sed sed risus pretium quam. Amet aliquam id diam maecenas ultricies mi eget mauris pharetra. Vitae semper quis lectus nulla. Gravida quis blandit turpis cursus in hac habitasse platea. Viverra maecenas accumsan lacus vel facilisis volutpat est velit egestas. In ante metus dictum at. Malesuada fames ac turpis egestas integer eget. Sit amet consectetur adipiscing elit ut aliquam purus.[/div][/div][/div]
and here's the actual code!
this is the code in action (ft. giant space)::
[class=bg]
position: relative;
box-sizing: border-box;
width: 500px;
height: 400px;
background-color: #BBE9E9;
overflow: hidden;
margin-right: auto;
margin-left: auto;
padding: 0;
[/class]
[class=textbox]
opacity: 0.50;
background-color: #FFFFFF;
box-shadow: 3px 3px 6px #3B3B3B;
position: absolute;
overflow: visible;
width: 347px;
height: 206px;
left: 123px;
top: 143px;
[/class]
[class=name]
position: absolute;
left: 0px;
top: 51px;
overflow: hidden;
width: 391px;
height: 65px;
text-align: center;
font-family: MS UI Gothic;
font-style: lowercase;
font-weight: normal;
font-size: 35px;
color: #707070;
[/class]
[class=img]
position: absolute;
overflow: visible;
width: 88px;
height: 400px;
left: 0px;
top: 0px;
background: url(https://66.media.tumblr.com/ab767f595c2c0ecaae4be070e65ccd1c/tumblr_ox3bkkgRgY1w67d19o1_400.jpg);
background-size: 340%;
box-shadow: 3px 3px 5px #3B3B3B;
[/class]
[class=status]
position: absolute;
left: 124px;
top: 106px;
overflow: hidden;
width: 190px;
height: 20px;
text-align: left;
font-family: Nirmala UI;
font-style: normal;
font-weight: normal;
font-size: 12px;
color: rgba(112,112,112,1);
[/class]
[class=text]
position: relative;
overflow: auto;
width: 350px;
height: 183px;
text-align: justify;
font-family: Malgun Gothic;
font-style: normal;
font-weight: normal;
font-size: 12px;
padding-right:10px;
[/class]
[class=textcontainer]
position: absolute;
left: 131px;
top: 155px;
overflow: hidden;
width: 330px;
height: 183px;
color: rgba(112,112,112,1);
[/class]
[div class=bg]
[div class=textbox][/div]
[div class=name]name here[/div]
[div class=img][/div]
[div class=status]statuses go here[/div]
[div class=textcontainer][div class=text]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Etiam sit amet nisl purus in mollis. Elementum sagittis vitae et leo duis ut. Quam viverra orci sagittis eu volutpat odio facilisis mauris. In cursus turpis massa tincidunt dui ut ornare. Congue nisi vitae suscipit tellus mauris. Ante metus dictum at tempor. Proin sagittis nisl rhoncus mattis. Ut etiam sit amet nisl purus in mollis nunc sed. Gravida cum sociis natoque penatibus. Et egestas quis ipsum suspendisse ultrices gravida dictum fusce ut. Nunc sed augue lacus viverra vitae congue. Donec et odio pellentesque diam. Amet est placerat in egestas erat.
Quam pellentesque nec nam aliquam. Hendrerit dolor magna eget est lorem. Eget nulla facilisi etiam dignissim diam quis enim. Commodo viverra maecenas accumsan lacus vel facilisis volutpat est. Pellentesque nec nam aliquam sem et tortor consequat id. Eu non diam phasellus vestibulum lorem. Potenti nullam ac tortor vitae purus faucibus. Nisi lacus sed viverra tellus in hac habitasse platea dictumst. Ante metus dictum at tempor commodo ullamcorper. Nunc aliquet bibendum enim facilisis gravida neque convallis a cras. In aliquam sem fringilla ut morbi. Cursus sit amet dictum sit.
Eget nullam non nisi est. Mauris sit amet massa vitae tortor condimentum lacinia quis vel. Lacus viverra vitae congue eu consequat. Nisl rhoncus mattis rhoncus urna neque viverra. Quis commodo odio aenean sed adipiscing diam. Mi eget mauris pharetra et ultrices neque ornare aenean. Venenatis urna cursus eget nunc scelerisque viverra mauris. Sagittis nisl rhoncus mattis rhoncus urna neque viverra justo. Risus ultricies tristique nulla aliquet enim tortor. Bibendum ut tristique et egestas quis ipsum. Hendrerit gravida rutrum quisque non tellus orci ac. Leo vel fringilla est ullamcorper eget. Ut tristique et egestas quis ipsum suspendisse ultrices. Dictumst quisque sagittis purus sit amet volutpat consequat mauris.
Ornare lectus sit amet est placerat in egestas erat imperdiet. Quis hendrerit dolor magna eget est lorem ipsum. Pellentesque massa placerat duis ultricies. Ut consequat semper viverra nam libero. Lorem ipsum dolor sit amet consectetur adipiscing elit. Tempus iaculis urna id volutpat lacus laoreet non curabitur gravida. Purus in mollis nunc sed id semper risus. Faucibus turpis in eu mi bibendum neque. Ut pharetra sit amet aliquam id diam. Tincidunt arcu non sodales neque sodales ut etiam sit. Dictum non consectetur a erat nam. Id diam vel quam elementum pulvinar etiam non quam. Ornare suspendisse sed nisi lacus sed viverra. Mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et netus. Convallis aenean et tortor at. Urna et pharetra pharetra massa. Massa eget egestas purus viverra. Volutpat odio facilisis mauris sit amet. Hendrerit gravida rutrum quisque non tellus orci ac auctor augue. Tristique et egestas quis ipsum suspendisse ultrices gravida dictum fusce.
Purus ut faucibus pulvinar elementum integer. Urna et pharetra pharetra massa massa ultricies mi quis hendrerit. Id porta nibh venenatis cras. In eu mi bibendum neque egestas. Egestas sed tempus urna et pharetra pharetra. Sed sed risus pretium quam. Amet aliquam id diam maecenas ultricies mi eget mauris pharetra. Vitae semper quis lectus nulla. Gravida quis blandit turpis cursus in hac habitasse platea. Viverra maecenas accumsan lacus vel facilisis volutpat est velit egestas. In ante metus dictum at. Malesuada fames ac turpis egestas integer eget. Sit amet consectetur adipiscing elit ut aliquam purus.[/div][/div][/div]
and here's the actual code!
Code:
[class=bg]
position: relative;
box-sizing: border-box;
width: 500px;
height: 400px;
background-color: #BBE9E9;
overflow: hidden;
margin-right: auto;
margin-left: auto;
padding: 0;
[/class]
[class=textbox]
opacity: 0.50;
background-color: #FFFFFF;
box-shadow: 3px 3px 6px #3B3B3B;
position: absolute;
overflow: visible;
width: 347px;
height: 206px;
left: 123px;
top: 143px;
[/class]
[class=name]
position: absolute;
left: 0px;
top: 51px;
overflow: hidden;
width: 391px;
height: 65px;
text-align: center;
font-family: MS UI Gothic;
font-style: lowercase;
font-weight: normal;
font-size: 35px;
color: #707070;
[/class]
[class=img]
position: absolute;
overflow: visible;
width: 88px;
height: 400px;
left: 0px;
top: 0px;
background: url(https://66.media.tumblr.com/ab767f595c2c0ecaae4be070e65ccd1c/tumblr_ox3bkkgRgY1w67d19o1_400.jpg);
background-size: 340%;
box-shadow: 3px 3px 5px #3B3B3B;
[/class]
[class=status]
position: absolute;
left: 124px;
top: 106px;
overflow: hidden;
width: 190px;
height: 20px;
text-align: left;
font-family: Nirmala UI;
font-style: normal;
font-weight: normal;
font-size: 12px;
color: rgba(112,112,112,1);
[/class]
[class=text]
position: relative;
overflow: auto;
width: 350px;
height: 183px;
text-align: justify;
font-family: Malgun Gothic;
font-style: normal;
font-weight: normal;
font-size: 12px;
padding-right:10px;
[/class]
[class=textcontainer]
position: absolute;
left: 131px;
top: 155px;
overflow: hidden;
width: 330px;
height: 183px;
color: rgba(112,112,112,1);
[/class]
[div class=bg]
[div class=textbox][/div]
[div class=name]name here[/div]
[div class=img][/div]
[div class=status]statuses go here[/div]
[div class=textcontainer][div class=text]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Etiam sit amet nisl purus in mollis. Elementum sagittis vitae et leo duis ut. Quam viverra orci sagittis eu volutpat odio facilisis mauris. In cursus turpis massa tincidunt dui ut ornare. Congue nisi vitae suscipit tellus mauris. Ante metus dictum at tempor. Proin sagittis nisl rhoncus mattis. Ut etiam sit amet nisl purus in mollis nunc sed. Gravida cum sociis natoque penatibus. Et egestas quis ipsum suspendisse ultrices gravida dictum fusce ut. Nunc sed augue lacus viverra vitae congue. Donec et odio pellentesque diam. Amet est placerat in egestas erat.
Quam pellentesque nec nam aliquam. Hendrerit dolor magna eget est lorem. Eget nulla facilisi etiam dignissim diam quis enim. Commodo viverra maecenas accumsan lacus vel facilisis volutpat est. Pellentesque nec nam aliquam sem et tortor consequat id. Eu non diam phasellus vestibulum lorem. Potenti nullam ac tortor vitae purus faucibus. Nisi lacus sed viverra tellus in hac habitasse platea dictumst. Ante metus dictum at tempor commodo ullamcorper. Nunc aliquet bibendum enim facilisis gravida neque convallis a cras. In aliquam sem fringilla ut morbi. Cursus sit amet dictum sit.
Eget nullam non nisi est. Mauris sit amet massa vitae tortor condimentum lacinia quis vel. Lacus viverra vitae congue eu consequat. Nisl rhoncus mattis rhoncus urna neque viverra. Quis commodo odio aenean sed adipiscing diam. Mi eget mauris pharetra et ultrices neque ornare aenean. Venenatis urna cursus eget nunc scelerisque viverra mauris. Sagittis nisl rhoncus mattis rhoncus urna neque viverra justo. Risus ultricies tristique nulla aliquet enim tortor. Bibendum ut tristique et egestas quis ipsum. Hendrerit gravida rutrum quisque non tellus orci ac. Leo vel fringilla est ullamcorper eget. Ut tristique et egestas quis ipsum suspendisse ultrices. Dictumst quisque sagittis purus sit amet volutpat consequat mauris.
Ornare lectus sit amet est placerat in egestas erat imperdiet. Quis hendrerit dolor magna eget est lorem ipsum. Pellentesque massa placerat duis ultricies. Ut consequat semper viverra nam libero. Lorem ipsum dolor sit amet consectetur adipiscing elit. Tempus iaculis urna id volutpat lacus laoreet non curabitur gravida. Purus in mollis nunc sed id semper risus. Faucibus turpis in eu mi bibendum neque. Ut pharetra sit amet aliquam id diam. Tincidunt arcu non sodales neque sodales ut etiam sit. Dictum non consectetur a erat nam. Id diam vel quam elementum pulvinar etiam non quam. Ornare suspendisse sed nisi lacus sed viverra. Mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et netus. Convallis aenean et tortor at. Urna et pharetra pharetra massa. Massa eget egestas purus viverra. Volutpat odio facilisis mauris sit amet. Hendrerit gravida rutrum quisque non tellus orci ac auctor augue. Tristique et egestas quis ipsum suspendisse ultrices gravida dictum fusce.
Purus ut faucibus pulvinar elementum integer. Urna et pharetra pharetra massa massa ultricies mi quis hendrerit. Id porta nibh venenatis cras. In eu mi bibendum neque egestas. Egestas sed tempus urna et pharetra pharetra. Sed sed risus pretium quam. Amet aliquam id diam maecenas ultricies mi eget mauris pharetra. Vitae semper quis lectus nulla. Gravida quis blandit turpis cursus in hac habitasse platea. Viverra maecenas accumsan lacus vel facilisis volutpat est velit egestas. In ante metus dictum at. Malesuada fames ac turpis egestas integer eget. Sit amet consectetur adipiscing elit ut aliquam purus.[/div][/div][/div]
