├── CSS Box Model
└── 01boxModel.html
├── CSS FlexBox
├── 01flexbox.html
└── 02google.html
├── CSS Media
└── 01mobile.html
├── CSS Textbackground
└── 01Text.html
├── CSS Units
└── 01units.html
├── CSS
├── 01intro.html
├── 02external.html
├── 03selector.html
└── styles.css
├── Forms
├── 01FormElements.html
├── 02TextArea.html
├── 03buttons.html
├── 04selectTag.html
└── 05formValidation.html
├── HTML Basics
├── 01buildingBlocks.html
├── 02HTMLStructure.html
├── 03TextFormatting.html
├── 04creatingLists.html
└── 05Hyperlink.html
├── HTML Media
├── 01image.html
├── 02audio.html
├── 03video.html
├── 04youtubeEmbed.html
└── demo.png
├── HTML Page Layout
├── 01semanticTags.html
└── 02NonSemantic.html
├── HTML Tables
└── 01Table.html
├── index.html
└── styles.css
/CSS Box Model/01boxModel.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Document
7 |
8 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
THis Is Heading
31 |
32 |
33 | This is a Button
35 |
36 |
--------------------------------------------------------------------------------
/CSS FlexBox/01flexbox.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Document
7 |
27 |
28 |
29 |
30 |
31 |
32 |
1
33 |
34 |
35 |
2
36 |
37 |
38 |
2
39 |
40 |
41 |
2
42 |
43 |
44 |
2
45 |
46 |
47 |
2
48 |
49 |
50 |
2
51 |
52 |
53 |
2
54 |
55 |
56 |
2
57 |
58 |
59 |
2
60 |
61 |
62 |
2
63 |
64 |
65 |
2
66 |
67 |
68 |
2
69 |
70 |
71 |
2
72 |
73 |
74 |
85 |
86 |
87 |
3
88 |
89 |
90 |
91 |
3
92 |
93 |
Document
7 |
8 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 | Google
33 |
34 |
35 |
36 |
37 | X
38 |
39 |
40 | i
41 |
42 |
43 | D
44 |
45 |
46 |
47 |
Document
7 |
8 |
39 |
40 |
41 |
42 |
43 | laptop
44 |
45 |
46 | tab
47 |
48 |
49 | mobile
50 |
51 |
52 |
--------------------------------------------------------------------------------
/CSS Textbackground/01Text.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Document
7 |
42 |
43 |
44 |
45 | This is Heading 1
46 | This is heading
48 |
49 |
50 | Lorem ipsum, dolor sit amet
52 | consectetur adipisicing elit. Sequi vitae porro q
53 | ui officia delectus tempore fugit quas omnis fuga
54 | enim sit, eum unde quae ad modi magni maxime dolorum iste.
55 |
56 | This text is underline
57 | This text is overline
58 | This text is line through
59 |
60 |
61 |
64 | font weight
65 |
66 |
67 | Document
7 |
20 |
21 |
22 |
23 | This is heading
24 |
25 | This image is taken form google
28 | This image is taken form google
70 |
71 |
--------------------------------------------------------------------------------
/CSS/01intro.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Document
7 |
8 |
15 |
16 | This is Heading
21 |
22 | This is heading 2
23 | This is heading 2
24 | This is heading 2
25 | This is heading 2
26 | This is heading 2
27 | This is heading 2
28 | This is heading 2
29 | This is heading 2
30 |
31 |
--------------------------------------------------------------------------------
/CSS/02external.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Document
7 | This is page 2
11 |
12 |
--------------------------------------------------------------------------------
/CSS/03selector.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Document
7 |
31 |
32 |
33 |
34 | This is Heading
35 | This is Heading
36 | This is Heading
37 |
38 | This is sub heading
40 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum accusantium optio fuga? Neque et voluptatibus iste, veritatis distinctio cupiditate, laboriosam quidem autem nemo perferendis recusandae nostrum quas a animi? Amet!
41 | Submit
42 | Submit
43 | Submit
44 | Reset
45 | Reset
46 | Reset
47 | Reset
48 |
49 |
--------------------------------------------------------------------------------
/CSS/styles.css:
--------------------------------------------------------------------------------
1 | h1{
2 | color: green;
3 |
4 | }
--------------------------------------------------------------------------------
/Forms/01FormElements.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Form Elements
5 |
6 |
7 | Form Elements
8 |
9 |
35 |
36 |
37 |
--------------------------------------------------------------------------------
/Forms/02TextArea.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Document
7 |
8 |
9 |
10 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/Forms/03buttons.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Document
7 |
8 |
9 |
10 | Login
11 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/Forms/04selectTag.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Select TAG
7 |
8 |
9 |
10 |
11 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/Forms/05formValidation.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Document
7 |
8 |
9 |
10 | Login
11 |
34 |
35 |
36 |
37 |
38 |
--------------------------------------------------------------------------------
/HTML Basics/01buildingBlocks.html:
--------------------------------------------------------------------------------
1 | Go To Google
--------------------------------------------------------------------------------
/HTML Basics/02HTMLStructure.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | HTMLStructure
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/HTML Basics/03TextFormatting.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Text Formatting
7 |
8 |
9 |
10 |
11 |
12 | HTML CODE WITH SWAROOP
13 | Heading 2
14 | Heading 3
15 | Heading 4
16 | Heading 5
17 | Heading 6
18 |
19 | This is a example of paragraph tag.
20 |
21 | This is a example of paragraph tag and strong tag.
22 |
23 |
24 | This is a Emphasized Text.
25 |
26 |
27 |
28 | this is the first line,
30 |
31 | Creating Lists
7 |
8 |
9 | My Basket
10 |
11 | Item 1
12 | Item 2
13 | Item 3
14 |
15 |
16 | Item 1
17 | Item 2
18 | Item 3
19 |
20 |
21 |
--------------------------------------------------------------------------------
/HTML Basics/05Hyperlink.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Document
7 |
8 |
9 | Go to Google self
10 | Go to Google _blank
12 | Go to Third Chapter
14 |
15 |
--------------------------------------------------------------------------------
/HTML Media/01image.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Document
7 |
8 |
9 |
10 |
11 | Document
7 |
8 |
9 |
10 | Here is my Music
11 |
12 |
13 |
--------------------------------------------------------------------------------
/HTML Media/03video.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Document
7 |
8 |
9 |
10 |
11 | Document
7 |
8 |
9 |
10 | VIDEO
11 |
12 |
--------------------------------------------------------------------------------
/HTML Media/demo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BJSwaroop/PortfolioCodeWithSwaroop/298065146808229ce92d430ee6c478b153509712/HTML Media/demo.png
--------------------------------------------------------------------------------
/HTML Page Layout/01semanticTags.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Document
7 |
8 |
9 |
10 |
11 | This is Header
12 | This is Header
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | This is section
24 |
25 |
26 |
27 | This is section
28 |
29 |
30 |
31 | This is section
32 |
33 |
34 |
35 | This is section
36 |
37 |
38 |
39 | This is section
40 |
41 |
42 |
43 | This is main content
44 |
45 |
46 |
47 |
50 |
51 |
52 |
--------------------------------------------------------------------------------
/HTML Page Layout/02NonSemantic.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Document
7 |
8 |
9 |
10 |
11 | This is a Div element
12 |
13 | This is para
14 |
15 | THis is a
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/HTML Tables/01Table.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Document
7 |
8 |
9 |
10 |
11 |
12 | s No
13 | Name
14 | Name
15 |
16 |
17 | 1
18 | Swaroop
19 | Swaroop
20 |
21 |
22 | 2
23 | Person
24 | Person
25 |
26 |
27 | 2
28 | Person
29 | Person
30 |
31 |
32 |
33 |
34 |
35 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Student Portfolio
7 |
14 | Welcome to My Portfolio
15 |
23 |
24 |
25 |
26 |
27 |
28 |
Swaroop VITB
29 |
30 |
31 |
33 |
34 |
I am a passionate web developer with a focus on front-end technologies.
35 |
36 |
I am currently Pursuing my B. Tech in Vishnu Institute of Technology Bhimavaram.
37 |
I have learnt Web Development from
38 |
You can Click here to Checkout What I have learnt in HTML CSS JS.
39 |
43 |
44 |
45 |
My Skills
46 |
47 | Python Basics
48 | HTML Basics
49 | CSS Basics
50 | JavaScript Basics
51 |
52 |
55 |
56 |
57 | My Projects
58 |
59 |
60 | Project
61 | Description
62 |
63 |
64 | Portfolio Website
65 | I have built a Portfolio website by using HTML, CSS & JavaScript
66 |
67 |
68 | Python Simple Calculator
69 | I have built a simple calculator in the course by Code With Swaroop
70 |
71 |
72 |
73 |
74 |
111 |
112 |
124 |
125 | © 2023 My Portfolio
126 |
132 |
133 |
134 |
135 |
136 |
--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | background-color: #f0f8ff;
4 | }
5 |
6 |
7 | body {
8 | font-family: monospace;
9 | font-size: 15px;
10 | line-height: 1.5;
11 | }
12 | h1,h2,h3,h4,h5,h6{
13 | color: #2196F3;
14 | margin: 0;
15 | }
16 | h1{
17 | font-size: 50px;
18 | }
19 | strong {
20 | font-weight: bolder;
21 | }
22 | a {
23 | text-decoration: none;
24 | }
25 | header {
26 | height: 100vh;
27 | display: flex;
28 | background-color: #2196F3;
29 | color: white;
30 | text-align: center;
31 | justify-content: center;
32 | align-items: center;
33 | flex-direction: column;
34 | }
35 | header h1 {
36 | color: white;
37 | margin: 0;
38 | }
39 |
40 |
41 | .button {
42 | width: 125px;
43 | height: 45px;
44 | font-size: 11px;
45 | /* text-transform: uppercase; */
46 | letter-spacing: 2.5px;
47 | /* font-weight: 500; */
48 | /* color: #000; */
49 | background-color: #fff;
50 | border: none;
51 | border-radius: 10px;
52 | /* box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1); */
53 | transition: all 0.3s ease 0s;
54 | cursor: pointer;
55 | /* outline: none; */
56 | }
57 |
58 | .button:hover {
59 | background-color: darkblue;
60 | box-shadow: 0px 15px 20px rgba(46, 229, 157, 0.4);
61 | color: #fff;
62 | transform: translateY(-7px);
63 | }
64 |
65 | main {
66 | margin: 0 auto;
67 | padding: 20px;
68 | }
69 | img{
70 | height: 250px;
71 | }
72 | #about div p{
73 | text-align: left;
74 | margin: 20px;
75 | }
76 | section {
77 | text-align: left;
78 | height: 100vh;
79 | margin-bottom: 40px;
80 | display: flex;
81 | flex-direction: column;
82 | justify-content: center;
83 | align-items: center;
84 | text-align: center;
85 | border: 1px solid grey;
86 | border-radius: 20px;
87 | }
88 |
89 | section.skills ul,
90 | section.skills ol {
91 | padding-left: 20px;
92 | }
93 | section.contact label {
94 | font-weight: bold;
95 | margin-top: 10px;
96 | }
97 |
98 |
99 | form input,
100 | form textarea {
101 | padding: 5px;
102 | border: 1px solid #ccc;
103 | border-radius: 4px;
104 | }
105 | form button {
106 | background-color: #2196F3;
107 | color: white;
108 | border: none;
109 | border-radius: 4px;
110 | padding: 10px 20px;
111 | cursor: pointer;
112 | }
113 | form button:hover {
114 | background-color: #0b7dda;
115 | }
116 | form div{
117 | text-align: left;
118 | margin: 4px 0 3px 0;
119 | }
120 | /* Footer */
121 | footer {
122 | text-align: center;
123 | padding: 50px 0 10px 0;
124 | background-color: #000000;
125 | font-size: 15px;
126 | color: #666;
127 | }
128 | footer a{
129 | text-decoration: none;
130 | color: white;
131 | font-size: 2rem;
132 | }
133 | @media only screen and (max-width: 600px) {
134 | h1{
135 | padding: 50px 0 ;
136 | }
137 | button{
138 | margin: 20px;
139 | }
140 | }
141 |
--------------------------------------------------------------------------------
27 | 
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/HTML Media/02audio.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 
30 |
31 |