cadence
in a quiet garden
alright so i made a code that i rly like and it works great on my computer,, but i made my friends see if it worked for them and it did not... i have NO idea what to do to fix it?? i'm pretty sure the answer is flex boxes but i have zero idea how to use those lol.... anyway,, this is my code? i apologize it's a big chonky mess
my code SHOULD look like this (cut off a bit bc i couldnt fit the whole image oops)
but my friends see this & this
Code:
[border=transparent;padding:0;margin:auto;width:70%;height:250px;background-color:#E11C26;overflow:hidden;][border=transparent;padding:0;float:left;width:60%;height:250px;background-size:cover;background-image:url('https://www.houseoffrankie.com/wportal/wp-content/uploads/2018/08/peggy-gou.jpeg');border-right:5px solid #E11C26;][border=transparent;padding:0;padding-top:190px;text-align:center;font-size:40px;color:white;font-weight:bold;text-shadow:5px 0px #A00012;font-family:Montserrat;text-transform:uppercase;]Character Name[/border][/border][border=transparent;padding:0;height:250px;width:319px;float:left;background-color:#E11C26;overflow:hidden;][border=transparent;padding:0;padding-top:10px;height:225px;width:336px;overflow:auto;background-color:#E11C26;line-height:15px;font-size:11px;font-family:Montserrat;color:white;text-align:justify;][border=0px; width: 300px; height: 30px; background: #F1302A;][bg=transparent; display: inline-block; color:white; font-size:15px; letter-spacing:5px; top:2px; left:5px; position:relative; ][fa] fa-play[/fa] [fa]fa-pause[/fa][/bg][bg=transparent; width:200px; height:20px; display:inline-block;margin-left:60px; position:relative; top:-25px;font-size:10px; color:white; overflow:hidden;padding-top:20px;][font=Montserrat]playing [b]hot rod[/b] by [i]dayglow[/i][/font][/bg][bg=width:100px; height:60px;transparent;display: inline-block; opacity: 0; position: relative;top: -60px; ][media=soundcloud]https://soundcloud.com/dayglowmusic/hot-rod[/media][/bg][/border][border=transparent;padding:0;padding-bottom:10px;font-size:20px;font-weight:bold;letter-spacing:3px;padding-top:5px;]— APPEARANCE[/border]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec placerat leo tellus, eget lobortis leo sodales nec. Nulla et ornare nulla. Cras nisi odio, ultricies vel posuere in, ullamcorper eu metus. Phasellus laoreet a arcu vitae pulvinar. In id pharetra augue. Etiam interdum, odio sit amet condimentum scelerisque, nulla mauris dapibus neque, non dignissim neque metus sit amet metus. Donec eu volutpat lacus. Sed ut volutpat nulla, sed rhoncus ipsum. Proin rhoncus nec purus ut condimentum. Nam et vehicula felis. Vestibulum augue dui, tristique sed lacus quis, fermentum ornare tortor. Vestibulum volutpat ultricies molestie. Ut a quam ut lacus ultricies hendrerit.
Integer eget nisi id dui aliquet aliquet. Nullam sed nunc quam. Suspendisse a tellus enim. Quisque fringilla at augue faucibus tempus. Donec a purus ut lectus ullamcorper ultricies. Cras tincidunt tortor ut aliquam volutpat. Integer nec congue nunc, vitae gravida dolor.
Aliquam a dui et mauris vestibulum ultrices sit amet sit amet purus. Sed arcu enim, gravida at velit a, ullamcorper faucibus ante. Vivamus condimentum tortor non ullamcorper ullamcorper. Pellentesque libero justo, placerat at fringilla vitae, ultricies at mi. Aenean scelerisque quam ac ante volutpat, a scelerisque mauris ultricies. Quisque aliquet blandit lacus, lobortis vestibulum neque. Nulla facilisi. Vestibulum ac efficitur purus.[/border][/border][/border][border=transparent;padding:0;width:70%;background-color:#A00012;margin:auto;word-spacing:50px;text-align:center;padding-top:5px;padding-bottom:5px;color:white;text-transform:uppercase;font-family:Montserrat;font-size:15px;]age birthdate sexuality ethnicity gender role face-claim[/border][border=transparent;padding:0;background-color:#57050B;width:70%;margin:auto;position:relative;height:300px;][comment]
[/comment][border=transparent;padding:0;background-image:url('https://i.guim.co.uk/img/media/77ab08c5c2cae70ed5e95248ec2b75bc0e27e8ce/0_257_5210_3126/master/5210.jpg?width=1200&height=1200&quality=85&auto=format&fit=crop&s=d935fea7c43be562a488d300328ab36f');width:200px;height:300px;background-size:cover;float:left;][/border][border=transparent;padding:0;background-color:#57050B;width:275px;height:300px;float:left;border-right:#57050B 5px solid;border-left:#57050B solid 5px;][border=transparent;padding:0;background-color:#57050Bk;width:275px;height:300px;overflow:hidden;][border=transparent;padding:0;background-color:#57050B;width:292px;height:300px;overflow:auto;line-height:15px;color:white;font-family:Montserrat;font-size:11px;text-align:justify;][border=transparent;padding:0;font-weight:bold;font-size:20px;font-family:Montserrat;text-transform:uppercase;letter-spacing:5px;padding-top:5px;padding-bottom:5px;]— personality[/border]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec placerat leo tellus, eget lobortis leo sodales nec. Nulla et ornare nulla. Cras nisi odio, ultricies vel posuere in, ullamcorper eu metus. Phasellus laoreet a arcu vitae pulvinar. In id pharetra augue. Etiam interdum, odio sit amet condimentum scelerisque, nulla mauris dapibus neque, non dignissim neque metus sit amet metus. Donec eu volutpat lacus. Sed ut volutpat nulla, sed rhoncus ipsum. Proin rhoncus nec purus ut condimentum. Nam et vehicula felis. Vestibulum augue dui, tristique sed lacus quis, fermentum ornare tortor. Vestibulum volutpat ultricies molestie. Ut a quam ut lacus ultricies hendrerit.
Integer eget nisi id dui aliquet aliquet. Nullam sed nunc quam. Suspendisse a tellus enim. Quisque fringilla at augue faucibus tempus. Donec a purus ut lectus ullamcorper ultricies. Cras tincidunt tortor ut aliquam volutpat. Integer nec congue nunc, vitae gravida dolor.
Aliquam a dui et mauris vestibulum ultrices sit amet sit amet purus. Sed arcu enim, gravida at velit a, ullamcorper faucibus ante. Vivamus condimentum tortor non ullamcorper ullamcorper. Pellentesque libero justo, placerat at fringilla vitae, ultricies at mi. Aenean scelerisque quam ac ante volutpat, a scelerisque mauris ultricies. Quisque aliquet blandit lacus, lobortis vestibulum neque. Nulla facilisi. Vestibulum ac efficitur purus.[/border][/border][/border][border=transparent;padding:0;width:40%;float:left;][border=transparent;padding:0;background-image:url('https://www.magneticmag.com/.image/t_share/MTU4MDk2OTI0NzUzMjc0NjQ5/peggy-gou.jpg');width:325px;height:300px;background-size:cover;margin:auto;overflow:hidden;][border=transparent;padding:0;background-image:url('https://www.magneticmag.com/.image/t_share/MTU4MDk2OTI0NzUzMjc0NjQ5/peggy-gou.jpg');width:342px;height:300px;background-size:cover;margin:auto;overflow:auto;][border=transparent;padding:0;writing-mode:vertical-rl;float:right;padding-top:10px;font-size:20px;color:white;font-family:Montserrat;letter-spacing:5px;text-transform:uppercase;font-weight:bold;]— history[/border]
[border=transparent;padding:0;background-color:#440001;line-height:15px;font-family:Montserrat;font-size:11px;color:white;text-align:justify;border-right:5px solid #440001;border-left:5px solid #440001;opacity:0.8;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec placerat leo tellus, eget lobortis leo sodales nec. Nulla et ornare nulla. Cras nisi odio, ultricies vel posuere in, ullamcorper eu metus. Phasellus laoreet a arcu vitae pulvinar. In id pharetra augue. Etiam interdum, odio sit amet condimentum scelerisque, nulla mauris dapibus neque, non dignissim neque metus sit amet metus. Donec eu volutpat lacus. Sed ut volutpat nulla, sed rhoncus ipsum. Proin rhoncus nec purus ut condimentum. Nam et vehicula felis. Vestibulum augue dui, tristique sed lacus quis, fermentum ornare tortor. Vestibulum volutpat ultricies molestie. Ut a quam ut lacus ultricies hendrerit.
Integer eget nisi id dui aliquet aliquet. Nullam sed nunc quam. Suspendisse a tellus enim. Quisque fringilla at augue faucibus tempus. Donec a purus ut lectus ullamcorper ultricies. Cras tincidunt tortor ut aliquam volutpat. Integer nec congue nunc, vitae gravida dolor.
Aliquam a dui et mauris vestibulum ultrices sit amet sit amet purus. Sed arcu enim, gravida at velit a, ullamcorper faucibus ante. Vivamus condimentum tortor non ullamcorper ullamcorper. Pellentesque libero justo, placerat at fringilla vitae, ultricies at mi. Aenean scelerisque quam ac ante volutpat, a scelerisque mauris ultricies. Quisque aliquet blandit lacus, lobortis vestibulum neque. Nulla facilisi. Vestibulum ac efficitur purus.[/border][/border
my code SHOULD look like this (cut off a bit bc i couldnt fit the whole image oops)
but my friends see this & this