Retro Tech Media Containers CSS + HTML

CODE

<div class="digicam-outer-container"> <div class="digicam-scroll-container"> <img src="https://64.media.tumblr.com/fb5007015dce055cbafb61a07cbe0e34/e6ddc215d0d1c722-2b/s500x750/223de9ca74070e84910e28574d320b27b4f76419.gifv"> <img src="https://64.media.tumblr.com/392794ba3f80245d72acea8ff64c01d8/292e9dfa33ce12e7-9d/s540x810/b9bc1a78341270cf1761d60cc1d952496ab33359.gifv"> <img src="https://64.media.tumblr.com/32df37d13415bd03d1a61bb65aa53822/686de23f9425a20f-0d/s1280x1920/51735fcc3e0d485c5b7622789687acf43d0c5d3a.jpg"> <iframe width="560" height="315" src="https://www.youtube.com/embed/QDezQD57h-g?si=MhoSNvJ_TCpxHUJQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe> <iframe width="560" height="315" src="https://www.youtube.com/embed/QNYT9wVwQ8A?si=Rs1su7Rwj66owsa1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe> </div> </div> <style> .digicam-outer-container { display: block; position: relative; height: 100%; width: 100%; top: 0px; left: 0px; } .digicam-outer-container:after { content: ""; position: absolute; background-image: url(https://i.ibb.co/392jcWLw/digicam.png); background-size: 100%; background-repeat: no-repeat; height: 100%; width: 100%; top: 0px; left: 0px; pointer-events: none; } .digicam-scroll-container { position: relative; background-color: transparent; overflow-x: scroll; white-space: nowrap; scrollbar-color: lightgrey transparent; scrollbar-width: thin; height: 95%; width: 64.5%; left: 10%; padding-top: 5%; padding-bottom: 6.5%; overflow-y: hidden; } .digicam-scroll-container img, .digicam-scroll-container iframe, .digicam-scroll-container video { height: 100%; width: 100%; aspect-ratio: 4/3; object-fit: fill; /*CHANGE TO "object-fit: contain;" TO PRESERVE ASPECT RATIO*/} </style>

CODE

<div class="mp3-outer-container"> <div class="mp3-scroll-container rotateX"> <img src="https://64.media.tumblr.com/fb5007015dce055cbafb61a07cbe0e34/e6ddc215d0d1c722-2b/s500x750/223de9ca74070e84910e28574d320b27b4f76419.gifv"> <img src="https://64.media.tumblr.com/392794ba3f80245d72acea8ff64c01d8/292e9dfa33ce12e7-9d/s540x810/b9bc1a78341270cf1761d60cc1d952496ab33359.gifv"> <img src="https://64.media.tumblr.com/32df37d13415bd03d1a61bb65aa53822/686de23f9425a20f-0d/s1280x1920/51735fcc3e0d485c5b7622789687acf43d0c5d3a.jpg"> <iframe width="560" height="315" src="https://www.youtube.com/embed/QDezQD57h-g?si=MhoSNvJ_TCpxHUJQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe> <iframe width="560" height="315" src="https://www.youtube.com/embed/QNYT9wVwQ8A?si=Rs1su7Rwj66owsa1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe> </div> </div> <style> .mp3-outer-container { display: block; position: relative; height: 100%; width: 100%; top: 0px; left: 0px; padding-bottom: 85%; padding-top: 14.25%; } .mp3-outer-container:after { content: ""; position: absolute; background-image: url(https://i.ibb.co/NghntsJn/mp3player.png); background-size: 100%; background-repeat: no-repeat; height: 100%; width: 100%; top: 0px; left: 0px; pointer-events: none; } .mp3-scroll-container { position: relative; background-color: transparent; overflow-x: scroll; overflow-y: hidden; scrollbar-color: lightgrey transparent; scrollbar-width: thin; height: 40%; width: 28%; left: 19%; padding-bottom: 10%; white-space: nowrap; } .rotateX { transform: rotateX(180deg); } .mp3-scroll-container img, .mp3-scroll-container iframe, .mp3-scroll-container video { transform: rotateX(180deg); height: 100%; width: 100%; aspect-ratio: 3/4; object-fit: fill; /*CHANGE TO "object-fit: contain;" TO PRESERVE ASPECT RATIO*/ } </style>

CODE

<div class="flipphone-outer-container"> <div class="flipphone-scroll-container rotateX"> <img src="https://64.media.tumblr.com/fb5007015dce055cbafb61a07cbe0e34/e6ddc215d0d1c722-2b/s500x750/223de9ca74070e84910e28574d320b27b4f76419.gifv"> <img src="https://64.media.tumblr.com/392794ba3f80245d72acea8ff64c01d8/292e9dfa33ce12e7-9d/s540x810/b9bc1a78341270cf1761d60cc1d952496ab33359.gifv"> <img src="https://64.media.tumblr.com/32df37d13415bd03d1a61bb65aa53822/686de23f9425a20f-0d/s1280x1920/51735fcc3e0d485c5b7622789687acf43d0c5d3a.jpg"> <iframe width="560" height="315" src="https://www.youtube.com/embed/QDezQD57h-g?si=MhoSNvJ_TCpxHUJQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe> <iframe width="560" height="315" src="https://www.youtube.com/embed/QNYT9wVwQ8A?si=Rs1su7Rwj66owsa1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe> </div> </div> <style> .flipphone-outer-container { margin: auto; display: block; position: relative; height: 100%; width: 30%; top: 0px; left: 0px; padding-bottom: 60%; padding-top: 0%; } .flipphone-outer-container:after { content: ""; position: absolute; background-image: url(https://i.ibb.co/rRx4k0Q8/flipphone.png); background-size: 100%; background-repeat: no-repeat; height: 100%; width: 100%; top: 15px; left: 0px; pointer-events: none; } .flipphone-scroll-container { position: relative; background-color: transparent; overflow-x: scroll; overflow-y: hidden; scrollbar-color: lightgrey transparent; scrollbar-width: thin; height: 100%; width: 70%; left: 17.5%; padding-bottom: 40%; white-space: nowrap; } .rotateX { transform: rotateX(180deg); } .flipphone-scroll-container img, .flipphone-scroll-container iframe, .flipphone-scroll-container video { transform: rotateX(180deg); height: 100%; width: 100%; aspect-ratio: 3/4; object-fit: fill; /*CHANGE TO "object-fit: contain;" TO PRESERVE ASPECT RATIO*/ } </style>

CODE

<div class="crt-outer-container"> <div class="crt-scroll-container"> <img src="https://64.media.tumblr.com/fb5007015dce055cbafb61a07cbe0e34/e6ddc215d0d1c722-2b/s500x750/223de9ca74070e84910e28574d320b27b4f76419.gifv"> <img src="https://64.media.tumblr.com/392794ba3f80245d72acea8ff64c01d8/292e9dfa33ce12e7-9d/s540x810/b9bc1a78341270cf1761d60cc1d952496ab33359.gifv"> <img src="https://64.media.tumblr.com/32df37d13415bd03d1a61bb65aa53822/686de23f9425a20f-0d/s1280x1920/51735fcc3e0d485c5b7622789687acf43d0c5d3a.jpg"> <iframe width="560" height="315" src="https://www.youtube.com/embed/QDezQD57h-g?si=MhoSNvJ_TCpxHUJQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe> <iframe width="560" height="315" src="https://www.youtube.com/embed/QNYT9wVwQ8A?si=Rs1su7Rwj66owsa1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe> </div> </div> <style> .crt-outer-container { display: block; position: relative; height: 100%; width: 100%; top: 0px; left: 0px; } .crt-outer-container:after { content: ""; position: absolute; background-image: url(https://i.ibb.co/GHn1MsP/tv-ezgif-com-webp-to-png-converter.png); background-size: 100%; background-repeat: no-repeat; height: 100%; width: 100%; top: 0px; left: 0px; pointer-events: none; } .crt-scroll-container { position: relative; background-color: transparent; overflow-x: scroll; white-space: nowrap; scrollbar-color: lightgrey transparent; scrollbar-width: thin; height: 100%; width: 62%; left: 19%; padding-top: 20%; padding-bottom: 25%; overflow-y: hidden; } .crt-scroll-container img, .crt-scroll-container iframe, .crt-scroll-container video { height: 100%; width: 100%; aspect-ratio: 4/3; object-fit: fill; /*CHANGE TO "object-fit: contain;" TO PRESERVE ASPECT RATIO*/ } </style>

207 Kudos

Comments

Displaying 20 of 28 comments ( View all | Add Comment )

Silly_ahh	1745534085 IM TOTALLY USING THIS OMG <3333 Report Comment
Lurk	1745528638 Love this!! Just sent to a friend Report Comment
⋆˚࿔ Simon 𝜗𝜚˚⋆	1745393511 I wanna use it but without the scrolling to the right how do i do that? Report Comment change the "overflow-x: scroll;" to "overflow-x: hidden;" by flipflap; 1745397859; Report Ty!!! by ⋆˚࿔ Simon 𝜗𝜚˚⋆; 1745423987; Report
Creature	1745331763 Yoooooo this is way radical Report Comment
Moth	1745322495 I am so going to be using these for my website!!! thanks these are very funky coolio. I get to shove random media here. beautiful Report Comment
zak	1745310482 these are so cool Report Comment
にコる ྀི₊⊹	1745302295 where do u paste these ? so c☆☆l Report Comment paste it anywhere you want by flipflap; 1745351653; Report
__anythv	1745187398 Dude?!? This is so cool what the heck?!? Report Comment
A Vampire Reborn	1745183581 I LOVE THIS IT LOOKS SO AMAZING !1!! Report Comment
PISS HOLE	1745179920 THIS LOOKS SO COOL XD WOWIWIE!!! Report Comment
x0000	1745139198 these are s0 pretty !!!!! l0ve these Report Comment
rollcake	1745108643 using the flip phone!!! thaaaaanks Report Comment
𝙾𝚁𝙸𝙾𝙽 𝚃𝙷𝙴 𝙴𝙼𝙿𝙸𝚁𝙴 𝙰𝙽𝙽𝙸𝙷𝙸𝙻𝙰𝚃𝙾𝚁	1744861681 woah this layout ToT !! congrats on winning Spacehey Report Comment
moni	1744829620 using the digicam one!! tank yew sew muchhhhh <333 Report Comment
𝕳𝖔𝖙𝖙𝖔𝖕𝖎𝖈 𝖂𝖆𝖓𝖓𝖆𝖇𝖊 (layout not mobile friendly sry)	1744827571 using the TV one!! :DD Report Comment
CoffeeBeanz	1744819632 HOLY CRAP Report Comment
✶Rib𓆩𓁺𓆪Eye Black Dragon✶	1744794832 whoa, how did you do that clickable ">code" thing!? I want to know! Report Comment < details > < summary > text you click < /summary > drop down text < /details > (remove the spaces in the html tags they're there so the html itself is visible in the comment) have fun :D by 𝕳𝖔𝖙𝖙𝖔𝖕𝖎𝖈 𝖂𝖆𝖓𝖓𝖆𝖇𝖊 (layout not mobile friendly sry); 1744825572; Report Improving my blogs with this one. Blessed. 🙏(..◜ᴗ◝..) by ✶Rib𓆩𓁺𓆪Eye Black Dragon✶; 1744853215; Report <3 by 𝕳𝖔𝖙𝖙𝖔𝖕𝖎𝖈 𝖂𝖆𝖓𝖓𝖆𝖇𝖊 (layout not mobile friendly sry); 1744896359; Report
Cassette	1744713433 i might use this later! ty for making these man Report Comment
rottngrl666	1744664785 so cute!! i will use it for later Report Comment
ᴇᴍꜰᴀxx	1744628360 So cute! Report Comment