Forem: Nilima@Dev 💻

CSS Art: Space

Nilima@Dev 💻 — Sun, 15 Sep 2024 19:16:34 +0000

This is a submission for Frontend Challenge v24.09.04, CSS Art: Space.

Inspiration

This is the sun's solar system; the objects that orbit the sun are the eight planets.

Demo

Journey

All this is made by pure HTML and CSS, so I am trying to add all CSS properties and functionalities to make it interactive.

Glam Up My Markup: Solar System

Nilima@Dev 💻 — Sat, 14 Sep 2024 05:38:44 +0000

This is a submission for Frontend Challenge v24.09.04, Glam Up My Markup: Space

What I Built

These responsive solar system websites try to make visually stunning, interactive, and educational, also be accessible and easy to use as mentioned in the challenge criteria.

Demo

Project GitHub Link

Project Deployment Link

Solar System

Journey

As the template doesn't include any design elements or interactivity, so, first I need to think about how to get creative to make it visually appealing and engaging and also be accessible and easy to use. We use Tailwind CSS for styling purposes. Also, used other tools and technologies e.g., Swiper JS, and Scrollreveal Animation which helped to create more visually appealing.
Hope it will good example of responsive design that will be utilized by creating multiple pages(using the React framework ) about solar systems in more detail and making it an educational website for kids.

CodePenChallenge- Responsive Gradient glow style

Nilima@Dev 💻 — Sat, 02 Dec 2023 05:08:52 +0000

This pen work relates to #codepenchallenge which features a responsive Gradient glow style using HTML & CSS. For this gradient style use Animated Glowing Background Balls of Light for dark & dynamic backgrounds.

CodePenChallenge-Sticky Navigation

Nilima@Dev 💻 — Sat, 11 Nov 2023 04:13:57 +0000

This pen work relates to #codepenchallenge which features a “sticky” navigation. It basically shows a sticky navigation bar that allows users to click on each nav's menu with their following page and also has some cool animation while scrolling on page.

CodePenChallenge-Navigations Bars

Nilima@Dev 💻 — Sat, 11 Nov 2023 04:12:44 +0000

This pen work relates to #codepenchallenge which features a Navigational sidebar. It basically shows a sidebar navigational menu that allows users to click and hover on each tabs menu with their following page.

CodePenChallenge-Navigations Bars

Nilima@Dev 💻 — Sat, 11 Nov 2023 04:12:44 +0000

CodePenChallenge-Responsive Sidebar Navigation

Nilima@Dev 💻 — Sat, 11 Nov 2023 04:11:45 +0000

This pen work relates to #codepenchallenge which features a Navigational sidebar. It basically shows a sidebar navigational menu that allows users to click on each tab's menu with their following page and also has hamburger icon that allows maximize / minimize sidebar menu.

CodePenChallenge-Responsive Complex Navigation

Nilima@Dev 💻 — Sat, 11 Nov 2023 04:11:17 +0000

This pen work relates to #codepenchallenge which features a Responsive complex navigation. It basically allows user to view menu option as horizontally or vertically. The design is made by css framework (Bootstrap), so it handle the navigation across different screen sizes and devices.

CodePenChallenge- Parallax Trick or Treat

Nilima@Dev 💻 — Sat, 11 Nov 2023 04:10:46 +0000

This pen work relates to #codepenchallenge which features a parallax Trick or Treat animated design. Also, try a random chance of getting either a trick or treat when the trick or treat button is clicked.

CodePenChallenge: Bento Style

Nilima@Dev 💻 — Sat, 11 Nov 2023 04:10:00 +0000

This pen work relates to #codepenchallenge which features a responsive bento turning this raw HTML into a tasty bento is creating the containers! In bento design, rectangles with rounded corners are the usual recipe for the compartments, but mix them up with different shapes.

CodePenChallenge-Halloween Party!

Nilima@Dev 💻 — Mon, 30 Oct 2023 20:56:06 +0000

This pen work relates to #codepenchallenge which features a responsive Halloween website design using HTML CSS & JavaScript.With CSS animations when scrolling and a dark and elegant interface.
https://codepen.io/nilimadas/pen/PoVqzNg