Actions

Work Header

Rating:
Archive Warning:
Category:
Fandoms:
Additional Tags:
Language:
English
Stats:
Published:
2025-05-11
Completed:
2025-05-12
Words:
1,530
Chapters:
3/3
Comments:
13
Kudos:
28
Bookmarks:
6
Hits:
314

Netflix Work Skin

Summary:

A Netflix/streaming service work skin for AO3.

Notes:

(See the end of the work for notes.)

Chapter 1: netflix

Summary:

A demonstration of my Netflix work skin. Code in the third chapter!

See chapter 2 for another streaming service layout. (it's poob. poob has it for you.)

Chapter Text

NETFLIX

Suggested for you

‹

Title (2025)

A description of the movie or show.

Title (2025)

A description of the movie or show.

Title (2025)

A description of the movie or show.

›

Latest on Netflix

‹

›

Dramatic Shows

‹

›

Based on your likes

‹

›

Chapter 2: poob has it for you.

Summary:

poob has it for you.

winter is coming to poob

Notes:

A little easter egg for any TAU fans. I spent way too long making fake thumbnails for this...

(See the end of the chapter for more notes.)

Chapter Text

❉ρoob

Suggested for you 💩

‹

woodsman

Woodsman (2028)

An ominous presence in the woods begins a psychological thriller that audiences rave over.

mizar the magnificent

Mizar the Magnificent (Cartoon)

Join Stella and her friends as they explore the mysteries of Gravity Falls and learn more about her legacy as the magical heroine Mizar the Magnificent!

goncharov lmaooo

Goncharov (1973)

Winter comes to Naples in this 1973 Scorcese cult classic. Fleeing the ruins of the USSR, follow Goncharov as he enters the tight-knit world of the Camorra in the greatest mafia movie ever made.

›

Based on Twin Souls 📽

‹

twin souls

Twin Souls (2029)

Discover the star-crossed romance between a normal high school girl and a demon that consumed the hearts of countless generations.

100 shades of gold

Hundred Shades of Gold (2038)

New intern Celestabelle Silversmith navigates the cutthroat world of Wall Street while navigating a liaison with her infernally handsome boss, Mr. Gold.

huntress

Huntress (2055)

Portland, 2055. Demon hunter Wenda follows whispers of a new occult organized crime syndicate. And her nephew is at its heart.

›

Notes:

based on this tumblr post
poob has it for you

top image source

also check out this totally real website
https://watchpoob.org/

Chapter 3: code

Notes:

Based largely on this and this codepen with a lot of editing for styling and to work on AO3. The arrow buttons do not currently do anything and there is some defunct code in there that I left because I was scared of what would happen if I deleted it. Hypothetically you could probably find a way to make them cycle through more thumbnails; I just didn't bother. Looks ok on mobile although the little title/description hovercard things aren't really legible on small screens, even if you flip the device sideways. But you could always just leave those out and just have the thumbnails get bigger on hover!

Chapter Text

CSS: (put this in your work skin)

#workskin .blackcontainer {
margin: 0;
width: 100%;
background-color: #000;
}

#workskin .arrow_btn {
font-size: 50px;
font-family: serif;
color: white;
text-decoration: none;
}

#workskin .thumbnail {
width: auto;
height: auto;
max-height: 215px;
max-width: 300px;
position: relative;
transition: transform .5s ease;
margin: 0rem;
padding: 0;
box-sizing: border-box;
}

#workskin .poob {
font-size: 60px;
font-weight: bold;
color: #ade11b;
font-family: Arial, sans-serif;
text-align: center;
letter-spacing: -3px;
transform: scaleY(0.8);
}

#workskin .netflix {
font-family: Arial;
font-size: 50px;
color: red;
text-align: center;
font-weight: bold;
letter-spacing: -1px;
font-stretch: condensed;
transform: scaleY(1.5);
}

#workskin .othertext {
font-size: 1.125rem;
font-family: Arial, sans-serif;
color: white;
font-weight: bold;
}

#workskin .wrapper {
display: grid;
overflow: hidden;
grid-template-columns: auto auto auto auto auto;
}

#workskin .wrapper section {
width: 100%;
position: relative;
display: grid;
margin: 20px 0;
}

#workskin .wrapper section .thumbnail {
padding: 0 2px;
transition: 250ms all;
}

#workskin .wrapper section .thumbnail:hover {
margin: 0 40px;
transform: scale(1.2);
}

#workskin .wrapper section a {
position: absolute;
color: #fff;
text-decoration: none;
font-size: 6em;
background: black;
width: 80px;
padding: 20px;
text-align: center;
z-index: 1;
}

#workskin .wrapper section a:nth-of-type(1) {
top: 0;
bottom: 0;
left: 0;
background: linear-gradient(-90deg, rgba(0, 0, 0, 0) 0%, black 100%);
}

#workskin .wrapper section a:nth-of-type(2) {
top: 0;
bottom: 0;
right: 0;
background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, black 100%);
}

#workskin .overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,.7);
padding: 24px 5px;
margin: 0px;
transition: all .5s ease;
opacity: 0;
}

#workskin .thumbnail:hover {
transform: scale(1.2);
}

#workskin .thumbnail:hover .overlay {
opacity: 1;
}

#workskin .overlay .showtitle {
color: #e9e9e9;
font-size: 18px;
font-family: sans-serif;
font-weight: bold;
}

#workskin .overlay .showtitle:hover {
color: #ade11b;
}

#workskin .overlay p {
color: #fff;
font-size: 15px;
margin-top: 20px;
font-family: sans-serif;
}

#workskin a.arrow__btn {
display: none;
}

That should be the easy part; just copy-paste that into a new work skin and then when you create your work select that skin to apply the style. The HTML is what goes into the work itself; if you want to be able to see what you're doing you can copy-paste this into an online code editor first and then copy-paste the finished product into your work at the end. Or you could do it like me and just edit it directly in the AO3 text editor and just keep clicking the Preview button to see what broke.

HTML: (this goes in the chapter text)

<div class="blackcontainer">
<div class="netflix">

<p>NETFLIX</p></div>
<div class="othertext">

<p>Suggested for you </p></div>
<div class="wrapper">

<p>
<a href="#section3" class="arrow_btn" rel="nofollow">‹</a>
</p><div class="thumbnail">

<p>
<img src="https://64.media.tumblr.com/346d3e73ee653d66f75393fe39d17847/26516522886068e1-37/s1280x1920/cbd924aec6439ef3d52c9255db057a0175b08ca8.pnj" />
</p><div class="overlay">
<div class="showtitle">

<p>Title (2025)</p></div>

<p>A description of the movie or show.</p></div>
</div>
<div class="thumbnail">

<p>
<img src="https://occ-0-243-299.1.nflxso.net/dnm/api/v5/rendition/412e4119fb212e3ca9f1add558e2e7fed42f8fb4/AAAABZEK-7pZ1H5FD4cTyUb9qB_KeyJGz5p-kfPhCFv4GU_3mbdm8Xfsy4IBchlG9PFNdGff8cBNPaeMra72VFnot41nt0y3e8RLgaVwwh3UvyM2H2_MkmadWbQUeGuf811K7-cxJJh7gA.jpg" />
</p><div class="overlay">
<div class="showtitle">

<p>Title (2025)</p></div>

<p>A description of the movie or show.</p></div>
</div>
<div class="thumbnail">

<p>
<img src="https://64.media.tumblr.com/d58059dd5c9a1a1474f1daf3c16cbf80/d3176080cc56c410-f4/s1280x1920/f642e019deb2336af1cc56a926bbfdd611186bbb.jpg" />
</p><div class="overlay">
<div class="showtitle">

<p>Title (2025)</p></div>

<p>A description of the movie or show.</p></div>
</div>

<p>
<a href="#section2" class="arrow_btn" rel="nofollow">›</a><br />
</p></div>
<div class="othertext">

<p>Latest on Netflix</p></div>
<div class="wrapper">

<p>
<a href="#section1" class="arrow_btn" rel="nofollow">‹</a>
</p><div class="thumbnail">

<p>
<img src="https://occ-0-243-299.1.nflxso.net/dnm/api/v5/rendition/412e4119fb212e3ca9f1add558e2e7fed42f8fb4/AAAABbcCX42tsqGbBvO2y9CQv5-7QvYbCfoHtXsuc6NPCtZaKa4l4fBX3XWvUwG9F2A3CTsNpHVmulxBbdXKwK8Q6xGjejd9FoadGkZ7CnGrSl601TOQjzSHJ23NuIPC8j0QMGORL4uRIA.jpg" />
</p></div>
<div class="thumbnail">

<p>
<img src="https://occ-0-243-299.1.nflxso.net/dnm/api/v5/rendition/412e4119fb212e3ca9f1add558e2e7fed42f8fb4/AAAABVopDZ5Fy9_fk_HO5WxHTXKKjKhtWFupbSjuvPwfLK_vytzon4EwRUdGgYJ34JwPxOTK_NkV3aXfkULMB0Dcct-FyfqzH-X44VXuRMp4QeBHlvKwWeZFpZlGdItPzmmg4scmwhG7SQ.jpg" />
</p></div>
<div class="thumbnail">

<p>
<img src="https://occ-0-243-299.1.nflxso.net/dnm/api/v5/rendition/412e4119fb212e3ca9f1add558e2e7fed42f8fb4/AAAABTOj1-116yVcgKWMU2dI3GFR4x0fSkiGsqtLLeLUxRR7STaksjAqBTrYlTfrB8nIGnGvXksi0ewXAhVGg6-pLxpFOIfcpjK-pf8D5xehFZo5a6vJbo4L0AGbrzglbyUoq255QBJgRQ.jpg" />
</p></div>

<p>
<a href="#section2" class="arrow_btn" rel="nofollow">›</a><br />
</p></div>
<div class="othertext">

<p>Dramatic Shows</p></div>
<div class="wrapper">

<p>
<a href="#section2" class="arrow_btn" rel="nofollow">‹</a>
</p><div class="thumbnail">

<p>
<img src="https://occ-0-243-299.1.nflxso.net/dnm/api/v5/rendition/a76057bcfd003711a76fb3985b1f2cf74beee3b8/AAAABd3IBDpxbRcHXvRMFCZeKa2aHLU1P4SJtrACMS9om3yhLjqPlvNlmR_fypPxjtbsbnKaC4JZhPSpDG4r_kdxSHHAltWguMcCB-1Y1OShr2zWfUv7Whf_39fNH5ZJ3_0gxQrs0akmQjQz44_LT7jXH5LMZ7iMBAzac5IEj4m7Fn_5OWEGYnVsDsKG-QTommDooULMDF9bEw.jpg" />
</p></div>
<div class="thumbnail">

<p>
<img src="https://occ-0-243-299.1.nflxso.net/dnm/api/v5/rendition/a76057bcfd003711a76fb3985b1f2cf74beee3b8/AAAABXSd7bhDddcwkq9XpksoQFCHVx29Sxl_h4hb2n3F2GIt32a4XWcOnctQfgnT5qdolv8UML6_xNB5CJ89h56wueb13mYmEBr0sx5e9iLPdtVcOQAOmKXKWHHXwFvJuCUwuNnL3s8eAQwqLXPVMHMEsujM684rUGrZNF2btN2GRy5-RyEslsxZO93V2Q_H2bWs8A8oayt1h5M.webp" />
</p></div>
<div class="thumbnail">

<p>
<img src="https://occ-0-243-299.1.nflxso.net/dnm/api/v5/rendition/a76057bcfd003711a76fb3985b1f2cf74beee3b8/AAAABbXWODpAWqVXcmmjMA7K-2mPkQpvwCLfSdeyhVXzR8A3MSpdSEnnjf4HEJJTYC-TnktU6njTUGAxmzWEYCaJbk4v_ZeL-7QGzmkvYBjg_N-evr2XmcX-Fanoyvu_nimFP4iigPe4O3Vr_WcgplhwkDrJwPUJa84wRLrNAx3TufN5V7cWRP4indqu5HQahvgFEqfL9zjp4g.jpg" />
</p></div>

<p>
<a href="#section3" class="arrow_btn" rel="nofollow">›</a>
</p></div>
<div class="othertext">

<p>Based on your likes</p></div>
<div class="wrapper">

<p>
<a href="#section2" class="arrow_btn" rel="nofollow">‹</a>
</p><div class="thumbnail">

<p>
<img src="https://occ-0-243-299.1.nflxso.net/dnm/api/v5/rendition/412e4119fb212e3ca9f1add558e2e7fed42f8fb4/AAAABTyWK1MKaw8GcObtz47R2Tj7wkLJ7qQu9tk6TVpcoyxpzD4B-zZ569bQ5vGrREBL-MWFkGilXUwy7tCDaj2XOGkUB4RsbbFAmp9NgSr6lygMpUGNHSlyfrFbUORsRkrxSIoh_ggOvg.jpg" />
</p></div>
<div class="thumbnail">

<p>
<img src="https://occ-0-243-299.1.nflxso.net/dnm/api/v5/rendition/a76057bcfd003711a76fb3985b1f2cf74beee3b8/AAAABY7NwkWEJIfXsn6t3Li4bGSCQ1nEErPisI5ZZtXlC-_VRBZOUrhWK5X3vt3t6SR_cpgVhCwxgQqFFDJhk62Kk8hawOnYGZMr0LKeLczMFV2zalCFjkcdLksvT4HB2LEi6LFyruyk3Uu0LmNGsHfC2A8Bly60smr_3sDbz4RruXcklPOG1qYq9wUVu3zfaiwNvqmG4b8aFA.jpg" />
</p></div>
<div class="thumbnail">

<p>
<img src="https://occ-0-243-299.1.nflxso.net/dnm/api/v5/rendition/a76057bcfd003711a76fb3985b1f2cf74beee3b8/AAAABVxuRB932hvre-XP0gh6ar5ztoR3Oe3QjKHkyvcDnRak2MKXOrx5H7mFQSvggefMFOppwEs7ZCCpiqrJ_CYGvtvYB9NpU4SWUtNO6uV2u-DTID267AcHjHcGvGBQJ1ufddDkxcGOZyi5MlOQ5QUmBun4652FbYUnib3zMYQDgcna_Pvz8y_HO5fbokxezrRR1JZAAiqFSQ.jpg" />
</p></div>

<p>
<a href="#section3" class="arrow_btn" rel="nofollow">›</a><br />
</p></div>
</div>

div class="blackcontainer" needs to go first; that's the black background. If you want it another color you can change the background-color to something else in the work skin.

If you want to include the title/description card overlay on hover you can use the first row as a template; if not either use the other rows or just delete everything highlighted between div class="overlay" and the subsequent div class="thumbnail" (make sure to leave a /div at the end right before the div class="thumbnail" or it will screw everything up.)

<a href="#section3" class="arrow_btn" rel="nofollow">‹</a>
</p><div class="thumbnail">

<p>
<img src="https://64.media.tumblr.com/346d3e73ee653d66f75393fe39d17847/26516522886068e1-37/s1280x1920/cbd924aec6439ef3d52c9255db057a0175b08ca8.pnj" />

</p><div class="overlay">
<div class="showtitle">

<p>Title (2025)</p></div>

<p>A description of the movie or show.</p></div>

</div>
<div class="thumbnail">

If you keep the title overlay try to keep the description on the shorter side or it may not all show. If you want it to be mobile friendly maybe just put the title and skip the description as it really is not very legible on small screens.


NETFLIX

If you want to make the Netflix logo like in the example above just use the class "netflix":

<div class="netflix">NETFLIX</div>

❉ρoob

Or you could use div class="poob":

<div class="poob">❉ρoob</div>

poob has it for you.

You can change the name to whatever you want, I just used the Netflix logo as an example. You can even customize your own fake streaming service logo and edit the colors/fonts to your choosing as well, just edit the work skin!

"othertext" is the class for the bold white section descriptors, you can change those if you want.

You can replace the thumbnails by copy-pasting the image link into the img src=" " section. Make sure you have the image link and are not just copy-pasting the image, otherwise it will not work! The skin should work ok with other image sizes as long as they're vaguely rectangular but ideally the thumbnails should all be the same size. I made some custom thumbnails on Canva using the Youtube thumbnail template which is 1280x720px, but as long as the ratio is similar it should be ok. If you make your own thumbnails you will need to host them somewhere, as AO3 does not currently support image hosting. I just used a tumblr sideblog which is probably a bad idea for several reasons. Discord is also a bad idea and I think the links expire, so I would not recommend. There's also imgur which should work fine, or if you use Canva to make the thumbnails just getting the share link directly from Canva might work. Would have been nice if I'd thought of that earlier...

Not really sure what anyone would use this for (fake phone set dressing maybe?) but let me know if you do!

Notes:

Does this count as epistolary? Social media?? Not really any of those things but hey. I spent the whole weekend making this so. Let me know if anyone ends up using this lol