THE GOTHIC GOURD

Pumpkins are moving with their eyes for finding photos

click here

Interesting Assignment

About the Class:

-The introduction to this module was really exciting, and I was eager to learn new hacks and explore fresh ideas. -One of the first things our sir taught us was about GeoCities, which I had never heard of before. It was fascinating to see those
old websites—watching them was both fun and creatively inspiring. -We all signed up for GitHub in class. At first, I found it a bit boring, but once I started exploring, it turned out to be pretty interesting. -I also learned new things like how to comment properly on GitHub and other useful features. -Right now, I’ve completed my assignment, and it was such a fun experience. It felt so creative going through different websites and seeing the amazing things people have built online. -The most important thing I learned was observing the evolution of websites from 1996 to 2024. It’s truly unimaginable how much web design and development have improved over time.

Class Assignment

https://www.canva.com/design/DAGt0UF84D0/THzs-obMyxcxJHJ32_hYxg/view?utm_content=DAGt0UF84D0&utm_campaign=designshare&utm_medium=link2&utm_source=uniquelinks&utlId=h021f6dcaca

Today's Learning

To add space, we use and → not tags, these are CSS properties.

margin = outside space padding = inside space

Visited Sites for Learning

-CN Website -SpaceJam -Windows93 One more retro site (forgot name ) From these, I learned basic old-school HTML vibes. It was actually fun to see how creative those sites were!

Tags I Practiced

html Copy Edit src = image path alt = image text if it doesn’t load loading="lazy" = image loads only when needed (faster website) viewBox = sets the frame size

Remember: If declaring → no dot If class=" " → in CSS write with . like .classname {}

Unique Tags I Noticed

<marquee> → moving text
<blink> → blinking text (LOL so old-school)

→ background music and

→ used in old layouts

CSS Zen Garden

One HTML page, but so many different CSS designs. Learnt how powerful CSS is. Just styling changes = complete new feel! Main lesson: Write clean HTML → design can be anything later.

CSS Properties I Explored

display: → flex, block, grid, etc. justify-content: → space-between, center, etc. align-items: → top/middle/bottom alignment max-width: → sets the max limit of size float: → old way to move stuff left/right space-between / space-around → used with display: flex for spacing

learning is going good but sometimes it feels overwhelming and speedy but it's fine I will end up with very nice creation of websitw

The Drop Of Water

https://www.figma.com/proto/OBNOBFlItMze13BMVTJtQn/Untitled?node-id=0-1&t=f5vzp0iKvDvKnMUr-1

Rough Illustration

Today's Learning

Created 2 new design iterations in Figma — the final one feels workable and closest to the goal.

Learned new Figma tools and techniques for layout, image layering, and object manipulation. Though it was challenging today, I pushed through and did my best.

Started exploring HTML & CSS to replicate the same design structure. Key elements I understood:

HTML Tags

• div – for main layout sections and wrappers
• span– for inline text stylings
• section– to organize narrative parts

CSS properties I learned:

• background: linear-gradient() – for soft gradient backgrounds
• position: absolute / relative – for precise image placement
• transform: rotate() / scale() – to shape and tilt elements
• z-index – to manage layering of images
• box-shadow / filter: drop-shadow() – for realistic depth effects
• font-family – to match storytelling font style

Design for - 'THE DROP OF WATER'

https://www.figma.com/design/J5FgL2BjIDIUYz7mZrn7xg/Static?node-id=0-1&t=3MSygFpYH2q8ODsJ-1

Grid Example

Where I faced difficulties:

It was a little tough to figure out how to create proper columns and give them appropriate spacing. After many trials, I finally learned how to set the correct padding and gaps. In the second example, I still haven’t figured out how to place the six day names above their respective images — this is something I need to fix. It was fun decoding such layouts, but at the same time, it was also a test of patience.

Link : https://grid-examples-d7d25b.netlify.app/

Website Layout

NOtes:

-Need some time to figure out proper colors -Not able to finalize layout so i need to work on that -Refining content to show in website

:root { --color-background: #C8D9E6; --color-primary: #2F4156; --color-secondary: #567C8Dt; --color-TitleBox: #F5EFEB; --text-dark: #1f2937; /* Adding typography too */ --text-small: 20px; --text-normal: 36px; --text-large: 48px; --text-huge: 64px; } h1 { font-size: var(--text-huge); } h2 { font-size: var(--text-large); } h3 { font-size: var(--text-normal); } p { font-size: var(--text-small); }

Moodboard

Homepage

Page 2

Page 3

Page 4

https://github.com/[not11Khushi/web2025-Khhushi-site](https://github.com/not11Khushi/web2025-Khhushi-site)