├── .DS_Store
├── .idea
├── .gitignore
├── Front-end-Development-Tutorial.iml
├── modules.xml
└── vcs.xml
├── .vscode
└── settings.json
├── BootStrap-Tutorial
├── .DS_Store
├── 01 Grid system
│ ├── 01 Example
│ │ ├── ContainerExample.html
│ │ └── row_col.html
│ └── index.html
├── 02 Navbar
│ ├── DesignNov.html
│ ├── Nav.html
│ ├── NavBar.html
│ ├── css
│ │ └── style.css
│ └── img
│ │ ├── logo.png
│ │ ├── mysql.png
│ │ └── vegetable.png
├── 03 Card
│ ├── DarkCard.html
│ ├── ProductCard.html
│ ├── ProductDesign.html
│ ├── card.html
│ ├── card09.html
│ ├── card1.html
│ └── img
│ │ ├── logo.png
│ │ ├── mushrooms.png
│ │ ├── samosa (2).png
│ │ ├── samosa.png
│ │ └── vegetable.png
├── 03 Modal
│ ├── BooksStore.html
│ ├── Modal-03.html
│ ├── Modal-img.html
│ ├── Modal-login-form.html
│ ├── Modal1.html
│ ├── Modal2.html
│ ├── ProductCard.html
│ └── img
│ │ └── logo.jpg
├── 04 Accordion
│ ├── Accordion.html
│ ├── Accordion1.html
│ ├── aboutus.html
│ ├── img
│ │ ├── logo.png
│ │ ├── mushrooms.png
│ │ ├── samosa (2).png
│ │ ├── samosa.png
│ │ └── vegetable.png
│ └── index.html
├── 05 Offcanvas
│ ├── Offcanvas.html
│ ├── Offcanvas1.html
│ ├── SideMenu.html
│ ├── img
│ │ ├── logo.png
│ │ ├── mushrooms.png
│ │ ├── mysql.png
│ │ ├── samosa (2).png
│ │ ├── samosa.png
│ │ └── vegetable.png
│ └── index1.html
├── 06 Carousel
│ ├── Carousel-card-nav
│ │ ├── img
│ │ │ ├── logo.png
│ │ │ ├── p1.jpg
│ │ │ ├── p2.jpg
│ │ │ ├── p3.jpg
│ │ │ └── samosa.png
│ │ └── index.html
│ ├── CarouselExample.html
│ ├── Darkvariant.html
│ ├── aboutus.html
│ ├── carousels.html
│ ├── img
│ │ ├── logo.png
│ │ ├── mushrooms.png
│ │ ├── p1.jpg
│ │ ├── p2.jpg
│ │ ├── p3.jpg
│ │ ├── samosa (2).png
│ │ ├── samosa.png
│ │ └── vegetable.png
│ └── index1.html
├── 07 Collapse
│ ├── aboutus.html
│ ├── img
│ │ ├── logo.png
│ │ ├── mushrooms.png
│ │ ├── p1.jpg
│ │ ├── p2.jpg
│ │ ├── p3.jpg
│ │ ├── samosa (2).png
│ │ ├── samosa.png
│ │ └── vegetable.png
│ └── index.html
├── Project
│ ├── Idea Point
│ │ ├── README.md
│ │ ├── image
│ │ │ └── idea.png
│ │ └── index.html
│ ├── Joy-food-Point
│ │ ├── Container.html
│ │ ├── column.html
│ │ ├── css
│ │ │ └── style.css
│ │ ├── img
│ │ │ └── logo.png
│ │ └── nav_bar.html
│ ├── Samosa Point
│ │ ├── aboutus.html
│ │ ├── css
│ │ │ └── style.css
│ │ ├── img
│ │ │ ├── samosa-1.png
│ │ │ └── samosa.png
│ │ └── index.html
│ ├── Samosa Point1
│ │ ├── README.md
│ │ ├── css
│ │ │ └── style.css
│ │ ├── image
│ │ │ ├── 01.jpg
│ │ │ ├── 02.jpg
│ │ │ ├── 03.jpg
│ │ │ ├── diet.png
│ │ │ ├── fast-food.png
│ │ │ ├── healthy-food.png
│ │ │ ├── samosa.png
│ │ │ └── vegetables.png
│ │ └── index.html
│ └── Techno-Hub
│ │ ├── contactus.html
│ │ ├── css
│ │ └── style.css
│ │ ├── img
│ │ ├── i1.jpg
│ │ ├── i2.jpg
│ │ ├── i3.jpg
│ │ └── techno.png
│ │ ├── index.html
│ │ └── service.html
├── Sample-Website
│ ├── aboutus.html
│ ├── img
│ │ ├── logo.png
│ │ ├── p1.jpg
│ │ ├── p2.jpg
│ │ ├── p3.jpg
│ │ └── samosa.png
│ └── index.html
├── Testimonials
│ └── index.html
├── accordion-01
│ ├── assets
│ │ ├── minus.svg
│ │ └── plus.svg
│ ├── index.html
│ ├── script.js
│ └── style.css
├── cards-05
│ ├── assets
│ │ ├── balcony-appartment.jpg
│ │ ├── lakeview-elegance.png
│ │ ├── skyline-oasis.png
│ │ └── vista-paradiso.png
│ ├── index.html
│ └── style.css
├── flip image
│ ├── flip_image.html
│ ├── img
│ │ ├── samosa.png
│ │ └── vegetable.png
│ └── index.html
└── form
│ ├── Login.html
│ └── SignUp.html
├── HTML-CSS
├── 00 Header Section
│ ├── css
│ │ └── style.css
│ ├── img
│ │ └── samosa (2).png
│ └── index.html
├── 01 Day
│ ├── Project00
│ │ └── index.html
│ └── Project01
│ │ ├── Blue.html
│ │ ├── Green.html
│ │ ├── Pink.html
│ │ ├── Red.html
│ │ └── Yellow.html
├── 02 Day
│ └── Example 01
│ │ ├── css
│ │ └── style.css
│ │ ├── index.html
│ │ ├── pink.html
│ │ └── yellow.html
├── 03 Table
│ ├── README.md
│ └── table.html
├── 04 hiperlink
│ ├── index.html
│ └── welcome.html
├── 05 List
│ ├── README.md
│ └── list.html
├── 06 Forms
│ ├── Contact Form.html
│ ├── forms.html
│ └── login.html
├── 07 CSS outline
│ └── index.html
├── Animation
│ └── README.md
├── Basic.md
├── Example
│ ├── Oct 19 2024 Part 2
│ │ ├── blue.html
│ │ ├── green.html
│ │ ├── index.html
│ │ └── pink.html
│ ├── Oct 19 2024
│ │ └── index.html
│ ├── Oct 24 2024 Part 2
│ │ ├── contact.html
│ │ ├── form.html
│ │ └── image
│ │ │ ├── OIP.jpeg
│ │ │ └── rectangle.png
│ ├── Oct 24 2024
│ │ ├── image
│ │ │ └── rectangle.png
│ │ └── index.html
│ ├── htmltag.html
│ └── index.html
├── HTML Attributes.md
├── Image Carousel
│ ├── css
│ │ └── style.css
│ ├── index.html
│ └── js
│ │ └── script.js
└── Project
│ ├── BookStore
│ ├── css
│ │ └── style.css
│ ├── img
│ │ └── books.png
│ └── index.html
│ ├── Chess board
│ ├── css
│ │ └── style.css
│ └── index.html
│ ├── ColorBox
│ ├── blue.html
│ ├── css
│ │ └── style.css
│ ├── green.html
│ ├── index.html
│ ├── orange.html
│ ├── purple.html
│ └── red.html
│ ├── FoodStore
│ ├── Aboutus.html
│ ├── contactus.html
│ ├── css
│ │ └── style.css
│ ├── img
│ │ ├── banner.png
│ │ ├── burger.png
│ │ ├── cutlery.png
│ │ ├── diet.png
│ │ ├── fast-food-2.png
│ │ ├── fast-food.png
│ │ ├── fork.png
│ │ ├── grapes.png
│ │ ├── ramen.png
│ │ └── vegetable.png
│ ├── index.html
│ ├── shop.html
│ └── typefood.html
│ ├── Image_views
│ ├── css
│ │ └── style.css
│ ├── image1.html
│ ├── image2.html
│ ├── image3.html
│ ├── image4.html
│ ├── image5.html
│ ├── img
│ │ ├── cinema.png
│ │ ├── lion.png
│ │ ├── man.png
│ │ ├── mushrooms.png
│ │ ├── penguin.png
│ │ └── vegetable.png
│ └── index.html
│ ├── Joy Books Store
│ ├── conatct.html
│ ├── css
│ │ └── style.css
│ ├── image
│ │ ├── books-2.png
│ │ ├── books.png
│ │ ├── e-book.png
│ │ ├── light-bulb.png
│ │ ├── open-book.png
│ │ └── reading.png
│ ├── index.html
│ └── shop.html
│ ├── Joy Toy Store
│ ├── css
│ │ └── p4n.css
│ ├── image
│ │ └── rocking-horse.png
│ └── index.html
│ ├── Ludo
│ ├── css
│ │ └── style.css
│ └── index.html
│ ├── MobileStore
│ ├── contactus.html
│ ├── css
│ │ └── style.css
│ ├── images
│ │ ├── logo.png
│ │ └── mobile.webp
│ └── index.html
│ ├── Product_view
│ ├── img
│ │ └── samosa.png
│ └── index.html
│ ├── README.md
│ ├── SamosaPoint
│ ├── Contact.html
│ ├── css
│ │ └── style.css
│ ├── img
│ │ ├── burger.png
│ │ ├── diet.png
│ │ ├── fast-food-2.png
│ │ ├── grapes.png
│ │ ├── ramen.png
│ │ ├── samosa-bg.png
│ │ ├── samosa-bg1.png
│ │ ├── samosa.png
│ │ ├── shopping-cart.png
│ │ └── vegetable.png
│ └── index.html
│ ├── VideoPlayer
│ ├── css
│ │ └── p4n.css
│ ├── img
│ │ ├── heart.png
│ │ ├── leonardo.png
│ │ └── like.png
│ └── index.html
│ └── p4n
│ ├── css
│ └── p4n.css
│ ├── index.html
│ └── js
│ └── scripts.js
├── JQuery
├── Animation
│ ├── Animation.html
│ ├── Animation1.html
│ ├── Animation2.html
│ ├── StopAnimation.html
│ └── StopAnimation1.html
├── Callback-Chaining
│ ├── CallBack.html
│ ├── CallBack1.html
│ └── Chaining.html
├── Flip
│ └── jQueryFlip.html
├── Get Content and Attributes
│ ├── Example1.html
│ ├── Example2.html
│ └── img
│ │ └── logo.jpg
├── HideShow
│ ├── EffectsFading.html
│ ├── Fading.html
│ └── HideShow.html
├── Set Content and Attributes
│ └── Example.html
├── Sliding
│ ├── SlidingEffects.html
│ └── css
│ │ └── Style.css
└── fade
│ └── fade.html
├── JavaScript
├── 01 Day Basic
│ ├── Basic Internal.html
│ ├── Basic.js
│ ├── CWPWelcome.html
│ ├── README.md
│ ├── Variable Internal.html
│ └── Variable.js
├── 02 Day Operator
│ ├── Operator.html
│ ├── Operator1.html
│ ├── Operators
│ │ ├── ArithmeticOperators.html
│ │ ├── AssignmentOperators.html
│ │ └── ComparisonOperators.html
│ ├── README.md
│ └── ReadDataFromTextBox.html
├── 04 Day Function
│ ├── Example
│ │ ├── Function.js
│ │ └── index.html
│ ├── Function
│ │ ├── function.html
│ │ └── function.js
│ └── README.md
├── 05 Day Objects
│ └── README.md
├── 06 Day Events
│ ├── Events.html
│ ├── GST_Cal.html
│ ├── LoginExample
│ │ ├── Login.html
│ │ ├── Welcome.html
│ │ ├── css
│ │ │ └── Style.css
│ │ └── js
│ │ │ └── loginfun.js
│ └── README.md
├── 08 Day String Methods
│ └── README.md
├── 09 Day Numbers
│ └── README.md
├── 10 Day Array
│ ├── Array.js
│ ├── Array_Example.html
│ ├── README.md
│ └── index1.html
├── 11 Day Date
│ ├── Date.html
│ ├── DateExample.html
│ └── README.md
├── 12 Day Math
│ └── README.md
├── 13 Day If Else
│ ├── README.md
│ └── ifelse.html
├── 14 Day Switch
│ └── README.md
├── 15 Day Loop
│ ├── ForLoop.html
│ ├── Loop.html
│ ├── README.md
│ └── Whileloop.html
├── 16 Day Sets
│ └── README.md
├── Example
│ ├── MCQ.html
│ └── cal.html
├── Questions
│ └── README.md
└── README.md
├── MySQL
├── Dummy_DataBase.sql
├── MySQLCWP.sql
└── cwp.sql
├── README.md
└── UI-Design
├── Animated Glowing Radial Menu
├── css
│ └── styles.css
├── index.html
└── js
│ └── script.js
├── Interactive Card Effect
├── image
│ ├── shoes01.png
│ ├── shoes02.jpg
│ ├── shoes03.avif
│ └── shoes04.webp
├── index.html
└── p4n.css
├── Magic Bottom Menu
├── css
│ └── style.css
├── index.html
└── js
│ └── script.js
├── Product Cards
├── index.html
├── multiplecard.html
└── p4n.css
├── chess board Design
├── css
│ └── style.css
└── index.html
├── chessboard design
└── index.html
├── dropdown-menu-1
├── index.html
└── style.css
└── vertical tabs
├── index.html
├── script.js
└── style.css
/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Pankaj-Str/Front-end-Development-Tutorial/4f23f30e3e8fc04fdbbab9dc678894dab3ed9925/.DS_Store
--------------------------------------------------------------------------------
/.idea/.gitignore:
--------------------------------------------------------------------------------
1 | # Default ignored files
2 | /shelf/
3 | /workspace.xml
4 | # Editor-based HTTP Client requests
5 | /httpRequests/
6 |
--------------------------------------------------------------------------------
/.idea/Front-end-Development-Tutorial.iml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/.idea/modules.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/.idea/vcs.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "liveServer.settings.port": 5502
3 | }
--------------------------------------------------------------------------------
/BootStrap-Tutorial/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Pankaj-Str/Front-end-Development-Tutorial/4f23f30e3e8fc04fdbbab9dc678894dab3ed9925/BootStrap-Tutorial/.DS_Store
--------------------------------------------------------------------------------
/BootStrap-Tutorial/01 Grid system/01 Example/ContainerExample.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
13 |
14 |
15 |
16 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore tempora praesentium maxime dicta! Quo, quidem placeat non eligendi illo aliquid cum iure officia ad aspernatur, animi sit error magnam saepe.
17 |
18 |
19 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore tempora praesentium maxime dicta! Quo, quidem placeat non eligendi illo aliquid cum iure officia ad aspernatur, animi sit error magnam saepe.
20 |
21 |
22 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore tempora praesentium maxime dicta! Quo, quidem placeat non eligendi illo aliquid cum iure officia ad aspernatur, animi sit error magnam saepe.
23 |
24 |
25 |
26 |
27 |
28 |
29 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore tempora praesentium maxime dicta! Quo, quidem placeat non eligendi illo aliquid cum iure officia ad aspernatur, animi sit error magnam saepe.
30 |
31 |
32 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore tempora praesentium maxime dicta! Quo, quidem placeat non eligendi illo aliquid cum iure officia ad aspernatur, animi sit error magnam saepe.
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/BootStrap-Tutorial/Project/Joy-food-Point/css/style.css:
--------------------------------------------------------------------------------
1 | .theme_color{
2 | background-color: #FFBD7B;
3 | }
--------------------------------------------------------------------------------
/BootStrap-Tutorial/Project/Joy-food-Point/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Pankaj-Str/Front-end-Development-Tutorial/4f23f30e3e8fc04fdbbab9dc678894dab3ed9925/BootStrap-Tutorial/Project/Joy-food-Point/img/logo.png
--------------------------------------------------------------------------------
/BootStrap-Tutorial/Project/Joy-food-Point/nav_bar.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
--------------------------------------------------------------------------------
/BootStrap-Tutorial/flip image/img/samosa.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Pankaj-Str/Front-end-Development-Tutorial/4f23f30e3e8fc04fdbbab9dc678894dab3ed9925/BootStrap-Tutorial/flip image/img/samosa.png
--------------------------------------------------------------------------------
/BootStrap-Tutorial/flip image/img/vegetable.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Pankaj-Str/Front-end-Development-Tutorial/4f23f30e3e8fc04fdbbab9dc678894dab3ed9925/BootStrap-Tutorial/flip image/img/vegetable.png
--------------------------------------------------------------------------------
/BootStrap-Tutorial/flip image/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
--------------------------------------------------------------------------------
/BootStrap-Tutorial/form/Login.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
Document
7 |
9 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
Login Now !
20 |
21 | E-mail
22 |
23 |
24 |
25 | Password
26 |
27 |
28 |
32 |
33 |
34 |
35 |
36 |
--------------------------------------------------------------------------------
/HTML-CSS/00 Header Section/css/style.css:
--------------------------------------------------------------------------------
1 | .header{
2 | height: 100px;
3 | width: 1200px;
4 | /* background-color: antiquewhite; */
5 | border: solid 0px black;
6 | margin: auto;
7 | }
8 |
9 | ul{
10 | list-style: none;
11 | float: left;
12 | }
13 | li{
14 | border: solid 1px black;
15 | float: left;
16 | padding-top: 10px;
17 | padding-left: 15px;
18 | padding-right: 15px;
19 | padding-bottom: 10px;
20 | margin-left: 18px;
21 | font-family: Arial, Helvetica, sans-serif;
22 | font-size: 18px;
23 | border-radius: 50px;
24 | background-color: black;
25 | color: wheat;
26 | }
27 | .logo{
28 | float: left;
29 | padding-top: 16px;
30 | margin-left: 20px;
31 | }
--------------------------------------------------------------------------------
/HTML-CSS/00 Header Section/img/samosa (2).png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Pankaj-Str/Front-end-Development-Tutorial/4f23f30e3e8fc04fdbbab9dc678894dab3ed9925/HTML-CSS/00 Header Section/img/samosa (2).png
--------------------------------------------------------------------------------
/HTML-CSS/00 Header Section/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
Document
7 |
8 |
9 |
10 |
20 |
21 |
--------------------------------------------------------------------------------
/HTML-CSS/01 Day/Project01/Blue.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
Document
7 |
8 |
9 |
10 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/HTML-CSS/01 Day/Project01/Green.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
Document
7 |
8 |
9 |
10 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/HTML-CSS/01 Day/Project01/Pink.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
Document
7 |
8 |
9 |
10 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/HTML-CSS/01 Day/Project01/Red.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
Document
7 |
8 |
9 |
10 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/HTML-CSS/01 Day/Project01/Yellow.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
Document
7 |
8 |
9 |
10 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/HTML-CSS/02 Day/Example 01/css/style.css:
--------------------------------------------------------------------------------
1 | .box{
2 | width: 100px;
3 | height: 80px;
4 | border: solid 3px #000;
5 | text-align: center;
6 | font-size: 50px;
7 | padding-top: 20px;
8 | font-family: Arial, Helvetica, sans-serif;
9 | float: left;
10 | margin: 20px;
11 | border-radius: 50px;
12 | }
13 |
14 | .yellow{
15 | background-color: yellow;
16 | }
17 | .pink{
18 | background-color: pink;
19 | }
20 | .green{
21 | background-color: green;
22 | }
23 |
24 |
25 |
--------------------------------------------------------------------------------
/HTML-CSS/02 Day/Example 01/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
Document
7 |
8 |
9 |
10 |
11 |
12 |
1
13 |
2
14 |
3
15 |
16 |
17 |
--------------------------------------------------------------------------------
/HTML-CSS/02 Day/Example 01/pink.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
Document
7 |
8 |
9 |
10 |
11 |
12 |
1
13 |
2
14 |
3
15 |
16 |
17 |
--------------------------------------------------------------------------------
/HTML-CSS/02 Day/Example 01/yellow.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
Document
7 |
8 |
9 |
10 |
11 |
12 |
1
13 |
2
14 |
3
15 |
16 |
17 |
--------------------------------------------------------------------------------
/HTML-CSS/04 hiperlink/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
Document
7 |
8 |
9 |
10 |
@p4n.in
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/HTML-CSS/04 hiperlink/welcome.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
Document
7 |
8 |
9 |
10 |
13 |
14 |
17 |
18 |
--------------------------------------------------------------------------------
/HTML-CSS/06 Forms/Contact Form.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
Contact Form - codeswithpankaj.com
7 |
8 |
9 |
Contact Us
10 |
22 |
23 |
--------------------------------------------------------------------------------
/HTML-CSS/06 Forms/login.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
Styled Form - codeswithpankaj.com
7 |
44 |
45 |
46 |
Contact Us
47 |
48 | Name:
49 |
50 |
51 | Email:
52 |
53 |
54 | Message:
55 |
56 |
57 |
58 |
59 |
60 |
--------------------------------------------------------------------------------
/HTML-CSS/07 CSS outline/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
Document
7 |
8 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
Codes with Pankaj
39 |
40 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas ea error porro magnam dolores delectus natus, facilis dignissimos fugit atque eius itaque quidem dicta, tenetur officiis illum modi corporis optio!
41 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos harum reiciendis architecto laudantium deserunt. Vitae, quod quaerat. Tempore magnam veritatis adipisci distinctio fugit quae est molestiae consectetur. Provident, eaque impedit.
42 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dignissimos repudiandae, voluptatum odit eaque corporis, aspernatur vero hic voluptas veniam at cum similique et labore eos ex corrupti, nisi aperiam? Sequi?
43 |
44 |
45 |
46 |
--------------------------------------------------------------------------------
/HTML-CSS/Basic.md:
--------------------------------------------------------------------------------
1 | # HTML Elements
2 |
3 |
4 | 1. **`
` (Division):**
5 | - Used for grouping and structuring content.
6 | - Example: `
Content goes here
`
7 |
8 | 2. **`
` (Paragraph):**
9 | - Defines a paragraph.
10 | - Example: `
This is a paragraph.
`
11 |
12 | 3. **`
` (Anchor):**
13 | - Creates hyperlinks.
14 | - Example: ` Visit Example `
15 |
16 | 4. **`
` (Image):**
17 | - Embeds images.
18 | - Example: `
`
19 |
20 | 5. **`
to ` (Headings):**
21 | - Defines headings of different levels.
22 | - Example: `This is a Heading `
23 |
24 | 6. **`` (Unordered List) and `` (List Item):**
25 | - Creates a bulleted list.
26 | - Example:
27 | ```html
28 |
29 | Item 1
30 | Item 2
31 |
32 | ```
33 |
34 | 7. **`` (Ordered List):**
35 | - Creates a numbered list.
36 | - Example:
37 | ```html
38 |
39 | First item
40 | Second item
41 |
42 | ```
43 |
44 | 8. **`` (Table):**
45 | - Defines a table.
46 | - Example:
47 | ```html
48 |
49 |
50 | Header 1
51 | Header 2
52 |
53 |
54 | Data 1
55 | Data 2
56 |
57 |
58 | ```
59 |
60 | 9. **`` (Form):**
61 | - Encloses form elements.
62 | - Example:
63 | ```html
64 |
65 | Username:
66 |
67 |
68 |
69 | ```
70 |
71 | 10. **` ` (Input):**
72 | - Represents user-input fields.
73 | - Example: ` `
74 |
75 |
--------------------------------------------------------------------------------
/HTML-CSS/Example/Oct 19 2024 Part 2/blue.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/HTML-CSS/Example/Oct 19 2024 Part 2/green.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/HTML-CSS/Example/Oct 19 2024 Part 2/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/HTML-CSS/Example/Oct 19 2024 Part 2/pink.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/HTML-CSS/Example/Oct 24 2024 Part 2/contact.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 | VIDEO
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 | ♕
25 |
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/HTML-CSS/Example/Oct 24 2024 Part 2/form.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 | Employee List !
11 |
12 |
13 |
14 |
15 | Sn. No.
16 | Employee Name
17 | Salary
18 | City
19 | Dept.
20 | Employee ID
21 | DOJ
22 |
23 |
24 |
25 |
26 | 101
27 | Joy
28 | 45000
29 | Mumbai
30 | Software Development
31 | 1011
32 | 23 oct 2024
33 | 13 oct 2024
34 |
35 |
36 | 101
37 | Joy
38 | 45000
39 | Mumbai
40 | 1011
41 | 23 oct 2024
42 | 13 oct 2024
43 |
44 |
45 | 101
46 | Joy
47 | 45000
48 | Mumbai
49 | Android Development
50 | 1011
51 | 23 oct 2024
52 | 13 oct 2024
53 |
54 |
55 | 101
56 | Joy
57 | 45000
58 | Mumbai
59 | Python Development
60 | 1011
61 | 23 oct 2024
62 | 13 oct 2024
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 | Form ----
71 |
72 |
73 |
74 |
75 |
--------------------------------------------------------------------------------
/HTML-CSS/Example/Oct 24 2024 Part 2/image/OIP.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Pankaj-Str/Front-end-Development-Tutorial/4f23f30e3e8fc04fdbbab9dc678894dab3ed9925/HTML-CSS/Example/Oct 24 2024 Part 2/image/OIP.jpeg
--------------------------------------------------------------------------------
/HTML-CSS/Example/Oct 24 2024 Part 2/image/rectangle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Pankaj-Str/Front-end-Development-Tutorial/4f23f30e3e8fc04fdbbab9dc678894dab3ed9925/HTML-CSS/Example/Oct 24 2024 Part 2/image/rectangle.png
--------------------------------------------------------------------------------
/HTML-CSS/Example/Oct 24 2024/image/rectangle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Pankaj-Str/Front-end-Development-Tutorial/4f23f30e3e8fc04fdbbab9dc678894dab3ed9925/HTML-CSS/Example/Oct 24 2024/image/rectangle.png
--------------------------------------------------------------------------------
/HTML-CSS/Example/htmltag.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | p4n.in HTML Example
7 |
37 |
38 |
39 |
40 |
41 | Welcome to p4n.in HTML Example
42 |
43 |
48 |
49 |
50 |
51 |
52 |
53 | About p4n.in
54 | p4n.in is a fictional company that provides innovative solutions in web development and digital marketing.
55 |
56 |
57 |
58 |
59 | Our Services
60 |
61 | Web Design
62 | Graphic Design
63 | Digital Marketing
64 |
65 |
66 |
67 |
79 |
80 |
81 |
84 |
85 |
86 |
87 |
--------------------------------------------------------------------------------
/HTML-CSS/Example/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
41 |
42 |
43 |
44 | Item 1
45 | Item 2
46 | Item 3
47 | Item 4
48 | Item 5
49 |
50 |
51 |
--------------------------------------------------------------------------------
/HTML-CSS/HTML Attributes.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | # HTML Attributes :
4 |
5 | #### 1. Basic Attribute Structure:
6 | - HTML attributes are included in an element's opening tag.
7 | - Comprised of a name and a value, separated by an equals sign.
8 |
9 | #### 2. Common Attributes:
10 |
11 | #### a. `class` Attribute:
12 | - Applies a class to an element for custom styling.
13 | ```html
14 | Styled div from CodesWithPankaj.com
15 | ```
16 |
17 | #### b. `id` Attribute:
18 | - Assigns a unique identifier to an element.
19 | ```html
20 | Unique ID from CodesWithPankaj.com
21 | ```
22 |
23 | #### c. `style` Attribute:
24 | - Adds inline CSS styling to an element.
25 | ```html
26 | Green text with larger font size.
27 | ```
28 |
29 | #### d. `src` Attribute:
30 | - Specifies the source URL for embedded content, such as images.
31 | ```html
32 |
33 | ```
34 |
35 | #### e. `href` Attribute:
36 | - Defines the hyperlink destination for anchor elements.
37 | ```html
38 | Visit CodesWithPankaj.com
39 | ```
40 |
41 | ### 3. Boolean Attributes:
42 |
43 | #### a. `disabled` Attribute:
44 | - Disables user interaction with the element.
45 | ```html
46 | Disabled Button from CodesWithPankaj.com
47 | ```
48 |
49 | #### b. `readonly` Attribute:
50 | - Makes input fields or text areas read-only.
51 | ```html
52 |
53 | ```
54 |
55 | ### 4. Custom Data Attributes:
56 |
57 | #### a. `data-*` Attributes:
58 | - Stores custom data privately within the page or application.
59 | ```html
60 | This div contains custom data.
61 | ```
62 |
63 | ### 5. Global Attributes:
64 |
65 | #### a. `title` Attribute:
66 | - Displays additional information when hovering over an element.
67 | ```html
68 | Hover over me to see a tooltip.
69 | ```
70 |
71 | Experiment with these examples to enhance your understanding of HTML attributes on CodesWithPankaj.com!
--------------------------------------------------------------------------------
/HTML-CSS/Image Carousel/css/style.css:
--------------------------------------------------------------------------------
1 | .carousel-container {
2 | width: 800px; /* Adjust to your desired width */
3 | margin: 0 auto; /* Center the container */
4 | position: relative; /* For positioning buttons */
5 | overflow: hidden; /* Hide overflow for slide effect */
6 | }
7 |
8 | .carousel-track {
9 | display: flex; /* Arrange images horizontally */
10 | transition: transform 0.5s ease-in-out; /* Smooth transition */
11 | }
12 |
13 | .carousel-track img {
14 | width: 100%; /* Make images fill the container */
15 | height: auto; /* Maintain aspect ratio */
16 | }
17 |
18 | .carousel-btn {
19 | position: absolute;
20 | top: 50%;
21 | transform: translateY(-50%);
22 | padding: 10px 20px;
23 | background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent */
24 | color: white;
25 | border: none;
26 | cursor: pointer;
27 | z-index: 10; /* Ensure buttons are above the images */
28 | }
29 |
30 | .prev-btn {
31 | left: 10px;
32 | }
33 |
34 | .next-btn {
35 | right: 10px;
36 | }
37 |
--------------------------------------------------------------------------------
/HTML-CSS/Image Carousel/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Image Carousel
5 |
6 |
7 |
8 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/HTML-CSS/Image Carousel/js/script.js:
--------------------------------------------------------------------------------
1 | const track = document.querySelector('.carousel-track');
2 | const slides = Array.from(track.children);
3 | const nextButton = document.querySelector('.next-btn');
4 | const prevButton = document.querySelector('.prev-btn');
5 | const slideWidth = slides[0].getBoundingClientRect().width;
6 |
7 | // Arrange slides next to each other
8 | const setSlidePosition = (slide, index) => {
9 | slide.style.left = slideWidth * index + 'px';
10 | };
11 | slides.forEach(setSlidePosition);
12 |
13 | // Move to next slide
14 | nextButton.addEventListener('click', () => {
15 | const currentSlide = track.querySelector('.current-slide');
16 | const nextSlide = currentSlide.nextElementSibling;
17 | const amountToMove = nextSlide.style.left;
18 | track.style.transform = 'translateX(-' + amountToMove + ')';
19 | currentSlide.classList.remove('current-slide');
20 | nextSlide.classList.add('current-slide');
21 | });
22 |
23 | // Move to previous slide
24 | prevButton.addEventListener('click', () => {
25 | const currentSlide = track.querySelector('.current-slide');
26 | const prevSlide = currentSlide.previousElementSibling;
27 | const amountToMove = prevSlide.style.left;
28 | track.style.transform = 'translateX(-' + amountToMove + ')';
29 | currentSlide.classList.remove('current-slide');
30 | prevSlide.classList.add('current-slide');
31 | });
32 |
--------------------------------------------------------------------------------
/HTML-CSS/Project/BookStore/css/style.css:
--------------------------------------------------------------------------------
1 | .outerbox{
2 | height: 280px;
3 | width: 1200px;
4 | border: solid 1px black;
5 |
6 | margin: auto;
7 | }
8 | .leftbox{
9 | height: 280px;
10 | width: 400px;
11 | float: left;
12 |
13 | }
14 | .rightbox{
15 | height: 280px;
16 | width: 800px;
17 | float: left;
18 |
19 | }
20 | .store_heading{
21 | font-size: 30px;
22 | font-family: Arial, sans-serif;
23 | text-align: left;
24 |
25 | }
26 | .book{
27 | color: brown;
28 | }
29 | .store_subheading{
30 | font-size: 20px;
31 | font-family: Arial, sans-serif;
32 | text-align: left;
33 |
34 | }
35 | .store_text{
36 | font-size: 15px;
37 | font-family: Arial, sans-serif;
38 | text-align: left;
39 |
40 | }
41 | .btn_viewmore{
42 | background-color: #4CAF50;
43 | color: white;
44 | padding: 10px 20px;
45 | border: none;
46 | border-radius: 5px;
47 | cursor: pointer;
48 | }
--------------------------------------------------------------------------------
/HTML-CSS/Project/BookStore/img/books.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Pankaj-Str/Front-end-Development-Tutorial/4f23f30e3e8fc04fdbbab9dc678894dab3ed9925/HTML-CSS/Project/BookStore/img/books.png
--------------------------------------------------------------------------------
/HTML-CSS/Project/BookStore/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
Nishant Book Store
19 |
Free Shipping in India and low cost Worldwide.
20 |
21 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem magni quo deserunt quisquam et cupiditate architecto unde cum iure! Esse laudantium commodi magni magnam temporibus assumenda, ratione quae nulla est.
22 |
23 |
View More
24 |
25 |
26 |
27 |
28 |
29 |
30 |
--------------------------------------------------------------------------------
/HTML-CSS/Project/Chess board/css/style.css:
--------------------------------------------------------------------------------
1 | .outer_box{
2 | height: 573px;
3 | width: 574px;
4 | border: solid 4px black;
5 | margin: auto;
6 | }
7 | .row_box{
8 | height: 70px;
9 | width: 573px;
10 | border: solid 1px black;
11 | background-color: aqua;
12 | }
13 |
14 | .black_box{
15 | height: 70px;
16 | width: 70px;
17 | border: solid 1px rgb(91, 91, 91);
18 | background-color: rgb(91, 91, 91);
19 | float: left;
20 | /* color: white; */
21 | text-align: center;
22 | font-size: 50px;
23 |
24 | }
25 | .white_box{
26 | height: 70px;
27 | width: 70px;
28 | border: solid 1px rgb(91, 91, 91);
29 | background-color: white;
30 | float: left;
31 | /* color: black; */
32 | text-align: center;
33 | font-size: 50px;
34 | }
--------------------------------------------------------------------------------
/HTML-CSS/Project/ColorBox/blue.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/HTML-CSS/Project/ColorBox/css/style.css:
--------------------------------------------------------------------------------
1 | ul{
2 | list-style: none;
3 | }
4 |
5 | li{
6 | height: 60px;
7 | width: 100px;
8 | border: solid 1px black;
9 | float: left;
10 | text-align: center;
11 | padding-top: 40px;
12 | margin: 10px;
13 | font-family: Arial, Helvetica, sans-serif;
14 | color: white;
15 | cursor: pointer;
16 | }
17 |
18 | .yellow{
19 | background-color: rgb(107, 107, 6);
20 | }
21 | .blue{
22 | background-color: blue;
23 | }
24 | .red{
25 | background-color: red;
26 | }
27 | .green{
28 | background-color: green;
29 | }
30 |
31 | .orange{
32 | background-color: orange;
33 | }
34 | .purple{
35 | background-color: purple;
36 | }
--------------------------------------------------------------------------------
/HTML-CSS/Project/ColorBox/green.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/HTML-CSS/Project/ColorBox/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/HTML-CSS/Project/ColorBox/orange.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/HTML-CSS/Project/ColorBox/purple.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/HTML-CSS/Project/ColorBox/red.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/HTML-CSS/Project/FoodStore/Aboutus.html:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Pankaj-Str/Front-end-Development-Tutorial/4f23f30e3e8fc04fdbbab9dc678894dab3ed9925/HTML-CSS/Project/FoodStore/Aboutus.html
--------------------------------------------------------------------------------
/HTML-CSS/Project/FoodStore/img/banner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Pankaj-Str/Front-end-Development-Tutorial/4f23f30e3e8fc04fdbbab9dc678894dab3ed9925/HTML-CSS/Project/FoodStore/img/banner.png
--------------------------------------------------------------------------------
/HTML-CSS/Project/FoodStore/img/burger.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Pankaj-Str/Front-end-Development-Tutorial/4f23f30e3e8fc04fdbbab9dc678894dab3ed9925/HTML-CSS/Project/FoodStore/img/burger.png
--------------------------------------------------------------------------------
/HTML-CSS/Project/FoodStore/img/cutlery.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Pankaj-Str/Front-end-Development-Tutorial/4f23f30e3e8fc04fdbbab9dc678894dab3ed9925/HTML-CSS/Project/FoodStore/img/cutlery.png
--------------------------------------------------------------------------------
/HTML-CSS/Project/FoodStore/img/diet.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Pankaj-Str/Front-end-Development-Tutorial/4f23f30e3e8fc04fdbbab9dc678894dab3ed9925/HTML-CSS/Project/FoodStore/img/diet.png
--------------------------------------------------------------------------------
/HTML-CSS/Project/FoodStore/img/fast-food-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Pankaj-Str/Front-end-Development-Tutorial/4f23f30e3e8fc04fdbbab9dc678894dab3ed9925/HTML-CSS/Project/FoodStore/img/fast-food-2.png
--------------------------------------------------------------------------------
/HTML-CSS/Project/FoodStore/img/fast-food.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Pankaj-Str/Front-end-Development-Tutorial/4f23f30e3e8fc04fdbbab9dc678894dab3ed9925/HTML-CSS/Project/FoodStore/img/fast-food.png
--------------------------------------------------------------------------------
/HTML-CSS/Project/FoodStore/img/fork.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Pankaj-Str/Front-end-Development-Tutorial/4f23f30e3e8fc04fdbbab9dc678894dab3ed9925/HTML-CSS/Project/FoodStore/img/fork.png
--------------------------------------------------------------------------------
/HTML-CSS/Project/FoodStore/img/grapes.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Pankaj-Str/Front-end-Development-Tutorial/4f23f30e3e8fc04fdbbab9dc678894dab3ed9925/HTML-CSS/Project/FoodStore/img/grapes.png
--------------------------------------------------------------------------------
/HTML-CSS/Project/FoodStore/img/ramen.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Pankaj-Str/Front-end-Development-Tutorial/4f23f30e3e8fc04fdbbab9dc678894dab3ed9925/HTML-CSS/Project/FoodStore/img/ramen.png
--------------------------------------------------------------------------------
/HTML-CSS/Project/FoodStore/img/vegetable.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Pankaj-Str/Front-end-Development-Tutorial/4f23f30e3e8fc04fdbbab9dc678894dab3ed9925/HTML-CSS/Project/FoodStore/img/vegetable.png
--------------------------------------------------------------------------------
/HTML-CSS/Project/Image_views/css/style.css:
--------------------------------------------------------------------------------
1 | .box{
2 | height: 400px;
3 | width: 400px;
4 | border: solid 1px black;
5 | margin: auto;
6 | text-align: center;
7 | border-radius: 10px;
8 | }
9 | .image_list{
10 | height: 100px;
11 | width: 500px;
12 | border: solid 0px black;
13 | margin: auto;
14 | margin-top: 10px;
15 | }
16 | ul{
17 | list-style: none;
18 | }
19 | li{
20 | float: left;
21 | border: solid 1px black;
22 | padding: 5px;
23 | border-radius:5px;
24 | margin-right: 10px;
25 | background-color: antiquewhite;
26 |
27 | }
--------------------------------------------------------------------------------
/HTML-CSS/Project/Image_views/image1.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
54 |
55 |
56 |
--------------------------------------------------------------------------------
/HTML-CSS/Project/Image_views/image2.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
54 |
55 |
56 |
--------------------------------------------------------------------------------
/HTML-CSS/Project/Image_views/image3.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
54 |
55 |
56 |
--------------------------------------------------------------------------------
/HTML-CSS/Project/Image_views/image4.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
54 |
55 |
56 |
--------------------------------------------------------------------------------
/HTML-CSS/Project/Image_views/image5.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
54 |
55 |
56 |
--------------------------------------------------------------------------------
/HTML-CSS/Project/Image_views/img/cinema.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Pankaj-Str/Front-end-Development-Tutorial/4f23f30e3e8fc04fdbbab9dc678894dab3ed9925/HTML-CSS/Project/Image_views/img/cinema.png
--------------------------------------------------------------------------------
/HTML-CSS/Project/Image_views/img/lion.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Pankaj-Str/Front-end-Development-Tutorial/4f23f30e3e8fc04fdbbab9dc678894dab3ed9925/HTML-CSS/Project/Image_views/img/lion.png
--------------------------------------------------------------------------------
/HTML-CSS/Project/Image_views/img/man.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Pankaj-Str/Front-end-Development-Tutorial/4f23f30e3e8fc04fdbbab9dc678894dab3ed9925/HTML-CSS/Project/Image_views/img/man.png
--------------------------------------------------------------------------------
/HTML-CSS/Project/Image_views/img/mushrooms.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Pankaj-Str/Front-end-Development-Tutorial/4f23f30e3e8fc04fdbbab9dc678894dab3ed9925/HTML-CSS/Project/Image_views/img/mushrooms.png
--------------------------------------------------------------------------------
/HTML-CSS/Project/Image_views/img/penguin.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Pankaj-Str/Front-end-Development-Tutorial/4f23f30e3e8fc04fdbbab9dc678894dab3ed9925/HTML-CSS/Project/Image_views/img/penguin.png
--------------------------------------------------------------------------------
/HTML-CSS/Project/Image_views/img/vegetable.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Pankaj-Str/Front-end-Development-Tutorial/4f23f30e3e8fc04fdbbab9dc678894dab3ed9925/HTML-CSS/Project/Image_views/img/vegetable.png
--------------------------------------------------------------------------------
/HTML-CSS/Project/Image_views/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
54 |
55 |
56 |
--------------------------------------------------------------------------------
/HTML-CSS/Project/Joy Books Store/image/books-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Pankaj-Str/Front-end-Development-Tutorial/4f23f30e3e8fc04fdbbab9dc678894dab3ed9925/HTML-CSS/Project/Joy Books Store/image/books-2.png
--------------------------------------------------------------------------------
/HTML-CSS/Project/Joy Books Store/image/books.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Pankaj-Str/Front-end-Development-Tutorial/4f23f30e3e8fc04fdbbab9dc678894dab3ed9925/HTML-CSS/Project/Joy Books Store/image/books.png
--------------------------------------------------------------------------------
/HTML-CSS/Project/Joy Books Store/image/e-book.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Pankaj-Str/Front-end-Development-Tutorial/4f23f30e3e8fc04fdbbab9dc678894dab3ed9925/HTML-CSS/Project/Joy Books Store/image/e-book.png
--------------------------------------------------------------------------------
/HTML-CSS/Project/Joy Books Store/image/light-bulb.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Pankaj-Str/Front-end-Development-Tutorial/4f23f30e3e8fc04fdbbab9dc678894dab3ed9925/HTML-CSS/Project/Joy Books Store/image/light-bulb.png
--------------------------------------------------------------------------------
/HTML-CSS/Project/Joy Books Store/image/open-book.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Pankaj-Str/Front-end-Development-Tutorial/4f23f30e3e8fc04fdbbab9dc678894dab3ed9925/HTML-CSS/Project/Joy Books Store/image/open-book.png
--------------------------------------------------------------------------------
/HTML-CSS/Project/Joy Books Store/image/reading.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Pankaj-Str/Front-end-Development-Tutorial/4f23f30e3e8fc04fdbbab9dc678894dab3ed9925/HTML-CSS/Project/Joy Books Store/image/reading.png
--------------------------------------------------------------------------------
/HTML-CSS/Project/Joy Toy Store/css/p4n.css:
--------------------------------------------------------------------------------
1 | .header{
2 | height: 70px;
3 | width: 1200px;
4 | border: solid 0px black;
5 | margin: auto;
6 |
7 | }
8 | .logo{
9 | float: left;
10 | width: 400px;
11 | height: 70px;
12 | text-align: center;
13 | padding-top: 1px;
14 | }
15 | .menu{
16 | float: left;
17 | }
18 | .ul_c{
19 | list-style: none;
20 | }
21 | .li_c{
22 | display: inline-block;
23 | border: saddlebrown solid 1px;
24 | background-color: antiquewhite;
25 | padding-left: 20px;
26 | padding-right: 20px;
27 | padding-top: 10px;
28 | padding-bottom: 10px;
29 | font-size: 15px;
30 | margin-left: 15px;
31 | border-radius: 30px;
32 | margin-right: 0px;
33 | }
34 | a{
35 | text-decoration: none;
36 | color: black;
37 | font-family: Arial, Helvetica, sans-serif;
38 | }
39 | .logo_name{
40 | font-size: 30px;
41 | font-family: Arial, Helvetica, sans-serif;
42 | float: right;
43 | color: rgb(211, 211, 211);
44 | }
45 |
46 |
47 | /* center section */
48 |
49 | .center_section{
50 | height: 300px;
51 | width: 1200px;
52 | background-color: black;
53 | border: solid 0px white;
54 | margin: auto;
55 | }
56 |
57 | .left_center{
58 | float: left;
59 | height: 270px;
60 | width: 400px;
61 | border: solid 0px white;
62 | color: white;
63 | text-align: center;
64 | padding-top: 30px;
65 | }
66 | .right_center{
67 | float: left;
68 | color: white;
69 | height: 300px;
70 | width: 795px;
71 | border: solid 0px wheat;
72 | }
73 | .h1_c{
74 | font-size: 30px;
75 | font-family: Arial, Helvetica, sans-serif;
76 | color: yellow;
77 | }
78 |
79 | .s_p{
80 | color: white;
81 | }
82 | .p_c{
83 | font-family: Arial, Helvetica, sans-serif;
84 | }
85 |
86 | .view_more{
87 | font-size: 20px;
88 | padding-top: 10px;
89 | padding-left: 20px;
90 | padding-right: 20px;
91 | padding-bottom: 10px;
92 | border-radius: 30px;
93 | background-color: yellow;
94 | }
--------------------------------------------------------------------------------
/HTML-CSS/Project/Joy Toy Store/image/rocking-horse.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Pankaj-Str/Front-end-Development-Tutorial/4f23f30e3e8fc04fdbbab9dc678894dab3ed9925/HTML-CSS/Project/Joy Toy Store/image/rocking-horse.png
--------------------------------------------------------------------------------
/HTML-CSS/Project/Joy Toy Store/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
Welcome to Joy Toy Shop
35 |
We are a toy shop that sells toys for children. We
36 | have a wide range of toys for children of all ages. We also have a
37 | variety of games and puzzles for children to enjoy.
38 |
39 | Rocking Horse
40 | Toy Car
41 | Toy Plane
42 | Toy Train
43 |
44 |
View More
45 |
46 |
47 |
48 |
49 |
50 |
51 |
--------------------------------------------------------------------------------
/HTML-CSS/Project/Ludo/css/style.css:
--------------------------------------------------------------------------------
1 |
2 | .board {
3 | width: 400px;
4 | height: 400px;
5 | margin: 0 auto;
6 | background-color: #f0f0f0;
7 | display: grid;
8 | grid-template-columns: repeat(15, 1fr);
9 | grid-template-rows: repeat(15, 1fr);
10 | }
11 | .cell {
12 | border: 1px solid #000;
13 | }
14 | .home {
15 | background-color: #f00;
16 | }
17 | .path {
18 | background-color: #0f0;
19 | }
20 |
--------------------------------------------------------------------------------
/HTML-CSS/Project/Ludo/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
32 |
33 |
34 |
--------------------------------------------------------------------------------
/HTML-CSS/Project/MobileStore/contactus.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/HTML-CSS/Project/MobileStore/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Pankaj-Str/Front-end-Development-Tutorial/4f23f30e3e8fc04fdbbab9dc678894dab3ed9925/HTML-CSS/Project/MobileStore/images/logo.png
--------------------------------------------------------------------------------
/HTML-CSS/Project/MobileStore/images/mobile.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Pankaj-Str/Front-end-Development-Tutorial/4f23f30e3e8fc04fdbbab9dc678894dab3ed9925/HTML-CSS/Project/MobileStore/images/mobile.webp
--------------------------------------------------------------------------------
/HTML-CSS/Project/Product_view/img/samosa.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Pankaj-Str/Front-end-Development-Tutorial/4f23f30e3e8fc04fdbbab9dc678894dab3ed9925/HTML-CSS/Project/Product_view/img/samosa.png
--------------------------------------------------------------------------------
/HTML-CSS/Project/Product_view/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
40 |
41 |
42 |
43 |
44 |
45 |
Product Name
46 |
Product description goes here.
47 |
Buy Now
48 |
49 |
50 |
51 |
--------------------------------------------------------------------------------
/HTML-CSS/Project/README.md:
--------------------------------------------------------------------------------
1 | # project
2 |
--------------------------------------------------------------------------------
/HTML-CSS/Project/SamosaPoint/img/burger.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Pankaj-Str/Front-end-Development-Tutorial/4f23f30e3e8fc04fdbbab9dc678894dab3ed9925/HTML-CSS/Project/SamosaPoint/img/burger.png
--------------------------------------------------------------------------------
/HTML-CSS/Project/SamosaPoint/img/diet.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Pankaj-Str/Front-end-Development-Tutorial/4f23f30e3e8fc04fdbbab9dc678894dab3ed9925/HTML-CSS/Project/SamosaPoint/img/diet.png
--------------------------------------------------------------------------------
/HTML-CSS/Project/SamosaPoint/img/fast-food-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Pankaj-Str/Front-end-Development-Tutorial/4f23f30e3e8fc04fdbbab9dc678894dab3ed9925/HTML-CSS/Project/SamosaPoint/img/fast-food-2.png
--------------------------------------------------------------------------------
/HTML-CSS/Project/SamosaPoint/img/grapes.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Pankaj-Str/Front-end-Development-Tutorial/4f23f30e3e8fc04fdbbab9dc678894dab3ed9925/HTML-CSS/Project/SamosaPoint/img/grapes.png
--------------------------------------------------------------------------------
/HTML-CSS/Project/SamosaPoint/img/ramen.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Pankaj-Str/Front-end-Development-Tutorial/4f23f30e3e8fc04fdbbab9dc678894dab3ed9925/HTML-CSS/Project/SamosaPoint/img/ramen.png
--------------------------------------------------------------------------------
/HTML-CSS/Project/SamosaPoint/img/samosa-bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Pankaj-Str/Front-end-Development-Tutorial/4f23f30e3e8fc04fdbbab9dc678894dab3ed9925/HTML-CSS/Project/SamosaPoint/img/samosa-bg.png
--------------------------------------------------------------------------------
/HTML-CSS/Project/SamosaPoint/img/samosa-bg1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Pankaj-Str/Front-end-Development-Tutorial/4f23f30e3e8fc04fdbbab9dc678894dab3ed9925/HTML-CSS/Project/SamosaPoint/img/samosa-bg1.png
--------------------------------------------------------------------------------
/HTML-CSS/Project/SamosaPoint/img/samosa.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Pankaj-Str/Front-end-Development-Tutorial/4f23f30e3e8fc04fdbbab9dc678894dab3ed9925/HTML-CSS/Project/SamosaPoint/img/samosa.png
--------------------------------------------------------------------------------
/HTML-CSS/Project/SamosaPoint/img/shopping-cart.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Pankaj-Str/Front-end-Development-Tutorial/4f23f30e3e8fc04fdbbab9dc678894dab3ed9925/HTML-CSS/Project/SamosaPoint/img/shopping-cart.png
--------------------------------------------------------------------------------
/HTML-CSS/Project/SamosaPoint/img/vegetable.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Pankaj-Str/Front-end-Development-Tutorial/4f23f30e3e8fc04fdbbab9dc678894dab3ed9925/HTML-CSS/Project/SamosaPoint/img/vegetable.png
--------------------------------------------------------------------------------
/HTML-CSS/Project/VideoPlayer/css/p4n.css:
--------------------------------------------------------------------------------
1 | .center_section{
2 | height: 600px;
3 | width: 1200px;
4 | border:solid 0px black;
5 | margin: auto;
6 | }
7 | .video_section{
8 | height: 600px;
9 | width: 800px;
10 | border: solid 0px black;
11 | float: left;
12 | }
13 | .list_section{
14 | height: 600px;
15 | width: 396px;
16 | border: solid 0px black;
17 | float: left;
18 | }
19 | .menu{
20 | height: 100px;
21 | width: 350px;
22 | border: solid 2px rgb(74, 73, 73);
23 | margin: 10px;
24 | background-color: rgb(193, 193, 193);
25 | border-radius: 20px;
26 | }
27 |
28 | .left_section{
29 | height: 95px;
30 | width: 100px;
31 | border: solid 0px black;
32 | float: left;
33 | text-align: center;
34 | padding-top: 5px;
35 | }
36 | .right_section{
37 | height: 100px;
38 | width: 236px;
39 | border: solid 0px black;
40 | float: left;
41 | padding-left: 10px;
42 | }
43 | h3{
44 | text-align: left;
45 | font-family: Arial, Helvetica, sans-serif;
46 | margin-top: 2px;
47 | }
48 | p{
49 | text-align: left;
50 | font-family: Arial, Helvetica, sans-serif;
51 | font-size: 15px;
52 | margin-top: -12px;
53 | margin-bottom: 5px;
54 | }
55 |
56 | .video{
57 | border: solid 5px black;
58 | border-radius: 30px;
59 | margin-top: 30px;
60 | margin-left: 45px;
61 | }
--------------------------------------------------------------------------------
/HTML-CSS/Project/VideoPlayer/img/heart.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Pankaj-Str/Front-end-Development-Tutorial/4f23f30e3e8fc04fdbbab9dc678894dab3ed9925/HTML-CSS/Project/VideoPlayer/img/heart.png
--------------------------------------------------------------------------------
/HTML-CSS/Project/VideoPlayer/img/leonardo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Pankaj-Str/Front-end-Development-Tutorial/4f23f30e3e8fc04fdbbab9dc678894dab3ed9925/HTML-CSS/Project/VideoPlayer/img/leonardo.png
--------------------------------------------------------------------------------
/HTML-CSS/Project/VideoPlayer/img/like.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Pankaj-Str/Front-end-Development-Tutorial/4f23f30e3e8fc04fdbbab9dc678894dab3ed9925/HTML-CSS/Project/VideoPlayer/img/like.png
--------------------------------------------------------------------------------
/HTML-CSS/Project/p4n/js/scripts.js:
--------------------------------------------------------------------------------
1 | // Mobile menu toggle
2 | const mobileMenu = document.getElementById('mobile-menu');
3 | const navList = document.querySelector('.nav-list');
4 |
5 | mobileMenu.addEventListener('click', () => {
6 | navList.classList.toggle('active');
7 | });
8 |
9 | // Slider functionality
10 | let slideIndex = 0;
11 | const slides = document.querySelectorAll('.slide');
12 | const prevBtn = document.querySelector('.prev');
13 | const nextBtn = document.querySelector('.next');
14 |
15 | function showSlide(index) {
16 | slides.forEach((slide, i) => {
17 | slide.classList.toggle('active', i === index);
18 | });
19 | }
20 |
21 | function nextSlide() {
22 | slideIndex = (slideIndex + 1) % slides.length;
23 | showSlide(slideIndex);
24 | }
25 |
26 | function prevSlide() {
27 | slideIndex = (slideIndex - 1 + slides.length) % slides.length;
28 | showSlide(slideIndex);
29 | }
30 |
31 | prevBtn.addEventListener('click', prevSlide);
32 | nextBtn.addEventListener('click', nextSlide);
33 |
34 | setInterval(nextSlide, 5000); // Change slide every 5 seconds
35 |
--------------------------------------------------------------------------------
/JQuery/Animation/Animation.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | jQuery Animation @codewithpankaj.com
5 |
6 |
7 |
16 |
17 |
18 | Animation with Callback Example
19 | Animate
20 | Animate1
21 |
22 |
23 |
24 |
48 |
49 |
50 |
--------------------------------------------------------------------------------
/JQuery/Animation/Animation1.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | jQuery Animation @codewithpankaj.com
5 |
6 |
7 |
16 |
17 |
18 | Animation Example
19 | Animate
20 |
21 |
22 |
23 |
36 |
37 |
38 |
--------------------------------------------------------------------------------
/JQuery/Animation/Animation2.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | jQuery Animation @codewithpankaj.com
5 |
6 |
7 |
26 |
27 |
28 | @p4n.in Animation
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
73 |
74 |
75 | Restart Animation
76 |
77 |
78 |
--------------------------------------------------------------------------------
/JQuery/Animation/StopAnimation.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | jQuery Stop Animations @ codewithpankaj.com
5 |
6 |
7 |
16 |
17 |
18 | Stop Animations Example @p4n.in
19 | Start Animation
20 | Stop Animation
21 |
22 |
23 |
24 |
58 |
59 |
60 |
--------------------------------------------------------------------------------
/JQuery/Animation/StopAnimation1.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | jQuery Stop Circle Animation @p4n.in
5 |
6 |
7 |
21 |
22 |
23 | Stop Circle Animation Example
24 | Start Animation
25 | Stop Animation
26 |
27 |
28 |
29 |
73 |
74 |
75 |
--------------------------------------------------------------------------------
/JQuery/Callback-Chaining/CallBack.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | jQuery Callback Function Example
5 |
6 |
7 |
15 |
16 |
17 | Callback Function Example
18 | Fade Out
19 |
20 |
21 |
22 |
33 |
34 |
35 |
--------------------------------------------------------------------------------
/JQuery/Callback-Chaining/CallBack1.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | jQuery Callback Game Example @p4n.in
5 |
6 |
7 |
14 |
15 |
16 | Number Guessing Game
17 | Guess a number between 1 and 10.
18 | Make a Guess
19 |
20 | Attempts: 0
21 |
22 |
23 |
59 |
60 |
61 |
--------------------------------------------------------------------------------
/JQuery/Callback-Chaining/Chaining.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | jQuery Chaining Animation Game Example @codeswithpankaj.com
5 |
6 |
7 |
17 |
18 |
19 | Chaining Animation Game
20 | Click on the character!
21 |
22 |
23 |
24 |
36 |
37 |
38 |
--------------------------------------------------------------------------------
/JQuery/Flip/jQueryFlip.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/JQuery/Get Content and Attributes/Example1.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | jQuery Get Content and Attributes @codeswithpankaj
5 |
6 |
7 |
8 |
9 | Get Content and Attributes Example
10 |
11 | This is a paragraph.
12 | Visit @codeswithpankaj.com
13 |
14 |
15 |
16 | Get Paragraph Content
17 | Get Link Href Attribute
18 |
19 |
20 |
21 |
Retrieved Content:
22 |
23 |
24 |
25 |
Retrieved Attribute:
26 |
27 |
28 |
29 |
30 |
51 |
52 |
53 |
--------------------------------------------------------------------------------
/JQuery/Get Content and Attributes/Example2.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
15 |
16 |
17 | Read More...
18 |
19 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam laudantium repellendus tenetur optio aspernatur distinctio, deleniti corrupti maiores voluptatum minus, provident repellat minima rerum quas? Aspernatur totam incidunt libero doloremque.
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/JQuery/Get Content and Attributes/img/logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Pankaj-Str/Front-end-Development-Tutorial/4f23f30e3e8fc04fdbbab9dc678894dab3ed9925/JQuery/Get Content and Attributes/img/logo.jpg
--------------------------------------------------------------------------------
/JQuery/HideShow/Fading.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | jQuery Fading Example (Single File)
5 |
6 |
7 |
8 |
9 | Fading Example
10 | Fade In
11 | Fade Out
12 |
13 |
14 |
15 |
28 |
29 |
30 |
--------------------------------------------------------------------------------
/JQuery/HideShow/HideShow.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Hide and Show
7 |
8 |
9 |
33 |
34 |
35 |
36 |
37 | Show
38 | Hide
39 | SlowHide
40 | SlowShow
41 | Show/Hide
42 |
43 |
44 |
45 | A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately. As of jQuery 1.7, the queue option can also accept a string, in which case the animation is added to the queue represented by that string. When a custom queue name is used the animation does not automatically start; you must call .dequeue("queuename") to start it.
46 |
47 |
48 |
49 |
50 |
51 |
--------------------------------------------------------------------------------
/JQuery/Set Content and Attributes/Example.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | jQuery Set Content and Attributes @codeswithpankaj
5 |
6 |
7 |
8 |
9 | Set Content and Attributes Example
10 |
11 |
12 |
This is a placeholder.
13 |
14 | Click Here
15 |
16 | Set Content
17 | Set Link Href Attribute
18 |
19 |
33 |
34 |
35 |
--------------------------------------------------------------------------------
/JQuery/Sliding/SlidingEffects.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | jQuery Sliding Example (Single File)
5 |
6 |
7 |
22 |
23 |
24 | Sliding Example
25 | Slide Down
26 | Slide Up
27 | Slide Toggle
28 |
31 |
32 |
33 |
51 |
52 |
53 |
--------------------------------------------------------------------------------
/JQuery/Sliding/css/Style.css:
--------------------------------------------------------------------------------
1 | * { Box-sizing: Border-box }
2 | .mycontainer{
3 | white-space: nowrap;
4 | overflow-x: hidden;
5 | width: 204px;
6 | }
7 | .box{
8 | display: inline-block;
9 | border: 2px black solid;
10 | padding: 20px;
11 | width: 200px;
12 | height: 100px;
13 | vertical-align: top;
14 | background-color: pink;
15 | }
16 | .box2{
17 | background-color: yellow;
18 | }
--------------------------------------------------------------------------------
/JQuery/fade/fade.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
41 |
42 |
43 |
51 |
52 |
53 | In
54 | out
55 | toggle
56 | to
57 |
58 |
59 |
--------------------------------------------------------------------------------
/JavaScript/01 Day Basic/Basic Internal.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Basic...
7 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/JavaScript/01 Day Basic/Basic.js:
--------------------------------------------------------------------------------
1 | // print text
2 | document.write("Welcome to @p4n.in")
3 | // print text into console
4 | console.log("codewithpankaj.com")
5 |
6 |
--------------------------------------------------------------------------------
/JavaScript/01 Day Basic/CWPWelcome.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 | Welcome to codeswithpankaj.com
13 |
14 |
--------------------------------------------------------------------------------
/JavaScript/01 Day Basic/README.md:
--------------------------------------------------------------------------------
1 | # JavaScript variables
2 |
3 | In JavaScript, variables are used to store data values. These values can be numbers, strings, objects, arrays, functions, and more. Variables provide a way to label and reference these values throughout your code.
4 |
5 | Here's how you can declare a variable in JavaScript:
6 |
7 | ```javascript
8 | var myVariable; // Declaration
9 | ```
10 |
11 | In modern JavaScript, you can also use `let` and `const` to declare variables. The key difference between these three keywords lies in their scoping and mutability:
12 |
13 | 1. `var`: Variables declared with `var` are function-scoped or globally-scoped. This means they are accessible within the function where they are defined or globally if defined outside of any function.
14 |
15 | ```js
16 | // Declaring multiple Variables
17 | var name = "Peter Parker", age = 21, isMarried = false;
18 |
19 | /* Longer declarations can be written to span
20 | multiple lines to improve the readability */
21 | var name = "Peter Parker",
22 | age = 21,
23 | isMarried = false;
24 | ```
25 |
26 | 2. `let`: Variables declared with `let` are block-scoped. They are accessible only within the block (portion of code within curly braces) where they are defined.
27 |
28 | ```js
29 | // Declaring variables
30 | let name = "Harry Potter";
31 | let age = 11;
32 | let isStudent = true;
33 | ```
34 |
35 | 3. `const`: Variables declared with `const` are also block-scoped, but they cannot be reassigned after their initial assignment. However, it's important to note that while a `const` variable cannot be reassigned, the value it holds might still be mutable if it's an object or an array.
36 |
37 | ```js
38 | // Declaring constant
39 | const PI = 3.14;
40 | console.log(PI); // 3.14
41 |
42 | // Trying to reassign
43 | PI = 10; // error
44 | ```
45 |
--------------------------------------------------------------------------------
/JavaScript/01 Day Basic/Variable Internal.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
46 |
47 |
48 |
49 |
50 |
--------------------------------------------------------------------------------
/JavaScript/01 Day Basic/Variable.js:
--------------------------------------------------------------------------------
1 | // variable ...
2 | // var
3 |
4 | var msg;
5 | msg = "welcome to @p4n.in";
6 | console.log(msg)
7 |
8 | // let
9 | let Name = "joy";
10 | let age = 12;
11 | let height = 3.4;
12 |
13 | console.log("My Name is : "+Name);
14 | console.log("My Age is : "+age);
15 | console.log("My height is : "+height);
16 |
17 | age = 11;
18 | console.log("My Age is : "+age);
19 |
20 | // const.. constant variable
21 | const number = 90;
22 | console.log("Number is "+number)
23 | number = 100;
24 | console.log("Number is "+number)
25 |
26 |
27 |
--------------------------------------------------------------------------------
/JavaScript/02 Day Operator/Operator.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | JavaScript Operators Example
5 |
6 |
7 | JavaScript Operators Example
8 |
9 |
54 |
55 |
56 |
--------------------------------------------------------------------------------
/JavaScript/02 Day Operator/Operators/ArithmeticOperators.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
25 |
26 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/JavaScript/02 Day Operator/Operators/AssignmentOperators.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
35 |
36 |
37 |
38 |
39 |
--------------------------------------------------------------------------------
/JavaScript/02 Day Operator/Operators/ComparisonOperators.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/JavaScript/02 Day Operator/ReadDataFromTextBox.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Method-Function
7 |
17 |
18 |
19 |
32 |
33 |
--------------------------------------------------------------------------------
/JavaScript/04 Day Function/Example/Function.js:
--------------------------------------------------------------------------------
1 | function showbox(){
2 | alert("welcome - codeswithpankaj.com")
3 | }
4 |
5 | //showbox();
6 |
7 | function website(){
8 | window.open("https://www.codeswithpankaj.com/")
9 | }
10 |
11 | function setvalue(){
12 | let Name = prompt("Enter your Name - ")
13 | alert("your name is : "+Name)
14 | }
--------------------------------------------------------------------------------
/JavaScript/04 Day Function/Example/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 | Click me
12 |
13 |
14 | Open Website -
15 |
16 |
17 | Click to Enter Name -
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/JavaScript/04 Day Function/Function/function.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/JavaScript/04 Day Function/Function/function.js:
--------------------------------------------------------------------------------
1 | // basic function
2 | function info(){
3 | console.log("codeswithpankaj.com")
4 | }
5 |
6 | info()
7 |
8 | // function with parameters
9 |
10 | function web(website){
11 | console.log("this is website name : "+website);
12 | }
13 |
14 | // calling function
15 | web("p4n.in")
16 | web("p4n.store")
17 |
18 | //Function Expression:
19 | let msg = function(info){
20 | console.log("Website Name : "+info);
21 | console.log("Welcome to Learning JAVASCRIPT");
22 | }
23 |
24 | msg("p4n.in")
25 |
26 | //Arrow Functions (ES6+):
27 | let getinfo = (name,age,height) => console.log(name+height+age);
28 |
29 | getinfo("joy",12,4.5);
30 |
31 | // Return Statement
32 | function subtract(a, b) {
33 | return a - b;
34 | }
35 |
36 | console.log(subtract(8, 4)); // Output: 4
37 |
38 | // Anonymous Functions:
39 | setTimeout(function() {
40 | console.log("Delayed message");
41 | }, 1000);
42 |
43 | setTimeout(() => {
44 | console.log("Delayed for 1 second.");
45 | }, 1000);
46 |
47 |
--------------------------------------------------------------------------------
/JavaScript/06 Day Events/Events.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | JavaScript Events Example
5 |
6 |
7 | JavaScript Events Example
8 |
9 | Click Me!
10 |
11 |
12 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/JavaScript/06 Day Events/LoginExample/Welcome.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 | Welcome to home page
10 |
11 |
--------------------------------------------------------------------------------
/JavaScript/06 Day Events/LoginExample/css/Style.css:
--------------------------------------------------------------------------------
1 | .gradient-custom-2 {
2 | /* fallback for old browsers */
3 | background: #fccb90;
4 |
5 | /* Chrome 10-25, Safari 5.1-6 */
6 | background: -webkit-linear-gradient(to right, #ee7724, #d8363a, #dd3675, #b44593);
7 |
8 | /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
9 | background: linear-gradient(to right, #ee7724, #d8363a, #dd3675, #b44593);
10 | }
11 |
12 | @media (min-width: 768px) {
13 | .gradient-form {
14 | height: 100vh !important;
15 | }
16 | }
17 | @media (min-width: 769px) {
18 | .gradient-custom-2 {
19 | border-top-right-radius: .3rem;
20 | border-bottom-right-radius: .3rem;
21 | }
22 | }
--------------------------------------------------------------------------------
/JavaScript/06 Day Events/LoginExample/js/loginfun.js:
--------------------------------------------------------------------------------
1 | function login(){
2 |
3 | let username = document.getElementById("username").value;
4 | let password = document.getElementById("password").value;
5 |
6 | if(username == "admin@p4n.in" && password=="p4n.in"){
7 |
8 | window.open("welcome.html");
9 |
10 | }else{
11 |
12 | alert("try again ....");
13 | }
14 |
15 |
16 | }
--------------------------------------------------------------------------------
/JavaScript/10 Day Array/Array.js:
--------------------------------------------------------------------------------
1 | // Creating Arrays:
2 |
3 | let fruits = ['apple', 'banana', 'orange'];
4 |
5 | console.log(fruits)
6 |
7 | //let numbers = new Array(1, 2, 3, 4, 5);
8 |
9 | //console.log(numbers)
10 |
11 | // Accessing Array Elements:
12 |
13 | console.log(fruits[1])
14 |
15 | // Modifying Array Elements:
16 |
17 | fruits[1] = 'samosa'
18 | console.log(fruits)
19 |
20 | // Array Methods:
21 |
22 | fruits.push('pear'); // Add element to end
23 | console.log(fruits);
24 | let item = fruits.pop(); // Remove last element
25 |
26 | console.log("remove item from array ",item)
27 | console.log("After Remove - ",fruits)
28 |
29 |
30 | item = fruits.shift(); // Remove first element
31 | console.log("remove first element from array ",item)
32 | console.log("After Remove - ",fruits)
33 |
34 | fruits.unshift('kiwi'); // Add element to the beginning
35 | console.log("After Add Elements - ",fruits)
36 |
37 | let slicedFruits = fruits.slice(1, 3); // Create a new array with elements from index 1 to 2
38 | console.log(slicedFruits)
39 |
40 | // Iterating through Arrays:
41 |
42 | fruits.forEach(function(fruit) {
43 | console.log(fruit);
44 | })
45 |
46 | // other way
47 |
48 | for (let index = 0; index < fruits.length; index++) {
49 |
50 | console.log(fruits[index])
51 |
52 | }
53 |
54 | let matrix = [[1, 2, 3],[4, 5, 6],[7, 8, 9]];
55 |
56 | console.log(matrix[0][1])
57 |
58 | //concat()
59 |
60 | let array1 = [1, 2, 3];
61 | let array2 = [4, 5, 6];
62 | let combinedArray = array1.concat(array2); // [1, 2, 3, 4, 5, 6]
63 | console.log(combinedArray)
64 |
65 |
66 | function print(){
67 |
68 | let fruits = ['apple', 'banana', 'orange'];
69 |
70 | for (let index = 0; index < fruits.length; index++) {
71 |
72 | let element = fruits[index];
73 |
74 | document.write(""+element+" ")
75 |
76 | }
77 | }
--------------------------------------------------------------------------------
/JavaScript/10 Day Array/Array_Example.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Array Example
7 |
8 |
29 |
30 |
31 |
32 |
33 |
36 |
37 |
38 | click
39 |
40 |
41 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/JavaScript/10 Day Array/index1.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 | Click
11 |
12 |
--------------------------------------------------------------------------------
/JavaScript/11 Day Date/Date.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
34 |
35 |
36 |
37 | Print
38 |
39 | Dates
40 | Date Formats
41 | Date Get Methods
42 | Date Set Methods
43 |
44 |
45 | Current year
46 | Current month
47 | Current day
48 | Current hours
49 | Current minutes
50 | Current seconds
51 | Current milliseconds
52 |
53 |
54 | Formatting Dates:
55 | formatted Date
56 | formatted Time
57 | formatted Date Time
58 |
59 |
60 |
--------------------------------------------------------------------------------
/JavaScript/11 Day Date/DateExample.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
30 |
31 |
32 | : Get Result :
33 |
34 | Current Date :
35 | year :
36 | month :
37 | day :
38 | hours :
39 | minutes :
40 | seconds :
41 | milliseconds :
42 |
43 |
44 |
45 |
46 |
--------------------------------------------------------------------------------
/JavaScript/13 Day If Else/README.md:
--------------------------------------------------------------------------------
1 | # If Else
2 |
3 | The `if...else` statement is used for making decisions based on certain conditions. It allows you to execute different blocks of code depending on whether a specified condition is `true` or `false`. Here's how the `if...else` statement works:
4 |
5 | ```javascript
6 | if (condition) {
7 | // Code to execute if the condition is true
8 | } else {
9 | // Code to execute if the condition is false
10 | }
11 | ```
12 |
13 | **Example:**
14 |
15 | ```javascript
16 | let age = 18;
17 |
18 | if (age >= 18) {
19 | console.log("You are an adult.");
20 | } else {
21 | console.log("You are not yet an adult.");
22 | }
23 | ```
24 |
25 | In the example above, if the `age` variable is greater than or equal to 18, the code within the first block (inside the `if` statement) will be executed, printing "You are an adult." Otherwise, the code within the `else` block will be executed, printing "You are not yet an adult."
26 |
27 | **Nested If-Else:**
28 |
29 | You can also nest `if...else` statements to create more complex decision-making logic:
30 |
31 | ```javascript
32 | let temperature = 25;
33 |
34 | if (temperature > 30) {
35 | console.log("It's a hot day!");
36 | } else if (temperature >= 20) {
37 | console.log("It's a nice day.");
38 | } else {
39 | console.log("It's a bit chilly.");
40 | }
41 | ```
42 |
43 | In this example, the code checks the value of the `temperature` variable and prints different messages based on different temperature ranges.
44 |
45 | **Multiple Conditions (Logical Operators):**
46 |
47 | You can use logical operators like `&&` (logical AND) and `||` (logical OR) to combine multiple conditions:
48 |
49 | ```javascript
50 | let isSunny = true;
51 | let isWarm = true;
52 |
53 | if (isSunny && isWarm) {
54 | console.log("It's a sunny and warm day!");
55 | } else {
56 | console.log("The weather is not sunny and warm.");
57 | }
58 | ```
59 |
60 | The `if...else` statement is fundamental to control the flow of your code based on conditions. It allows you to create flexible and dynamic programs that react to different scenarios.
61 |
--------------------------------------------------------------------------------
/JavaScript/13 Day If Else/ifelse.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
34 |
35 |
36 |
37 | Number 1
38 |
39 |
40 |
41 | Number 2
42 |
43 |
44 |
45 | Find Smallest
46 | Your Smallest No. =
47 |
48 |
--------------------------------------------------------------------------------
/JavaScript/14 Day Switch/README.md:
--------------------------------------------------------------------------------
1 | # Switch
2 |
3 | JavaScript, the `switch` statement is used to evaluate an expression and execute a block of code based on different cases that match the value of the expression. It's an alternative to using multiple `if` statements when you have multiple conditions to check against a single value. Here's an example of how the `switch` statement works:
4 |
5 | ```javascript
6 | var day = "Monday";
7 |
8 | switch (day) {
9 | case "Monday":
10 | console.log("It's the start of the workweek.");
11 | break;
12 | case "Tuesday":
13 | console.log("Second day of the week.");
14 | break;
15 | case "Wednesday":
16 | console.log("Halfway through the week.");
17 | break;
18 | case "Thursday":
19 | console.log("Almost there, one more day to go.");
20 | break;
21 | case "Friday":
22 | console.log("TGIF - It's Friday!");
23 | break;
24 | default:
25 | console.log("It's the weekend!");
26 | }
27 | ```
28 |
29 | In this example, the value of the `day` variable is checked against different cases within the `switch` statement. If the value of `day` matches a case, the corresponding code block is executed. The `break` statement is used to exit the `switch` statement once a match is found. If there's no match, the code within the `default` block is executed.
30 |
31 | So, if `day` is `"Monday"`, the output will be:
32 |
33 | ```
34 | It's the start of the workweek.
35 | ```
36 |
37 | If `day` is `"Saturday"`, the output will be:
38 |
39 | ```
40 | It's the weekend!
41 | ```
42 |
43 | ## Example of using the `switch` statement in JavaScript:
44 |
45 | ```javascript
46 | var fruit = "apple";
47 |
48 | switch (fruit) {
49 | case "apple":
50 | console.log("You chose an apple.");
51 | break;
52 | case "banana":
53 | console.log("You picked a banana.");
54 | break;
55 | case "orange":
56 | console.log("You selected an orange.");
57 | break;
58 | default:
59 | console.log("That's not a fruit I recognize.");
60 | }
61 | ```
62 |
63 | In this example, the `fruit` variable is being checked against different cases. Depending on the value of `fruit`, a corresponding message will be logged to the console. If `fruit` is `"apple"`, the output will be:
64 |
65 | ```
66 | You chose an apple.
67 | ```
68 |
69 | If `fruit` is `"grape"` (which isn't covered in the cases), the output will be:
70 |
71 | ```
72 | That's not a fruit I recognize.
73 | ```
74 |
75 | The `switch` statement provides a clean and efficient way to handle multiple possible values for a variable and execute specific code based on those values. The `default` case is used as a fallback in case none of the provided cases match the value being checked.
76 |
--------------------------------------------------------------------------------
/JavaScript/15 Day Loop/ForLoop.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/JavaScript/15 Day Loop/Loop.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/JavaScript/15 Day Loop/Whileloop.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
16 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/JavaScript/Example/MCQ.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | MCQ - Question
7 |
31 |
32 |
33 | 1. Which of the following rivers was known as Purushni in the Vedic period ?
34 | 1. CWP
35 | 2. Pankaj
36 | 3. Joy
37 | 4. p4n
38 | Check Answer
39 |
40 | Answer :
41 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/JavaScript/Example/cal.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
28 |
29 |
30 | Number 1
31 |
32 |
33 | +
34 | -
35 | *
36 | /
37 |
38 | Number 2
39 |
40 |
41 |
42 | GET Result
43 | Result :
44 |
45 |
--------------------------------------------------------------------------------
/JavaScript/Questions/README.md:
--------------------------------------------------------------------------------
1 | Question 1.
2 |
3 | ```yaml
4 | -- Date of birth Section
5 |
6 | Enter Your Birth Year : 1992
7 | Enter Your Birth Month : 4
8 | Enter Your Birth Day : 16
9 |
10 | -- Current Date
11 |
12 | Enter Your Current Year : 2023
13 | Enter Your Current Month : 7
14 | Enter Your Current Day : 26
15 |
16 | -- output
17 |
18 | 30 years 3 months 10 days
19 | or 363 months 10 days
20 | or 1579 weeks 5 days
21 | or 11,058 days
22 | or 265,392 hours
23 | ```
--------------------------------------------------------------------------------
/MySQL/cwp.sql:
--------------------------------------------------------------------------------
1 | -- list of database
2 | show databases;
3 |
4 | -- create database
5 | create database cwp;
6 |
7 | -- delete database
8 | drop database cwp;
9 |
10 | -- select database
11 | use cwp;
12 |
13 | -- create table
14 | -- int = 0 to 9
15 | -- varchar = "codeswithpankaj.com"
16 | -- date
17 | -- time
18 | create table employee(
19 | id int,
20 | emp_name varchar(20),
21 | salary int,
22 | city varchar(20)
23 | );
24 | -- show table
25 | select * from employee;
26 |
27 | -- enter record into table
28 | insert into employee value(1,"joy",68000,"mumbai");
29 |
30 | insert into employee (id,emp_name,salary,city)
31 | value(2,"Kiran",94560,"Surat");
32 |
33 |
34 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/UI-Design/Animated Glowing Radial Menu/css/styles.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;500;700;900&display=swap");
2 |
3 | * {
4 | margin: 0;
5 | padding: 0;
6 | font-family: "Roboto", sans-serif;
7 | box-sizing: border-box;
8 | }
9 |
10 | .Animated-Radial-Menu {
11 | display: flex;
12 | justify-content: center;
13 | align-items: center;
14 | min-height: 100vh;
15 | background: #1a1a1a; /* Dark background color */
16 | }
17 |
18 | .Animated-Radial-Menu .menu {
19 | position: relative;
20 | width: 300px;
21 | height: 300px;
22 | display: flex;
23 | justify-content: center;
24 | align-items: center;
25 | }
26 |
27 | .Animated-Radial-Menu .menu .toggle {
28 | position: absolute;
29 | width: 70px;
30 | height: 70px;
31 | background: #ff6347; /* Tomato red */
32 | border: 2px solid #fff;
33 | border-radius: 50%;
34 | color: #fff;
35 | display: flex;
36 | justify-content: center;
37 | align-items: center;
38 | cursor: pointer;
39 | z-index: 100;
40 | font-size: 2em;
41 | transition: transform 0.5s;
42 | }
43 |
44 | .Animated-Radial-Menu .menu li {
45 | position: absolute;
46 | left: 0;
47 | list-style: none;
48 | transition: 0.3s;
49 | transition-delay: calc(0.04s * var(--i));
50 | transform: rotate(0deg) translateX(120px);
51 | transform-origin: 150px;
52 | }
53 |
54 | .Animated-Radial-Menu .menu li a {
55 | display: flex;
56 | justify-content: center;
57 | align-items: center;
58 | width: 70px;
59 | height: 70px;
60 | color: #00b894; /* Turquoise green */
61 | border: 2px solid #00b894;
62 | border-radius: 50%;
63 | font-size: 1.5em;
64 | transform: rotate(calc(-45deg * var(--i)));
65 | transition: 0.3s;
66 | }
67 |
68 | .Animated-Radial-Menu .menu li a:hover {
69 | background: #00b894;
70 | color: #fff;
71 | box-shadow: 0 0 10px #00b894, 0 0 30px #00b894, 0 0 50px #00b894;
72 | }
73 |
74 | .Animated-Radial-Menu .menu.active .toggle {
75 | transform: rotate(315deg);
76 | }
77 |
78 | .Animated-Radial-Menu .menu.active li {
79 | transform: rotate(calc(45deg * var(--i))) translateX(0px);
80 | }
81 |
--------------------------------------------------------------------------------
/UI-Design/Animated Glowing Radial Menu/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Animated Radial Menu - Codes With Pankaj
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
64 |
65 |
66 |
67 |
--------------------------------------------------------------------------------
/UI-Design/Animated Glowing Radial Menu/js/script.js:
--------------------------------------------------------------------------------
1 |
2 |
3 | let toggle = document.querySelector('.toggle')
4 | let menu = document.querySelector('.menu')
5 |
6 | toggle.onclick = ()=>{
7 | menu.classList.toggle('active')
8 | }
9 |
10 |
--------------------------------------------------------------------------------
/UI-Design/Interactive Card Effect/image/shoes01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Pankaj-Str/Front-end-Development-Tutorial/4f23f30e3e8fc04fdbbab9dc678894dab3ed9925/UI-Design/Interactive Card Effect/image/shoes01.png
--------------------------------------------------------------------------------
/UI-Design/Interactive Card Effect/image/shoes02.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Pankaj-Str/Front-end-Development-Tutorial/4f23f30e3e8fc04fdbbab9dc678894dab3ed9925/UI-Design/Interactive Card Effect/image/shoes02.jpg
--------------------------------------------------------------------------------
/UI-Design/Interactive Card Effect/image/shoes03.avif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Pankaj-Str/Front-end-Development-Tutorial/4f23f30e3e8fc04fdbbab9dc678894dab3ed9925/UI-Design/Interactive Card Effect/image/shoes03.avif
--------------------------------------------------------------------------------
/UI-Design/Interactive Card Effect/image/shoes04.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Pankaj-Str/Front-end-Development-Tutorial/4f23f30e3e8fc04fdbbab9dc678894dab3ed9925/UI-Design/Interactive Card Effect/image/shoes04.webp
--------------------------------------------------------------------------------
/UI-Design/Magic Bottom Menu/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Codes With Pankaj
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
--------------------------------------------------------------------------------
/UI-Design/Magic Bottom Menu/js/script.js:
--------------------------------------------------------------------------------
1 |
2 |
3 | const links = document.querySelectorAll('.nav__link');
4 | const light = document.querySelector('.nav__light');
5 |
6 | function moveLight({offsetLeft, offsetWidth}){
7 | light.style.left = `${offsetLeft - offsetWidth/4}px`;
8 | }
9 |
10 | function activeLink(linkActive){
11 | links.forEach(link => {
12 | link.classList.remove('active');
13 | linkActive.classList.add('active');
14 | })
15 | }
16 |
17 |
18 | links.forEach((link) => {
19 | link.addEventListener('click', (event) => {
20 | moveLight(event.target);
21 | activeLink(link);
22 | })
23 | })
24 |
25 |
--------------------------------------------------------------------------------
/UI-Design/Product Cards/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Product Card with Cart Items
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
Nike Air (Women) Size 7
15 |
Price £199.99
16 |
Add to basket
17 |
18 |
19 |
20 |
Details about the product
21 |
More info about Nike Air
22 |
View More
23 |
24 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/UI-Design/Product Cards/multiplecard.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
Nike Air (Women) Size 7
7 |
Price £199.99
8 |
Add to basket
9 |
10 |
11 |
12 |
Details about the product
13 |
More info about Nike Air
14 |
View More
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
Nike Air (Men) Size 10
23 |
Price £99.99
24 |
Add to basket
25 |
26 |
27 |
28 |
Details about the product
29 |
More info about Nike Air
30 |
View More
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
Nike Air (Women) Size 8
39 |
Price £399.99
40 |
Add to basket
41 |
42 |
43 |
44 |
Details about the product
45 |
More info about Nike Air
46 |
View More
47 |
48 |
49 |
50 |
--------------------------------------------------------------------------------
/UI-Design/Product Cards/p4n.css:
--------------------------------------------------------------------------------
1 | body {
2 | display: flex;
3 | justify-content: center;
4 | align-items: center;
5 | height: 100vh;
6 | background-color: #000;
7 | color: #fff;
8 | font-family: Arial, sans-serif;
9 | }
10 |
11 | .card {
12 | perspective: 1000px;
13 | }
14 |
15 | .card-inner {
16 | position: relative;
17 | width: 300px;
18 | height: 400px;
19 | text-align: center;
20 | transition: transform 0.6s;
21 | transform-style: preserve-3d;
22 | }
23 |
24 | .card:hover .card-inner {
25 | transform: rotateY(180deg);
26 | }
27 |
28 | .card-front, .card-back {
29 | position: absolute;
30 | width: 100%;
31 | height: 100%;
32 | backface-visibility: hidden;
33 | border-radius: 16px;
34 | }
35 |
36 | .card-front {
37 | background: linear-gradient(45deg, #00c6ff, #0072ff);
38 | }
39 |
40 | .card-back {
41 | background: linear-gradient(45deg, #ff416c, #ff4b2b);
42 | transform: rotateY(180deg);
43 | }
44 |
45 | .card img {
46 | width: 100px;
47 | margin-top: 20px;
48 | }
49 |
50 | h3, p {
51 | margin: 10px 0;
52 | }
53 |
54 | button {
55 | margin-top: 20px;
56 | padding: 10px 20px;
57 | border: none;
58 | border-radius: 20px;
59 | background: #fff;
60 | color: #000;
61 | cursor: pointer;
62 | transition: background 0.3s;
63 | }
64 |
65 | button:hover {
66 | background: #ddd;
67 | }
--------------------------------------------------------------------------------
/UI-Design/chess board Design/css/style.css:
--------------------------------------------------------------------------------
1 | .outerbox{
2 | height: 816px;
3 | width: 816px;
4 | border: solid 20px rgb(86, 85, 85);
5 | margin: auto;
6 | }
7 | .row_box{
8 | height: 100px;
9 | width: 816px;
10 | border: solid 1px black;
11 | }
12 | .black_box{
13 | height: 100px;
14 | width: 100px;
15 | border: solid 1px black;
16 | background-color: black;
17 | float: left;
18 | text-align: center;
19 | font-size: 70px;
20 | color: white;
21 |
22 | }
23 | .white_box{
24 | height: 100px;
25 | width: 100px;
26 | border: solid 1px black;
27 | background-color: white;
28 | float: left;
29 | text-align: center;
30 | font-size: 70px;
31 | }
--------------------------------------------------------------------------------
/UI-Design/vertical tabs/script.js:
--------------------------------------------------------------------------------
1 |
2 | const allLinks = document.querySelectorAll(".tabs a");
3 | const allTabs = document.querySelectorAll(".tab-content")
4 | const tabContentWrapper = document.querySelector(".tab-content-wrapper");
5 |
6 | const shiftTabs = (linkId) => {
7 | allTabs.forEach((tab, i) => {
8 |
9 | if (tab.id.includes(linkId)) {
10 | allTabs.forEach((tabItem) => {
11 | tabItem.style = `transform: translateY(-${i*300}px);`;
12 | });
13 | }
14 | });
15 | }
16 |
17 | allLinks.forEach((elem) => {
18 | elem.addEventListener('click', function() {
19 | const linkId = elem.id;
20 | const hrefLinkClick = elem.href;
21 |
22 | allLinks.forEach((link, i) => {
23 | if (link.href == hrefLinkClick){
24 | link.classList.add("active");
25 | } else {
26 | link.classList.remove('active');
27 | }
28 | });
29 |
30 | shiftTabs(linkId);
31 | });
32 | });
33 |
34 | //? handle proper selection for initial load
35 | const currentHash = window.location.hash;
36 |
37 | let activeLink = document.querySelector(`.tabs a`);
38 |
39 | if (currentHash) {
40 | const visibleHash = document.getElementById(
41 | `${currentHash.replace('#', '')}`
42 | );
43 |
44 | if (visibleHash) {
45 | activeLink = visibleHash;
46 | }
47 | }
48 |
49 | activeLink.classList.toggle('active');
50 |
51 | shiftTabs(activeLink.id);
--------------------------------------------------------------------------------
/UI-Design/vertical tabs/style.css:
--------------------------------------------------------------------------------
1 |
2 |
3 | :root {
4 | --white: #FFF;
5 | --gray: #F3F3F3;
6 | --gray-mid: #9D9D9D;
7 | --gray-dark: #3e3e3e;
8 | --gray-hover: #F7F7F7;
9 | --body-background: #dfdfdf;
10 | }
11 |
12 | body {
13 | font-family: 'Poppins';
14 | display: flex;
15 | justify-content: center;
16 | align-items: center;
17 | height: 100vh;
18 | padding: 16px;
19 | background-color: var(--body-background);
20 | }
21 |
22 | * {
23 | margin: 0;
24 | padding: 0;
25 | box-sizing: border-box;
26 | }
27 |
28 | .tabs-container {
29 | padding: 16px;
30 | width: 100%;
31 | max-width: 480px;
32 | min-width: 320px;
33 | display: flex;
34 | margin: 10px;
35 | border-radius: 16px;
36 | background-color: var(--white);
37 | box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
38 | }
39 |
40 | header {
41 | position: relative;
42 | }
43 |
44 | .tab-content-wrapper {
45 | overflow-y: hidden;
46 | overflow-x: auto;
47 | height: 300px;
48 | transition: all 0.45s ease-in-out;
49 | padding: 0 16px;
50 | }
51 |
52 | .tab-content h2 {
53 | color: var(--gray-dark);
54 | font-size: 1.2rem;
55 | font-weight: 600;
56 | margin-top: 0px;
57 | margin-bottom: 8px;
58 | }
59 |
60 | .tab-content {
61 | font-size: 0.8rem;
62 | min-height: 300px;
63 | min-width: 240px;
64 | overflow-x: auto;
65 | transition: all 0.45s ease-in-out;
66 | }
67 |
68 | .tabs {
69 | position: relative;
70 | display: flex;
71 | flex-direction: column;
72 | border-right: 1px solid #F0F0F0;
73 | list-style-type: none;
74 | padding-right: 16px;
75 | gap: 8px;
76 | }
77 |
78 | .tabs a {
79 | position: relative;
80 | display: flex;
81 | text-decoration: none;
82 | width: 100%;
83 | font-size: 14px;
84 | font-weight: 600;
85 | color: var(--gray-mid);
86 | text-align: left;
87 | border-radius: 8px;
88 | justify-content: start;
89 | padding: 12px;
90 | align-items: center;
91 | gap: 8px;
92 | transition: all 0.3s ease-in-out;
93 | }
94 |
95 | .tabs a img {
96 | height: 20px;
97 | width: 20px;
98 | }
99 |
100 | .tabs .active, .tabs a:hover {
101 | font-weight: 700;
102 | outline: none;
103 | color: white;
104 | background-color: var(--gray-dark);
105 | }
106 |
107 |
108 | .tabs a svg {
109 | stroke: var(--gray-mid);
110 | }
111 |
112 | .tabs .active svg {
113 | stroke: var(--white);
114 | }
115 |
116 | .tabs a:hover svg {
117 | stroke: var(--white);
118 | }
--------------------------------------------------------------------------------