Nyctophilia; a coding thread (new/old coders are encouraged to join!)

im using a windows desktop! maybe it’s my theme?

3 Likes

Hmm, it could be. Maybe the aspect ratios of our screens are different? It’s a mystery :sweat_smile:

The values I use are adjustable, so if you make your browser window larger or smaller the dimensions would adjust accordingly. I only got it to touch the edge when I really shrunk my browser window.

2 Likes

hmm my display is standard (1920 x 1080) so idk man, def a mystery haha

3 Likes

Coded this entire thread.

Damn was it exhausting-

3 Likes

How do I get the watermark and table of contents to come out of the main big box? I have the closing attributes for all styles, but still, my boxes are just making separate boxes inside of the main one, and I cannot figure out how to get it to add more boxes!

3 Likes

I don’t quite understand what you mean :sweat_smile: Could you show me how it looks like?

2 Likes

I can’t get the extra stuff to form another separate box at the bottom or for my watermark to come out of the scrollbox…
I want to add a table of contents, but separately, not in the scrollbox, but that’s not working…

2 Likes

hmm, send me the raw code please? it’s easier to see what went wrong

2 Likes
Summary
<span style="font-size: 200%; text-transform: uppercase; padding-top: 5% ; padding-right: 20%; padding-left: 20%; padding-bottom: 5% ; display: block;  background-image: url('https://images.unsplash.com/photo-1528459105426-b9548367069b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDE4fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60') ; font-family: fantasy; background-size: cover; text-shadow: 5px 5px #000000; margin: auto; box-shadow: 20px 30px #000000 ; letter-spacing: 3px ; color: white ; height: 50% ; width: 40%">  [size=3]A little about[/size] [size=5]
Indian Dressing Culture! [/size] </span>

<span style="font-size: 100%; text-transform: uppercase; padding-top: 5% ; padding-right: 10%; padding-left: 10%; padding-bottom: 5% ; display: block;  background-image: url('https://images.unsplash.com/photo-1528459105426-b9548367069b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDE4fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60') ; font-family: sans-serif; text-shadow: 5px 5px #000000; margin: auto; box-shadow: 20px 30px #000000; color: white ; height: 500px ; width: 50% ; overflow: scroll; webkit-scrollbar: 20px; "> 

txt

Bridal lehenga: 

<img src="https://5.imimg.com/data5/VY/ER/MY-2363941/red-hand-embroidered-bridal-lehenga-500x500.png" alt="bridal lehenga">

Casual Lehenga: 

<img src="https://cdn.shopify.com/s/files/1/2395/9105/files/Simple-Cotton-Lehenga_large.jpg?v=1568099129" alt="casual lehenga">

txt

simple Punjabi dress (notice the special flare of the pants):

<img src="https://images.textileexport.in/images/500/20200929/1601372105962117668-Mehta%20Mastani%20vol%2015%20(1).jpg" alt="simple Punjabi dress">

Salwar-Kameez (a fancy version that can be worn to parties): 

 <img src="https://i.pinimg.com/736x/9d/49/0a/9d490a4462b5935dd1180c82b5e902df.jpg" alt="fancy salwar">

Fancy Palazzo Punjabi: 

<img src="https://static.peachmode.com/media/images/feed/72405/promotions/1622668935_1604146661_1_RHFS-RAAZI30033-RF23408-PEACHMODE.jpg" alt="fancy palazzo punjabi">


txt

Bridal Anarkali: 

<img src="https://i.pinimg.com/originals/23/0f/ee/230feed49fbbec79e6b92b840751c880.jpg" alt="bridal anarkali">
text

<img src="https://cdn.sareeka.com/image/data2019/net-resham-floor-length-anarkali-suit-116521.jpg" alt="fancy anarkali">
text
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSkKcX9tO7QInflD2g66nrT5GVUth15chhRew&usqp=CAU" alt="dailywear anarkali">

text

<img src="https://img2.ogaanindia.com/pub/media/catalog/product/cache/2cc7cc3782dae2c058118a9f2f1b3f37/1/_/1_7246.jpg?v=1.3" alt="odhni / dupatta / choli">

text
</span>


<span style="font-size: 90%; text-transform: uppercase; padding-top: 5% ; padding-right: 20%; padding-left: 20%; padding-bottom: 5% ; display: block;  background-image: url('https://images.unsplash.com/photo-1528459105426-b9548367069b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDE4fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60') ; font-family: sans-serif; text-shadow: 5px 5px #000000; margin: auto; box-shadow: 20px 30px #000000"> 
text here

<span style="font-size: 10%; text-transform: uppercase; padding-top: 5% ; padding-right: 20%; padding-left: 20%; padding-bottom: 5% ; display: block;  background-image: url('https://images.unsplash.com/photo-1528459105426-b9548367069b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDE4fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60') ; font-family: sans-serif; text-shadow: 5px 5px #000000; margin: auto; box-shadow: 20px 30px #000000"> 
taglist: @stella_vigo @J.L.O @Manya707 
(request to get added to the taglist below)
</span>








<div align="center">
<span style="font-size: 10 pt ; color: #b3b3b3; letter-spacing: 3px; "> *coded by val* 
</span>
</div>

[feel free to inspect if it makes it easier to comb though… And ignore the webkit-scrollbar attribute. It didn’t quite work…]

1 Like

Mind if I step in? :sweat_smile:

First things first, don’t use different coding languages, alignment and styling goes whack. Try to stick to pure HTML+CSS or BBCode. You can use a different line of code for it and close it for that specific part. Example:

<span style="properties"><span style="properties">yada</span></span>

Second would be not to space out your code. Use the <br> attribute, otherwise, once again, everything goes whack.

Third is that scrollbars can’t be customised here, so the -webkit-scrollbar code won’t work

Fourth (and I’m not sure if this really effects your the product of your code but out of curiosity) why do you add a space before your semicolon? Like so:
code: yada ; and not code: yada; or code:yada;

3 Likes

Just a heads-up. It looks like this on my phone :sweat_smile:

2 Likes

:rofl: I know xd it’s a rough draft since I got hungry lmaoo but thanks for the heads up! :blush:

3 Likes

Absolutely not! Welcome to the discussion!

Ah okay!

Hm okay

Yeah, I figured that. I just didn’t get to removing it again lol.

It just makes it easier to comb through for myself, so I just space things out :woman_shrugging:

OOH thanks for that! I didn’t exactly want it to be like this, but thanks! I didn’t make the images and text separate because I have like three images for each dress lol. I do wanna know how you got the watermark to come out of the main code… I’m going to spend some time beautifying it this weekend, hopefully, and I want to add a table of contents then…

2 Likes

try the stuff I suggested and let me know if it still doesn’t work then
especially for the semicolons, place them directly after the style and add a space after if you want — i know i said i’m not sure if that directly affects your code since I didn’t deep-dive, but it’s a good practice, and as a safeguard. :slight_smile:

3 Likes

Oof, last post was a few months ago XD

I’ve coded a new personal thread that’s basically a diary of one of my characters. I made the first post a slide show. Hope it looks nice, especially on mobile. Took me a while to code it.

3 Likes

This is so cool :pleading_face:

1 Like

Thanks! :blush:

Wait till his unsent love letters come out :eyes: they’re quite… interesting

1 Like