From d1a36a7287ea61d96e2c8d8fce444615f506e59d Mon Sep 17 00:00:00 2001 From: kom-senapati Date: Tue, 18 Jun 2024 08:28:30 +0530 Subject: [PATCH] style: main page new ui --- public/index.css | 215 ++++++++++++++++++++++++++++++---------------- public/index.html | 189 +++++++++++++++++++++++++++++++++------- 2 files changed, 296 insertions(+), 108 deletions(-) diff --git a/public/index.css b/public/index.css index f4f7b59c..c47cd313 100644 --- a/public/index.css +++ b/public/index.css @@ -1,50 +1,106 @@ -*{ - padding: 0; - margin: 0; - box-sizing: border-box; -} -body{ - background: black; - color: grey; - -} -a{ - color: white; -} -.text{ - font-size: xx-large; - text-align: center; - padding: 30px; - font-weight: bold; - text-decoration: underline; - text-decoration-color: lightseagreen; - background-image: linear-gradient(299deg, #3048bc, #467c32); - background-clip: text; - color: transparent; -} -.text1{ - font-size: 30px; - text-align: center; - padding: 30px; - -} -.links{ - display: grid; - font-size: larger; - justify-content: center; - padding: 50px; - gap: 10px; - width: auto; - height: fit-content; -} -.table{ - display: flex; - flex-direction: row; - justify-content: space-between; - -} - -#loader{ +@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap"); + +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +body { + background: black; + color: grey; + padding-left: 25px; + padding-right: 25px; + margin: 0; +} + +@media screen and (min-width: 600px) and (max-width: 899px) { + body { + padding-left: 100px; + padding-right: 100px; + } +} + +@media screen and (min-width: 900px) and (max-width: 1199px) { + body { + padding-left: 200px; + padding-right: 200px; + } +} + +@media screen and (min-width: 1200px) { + body { + padding-left: 400px; + padding-right: 400px; + } +} + +a { + color: white; +} + +.header { + text-align: center; + padding: 30px; + margin-bottom: 35px; + background: linear-gradient(90deg, #ff8a00, #da1b60); + -webkit-background-clip: text; + background-clip: text; + color: transparent; + font-family: "IBM Plex Sans", sans-serif; + font-weight: 700; + font-style: normal; + font-size: xx-large; +} + +.subheader { + text-align: center; + padding: 10px; + margin-bottom: 20px; + background: linear-gradient(90deg, #a7ed5d, #30ccf7); + -webkit-background-clip: text; + background-clip: text; + color: transparent; + font-family: "IBM Plex Sans", sans-serif; + font-weight: 400; + font-style: normal; + font-size: x-large; +} + +.table { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + background: #1e1e1e; + padding: 10px; + border-radius: 8px; + margin-bottom: 10px; + font-family: "Noto Sans", sans-serif; + font-optical-sizing: auto; + font-weight: 400; + font-style: normal; + color: white; +} + +.day-number, +.project-name, +.demo-link { + flex: 1; + text-align: center; +} + +.demo-link { + color: #00d4ff; + text-decoration: none; +} + +.demo-link:hover { + text-decoration: underline; +} + +#loader { position: fixed; height: 100vh; width: 100%; @@ -53,41 +109,50 @@ a{ z-index: 100000; background-repeat: no-repeat; background-position: center; - } + body::-webkit-scrollbar { + width: 1em; + height: 1em; +} + +body::-webkit-scrollbar-track { + box-shadow: inset 0px 0px 5px 3px #2356c3; + border-radius: 30px; +} + +body::-webkit-scrollbar-thumb { + border-radius: 30px; + background: rgb(2, 0, 36); + background: linear-gradient( + 188deg, + rgba(2, 0, 36, 1) 0%, + rgba(51, 51, 131, 1) 18%, + rgba(9, 9, 121, 1) 55%, + rgba(0, 212, 255, 1) 100% + ); +} + +@media screen and (max-width: 600px) { + ::-webkit-scrollbar { width: 1em; height: 1em; } - - body::-webkit-scrollbar-track { + + ::-webkit-scrollbar-track { box-shadow: inset 0px 0px 5px 3px #2356c3; border-radius: 30px; } - - body::-webkit-scrollbar-thumb { - border-radius: 30px; - background: rgb(2,0,36); -background: linear-gradient(188deg, rgba(2,0,36,1) 0%, rgba(51,51,131,1) 18%, rgba(9,9,121,1) 55%, rgba(0,212,255,1) 100%); - - } - - @media screen and (max-width: 600px){ - ::-webkit-scrollbar { - width: 1em; - height: 1em; - } - - ::-webkit-scrollbar-track { - box-shadow: inset 0px 0px 5px 3px #2356c3; - border-radius: 30px; - } - - ::-webkit-scrollbar-thumb { - border-radius: 30px; - background: rgb(2,0,36); - background: linear-gradient(188deg, rgba(2,0,36,1) 0%, rgba(51,51,131,1) 18%, rgba(9,9,121,1) 55%, rgba(0,212,255,1) 100%); - - } + ::-webkit-scrollbar-thumb { + border-radius: 30px; + background: rgb(2, 0, 36); + background: linear-gradient( + 188deg, + rgba(2, 0, 36, 1) 0%, + rgba(51, 51, 131, 1) 18%, + rgba(9, 9, 121, 1) 55%, + rgba(0, 212, 255, 1) 100% + ); } +} diff --git a/public/index.html b/public/index.html index 684d4ce8..7fb346d8 100644 --- a/public/index.html +++ b/public/index.html @@ -9,40 +9,163 @@
-
50_days_50_webprojects
-

HERE IS LIVE DEMO OF ALL PROJECTS

+ +
50_days_50_webprojects
+

HERE IS LIVE DEMO OF ALL PROJECTS

+
- -
PROJECT NAME --- LIVE DEMO
-
DAY-1.] TODOLIST DEMO
-
DAY-2.] DIGITAL CLOCK DEMO
-
DAY-3.] INDIAN FLAG DEMO
-
DAY-4.] DROPDOWN NAV BARDEMO
-
DAY-5.] ANIMATED-CURSORDEMO
-
DAY-6.] AUTO-BACKGROUND-IMAGE-SLIDERDEMO
-
DAY-7.] TYPEWRITERDEMO
-
DAY-8.] PARALLEL-X WEBSITEDEMO
-
DAY-9.] CAPTCHA-GENERATORDEMO
-
DAY-10.] QR-CODE-GENERATORDEMO
-
DAY-11.] SERVE WEBSITE USING EXPRESSDEMO
-
DAY-12.] NODEMAILER CONTACT FORM DEMO
-
DAY-13.] LOGIN FORM USING MERN DEMO
-
DAY-14.] FILE-UPLOADER DEMO
-
DAY-15.] PROGRESS-BAR DEMO
-
DAY-16.] SCROLL-BAR-CSS DEMO
-
DAY-17.] SLIDER USING SWIPER API DEMO
-
DAY-18.] CAROUSAL SOLAR SYSTEM DEMO
-
DAY-19.] PLANTO DEMO
-
DAY-20.] EVESPARKS DEMO
-
DAY-21.] Video bg slider using react DEMO
-
DAY-22.] Page loader DEMO
-
DAY-24.] Chat Bot DEMO
-
DAY-25.] Tic-Tac-ToeDEMO
-
DAY-26.] Maze game DEMO
-
DAY-27.] MemoryGame DEMO
-
DAY-28.] WORDLE DEMO
-
DAY-29.] SNAKE GAME DEMO
-
DAY-31] Password Manager DEMO
+ +
+
Day #
+
Project Name
+

Demo Link

+
+ +
+
Day 1
+
To-Do List
+ Demo +
+
+
Day 2
+
Digital Clock
+ Demo +
+
+
Day 3
+
Indian Flag
+ Demo +
+
+
Day 4
+
Dropdown Nav Bar
+ Demo +
+
+
Day 5
+
Animated Cursor
+ Demo +
+
+
Day 6
+
Auto Background Image Slider
+ Demo +
+
+
Day 7
+
Typewriter
+ Demo +
+
+
Day 8
+
Parallel-X Website
+ Demo +
+
+
Day 9
+
Captcha Generator
+ Demo +
+
+
Day 10
+
QR Code Generator
+ Demo +
+
+
Day 11
+
Serve Website Using Express
+ Demo +
+
+
Day 12
+
Nodemailer Contact Form
+ Demo +
+
+
Day 13
+
Login Form Using MERN
+ Demo +
+
+
Day 14
+
File Uploader
+ Demo +
+
+
Day 15
+
Progress Bar
+ Demo +
+
+
Day 16
+
Scroll Bar CSS
+ Demo +
+
+
Day 17
+
Slider Using Swiper API
+ Demo +
+
+
Day 18
+
Carousel Solar System
+ Demo +
+
+
Day 19
+
Planto
+ Demo +
+
+
Day 20
+
EveSparks
+ Demo +
+
+
Day 21
+
Video BG Slider Using React
+ Demo +
+
+
Day 22
+
Page Loader
+ Demo +
+
+
Day 24
+
Chat Bot
+ Demo +
+
+
Day 25
+
Tic-Tac-Toe
+ Demo +
+
+
Day 26
+
Maze Game
+ Demo +
+
+
Day 27
+
Memory Game
+ Demo +
+
+
Day 28
+
Wordle
+ Demo +
+
+
Day 29
+
Snake Game
+ Demo +
+
+
Day 31
+
Password Manager
+ Demo +