├── .vscode └── settings.json ├── AboutPages ├── About_me_2179 │ ├── exp.html │ └── exps.css ├── Akhil_About │ ├── akhil_about.html │ └── assets │ │ └── 5184.webp ├── Arpit_html.html ├── Harshit_About │ ├── index.html │ └── styles.css ├── Honeshwar │ ├── about_styles.css │ └── honeshwar_about.html ├── Pratik K │ ├── data │ │ ├── about.jpg │ │ ├── bank_management_system.jpg │ │ ├── food-delivery-site.png │ │ ├── human-anatomy.png │ │ ├── magic-notes.png │ │ ├── me1.png │ │ ├── personal-portfolio.png │ │ ├── social-hub.png │ │ └── sudoku-solver.png │ ├── index.html │ ├── script.js │ └── style.css ├── Pratik_about │ ├── pratik_about.html │ └── style.css ├── Samyak_about │ ├── father.gif │ ├── luke.gif │ ├── samyak.html │ └── samyak.jpg ├── SohamHaldar │ ├── soham.html │ └── soham_img.jpg ├── about_Nishant.html ├── about_jaimin │ ├── index.html │ └── style.css ├── aditya_about.html ├── amaanwarsi.html ├── chinmayk.html ├── harshsinghcs-about.html ├── kamallochan_about.html ├── nabin_about.html ├── om_about.html ├── prajwal_about.html ├── pranav.html ├── priyatosh.html ├── rudreshwar_about │ ├── about.html │ ├── level.jpg │ └── style.css ├── shubham_about.html ├── somnath │ ├── somnath_about.html │ └── stylePage.css ├── sonu_about.html ├── subhashree_about.html ├── suhani_about.html ├── tanay_about.html └── vivek_upadhyay.html ├── CONTRIBUTION.md ├── Readme.md ├── about.css ├── about.html ├── assets ├── Akhil Mahajan.jpg ├── Font │ └── Titania-Regular.ttf ├── Honeshwar │ ├── Honeshwar's Resume.pdf │ └── honeshwar.png ├── Nishant.jpg ├── Pratik │ ├── aboutPratik.jpeg │ ├── facebook.png │ ├── github.png │ ├── instagram.png │ ├── linkedin.png │ ├── me_image.png │ ├── twitter.png │ └── youtube.png ├── Shubham │ ├── Shubham.png │ ├── Shubham1.jpg │ └── SocialHub.png ├── Sonu │ ├── SonuHack.png │ └── sonuk.jpg.jpg ├── amaanwarsi.jpg ├── cj-logo.png ├── ck.png ├── femaleicon.png ├── harshsinghcs.png ├── hp.png ├── images 3.JPEG ├── kom.png ├── level.jpg ├── mahendra.jpg ├── nabin.jpg ├── nabin.png ├── sai_binayak.jpg ├── samyak.jpg ├── somnath │ ├── Cloud.png │ ├── Github.png │ ├── Insta.png │ ├── Linkedin.png │ ├── SomnathImg.jpg │ ├── Twitter.png │ └── somnath.jpeg ├── subha_holopin.png ├── suhani.png ├── sulagna.png └── vivekk.jpg ├── contact.css ├── contact.html ├── index.html ├── index.js └── styles.css /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /AboutPages/About_me_2179/exp.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 |
10 |
11 | Your Image 12 |
13 |
14 |
15 | 16 |
17 |

About Me

18 |

19 | Hello! I'm Sai Binayak, I am a software enthusiast with a keen passion for technology and coding. Eager to expand my knowledge and skills in the ever-evolving world of software development. When I'm not immersed in the digital realm, you can often find me lost in the world of music, exploring various genres and artists to broaden my musical horizons. 20 | 21 | Gaming is another one of my favorite pastimes, where I embrace the challenge of different gaming genres and platforms. It provides both entertainment and a source of problem-solving exercise. 22 | 23 | Additionally, I find solace in the world of sports, particularly badminton. This racquet sport not only keeps me physically active but also offers an opportunity to build camaraderie with fellow players. In summary, I'm a tech enthusiast who enjoys the harmony of software, the rhythm of music, the thrill of gaming, and the agility of badminton. 24 |

25 | 29 |
30 |
31 |
32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /AboutPages/About_me_2179/exps.css: -------------------------------------------------------------------------------- 1 | .container { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | width: 85%; 6 | height: 75%; 7 | margin: 0 auto; 8 | border-radius: 10px; 9 | box-shadow: 5px 5px 20px rgba(212, 78, 224, 0.8); 10 | } 11 | .image-container { 12 | position: relative; 13 | flex: 0.5; 14 | overflow: hidden; 15 | left:10px; 16 | height: 300px; 17 | display: flex; 18 | justify-content: center; 19 | align-items: center; 20 | } 21 | .profile-image { 22 | position: relative; 23 | width: 150px; 24 | height: 150px; 25 | display: block; 26 | border-radius: 10px ; 27 | z-index: 3; 28 | } 29 | .profile-image:hover{ 30 | cursor: pointer; 31 | animation: rotateAndScale 2s ease-in-out infinite; 32 | } 33 | .circle0 { 34 | width: 220px; 35 | height: 220px; 36 | background: radial-gradient(circle, rgb(43, 197, 194), transparent); 37 | border-radius: 50%; 38 | position: absolute; 39 | z-index: 1; 40 | animation: pulse 2s infinite; 41 | } 42 | .circle1 { 43 | width: 180px; 44 | height: 180px; 45 | background: radial-gradient(circle, rgb(210, 19, 188), transparent); 46 | border-radius: 50%; 47 | position: absolute; 48 | z-index: 2; 49 | animation: pulse1 2s infinite; 50 | } 51 | @keyframes rotateAndScale { 52 | 0% { 53 | transform: scale(1) rotate(0deg); 54 | } 55 | 50% { 56 | transform: scale(1.2) rotate(180deg); 57 | } 58 | 100%{ 59 | transform: scale(1) rotate(360deg); 60 | } 61 | } 62 | @keyframes pulse { 63 | 0% { 64 | transform: scale(0.8); 65 | opacity: 1.0; 66 | } 67 | 50% { 68 | transform: scale(1.2); 69 | opacity: 0.6; 70 | } 71 | 100% { 72 | transform: scale(0.8); 73 | opacity: 1.0; 74 | } 75 | } 76 | @keyframes pulse1 { 77 | 0% { 78 | transform: scale(1.2); 79 | opacity: 1.0; 80 | } 81 | 50% { 82 | transform: scale(0.8); 83 | opacity: 0.8; 84 | } 85 | 100% { 86 | transform: scale(1.2); 87 | opacity: 1.0; 88 | } 89 | } 90 | @keyframes colorChange { 91 | 0% { 92 | background-color: #FF0000; 93 | } 94 | 10% { 95 | background-color: #FF7700; /* Color 2 */ 96 | } 97 | 20% { 98 | background-color: #FFD500; /* Color 3 */ 99 | } 100 | 30% { 101 | background-color: #A1FF00; /* Color 4 */ 102 | } 103 | 40% { 104 | background-color: #00FFA1; /* Color 5 */ 105 | } 106 | 50% { 107 | background-color: #00FFE1; /* Color 6 */ 108 | } 109 | 60% { 110 | background-color: #00B3FF; /* Color 7 */ 111 | } 112 | 70% { 113 | background-color: #0044FF; /* Color 8 */ 114 | } 115 | 80% { 116 | background-color: #5500FF; /* Color 9 */ 117 | } 118 | 90% { 119 | background-color: #FF00FF; /* Color 10 */ 120 | } 121 | 100% { 122 | background-color: #FF0000; /* Back to the starting color */ 123 | } 124 | } 125 | .details { 126 | flex: 2; 127 | padding: 20px; 128 | text-align: left; 129 | color: aliceblue; 130 | font-size: 15px; 131 | } 132 | h1 { 133 | font-size: 45px; 134 | -webkit-text-stroke:0.8px #ce3ace; 135 | } 136 | p { 137 | font-size: 24px; 138 | line-height: 1.5; 139 | } 140 | .social-links { 141 | margin-top: 20px; 142 | } 143 | .social-links a { 144 | text-decoration: none; 145 | color: #33CCFF; 146 | margin-right: 25px; 147 | font-size: 24px; 148 | } 149 | body { 150 | margin: 0; 151 | padding: 0; 152 | } 153 | .background { 154 | /* background: linear-gradient(to right, #800080, #6a5acd); */ 155 | width: 100vw; 156 | height: 100vh; 157 | position: relative; 158 | overflow: hidden; 159 | display: flex; 160 | justify-self: center; 161 | align-items: center; 162 | animation: colorChange 8s linear infinite; 163 | } 164 | .container{ 165 | animation: colorChange 10s linear infinite; 166 | } 167 | -------------------------------------------------------------------------------- /AboutPages/Akhil_About/akhil_about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Akhil Mahajan 7 | 8 | 163 | 164 | 165 |
166 |

Hi I'm

167 |

Akhil!

168 |
169 |
170 |

Introduction

171 |

I am an aspiring Web Developer

172 |

I love the internet, technology, and building beautiful things.

173 |
174 |
175 |

Where I'm From

176 |

I'm originally from Jammu, Jammu Kashmir.

177 |
178 |
179 |

More About Me

180 |

What are your favorite hobbies?

181 |

My favorite hobby is playing football and video games.

182 |

What's your dream job?

183 |

My dream job is to be Sr. Full Stack Developer

184 | 185 |

Why do you want to be a web developer?

186 |

187 | Because programming is awesome and programming for the internet is even 188 | more awesome. 189 |

190 |
191 | 192 | 209 | 210 | 211 | -------------------------------------------------------------------------------- /AboutPages/Akhil_About/assets/5184.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CareerDevelopmentHub/SocialHub/46ea8dbce367a3cd7b7e92686f9e2c085dabbca5/AboutPages/Akhil_About/assets/5184.webp -------------------------------------------------------------------------------- /AboutPages/Arpit_html.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | About Me 7 | 40 | 41 | 42 |
43 |
44 |

Hello everyone 👋

45 |

Welcome to my about page!

46 |

47 | I am Arpit Mishra,a Enthusiastic learner 48 |

49 |

50 | Do not hesitate to Connect 51 |

52 |
53 |
54 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 |
68 |
69 | 73 | 74 | 75 | -------------------------------------------------------------------------------- /AboutPages/Harshit_About/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Harshit Pandey 7 | 8 | 9 | 10 |
11 |

HarshitPandey.in

12 |
13 |
14 | 24 |
25 |
26 |

LinkedIn

 27 |

Instagram

 28 |

Twitter

 29 |
30 |

© 2023 Harshit Pandey. All rights reserved.

31 | 32 | 33 | -------------------------------------------------------------------------------- /AboutPages/Harshit_About/styles.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: black; 3 | color: white; 4 | } 5 | .top{ 6 | width: 100%; 7 | display: flex; 8 | justify-content: center; 9 | } 10 | a{ 11 | text-decoration: none; 12 | } 13 | .btn{ 14 | font-size: 20px; 15 | width: 80px; 16 | height: 30px; 17 | background-color: wheat; 18 | color: black; 19 | box-shadow: 2px 2px 3px 3px rgb(236, 238, 236); 20 | } 21 | .btn:hover{ 22 | 23 | background-color: rgb(89, 230, 89); 24 | color: white; 25 | box-shadow: 2px 2px 3px 3px rgb(89, 230, 89); 26 | } 27 | .footer{ 28 | display: flex; 29 | } 30 | .footer a{ 31 | margin: 5px; 32 | } -------------------------------------------------------------------------------- /AboutPages/Honeshwar/about_styles.css: -------------------------------------------------------------------------------- 1 | *{ 2 | padding:0; 3 | margin:0; 4 | box-sizing: border-box; 5 | /* border: solid ; */ 6 | 7 | } 8 | /* body style */ 9 | body{ 10 | background: #E5E5E5; 11 | } 12 | 13 | /********************** header section ********************* */ 14 | #header { 15 | width:100%; 16 | height:fit-content; 17 | padding-bottom: 50px; 18 | display: flex; 19 | justify-content: space-evenly; 20 | align-items: center; 21 | 22 | } 23 | 24 | /* header of page intro text */ 25 | #intro-texts{ 26 | width: 40%; 27 | height: 80%; 28 | 29 | min-width: 300px; 30 | 31 | } 32 | #intro-texts p:first-of-type{ 33 | padding:100px 20px 0; 34 | font-family: 'Heebo'; 35 | font-style: normal; 36 | font-weight: 700; 37 | font-size: 44px; 38 | line-height: 60px; 39 | /* or 136% */ 40 | 41 | 42 | /* Dark Color */ 43 | color: #21243D; 44 | 45 | 46 | } 47 | #intro-texts p:last-of-type{ 48 | padding:30px; 49 | font-family: 'Heebo'; 50 | font-style: normal; 51 | font-weight: 400; 52 | font-size: 16px; 53 | line-height: 24px; 54 | text-align: justify; 55 | /* Dark Color */ 56 | 57 | color: #21243D; 58 | } 59 | 60 | /* download btn style*/ 61 | #download-resume-container{ 62 | width: 100%; 63 | /* height:10%; */ 64 | padding: 0px 0; 65 | } 66 | #download-resume-container a{ 67 | font-family: 'Heebo'; 68 | font-style: normal; 69 | font-weight: 500; 70 | font-size: 20px; 71 | line-height: 29px; 72 | 73 | color: #FFFFFF; 74 | text-decoration: none;; 75 | background: #FF6464; 76 | box-shadow: 0 5px 20px #f55858; 77 | transition: box-shadow .3s ease-in-out; 78 | border-radius: 2px; 79 | padding: 10px; 80 | 81 | position:relative; 82 | top: 5px; 83 | left:30px; 84 | border-radius: 5px; 85 | 86 | } 87 | #download-resume-container a:hover{ 88 | box-shadow:inset 0 0 15px 10px #f75656; 89 | } 90 | 91 | 92 | /* image profile image styling */ 93 | #profile-image{ 94 | width: 250px; 95 | height: 250px; 96 | background-image: url('https://lh3.googleusercontent.com/a/AAcHTtfml1OnUtE75DzPmMLX3PSIP1lVtbeTZAppavDKBZUvViNHkvWLnzoam5i8INGk2JFOQhG6knHkQaPVLi-vMoRZ8Rw=s288-c-no'); 97 | background-size: cover; 98 | border: 1px solid rgb(195, 195, 195); 99 | border-radius: 100%; 100 | box-shadow: 7px -5px 6px 10px #ddc4c4; 101 | 102 | 103 | 104 | } 105 | #profile-image:hover{ 106 | transform: scale(1.1); 107 | transition: all .5s ease-in-out; 108 | } 109 | 110 | /********************** footer ********************* */ 111 | footer{ 112 | text-align: center; 113 | padding: 20px; 114 | } 115 | 116 | /* Contact form style */ 117 | .container { 118 | border-radius: 5px; 119 | margin:auto; 120 | background-color:transparent; 121 | width: 75%; 122 | height: 500px; 123 | position: relative; 124 | line-height: 1.5; 125 | /* box-shadow:0 0 10px 3px rgba(0, 0, 0, 0.185); */ 126 | 127 | display: flex; 128 | flex-direction: column; 129 | align-items: center; 130 | justify-content: center ; 131 | padding-block: 0px 45px; 132 | background-image: url("https://preview.colorlib.com/theme/bootstrap/contact-form-16/images/undraw-contact.svg"); 133 | } 134 | .container h2 { 135 | font-size: 2.4rem; 136 | color: #21243D; 137 | text-align:center; 138 | margin-bottom: 20px; 139 | 140 | /* border: solid; */ 141 | 142 | } 143 | 144 | .container-inputs { 145 | max-width:400px; 146 | width: 100%; 147 | height: fit-content; 148 | } 149 | 150 | .container-inputs p { 151 | font-size: 14px; 152 | color: #3B4169; 153 | margin: 10px 0; 154 | } 155 | 156 | .container-inputs input, 157 | .container-inputs button ,.container-inputs textarea{ 158 | width: 100%; 159 | border: none; 160 | padding: 14px; 161 | border-radius: 3px; 162 | } 163 | 164 | .container-inputs input,.container-inputs textarea { 165 | margin: 5px 0 10px; 166 | font-size: 1rem; 167 | color: #000000; 168 | resize: none; 169 | outline: none; 170 | } 171 | .container-inputs input:focus,.container-inputs textarea:focus { 172 | border: 3px solid #a5d4faec; 173 | } 174 | 175 | .container-inputs button { 176 | background-image: linear-gradient(to right, #89CAFF, #6589FF); 177 | display: block; 178 | color:#fff; 179 | font-size: 1rem; 180 | cursor: pointer; 181 | box-shadow: 0 5px 20px #89caff94; 182 | transition: box-shadow .3s ease-in-out; 183 | } 184 | 185 | .container-inputs button:hover { 186 | box-shadow: none; 187 | } 188 | 189 | .container-inputs span { 190 | display: block; 191 | text-align: center; 192 | margin: 20px 0 0; 193 | color: #BABDCB; 194 | font-size: 12px; 195 | } 196 | 197 | /* navigation links */ 198 | #footer-navigation{ 199 | width:300px; 200 | margin:20px auto 0; 201 | padding: 20px 0 7px; 202 | } 203 | #footer-navigation-list{ 204 | list-style: none; 205 | display: flex; 206 | justify-content: space-evenly; 207 | } 208 | .footer-navigation-item{ 209 | padding: 10px; 210 | } 211 | .footer-navigation-item-link{ 212 | text-decoration: none; 213 | font-size: 2rem; 214 | } 215 | .footer-navigation-item-link i:hover{ 216 | transform: scale(1.3); 217 | padding:2px; 218 | border-bottom: 1px solid ; 219 | transition: all .2s 0s ease-in; 220 | 221 | } 222 | 223 | #copyright{ 224 | font-family: 'Heebo'; 225 | font-style: normal; 226 | font-weight: 400; 227 | font-size: 14px; 228 | line-height: 21px; 229 | /* identical to box height */ 230 | 231 | text-align: center; 232 | 233 | /* Dark */ 234 | 235 | color: #21243D; 236 | } 237 | 238 | .pink{color: #d40c81;} 239 | .blue{color: #0d4af1;} 240 | .black{color:black} 241 | .phone{color:#055364} 242 | 243 | 244 | /********************** media queries ********************* */ 245 | @media screen and (max-width:1200px) { 246 | 247 | #header{ 248 | height: auto; 249 | } 250 | section{ 251 | padding: 10px 30px; 252 | } 253 | 254 | } 255 | @media screen and (max-width:900px) { 256 | 257 | #header{ 258 | height: auto; 259 | } 260 | 261 | #contact-me img{ 262 | display: none; 263 | } 264 | 265 | #contact-me{ 266 | width: 100%; 267 | /* padding-inline//:30px */ 268 | } 269 | 270 | 271 | } 272 | @media screen and (max-width:700px) { 273 | 274 | #header{ 275 | height: auto; 276 | padding-top:100px; 277 | flex-wrap: wrap-reverse; 278 | align-items: center; 279 | 280 | } 281 | #intro-texts{ 282 | width: 90%; 283 | height: 70%; 284 | 285 | min-width: 300px; 286 | 287 | } 288 | #profile-image{ 289 | margin-bottom:20px ; 290 | } 291 | /* footer */ 292 | footer{ 293 | padding:0 20px 30px; 294 | } 295 | .footer-navigation-item-link{ 296 | font-size: 1.3rem; 297 | } 298 | 299 | #contact-me form { 300 | width: 100%; 301 | padding: 0; 302 | max-width: 350px; 303 | } 304 | } 305 | 306 | -------------------------------------------------------------------------------- /AboutPages/Honeshwar/honeshwar_about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | About Me 7 | 8 | 9 | 10 | 11 | 27 | 28 | 29 | 59 | 60 | -------------------------------------------------------------------------------- /AboutPages/Pratik K/data/about.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CareerDevelopmentHub/SocialHub/46ea8dbce367a3cd7b7e92686f9e2c085dabbca5/AboutPages/Pratik K/data/about.jpg -------------------------------------------------------------------------------- /AboutPages/Pratik K/data/bank_management_system.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CareerDevelopmentHub/SocialHub/46ea8dbce367a3cd7b7e92686f9e2c085dabbca5/AboutPages/Pratik K/data/bank_management_system.jpg -------------------------------------------------------------------------------- /AboutPages/Pratik K/data/food-delivery-site.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CareerDevelopmentHub/SocialHub/46ea8dbce367a3cd7b7e92686f9e2c085dabbca5/AboutPages/Pratik K/data/food-delivery-site.png -------------------------------------------------------------------------------- /AboutPages/Pratik K/data/human-anatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CareerDevelopmentHub/SocialHub/46ea8dbce367a3cd7b7e92686f9e2c085dabbca5/AboutPages/Pratik K/data/human-anatomy.png -------------------------------------------------------------------------------- /AboutPages/Pratik K/data/magic-notes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CareerDevelopmentHub/SocialHub/46ea8dbce367a3cd7b7e92686f9e2c085dabbca5/AboutPages/Pratik K/data/magic-notes.png -------------------------------------------------------------------------------- /AboutPages/Pratik K/data/me1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CareerDevelopmentHub/SocialHub/46ea8dbce367a3cd7b7e92686f9e2c085dabbca5/AboutPages/Pratik K/data/me1.png -------------------------------------------------------------------------------- /AboutPages/Pratik K/data/personal-portfolio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CareerDevelopmentHub/SocialHub/46ea8dbce367a3cd7b7e92686f9e2c085dabbca5/AboutPages/Pratik K/data/personal-portfolio.png -------------------------------------------------------------------------------- /AboutPages/Pratik K/data/social-hub.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CareerDevelopmentHub/SocialHub/46ea8dbce367a3cd7b7e92686f9e2c085dabbca5/AboutPages/Pratik K/data/social-hub.png -------------------------------------------------------------------------------- /AboutPages/Pratik K/data/sudoku-solver.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CareerDevelopmentHub/SocialHub/46ea8dbce367a3cd7b7e92686f9e2c085dabbca5/AboutPages/Pratik K/data/sudoku-solver.png -------------------------------------------------------------------------------- /AboutPages/Pratik K/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | My Portfolio 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |
17 | PratikS 18 |
19 |
20 |

Pratik Kumar Sahoo

21 |

Full Stack Developer/JAVA/C++ in INDIA

22 |
23 |
24 | 35 |
36 |
37 |

©Copyright 2023 All Rights Reserved
This is made with ♥ by Pratik K S

38 |
39 |
40 |
41 | 42 |
43 |
44 | 45 | 46 |

Hi!

47 |

PRATIK KUMAR SAHOO

48 |

Student at ITER, SOA.

49 |
50 |
51 | 52 | 53 | Me 54 |
55 |
56 | 57 |
58 |
59 |
60 |

About Me

61 |

WHO AM I?

62 |
63 |
64 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum aut maxime expedita iusto repellat impedit 65 | accusamus beatae unde. Voluptates dicta accusantium dolores sint, quaerat facere reiciendis minima consectetur 66 | voluptatem iure vero odio deleniti nam placeat assumenda eum natus architecto. Tempore.

67 | 68 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae libero odio dolore, perferendis recusandae 69 | quisquam perspiciatis nulla suscipit, veniam ducimus temporibus quod corporis quas fugiat!

70 |
71 |
72 |
73 | 74 |

Graphic Design

75 |
76 |
77 | 78 |

Web Design

79 |
80 |
81 | 82 |

Software

83 |
84 |
85 | 86 |

Application

87 |
88 | 89 | 90 |
91 |
92 |
93 | 94 |
95 |
96 |
97 |

What I Do?

98 |

HERE ARE SOME OF MY
SERVICES

99 |
100 | 101 |
102 |
103 | 104 | 105 | 106 |
107 |

INNOVATIVE IDEAS

108 |

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut, nulla.

109 |
110 |
111 |
112 | 113 | 114 | 115 |
116 |

SOFTWARE

117 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur.

118 |
119 |
120 |
121 | 122 | 123 | 124 |
125 |

APPLICATION

126 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur.

127 |
128 |
129 |
130 | 131 | 132 | 133 |
134 |

GRAPHIC DESIGN

135 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur.

136 |
137 |
138 |
139 | 140 | 141 | 142 |
143 |

MUSIC PRODUCTION

144 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur.

145 |
146 |
147 |
148 | 149 | 150 | 151 |
152 |

WEB DEVELOPEMENT

153 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur.

154 |
155 |
156 |
157 |
158 |
159 | 160 |
161 |
162 |
163 |

Here are some of

164 |

MY SKILLS

165 |
166 |
167 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum aut maxime expedita iusto repellat impedit 168 | accusamus beatae unde. Voluptates dicta accusantium dolores sint, quaerat facere reiciendis minima consectetur 169 | voluptatem iure vero odio deleniti nam placeat assumenda eum natus architecto. Tempore. Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia reiciendis at assumenda quo est unde repudiandae id rerum magni inventore.

170 |
171 |
172 |
173 |
174 |

Photoshop

175 |
176 |
177 | 75% 178 |
179 |
180 |
181 |
182 |
183 |
184 |

Photoshop

185 |
186 |
187 | 85% 188 |
189 | 190 |
191 |
192 |
193 |
194 |
195 |

Photoshop

196 |
197 |
198 | 85% 199 |
200 | 201 |
202 |
203 |
204 |
205 |
206 |

Photoshop

207 |
208 |
209 | 85% 210 |
211 | 212 |
213 |
214 |
215 |
216 |
217 |

Photoshop

218 |
219 |
220 | 85% 221 |
222 | 223 |
224 |
225 |
226 |
227 |
228 |

Photoshop

229 |
230 |
231 | 85% 232 |
233 | 234 |
235 |
236 |
237 |
238 |
239 |
240 | 241 |
242 |
243 |
244 |

Here are details of

245 |

MY EDUCATION

246 |
247 | 248 |
249 |
    250 |
  • 251 | 252 | 253 |
    254 |

    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est asperiores esse, reprehenderit a eum odio! Illo ad asperiores doloribus excepturi!

    255 |
    256 |
    • 257 |
  • 258 | 259 | 260 |
    261 |

    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est asperiores esse, reprehenderit a eum odio! Illo ad asperiores doloribus excepturi!

    262 |
    263 |
    • 264 |
  • 265 | 266 | 267 |
    268 |

    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est asperiores esse, reprehenderit a eum odio! Illo ad asperiores doloribus excepturi!

    269 |
    270 |
    • 271 |
  • 272 | 273 | 274 |
    275 |

    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est asperiores esse, reprehenderit a eum odio! Illo ad asperiores doloribus excepturi!

    276 |
    277 |
    • 278 |
279 |
280 |
281 |
282 | 283 |
284 |
285 |
286 |

Here are details of

287 |

MY EXPERIENCE

288 |
289 | 290 |
291 |

What I Know

292 |
293 |
294 |

Frontend

295 |
296 |

HTML

297 |

CSS

298 | Tailwind 299 | Javascript 300 |

Typescript

301 | React Js 302 |

Next Js

303 |
304 |
305 |
306 |

Backend

307 |
308 | Node Js 309 | Express Js 310 |

PHP

311 |
312 |
313 |
314 |

Database

315 |
316 | MySql 317 | MongoDB 318 |
319 |
320 |
321 |

Languages

322 |
323 | Java 324 | Javascript 325 |

C++

326 | PHP 327 |
328 |
329 |
330 |
331 |
332 |
333 | 334 |
335 |
336 |
337 |

Here are some of

338 |

MY WORKS

339 |
340 | 341 |
342 |
343 |
344 | Bank Management System 345 |
346 |

Bank Management System

347 | 348 | 349 | 350 |
351 |
352 |
353 | Bank Management System 354 |
355 |

Food Delivery Site

356 | 357 | 358 | 359 |
360 |
361 |
362 | Bank Management System 363 |
364 |

Personal Portfolio

365 | 366 | 367 | 368 |
369 |
370 |
371 |
372 |
373 | 374 | 375 |
376 |
377 |

Here are some of

378 |

MY OPEN SOURCE CONTRIBUTIONS

379 |
380 | 381 |
382 |
383 |
384 | Bank Management System 385 |
386 |

HUMAN ANATOMY

387 |

Added the navbar with 4 tabs

388 | 389 | 390 | 391 |
392 |
393 |
394 | Bank Management System 395 |
396 |

SOCIAL HUB

397 |

Added the about me page

398 | 399 | 400 | 401 |
402 |
403 |
404 | Bank Management System 405 |
406 |

MAGIC NOTES

407 |

Added the search bar that will seacrh the notes or its title

408 | 409 | 410 | 411 |
412 |
413 |
414 | Bank Management System 415 |
416 |

SUDOKU SOLVER

417 |

Added the dark light mode theme on click and focus change

418 | 419 | 420 | 421 |
422 |
423 |
424 |
425 |
426 |
427 | 428 | 429 | 430 | 431 | 432 | -------------------------------------------------------------------------------- /AboutPages/Pratik K/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CareerDevelopmentHub/SocialHub/46ea8dbce367a3cd7b7e92686f9e2c085dabbca5/AboutPages/Pratik K/script.js -------------------------------------------------------------------------------- /AboutPages/Pratik K/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap'); 2 | @import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap'); 3 | 4 | * { 5 | margin: 0; 6 | padding: 0; 7 | box-sizing: border-box; 8 | scroll-behavior: smooth; 9 | } 10 | 11 | body { 12 | color: white; 13 | font-family: 'Poppins', sans-serif; 14 | } 15 | 16 | h1 { 17 | font-size: 28px; 18 | } 19 | 20 | h2 { 21 | font-size: 20px; 22 | } 23 | 24 | .navbar { 25 | display: flex; 26 | flex-direction: column; 27 | justify-content: space-around; 28 | align-items: center; 29 | width: 350px; 30 | background-color: rgb(5 6 24); 31 | height: 100vh; 32 | overflow-x: auto; 33 | padding: 0px 22px; 34 | padding-left: 10px; 35 | position: fixed; 36 | /* border-radius: 0 70px 70px 0; */ 37 | box-shadow: 14px 0px 30px -10px cornflowerblue; 38 | z-index: 1; 39 | /* display: none; */ 40 | } 41 | 42 | .img-container { 43 | text-align: center; 44 | width: 290px; 45 | margin-top: 100px; 46 | } 47 | 48 | .img-container img { 49 | border-radius: 50%; 50 | width: 50%; 51 | box-shadow: 0px 0px 21px 2px azure; 52 | } 53 | 54 | .heading { 55 | text-align: center; 56 | height: 170px; 57 | } 58 | 59 | .heading h1 { 60 | font-weight: 900; 61 | margin-top: 10px; 62 | margin-bottom: 10px; 63 | margin-left: 5px; 64 | } 65 | 66 | span { 67 | color: rgb(5, 246, 250); 68 | } 69 | 70 | .nav-list { 71 | text-align: center; 72 | height: 230px; 73 | font-weight: 500; 74 | display: flex; 75 | align-items: center; 76 | justify-content: space-between; 77 | margin: 50px 0; 78 | } 79 | 80 | .nav-list ul { 81 | display: flex; 82 | flex-direction: column; 83 | transition: all 1s ease-in-out; 84 | } 85 | 86 | .nav-list ul li { 87 | border-radius: 15px; 88 | padding: 4px; 89 | list-style: none; 90 | font-weight: bold; 91 | transition: all 1s ease-in-out; 92 | } 93 | 94 | a { 95 | text-decoration: none; 96 | color: rgb(255, 255, 255); 97 | padding: 5px; 98 | transition: all 1s ease-in-out; 99 | } 100 | 101 | .nav-list ul li.active a { 102 | text-decoration: underline; 103 | color: rgb(3, 172, 190); 104 | } 105 | 106 | .nav-list ul li:nth-child(2n):hover { 107 | background: linear-gradient(90deg, rgb(164, 164, 249), rgb(164, 164, 249), transparent); 108 | } 109 | 110 | .nav-list ul li:nth-child(2n + 1):hover { 111 | background: linear-gradient(-90deg, rgb(164, 164, 249), rgb(164, 164, 249), transparent); 112 | } 113 | 114 | .nav-list ul li a:hover { 115 | text-decoration: dotted; 116 | color: rgb(3, 33, 56); 117 | } 118 | 119 | .Cright-content { 120 | text-align: center; 121 | font-size: 12px; 122 | } 123 | 124 | ::-webkit-scrollbar { 125 | width: 10px; 126 | } 127 | 128 | /* ::-webkit-scrollbar-track {} */ 129 | 130 | ::-webkit-scrollbar-thumb { 131 | background: #5b60e7; 132 | border-radius: 131px; 133 | } 134 | 135 | .home-section, 136 | .about-section, 137 | .services-section, 138 | .skill-section, 139 | .education-section, 140 | .experience-section, 141 | .work-section { 142 | position: relative; 143 | left: 350px; 144 | width: calc(100% - 350px); 145 | height: 100vh; 146 | background: rgb(3 2 16); 147 | padding: 20px; 148 | height: 100vh; 149 | overflow: hidden; 150 | } 151 | 152 | 153 | .services-section, 154 | .skill-section, 155 | .education-section, 156 | .work-section { 157 | height: 100%; 158 | } 159 | 160 | .about-section, 161 | .skill-section, 162 | .experience-section { 163 | background: rgb(13, 12, 30); 164 | } 165 | 166 | .about-content, 167 | .service-content, 168 | .skill-contents, 169 | .education-content, 170 | .experience-content, 171 | .work-content { 172 | margin-top: 80px; 173 | padding: 40px; 174 | } 175 | 176 | .blur { 177 | position: absolute; 178 | box-shadow: 0 0 1000px 60px #1d4ed8; 179 | z-index: -1; 180 | left: 74px; 181 | top: 80px; 182 | } 183 | 184 | .heading-content { 185 | display: flex; 186 | flex-direction: column; 187 | position: absolute; 188 | top: 190px; 189 | margin-left: 40px; 190 | z-index: 2; 191 | } 192 | 193 | .heading-content h1 { 194 | font-size: 50px; 195 | } 196 | 197 | .heading-content h2 { 198 | color: rgb(163, 162, 162); 199 | font-weight: 200; 200 | font-size: 20px; 201 | } 202 | 203 | .me-img { 204 | position: relative; 205 | top: 0px; 206 | margin-left: 20px; 207 | } 208 | 209 | .me-img .blur { 210 | top: 423px; 211 | right: 74px; 212 | box-shadow: 0 0 198px 15px #1d4ed8; 213 | } 214 | 215 | .me-img img { 216 | width: 40%; 217 | margin-left: 560px; 218 | } 219 | 220 | .content { 221 | margin-top: 80px; 222 | } 223 | 224 | .content p { 225 | margin-top: 20px; 226 | } 227 | 228 | .content-cards { 229 | display: flex; 230 | margin: 25px 0px; 231 | padding: 60px 10px; 232 | justify-content: center; 233 | align-items: center; 234 | flex-wrap: wrap; 235 | gap: 40px; 236 | position: relative; 237 | } 238 | 239 | .content-cards .cards { 240 | height: 150px; 241 | background: #fff; 242 | box-shadow: 0 0 85px -20px black; 243 | width: 200px; 244 | overflow: auto; 245 | text-align: center; 246 | display: flex; 247 | justify-content: space-around; 248 | flex-direction: column; 249 | color: black; 250 | border: 2px solid rgb(124, 255, 251); 251 | } 252 | 253 | .cards::before { 254 | content: ""; 255 | width: 100%; 256 | /* background-color: ; */ 257 | } 258 | 259 | .services-section .cards { 260 | height: 220px; 261 | } 262 | 263 | .card-back { 264 | position: absolute; 265 | box-shadow: 0 0 1000px 56px #ffffff; 266 | z-index: -1; 267 | right: 526px; 268 | top: 134px; 269 | } 270 | 271 | .content-cards .cards i { 272 | margin-top: 10px; 273 | font-size: 50px; 274 | } 275 | 276 | .fa-lightbulb-o { 277 | color: rgb(95, 95, 245); 278 | } 279 | 280 | .fa-connectdevelop { 281 | color: red; 282 | } 283 | 284 | .fa-desktop { 285 | color: yellow; 286 | } 287 | 288 | .fa-database { 289 | color: purple; 290 | } 291 | 292 | .cards:nth-child(1):before { 293 | content: ""; 294 | position: absolute; 295 | width: 197px; 296 | bottom: 58px; 297 | left: 68px; 298 | border: 2px solid blue; 299 | background: blue; 300 | } 301 | 302 | .cards:nth-child(2):before { 303 | content: ""; 304 | position: absolute; 305 | width: 197px; 306 | bottom: 58px; 307 | left: 308px; 308 | border: 2px solid red; 309 | background: red; 310 | } 311 | 312 | .cards:nth-child(3):before { 313 | content: ""; 314 | position: absolute; 315 | width: 197px; 316 | bottom: 58px; 317 | left: 548px; 318 | border: 2px solid yellow; 319 | background: yellow; 320 | } 321 | 322 | .cards:nth-child(4):before { 323 | content: ""; 324 | position: absolute; 325 | width: 197px; 326 | bottom: 58px; 327 | left: 788px; 328 | border: 2px solid purple; 329 | background: purple; 330 | height: 0.5px; 331 | } 332 | 333 | .card { 334 | display: grid; 335 | grid-template-columns: 80px 200px auto; 336 | justify-content: center; 337 | align-items: center; 338 | position: relative; 339 | height: 275px; 340 | margin-top: 40px; 341 | background: rgb(30 30 65); 342 | } 343 | 344 | .card-data { 345 | grid-column: 1/3; 346 | top: 69px; 347 | position: absolute; 348 | text-align: center; 349 | display: flex; 350 | flex-direction: column; 351 | height: 160px; 352 | justify-content: space-between; 353 | } 354 | 355 | .card-data h2 { 356 | padding: 10px 0; 357 | text-decoration: underline; 358 | } 359 | 360 | .card-data p { 361 | margin: 0 5px; 362 | padding: 0 5px; 363 | } 364 | 365 | .icon { 366 | position: absolute; 367 | top: -20px; 368 | left: 0; 369 | right: 0; 370 | width: 100px; 371 | height: 50px; 372 | display: table; 373 | margin: 0 auto; 374 | background-color: #2c98f0; 375 | } 376 | 377 | .icon::before { 378 | position: absolute; 379 | content: ""; 380 | left: 0; 381 | right: 0; 382 | top: -30px; 383 | width: 0; 384 | height: 0; 385 | border-style: solid; 386 | border-width: 0 50px 30px 50px; 387 | border-color: transparent transparent #2c98f0 transparent; 388 | } 389 | 390 | .icon::after { 391 | position: absolute; 392 | left: 0; 393 | right: 0; 394 | content: ""; 395 | bottom: -30px; 396 | width: 0; 397 | height: 0; 398 | border-style: solid; 399 | border-width: 30px 50px 0 50px; 400 | border-color: #2c98f0 transparent transparent transparent; 401 | } 402 | 403 | .icon i { 404 | font-size: 30px; 405 | color: #fff; 406 | display: table-cell; 407 | vertical-align: middle; 408 | text-align: center; 409 | } 410 | 411 | .red { 412 | background-color: rgb(239, 107, 107); 413 | } 414 | 415 | .red::after { 416 | border-color: rgb(239, 107, 107) transparent transparent transparent; 417 | } 418 | 419 | .red::before { 420 | border-color: transparent transparent rgb(239, 107, 107) transparent; 421 | } 422 | 423 | .yellow { 424 | background-color: rgb(228, 247, 126); 425 | } 426 | 427 | .yellow::after { 428 | border-color: rgb(228, 247, 126) transparent transparent transparent; 429 | } 430 | 431 | .yellow::before { 432 | border-color: transparent transparent rgb(228, 247, 126) transparent; 433 | } 434 | 435 | .blue { 436 | background-color: rgb(101, 82, 246); 437 | } 438 | 439 | .blue::after { 440 | border-color: rgb(101, 82, 246) transparent transparent transparent; 441 | } 442 | 443 | .blue::before { 444 | border-color: transparent transparent rgb(101, 82, 246) transparent; 445 | } 446 | 447 | .green { 448 | background-color: rgb(121, 248, 126); 449 | } 450 | 451 | .green::after { 452 | border-color: rgb(121, 248, 126) transparent transparent transparent; 453 | } 454 | 455 | .green::before { 456 | border-color: transparent transparent rgb(121, 248, 126) transparent; 457 | } 458 | 459 | .brown { 460 | background-color: rgb(75, 57, 33); 461 | } 462 | 463 | .brown::after { 464 | border-color: rgb(75, 57, 33) transparent transparent transparent; 465 | } 466 | 467 | .brown::before { 468 | border-color: transparent transparent rgb(75, 57, 33) transparent; 469 | } 470 | 471 | .orange { 472 | background-color: rgb(242, 200, 102); 473 | } 474 | 475 | .orange::after { 476 | border-color: rgb(242, 200, 102) transparent transparent transparent; 477 | } 478 | 479 | .orange::before { 480 | border-color: transparent transparent rgb(242, 200, 102) transparent; 481 | } 482 | 483 | .skill-slider { 484 | display: grid; 485 | margin: 20px 15px; 486 | padding: 15px; 487 | grid-template-columns: 400px 400px; 488 | justify-content: center; 489 | } 490 | 491 | .slider { 492 | display: grid; 493 | margin: 5px 30px; 494 | position: relative; 495 | } 496 | 497 | .slider-content { 498 | display: flex; 499 | flex-direction: column; 500 | } 501 | 502 | .slider-content h3 { 503 | padding: 15px 0; 504 | } 505 | 506 | .bar { 507 | margin-bottom: 20px; 508 | border-radius: 4px; 509 | height: 6px; 510 | -webkit-box-shadow: none; 511 | box-shadow: none; 512 | background: #f2f3f7; 513 | overflow: visible; 514 | } 515 | 516 | .progressbar { 517 | float: left; 518 | height: 100%; 519 | transition: width 0.6s ease; 520 | background: #2c98f0; 521 | -webkit-box-shadow: none; 522 | box-shadow: none; 523 | font-size: 12px; 524 | line-height: 1.2; 525 | color: #000; 526 | font-weight: 600; 527 | text-align: right; 528 | position: relative; 529 | overflow: visible; 530 | -webkit-border-radius: 8px; 531 | -moz-border-radius: 8px; 532 | -ms-border-radius: 8px; 533 | border-radius: 8px; 534 | } 535 | 536 | .bar span { 537 | position: absolute; 538 | top: -22px; 539 | right: 0; 540 | color: #2c98f0; 541 | } 542 | 543 | .progressbar::after { 544 | position: absolute; 545 | top: -2px; 546 | right: 0; 547 | width: 10px; 548 | height: 10px; 549 | content: ''; 550 | border-radius: 50%; 551 | background: #2c98f0; 552 | } 553 | 554 | .photoshop { 555 | width: 75%; 556 | background: rgb(246, 79, 79); 557 | } 558 | 559 | .javascript { 560 | width: 70%; 561 | background: rgb(100, 120, 255); 562 | } 563 | 564 | .html-css { 565 | width: 85%; 566 | background: rgb(92, 248, 92); 567 | } 568 | 569 | .java { 570 | width: 80%; 571 | background: rgb(207, 246, 88); 572 | } 573 | 574 | .problem-solving { 575 | width: 80%; 576 | background: rgb(251, 176, 71); 577 | } 578 | 579 | .cpp { 580 | width: 50%; 581 | } 582 | 583 | .photoshop span { 584 | color: rgb(246, 79, 79); 585 | } 586 | 587 | .javascript span { 588 | color: rgb(100, 120, 255); 589 | } 590 | 591 | .html-css span { 592 | color: rgb(92, 248, 92); 593 | } 594 | 595 | .java span { 596 | color: rgb(207, 246, 88); 597 | } 598 | 599 | .problem-solving span { 600 | color: rgb(251, 176, 71); 601 | } 602 | 603 | .photoshop::after { 604 | background: rgb(246, 79, 79); 605 | } 606 | 607 | .javascript::after { 608 | background: rgb(100, 120, 255); 609 | } 610 | 611 | .html-css::after { 612 | background: rgb(92, 248, 92); 613 | } 614 | 615 | .java::after { 616 | background: rgb(207, 246, 88); 617 | } 618 | 619 | .problem-solving::after { 620 | background: rgb(251, 176, 71); 621 | } 622 | 623 | .accordion { 624 | position: relative; 625 | cursor: pointer; 626 | margin: 50px auto; 627 | width: 600px; 628 | color: #333333; 629 | } 630 | 631 | .accordion li { 632 | list-style: none; 633 | width: 100%; 634 | margin: 0 20px; 635 | padding: 10px; 636 | border-radius: 8px; 637 | } 638 | 639 | .accordion li label { 640 | display: flex; 641 | align-items: center; 642 | justify-content: space-between; 643 | padding: 10px 25px; 644 | font-size: 20px; 645 | font-weight: 600; 646 | cursor: pointer; 647 | background: #f2f3f7; 648 | box-shadow: 6px 6px 10px -1px rgba(0, 0, 0, 0.15), -6px -0cap 10px -1px rgba(255, 255, 255, 0.7); 649 | font-family: 'Quicksand', sans-serif; 650 | } 651 | 652 | .accordion li label::after { 653 | content: "+"; 654 | margin-right: 10px; 655 | font-size: 24px; 656 | font-weight: 700; 657 | } 658 | 659 | input[type="radio"] { 660 | display: none; 661 | } 662 | 663 | .accordion .description { 664 | color: #555; 665 | margin-top: 5px; 666 | padding: 0px 25px; 667 | line-height: 26px; 668 | background: #f2f3f7; 669 | box-shadow: 6px 6px 10px -1px rgba(0, 0, 0, 0.15), -6px -0cap 10px -1px rgba(255, 255, 255, 0.7); 670 | max-height: 0; 671 | overflow: hidden; 672 | opacity: 0; 673 | transition: all 1s ease; 674 | } 675 | 676 | .accordion input[type='radio']:checked+label+.description { 677 | max-height: 400px; 678 | opacity: 1; 679 | padding: 10px 25px; 680 | transition: all 1s ease; 681 | } 682 | 683 | .accordion input[type='radio']:checked+label::after { 684 | content: "-"; 685 | margin-right: 10px; 686 | font-size: 24px; 687 | font-weight: 700; 688 | } 689 | 690 | .accordion input[type='radio']:checked+label { 691 | background-color: #2c98f0; 692 | color: white; 693 | transition: all 1s ease; 694 | } 695 | 696 | .experience-details { 697 | margin: 50px 15px; 698 | } 699 | 700 | .card-holder { 701 | display: flex; 702 | justify-content: flex-start; 703 | margin-top: 15px; 704 | align-items: center; 705 | } 706 | 707 | .box { 708 | border-radius: 15px; 709 | background: #424040; 710 | width: 243px; 711 | display: flex; 712 | margin: 10px; 713 | flex-direction: column; 714 | justify-content: right; 715 | height: 200px; 716 | /* flex-wrap: wrap; */ 717 | padding: 10px; 718 | position: relative; 719 | } 720 | 721 | .details { 722 | display: flex; 723 | flex-wrap: wrap; 724 | margin: 5px; 725 | } 726 | 727 | .details p { 728 | background: rgb(13, 12, 30); 729 | margin: 5px; 730 | padding: 6px; 731 | font-size: 14px; 732 | border-radius: 5px; 733 | border: none; 734 | } 735 | 736 | .details span { 737 | background: rgb(13, 12, 30); 738 | color: white; 739 | margin: 5px; 740 | padding: 6px; 741 | font-size: 14px; 742 | border-radius: 5px; 743 | border: none; 744 | padding: 6px; 745 | border: 2px solid; 746 | border-image: linear-gradient(45deg, blue, red) 1; 747 | } 748 | 749 | .work-details .card-holder { 750 | flex-wrap: wrap; 751 | } 752 | 753 | .work-details .box { 754 | border-radius: 2rem; 755 | overflow: hidden; 756 | width: 336px; 757 | height: 190px; 758 | padding: 0; 759 | margin: 6px; 760 | box-shadow: 3px 8px 10px #222134; 761 | } 762 | 763 | .fds, 764 | .pp, 765 | .sh, 766 | .ha, 767 | .mn { 768 | height: 190px; 769 | } 770 | 771 | .work-details .box img { 772 | width: 350px; 773 | } 774 | 775 | .work-detail { 776 | position: absolute; 777 | text-align: center; 778 | bottom: 0; 779 | left: 0; 780 | width: 100%; 781 | height: 100%; 782 | background: linear-gradient(rgba(0, 0, 0, 0.1), rgb(64, 197, 254)); 783 | display: flex; 784 | justify-content: center; 785 | flex-direction: column; 786 | align-items: center; 787 | padding: 0 4rem; 788 | transform: translateY(100%); 789 | transition: all 0.5s ease-in; 790 | } 791 | 792 | .work-detail h2 { 793 | color: #290417; 794 | font-weight: bold; 795 | } 796 | 797 | .work-detail p{ 798 | color: #290417; 799 | font-size: 18px; 800 | } 801 | 802 | .box:hover .work-detail { 803 | transform: translateY(0); 804 | } 805 | 806 | .work-detail a i { 807 | background: #fff; 808 | padding: 10px; 809 | color: black; 810 | border-radius: 50%; 811 | } -------------------------------------------------------------------------------- /AboutPages/Pratik_about/pratik_about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | About Me 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 |
15 |

ABOUT ME

16 |
17 |
18 |
19 | Pratik K Sahoo 20 |
21 | 22 |

Pratik Kumar Sahoo

23 |
24 |

Student ITER, SOA

25 |
26 | 27 |
28 | SOCIALS 29 |
30 |
31 |
32 | 33 |
34 |

Hi!

35 |

Here is a snippet of How I am? & What I do?

36 |
37 | 38 | 39 | 40 | 41 |
42 | 43 |
44 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur placeat nemo quibusdam quas voluptates fuga natus accusamus laboriosam doloremque, iusto reiciendis quam cum maxime beatae quisquam provident aperiam quo asperiores, accusantium quia neque nihil! Neque numquam debitis veniam quam fuga.

45 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, excepturi exercitationem. Fugiat eaque voluptas et praesentium, iusto vitae architecto neque fuga, molestias ipsam nulla? Amet ipsam veritatis quibusdam laboriosam qui!

46 |
47 |
48 | 49 | 50 |
51 | 52 | 53 |
54 |
55 |

SOCIALS

56 |
57 |
58 | 59 |
60 | 61 | 62 |

instagram

63 | 64 | 65 |
66 |
67 |
68 | 69 |
70 | 71 | 72 |

twitter

73 | 74 | 75 |
76 |
77 |
78 | 79 |
80 | 81 | 82 |

facebook

83 | 84 | 85 |
86 |
87 |
88 | 89 |
90 | 91 | 92 |

linkedin

93 | 94 | 95 |
96 |
97 |
98 | 99 |
100 | 101 | 102 |

github

103 | 104 | 105 |
106 |
107 |
108 | 109 |
110 | 111 | 112 |

youtube

113 | 114 | 115 |
116 |
117 |
118 |
119 |
120 | 121 | -------------------------------------------------------------------------------- /AboutPages/Pratik_about/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap'); 2 | @font-face { 3 | font-family: 'Titania'; 4 | src: url(../../assets/Font/Titania-Regular.ttf); 5 | } 6 | 7 | * { 8 | padding: 0; 9 | margin: 0; 10 | box-sizing: border-box; 11 | } 12 | 13 | body { 14 | font-family: 'Poppins', sans-serif; 15 | } 16 | 17 | .container { 18 | height: 100vh; 19 | } 20 | 21 | .about-me{ 22 | position: absolute; 23 | z-index: 2; 24 | text-align: center; 25 | color: #FFC567; 26 | text-shadow: 5px 4px 0px #000; 27 | display: block; 28 | font-family: 'Titania'; 29 | font-size: 90px; 30 | margin: 13px 0; 31 | top: 0; 32 | } 33 | 34 | img { 35 | width: 20%; 36 | } 37 | 38 | .content { 39 | background: #E14842; 40 | display: flex; 41 | flex-direction: column; 42 | align-items: center; 43 | justify-content: center; 44 | height: 100vh; 45 | } 46 | 47 | .left-content .img-container { 48 | background: #3B8457; 49 | padding: 20px 20px 10px 25px; 50 | display: flex; 51 | align-items: center; 52 | flex-direction: column; 53 | border-radius: 35px; 54 | color: #F7BB2E; 55 | } 56 | 57 | .left-content { 58 | /* box-shadow: 0 0 35px 10px rgba(255, 255, 255, 0.39); */ 59 | border-radius: 35px; 60 | background: #F3B73E; 61 | margin-top: 100px; 62 | box-shadow: 17px 6px 46px #989898, -12px -12px 41px #ffffff; 63 | } 64 | 65 | .socials { 66 | background: transparent; 67 | text-align: center; 68 | height: 60px; 69 | /* border: 2px solid black; */ 70 | display: flex; 71 | justify-content: center; 72 | align-items: center; 73 | border-radius: 35px; 74 | } 75 | 76 | .socials a { 77 | /* border: 2px solid black; */ 78 | text-decoration: none; 79 | border-radius: 10px; 80 | width: 125px; 81 | font-size: 22px; 82 | background: #614F89; 83 | color: #FEA4B9; 84 | font-weight: bold; 85 | letter-spacing: 4px; 86 | padding: 0px 5px; 87 | cursor: pointer; 88 | } 89 | 90 | .socials a:hover { 91 | background: #f49cbb; 92 | color: #b6073b; 93 | } 94 | 95 | .img img { 96 | display: block; 97 | width: 200px; 98 | } 99 | 100 | .img { 101 | width: 200px; 102 | height: 280px; 103 | overflow: hidden; 104 | transition: all 0.5s ease-in-out; 105 | } 106 | 107 | .left-content h1 { 108 | font-size: 2rem; 109 | margin: 2.2rem 0 0 0; 110 | line-height: 1.2; 111 | margin-top: 1.5rem; 112 | } 113 | 114 | .left-content h2 { 115 | font-weight: 300; 116 | text-align: center; 117 | letter-spacing: 3px; 118 | margin-top: 1.5rem; 119 | } 120 | 121 | .right-content { 122 | background: #fff; 123 | height: 100vh; 124 | display: flex; 125 | flex-direction: column; 126 | justify-content: center; 127 | text-align: center; 128 | } 129 | 130 | .right-content h1 { 131 | font-size: 96px; 132 | text-transform: uppercase; 133 | } 134 | 135 | .right-content h1 span { 136 | color: #0853de; 137 | } 138 | 139 | .right-content h2 { 140 | font-weight: 600; 141 | } 142 | 143 | .right-content-btn { 144 | display: flex; 145 | justify-content: space-between; 146 | width: 294px; 147 | margin: 15px auto; 148 | } 149 | 150 | .btn { 151 | border: none; 152 | font-size: 18px; 153 | text-transform: uppercase; 154 | border-radius: 25px; 155 | padding: 0px 0; 156 | width: 135px; 157 | height: 45px; 158 | } 159 | 160 | .btn.btn-color { 161 | background: #0039a2; 162 | color: #fff; 163 | transition: all 0.5s ease-out; 164 | cursor: pointer; 165 | } 166 | 167 | .btn.btn-color:hover { 168 | background: transparent; 169 | color: #0039a2; 170 | font-weight: 700; 171 | } 172 | 173 | .btn.btn-color2 { 174 | color: #0039a2; 175 | font-weight: 700; 176 | transition: all 0.5s ease-out; 177 | cursor: pointer; 178 | } 179 | 180 | .btn.btn-color2:hover { 181 | background: #87b1ff; 182 | color: #000; 183 | font-weight: 700; 184 | } 185 | 186 | .info { 187 | margin: 0 90px; 188 | } 189 | 190 | .info p { 191 | font-weight: 300; 192 | padding: 15px; 193 | text-align: center; 194 | } 195 | 196 | @media screen and (min-width: 1260px) { 197 | .container { 198 | display: grid; 199 | grid-template-columns: repeat(2, 1fr); 200 | } 201 | 202 | .content { 203 | position: relative; 204 | } 205 | 206 | .left-content { 207 | position: absolute; 208 | right: -50px; 209 | } 210 | 211 | .about-me{ 212 | right: -235px; 213 | } 214 | 215 | 216 | } 217 | 218 | .social-content{ 219 | height: 100vh; 220 | text-align: center; 221 | } 222 | 223 | .social-content h2{ 224 | padding: 50px; 225 | color: #FFC567; 226 | text-shadow: 5px 4px 0px #000; 227 | display: block; 228 | font-family: 'Titania'; 229 | font-size: 60px; 230 | } 231 | 232 | .cards{ 233 | width: 60%; 234 | margin: 0 auto; 235 | display: flex; 236 | justify-content: space-between; 237 | align-items: center; 238 | flex-wrap: wrap; 239 | flex: 33.3%; 240 | } 241 | 242 | .card-info{ 243 | width: 200px; 244 | /* border: 2px solid black; */ 245 | background: #386af3; 246 | margin: 20px 25px; 247 | color: #e6a64e; 248 | text-shadow: 3px 4px 3px #000; 249 | border-radius: 35px; 250 | box-shadow: 2px 2px 2px gray; 251 | display: flex; 252 | justify-content: end; 253 | position: relative; 254 | flex-direction: column; 255 | align-items: center; 256 | height: 300px; 257 | } 258 | 259 | .card-info-container{ 260 | position: absolute; 261 | bottom: 30px; 262 | cursor: pointer; 263 | } 264 | 265 | .card-info img{ 266 | position: absolute; 267 | top: 10px; 268 | width: 180px; 269 | box-shadow: -2px 4px 95px white; 270 | height: 150px; 271 | border-radius: 20px; 272 | margin-bottom: 25px; 273 | overflow: hidden; 274 | } 275 | 276 | .card-info-container h3, i{ 277 | margin: 5px 0; 278 | font-size: 30px; 279 | } 280 | 281 | a{ 282 | text-decoration: none; 283 | color: transparent; 284 | } 285 | 286 | @media screen and (max-width: 1260px) { 287 | .down{ 288 | position: relative; 289 | } 290 | 291 | .social-content{ 292 | position: absolute; 293 | top: 660px; 294 | } 295 | } -------------------------------------------------------------------------------- /AboutPages/Samyak_about/father.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CareerDevelopmentHub/SocialHub/46ea8dbce367a3cd7b7e92686f9e2c085dabbca5/AboutPages/Samyak_about/father.gif -------------------------------------------------------------------------------- /AboutPages/Samyak_about/luke.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CareerDevelopmentHub/SocialHub/46ea8dbce367a3cd7b7e92686f9e2c085dabbca5/AboutPages/Samyak_about/luke.gif -------------------------------------------------------------------------------- /AboutPages/Samyak_about/samyak.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | About Me - Star Wars 7 | 80 | 81 | 82 |

About Me - Samyak Bhansali

83 |
84 | Samyak Bhansali 85 |

Hello there! I'm a Star Wars stan who loves to explore the galaxy. Join me on my journey through the Force.

86 |
87 |
88 |
89 |

Favorite Star Wars Movie

90 |

My all-time favorite Star Wars movie is "The Empire Strikes Back." I love the intense battles and the iconic "I am your father" scene.

91 | gif 92 |
93 |
94 |

Favorite Character

95 |

Without a doubt, my favorite character is Luke Skywalker. His hero's journey and connection to the Force are truly inspiring.

96 | gif 97 |
98 |
99 |

Connect with Me

100 |

Feel free to connect with me on social media or via email. Let's discuss all things Star Wars!

101 | linkedin | 102 | Instagram | 103 | Gmail 104 |
105 |
106 | 107 | 108 | -------------------------------------------------------------------------------- /AboutPages/Samyak_about/samyak.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CareerDevelopmentHub/SocialHub/46ea8dbce367a3cd7b7e92686f9e2c085dabbca5/AboutPages/Samyak_about/samyak.jpg -------------------------------------------------------------------------------- /AboutPages/SohamHaldar/soham.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | About Me 7 | 79 | 80 | 81 |
82 |

About Me

83 |
84 |
85 |
86 |

Hello, I'm Soham Haldar

87 | img 88 |
89 |
90 |

Intro

91 |

92 | I'm a College Student based in India. I have a passion for Coding, and I enjoy Listening to Music. In my free time, you can usually find me listening music and playing TT. 93 |

94 |
95 |
96 |

Education

97 |

Indian Institute of Information Technology
98 | Computer Science
99 | November 2022 – Present 100 |

101 |

Gail Dav Public School
102 | June 2019 – March 2022
103 |

104 |

Kendriya Vidyalaya Noida
105 | March 20011 – March 2019
106 |

107 |
108 |
109 |

Skills

110 |

111 | Programming Languages: C, Java,JavaScript
112 | Web Development: HTML5, CSS,React,ExpressJs,NodeJs
113 | Version Control: GIT/Github
114 | Tools: VS code, Intellij 115 |

116 |
117 |
118 |

Contact Me

119 |

120 | Feel free to get in touch with me at sohamhaldar25@gmail.com if you have any questions or just want to say hello! 121 |

122 |
123 | 124 |
125 | 126 | 127 | -------------------------------------------------------------------------------- /AboutPages/SohamHaldar/soham_img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CareerDevelopmentHub/SocialHub/46ea8dbce367a3cd7b7e92686f9e2c085dabbca5/AboutPages/SohamHaldar/soham_img.jpg -------------------------------------------------------------------------------- /AboutPages/about_Nishant.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | About Nishant Gaurav 8 | 9 | 81 | 82 | 83 | 84 |
85 |

Nishant Gaurav

86 |
87 | 88 | 89 | 90 | 91 | 92 | 93 |
94 |
95 | 96 |
97 |

Introduction

98 |

99 | I'm a third-year B.Tech student with a strong dedication to problem-solving and innovation. 100 | Currently, I'm focused on enhancing my skills in Data Structures and Algorithms (DSA) as well as diving deeper into Object-Oriented Programming (OOP) concepts. 101 | Additionally, I'm actively learning and enhancing my proficiency in Git and GitHub for collaborative contributions. 102 | My interest in web development has led me to work on several personal projects in this domain. 103 | I'm open to connecting with fellow tech enthusiasts for discussions and collaborations. And if you're a chess enthusiast like me, we can also enjoy a game together! 104 |

105 |
106 | 107 |
108 |

Education

109 |

ITER, SOA University
110 | B.Tech in CSIT
111 | 2021 – Present 112 |

113 |

GNHSS , Ranchi
114 | HSC (Higher Secondary Certificate)
115 | 2020
116 | Percentage: 81.6% 117 |

118 |

GNHSS , Ranchi
119 | SSC (Secondary School Certificate)
120 | 2018
121 | Percentage: 94.67% 122 |

123 |
124 | 125 |
126 |

Experience

127 |

Google Cloud Jam, Online
128 | Active Participant
129 | September-2023
130 | Hands-on experience of GCP (Google Cloud Platform) and other activities 131 |

132 |

GDSC - ITER
133 | Technical Team
134 | Core Member
135 | Aug'23 - Present 136 |

137 |
138 | 139 |
140 |

Skills

141 | 147 |
148 |
149 |

Hobbies

150 | 156 |
157 | 158 |
159 |

Languages

160 | 164 |
165 | 166 | 167 | 168 | 169 | 170 | -------------------------------------------------------------------------------- /AboutPages/about_jaimin/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 8 | About CJ 9 | 12 | 15 | 16 | 17 |
18 | 22 |
23 |
24 |

25 | Hello, I am Chovatia Jaimin, but you can call me CJ. I'm 26 | a 3rd year undergraduate student pursuing a 27 | degree in Computer Engineering. I have a keen interest 28 | in exploring new technologies and expanding my knowledge 29 | in the field of computers. 30 |

31 |

32 | Tech Stack: TailwindCSS, Java, JavaScript, Postgres, 33 | MySQL SQLite, Html5, CSS3, React Router, ReactJS, 34 | Android, npm, git, Linux, NextJS, MongoDB. 35 |

36 |
37 | 38 |

39 | You can connect with me on any of the following platforms. 40 |

41 |
42 | 45 | 46 | 47 | 50 | 51 | 52 | 55 | 56 | 57 | 60 | 61 | 62 |
63 |
64 |
65 | 66 | 67 | -------------------------------------------------------------------------------- /AboutPages/about_jaimin/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@200;300;400;500;600;700&family=Roboto:wght@300;400;500;700;900&display=swap"); 2 | 3 | body { 4 | margin: 0; 5 | padding: 0; 6 | 7 | font-family: "Josefin Sans", sans-serif; 8 | font-size: 14px; 9 | letter-spacing: 0.4px; 10 | 11 | background-color: #262644; 12 | } 13 | 14 | .logo { 15 | margin: 25px; 16 | } 17 | 18 | .about_me_container { 19 | min-height: 100vh; 20 | display: flex; 21 | align-items: center; 22 | justify-content: center; 23 | } 24 | 25 | .about_me_card { 26 | max-width: 650px; 27 | } 28 | 29 | .about_me_text { 30 | color: white; 31 | font-size: 28px; 32 | font-weight: 400; 33 | text-align: center; 34 | } 35 | 36 | .about_me_tech_stack { 37 | color: white; 38 | font-size: 18px; 39 | text-align: center; 40 | font-weight: 400; 41 | font-family: monospace; 42 | } 43 | 44 | .about_me_section { 45 | display: flex; 46 | flex-direction: column; 47 | justify-content: center; 48 | align-items: center; 49 | } 50 | 51 | .socials { 52 | display: flex; 53 | gap: 18px; 54 | font-size: 30px; 55 | color: white; 56 | margin: 10px; 57 | } 58 | 59 | .socials_text { 60 | color: white; 61 | font-size: 18px; 62 | text-align: center; 63 | } 64 | 65 | a { 66 | text-decoration: none; 67 | cursor: pointer; 68 | color: white; 69 | } 70 | @media only screen and (max-width: 520px) { 71 | .about_me_container { 72 | display: flex; 73 | flex-direction: column; 74 | } 75 | .about_me_section { 76 | transform: scale(0.8); 77 | } 78 | } 79 | -------------------------------------------------------------------------------- /AboutPages/aditya_about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | About Me 7 | 42 | 43 | 44 |
45 |
46 |

Hello everyone 👋

47 |

Welcome to my about page!

48 |

49 | I'm Aditya Swayamsiddha, a passionate explorer of the digital realm. 50 | I'm dedicated to the art of web development and design, and I'm always 51 | seeking new opportunities to create captivating online experiences. 52 |

53 |

54 | If you're as enthusiastic about technology and creativity as I am, 55 | don't hesitate to get in touch. Let's collaborate and build something 56 | amazing together! 57 |

58 |
59 |
60 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 76 | 77 | 78 |
79 |
80 | 84 | 85 | 86 | -------------------------------------------------------------------------------- /AboutPages/amaanwarsi.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Amaan Warsi 8 | 11 | 12 | 634 | 635 | 636 | 637 | 638 | 639 | 640 | 641 |
642 | 643 | 654 |
655 | 656 | 657 | Follow @amaanwarsi 660 |
661 | 662 |
663 | 664 | 665 | 666 | 667 |
668 |
669 |
670 | 671 |

Welcome to my Portfolio

672 |

Amaan Warsi

673 |

674 | 675 | 681 |
682 | 683 | 684 | 685 | 686 |
687 | 688 | 689 | 690 | 691 | 692 | 721 | 722 | 723 | 724 | 725 | 726 | -------------------------------------------------------------------------------- /AboutPages/chinmayk.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | About Chinmay Kotkar 8 | 31 | 32 | 33 | 34 |

About Me: Chinmay Kotkar

35 | 36 |
37 |

Introduction

38 |

39 | Hello! I'm Chinmay Kotkar, currently pursuing a degree in Artificial Intelligence and Data Science at K.K. Wagh IEER, Nashik. My passion for computers and AI led me to the field of computer science, and I am enthusiastic about exploring innovative technologies. 40 |

41 |
42 | 43 |
44 |

Education

45 |

K.K. Wagh IEER, Nashik
46 | Engineering in Artificial Intelligence and Data Science
47 | December 2021 – Present 48 |

49 |

Matoshri Junior College, Nashik
50 | HSC (Higher Secondary Certificate)
51 | June 2021 – March 2021
52 | Percentage: 94.16% (A++) 53 |

54 |

New Era English School, Nashik
55 | SSC (Secondary School Certificate)
56 | March 2009 – March 2019
57 | Percentage: 91.00% (A++) 58 |

59 |
60 | 61 |
62 |

Experience

63 |

Google Cloud, Online
64 | Active Participant
65 | April 2022 – July 2022
66 | Hands-on experience of GCP (Google Cloud Platform) and other activities 67 |

68 |

MIBCS Club, K. K Wagh IEER
69 | Core Committee Member
70 | September 2022 – Present
71 | Repository Maintainer, Hacktoberfest (Github) 72 |

73 | 74 |
75 | 76 |
77 |

Projects

78 |
Tyre Optima
79 | A complete MERN stack project for Nashik Municipal Corporation’s public transport system 80 |
81 |
ABC Aadhunik Bus Kaksha
82 | Semi-Finalist Project at IIT Bombay’s E-yantra Innovation Challenge 2022-2023 83 |
84 | 85 |
86 | 87 |
88 |

Skills

89 |

90 | Programming Languages: Python, C, C++
91 | Web Development: HTML5, CSS
92 | Version Control: GIT/Github
93 | Cloud Platforms: Google Cloud Platform, AWS
94 | Tools: MS Office, Google Workspaces 95 |

96 |
97 | 98 |
99 |

Languages

100 |

English (Proficient)
101 | Marathi (Native)
102 | Hindi (Native)
103 | German (Beginner) 104 |

105 |
106 | 107 |
108 |

Events Attended

109 | 116 |
117 | 118 |
119 |

Certifications

120 | 127 |
128 | 129 |
130 |

Strengths

131 |

Collaborative & Proactive
132 | Effective Communicator & Good Orator
133 | Performance-Focused & Growth Oriented
134 | Critical Thinker & Calm Under Pressure
135 | Decisive & Trustworthy 136 |

137 |
138 | 139 |
140 |

Links

141 |

LinkedIn: Chinmay Kotkar

142 |
143 | 144 |
145 |

Languages

146 |

English (Proficient)
147 | Marathi (Native)
148 | Hindi (Native)
149 | German (Beginner) 150 |

151 |
152 | 153 |
154 |

Affirmation

155 |

I hereby affirm that the above information is true to the best of my knowledge.

156 |
157 | 158 | 159 | 160 | 161 | -------------------------------------------------------------------------------- /AboutPages/harshsinghcs-about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | About Harsh Singh 7 | 35 | 36 | 37 |
38 |

About Harsh Singh

39 |

Name: Harsh Singh

40 |

LinkedIn: https://www.linkedin.com/in/harsh-singh-lohiya/

41 |

GitHub: https://www.github.com/harshsinghcs

42 |

Introduction:

43 |

👋 Hey everyone, I'm Harsh Singh, a fourth-year Computer Science student. 🎓 Passionate about open source and a full-stack enthusiast. 🌐 Let's connect and explore the world of tech together! 🚀

44 |
45 | 46 | 47 | -------------------------------------------------------------------------------- /AboutPages/kamallochan_about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | About Me 7 | 42 | 43 | 44 |
45 |
46 |

Hello everyone 👋

47 |

Welcome to my about page!

48 |

I am Kamallochan Das, I'm always eager to collaborate with like-minded individuals who share the same enthusiasm

49 |

Feel free to or reach out if you'd like to connect or collaborate.

50 | 51 |

52 |
53 |
54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 |
69 |
70 | 71 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /AboutPages/nabin_about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | About Myself 7 | 60 | 61 | 62 |
63 |

ABOUT ME

64 | Nabin Kumar Shaw 65 |
66 |
67 |
68 |

Nabin Kumar Shaw

69 |
70 |

Student OF ITER,SOA CAMPUS-1

71 |
72 |
73 |

Hello everyone 👋

74 |

Welcome to my page!

75 |

I'm Nabin kumar shaw,2nd year computer science graduate,Aspiring Developer,and I'm excited to contribute to open source project. 76 |

Feel Free To Connect & Below are my social media link to connect.

77 |
78 |
79 |

SOCIAL MEDIA

80 | 97 |
98 | 99 | 100 | -------------------------------------------------------------------------------- /AboutPages/om_about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | About Me 7 | 48 | 49 | 50 |
51 |
52 |

Hello everyone

53 |

Welcome to my about page!

54 |

55 | I'm Om Choudhary, a passionate explorer of the digital realm. 56 | I'm dedicated to the art of web development and design, and I'm always 57 | seeking new opportunities to create captivating online experiences. 58 |

59 |

60 | If you're as enthusiastic about technology and creativity as I am, 61 | don't hesitate to get in touch. Let's collaborate and build something 62 | amazing together! 63 |

64 |
65 | 85 |
86 | 90 | 91 | -------------------------------------------------------------------------------- /AboutPages/prajwal_about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | About Me 7 | 37 | 38 | 39 |
40 |

Prajwal G

41 |
42 |
43 |

About Me

44 |

45 | I'm Prajwal, a 2nd-year Computer Science student with a passion for Web development and competitive programming. I thrive on solving complex problems and contributing to open source projects. Always eager to learn and grow in the world of technology! 46 |

47 | 48 |

Get in Touch

49 | 53 |
54 | 55 | 56 | -------------------------------------------------------------------------------- /AboutPages/pranav.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | About Me 8 | 93 | 94 | 95 | 96 |
97 |
98 |

About Me

99 |

Exploring the world one line of code at a time

100 |
101 |
102 | 103 |
104 |

Your Name

105 |

Web Developer | Creative Thinker

106 | 107 |

In the ever-expanding tapestry of academia, I stand as a diligent weaver, navigating the intricate threads of knowledge and curiosity. I am more than a mere college student; I am an ardent explorer of the boundless realms of wisdom, constantly seeking to unravel the mysteries of the digital universe.

108 | 109 |

At heart, I am a programmer, a master craftsman in the realm of ones and zeros. With fingers that dance effortlessly across the keyboard, I breathe life into lines of code, sculpting intricate algorithms and elegant solutions. My mind, a vast canvas, is adorned with the vibrant hues of programming languages, where logic and creativity intertwine in a harmonious dance.

110 | 111 |

Beyond the screen and code, I am a fervent hobbyist, delving into a myriad of interests that enrich my soul. From the artistry of painting to the melody of music, my passions know no bounds. I am an explorer of worlds both real and imagined, finding solace in the delicate strokes of a brush and the soothing chords of a guitar.

112 | 113 |

In the dim glow of the silver screen, I find myself enthralled by the magic of storytelling. I am a connoisseur of cinema, a dedicated movie watcher, captivated by the nuances of plotlines and the brilliance of cinematography. Each film becomes a portal to another universe, a brief escape from reality into the realm of imagination.

114 | 115 |

In the grand tapestry of my existence, I am the embodiment of curiosity, a seeker of knowledge, a maestro of code, a passionate hobbyist, and a devoted movie enthusiast. With every keystroke, every brushstroke, and every frame, I carve my unique identity, leaving an indelible mark on the canvas of life.

116 |
117 | 118 | 121 | 122 | 123 | 124 | -------------------------------------------------------------------------------- /AboutPages/priyatosh.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | About Me 7 | 42 | 43 | 44 |
45 |
46 |

Hello everyone 👋

47 |

Welcome to my about page!

48 |

I am Priyatosh Nayak, I'm always eager to collaborate with like-minded individuals who share the same enthusiasm

49 |

Feel free to or reach out if you'd like to connect or collaborate.

50 | 51 |

52 |
53 | 66 |
67 | 68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /AboutPages/rudreshwar_about/about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 |
17 |
18 |
19 |

AbouT mE

20 |
21 |
22 |
23 |
24 | Rudreshwar's Profile Photo 26 |
27 |
28 |

Hello there! I'm Rudreshwar Baranwal 👋

29 |

30 | I am currently a pre final year student pursuing my B.Tech in Department of Information 31 | Technology from IIEST Shibpur. 32 |

33 |

34 | I have a knack for Algorithmic Problems and have been working on my Problem Solving Skills on 35 | different coding platforms. 36 |

37 |

38 | I also have intermediate-level experience with JavaScript and Frontend frameworks like React-JS. 39 | Currently learning more stuffs in the backend development field. 40 |

41 |

42 | You can know me as a MERN stack developer. 43 |

44 |

45 | I'm always happy to learn, collaborate and work as a team which makes some impact. 46 |

47 |
48 |
49 |
50 |
51 | 52 | 53 | -------------------------------------------------------------------------------- /AboutPages/rudreshwar_about/level.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CareerDevelopmentHub/SocialHub/46ea8dbce367a3cd7b7e92686f9e2c085dabbca5/AboutPages/rudreshwar_about/level.jpg -------------------------------------------------------------------------------- /AboutPages/rudreshwar_about/style.css: -------------------------------------------------------------------------------- 1 | /******* Body style and fonts ********/ 2 | @import url('https://fonts.googleapis.com/css2?family=Sora&display=swap'); 3 | 4 | html { 5 | font-size: 110%; 6 | } 7 | 8 | html, 9 | body { 10 | height: 100%; 11 | width: 100%; 12 | } 13 | 14 | body { 15 | color: #394c4a; 16 | font-family: Sora; 17 | font-size: 1rem; 18 | font-weight: 300; 19 | line-height: 1.5; 20 | } 21 | 22 | h1 { 23 | font-family: 'Indie Flower', cursive; 24 | font-size: 3rem; 25 | } 26 | 27 | h2 { 28 | font-family: 'Indie Flower', cursive; 29 | font-size: 2.3rem; 30 | } 31 | 32 | h3 { 33 | font-family: 'Indie Flower', cursive; 34 | font-size: 1.8rem; 35 | } 36 | 37 | h4 { 38 | color: #9da7a6; 39 | font-size: 1.1rem; 40 | letter-spacing: 1px; 41 | line-height: 1.5; 42 | text-transform: uppercase; 43 | } 44 | 45 | small { 46 | line-height: 1; 47 | } 48 | 49 | hr { 50 | border-color: #cdd1cf; 51 | margin: 30px 0 60px; 52 | } 53 | 54 | /******** Display Styles *******/ 55 | .display { 56 | background: linear-gradient(rgba(26, 28, 44, 0.9), rgba(26, 28, 44, 0.9)), url("assets/imgs/logo.jpg") center center fixed; 57 | background-size: cover; 58 | height: 100%; 59 | margin: 0; 60 | min-height: 510px; 61 | position: relative; 62 | width: 100%; 63 | } 64 | 65 | .display .container { 66 | position: relative; 67 | top: 50%; 68 | -webkit-transform: translateY(-50%); 69 | -ms-transform: translateY(-50%); 70 | transform: translateY(-50%); 71 | } 72 | 73 | .display .row { 74 | padding-bottom: 45px; 75 | } 76 | 77 | .display .logo { 78 | max-width: 150px; 79 | width: 80%; 80 | } 81 | 82 | .display .title { 83 | color: #29a598; 84 | } 85 | 86 | .display p { 87 | padding-top: 15px; 88 | margin: 0; 89 | font-size: 1.2rem; 90 | color: #29a598; 91 | text-shadow: 1px 1px 1px #000000; 92 | font-family: Sora; 93 | } 94 | 95 | /********** Containers ******/ 96 | section.row, 97 | footer.row { 98 | padding: 30px 30px 60px; 99 | } 100 | 101 | 102 | /*** Modal ***/ 103 | .modal-dialog.wide { 104 | width: 90%; 105 | } 106 | 107 | .modal-dialog.wide .row { 108 | margin: 0 0 30px; 109 | } 110 | 111 | .modal-dialog.wide .row .row { 112 | margin-left: -15px; 113 | margin-right: -15px; 114 | } 115 | 116 | .modal-header { 117 | border: none; 118 | padding: 30px 30px 0; 119 | } 120 | 121 | .modal-header .close { 122 | font-size: 2rem; 123 | } 124 | 125 | .modal-content { 126 | background-color: #fffefd; 127 | border: none; 128 | box-shadow: 0 3px 6px rgba(8, 33, 30, 0.2); 129 | } 130 | 131 | .modal-body { 132 | padding: 30px; 133 | } 134 | 135 | .modal-body li { 136 | margin-bottom: 9px; 137 | } 138 | 139 | .modal-footer { 140 | padding: 30px 0 15px; 141 | } 142 | 143 | 144 | /******* Other Styles - Bootstraped ******/ 145 | .mb-0 { 146 | margin-bottom: 0; 147 | } 148 | 149 | .mb-15 { 150 | margin-bottom: 15px !important; 151 | } 152 | 153 | .mb-30 { 154 | margin-bottom: 30px; 155 | } 156 | 157 | .mb-60 { 158 | margin-bottom: 60px; 159 | } 160 | 161 | .mt-30 { 162 | margin-top: 30px; 163 | } 164 | 165 | .bg-shadow { 166 | box-shadow: 0 1px 3px rgba(8, 33, 30, 0.5); 167 | } 168 | 169 | .bg-white { 170 | background-color: #fffefd; 171 | position: relative; 172 | } 173 | 174 | .bg-pink { 175 | background-color: #df3778; 176 | color: #fffefd; 177 | position: relative; 178 | } 179 | 180 | .bg-star-y { 181 | background: #ffce3f url(assets/imgs/yellow-star.png) fixed; 182 | background-size: 60px; 183 | color: #fffefd; 184 | } 185 | 186 | .bg-star-g { 187 | background: #29a598 url(assets/imgs/green-star.png) fixed; 188 | background-size: 60px; 189 | color: #fffefd; 190 | } 191 | 192 | .bg-honeycomb { 193 | background: #fffefd url(assets/imgs/honeycomb.png) fixed; 194 | background-size: 24px; 195 | } 196 | 197 | .gray { 198 | color: #9da6a4; 199 | } 200 | 201 | .dashed { 202 | border-top: 2px dashed #29a598; 203 | } 204 | 205 | /* ===================== 206 | Media Queries 207 | ===================== */ 208 | @media (max-width: 1199px) { 209 | 210 | /* Center class for medium screens */ 211 | .md-center { 212 | text-align: center; 213 | } 214 | } 215 | 216 | @media (max-width: 991px) { 217 | 218 | /*** Resume ***/ 219 | .year { 220 | text-align: left; 221 | } 222 | 223 | /*** Portfolio ***/ 224 | #projects .carousel-control { 225 | margin-top: 300%; 226 | } 227 | 228 | #projects .carousel-inner img { 229 | max-width: 480px; 230 | width: 100%; 231 | } 232 | } 233 | 234 | @media (max-width: 768px) { 235 | 236 | /*** Page Elements ***/ 237 | section .row [class^="col-sm-"]+[class^="col-sm-"], 238 | section .row [class*=" col-sm-"]+[class*=" col-sm-"] { 239 | margin-top: 30px; 240 | } 241 | 242 | /*** Display ***/ 243 | .display .logo { 244 | max-width: 120px; 245 | } 246 | 247 | /*** Mobile Nav ***/ 248 | .navbar-toggle { 249 | height: 36px; 250 | margin-bottom: 22px; 251 | margin-top: 22px; 252 | } 253 | 254 | .navbar-toggle .glyphicon { 255 | color: #6b7a78; 256 | top: -2px; 257 | } 258 | 259 | .navbar-default .navbar-toggle:focus, 260 | .navbar-default .navbar-toggle:hover { 261 | background-color: transparent; 262 | border-color: #29a598; 263 | } 264 | 265 | .navbar-default .navbar-toggle .active { 266 | color: #29a598; 267 | } 268 | 269 | .navbar-collapse { 270 | background-color: #fffefd; 271 | background-color: rgba(255, 254, 253, 0.97); 272 | border: none; 273 | box-shadow: 0 2px 8px rgba(8, 33, 30, 0.2); 274 | left: 0; 275 | position: absolute; 276 | right: 0; 277 | text-align: center; 278 | } 279 | 280 | .navbar-collapse .outline.pink { 281 | margin: 15px auto 30px; 282 | max-width: 150px; 283 | } 284 | 285 | /*** Portfolio ***/ 286 | #projects .carousel-control { 287 | margin-top: 300%; 288 | } 289 | 290 | #projects .card { 291 | text-align: center; 292 | } 293 | } 294 | 295 | 296 | 297 | /****** Projects *******/ 298 | * { 299 | box-sizing: border-box; 300 | } 301 | 302 | body { 303 | background-color: #FFF8F0; 304 | font-family: 'Lato', sans-serif; 305 | margin: 0; 306 | } 307 | 308 | section { 309 | text-align: center; 310 | padding: 20px; 311 | } 312 | 313 | section h2 { 314 | margin: 0; 315 | } 316 | 317 | section p { 318 | margin-top: 0; 319 | } 320 | 321 | .projects-container { 322 | display: flex; 323 | flex-wrap: wrap; 324 | align-items: center; 325 | justify-content: center; 326 | width: 100%; 327 | padding-bottom: 50px; 328 | } 329 | 330 | .projects-container a { 331 | padding: 30px; 332 | margin: 30px; 333 | } 334 | 335 | .project-tile { 336 | /* margin: 10px; */ 337 | text-decoration: none; 338 | } 339 | 340 | .project-tile img { 341 | transition: 0.4s; 342 | width: 240px; 343 | height: 350px; 344 | border-top-left-radius: 25px; 345 | border-bottom-right-radius: 25px; 346 | } 347 | 348 | .project-tile img:hover { 349 | box-shadow: 5px 5px 5px 5px #2c2121; 350 | border: none; 351 | } 352 | 353 | 354 | .project-tile p { 355 | position: relative; 356 | background-color: #ffffff; 357 | font-size: 20px; 358 | margin-top: 20px; 359 | color: #000; 360 | font-family: Sora; 361 | } 362 | 363 | .bg-blue { 364 | background-color: #7FD1B9; 365 | color: #fff; 366 | } 367 | 368 | .social-ul { 369 | display: flex; 370 | flex-wrap: wrap; 371 | list-style-type: none; 372 | justify-content: center; 373 | padding: 0; 374 | margin: 0; 375 | } 376 | 377 | .social-ul a { 378 | border-radius: 50%; 379 | border: 1px solid #fff; 380 | color: #fff; 381 | display: inline-flex; 382 | align-items: center; 383 | justify-content: center; 384 | font-size: 25px; 385 | margin: 5px 10px; 386 | width: 50px; 387 | height: 50px; 388 | text-decoration: none; 389 | } 390 | 391 | /***** Footer Section *******/ 392 | 393 | footer { 394 | padding: 10px; 395 | text-align: center; 396 | } 397 | 398 | @media (max-width: 440px) { 399 | section { 400 | padding: 20px; 401 | } 402 | } 403 | 404 | .site-footer { 405 | background-color: #26272b; 406 | padding: 45px 0 20px; 407 | font-size: 15px; 408 | line-height: 24px; 409 | color: #737373; 410 | } 411 | 412 | .site-footer hr { 413 | border-top-color: #bbb; 414 | opacity: 0.5 415 | } 416 | 417 | .site-footer hr.small { 418 | margin: 20px 0 419 | } 420 | 421 | 422 | .footer-links { 423 | padding-left: 0; 424 | list-style: none; 425 | } 426 | 427 | .footer-links li { 428 | display: block; 429 | } 430 | 431 | .footer-links a { 432 | color: #737373; 433 | } 434 | 435 | .footer-links a:active, 436 | .footer-links a:focus, 437 | .footer-links a:hover { 438 | color: #c4cbd7; 439 | text-decoration: none; 440 | } 441 | 442 | .footer-links.inline li { 443 | display: inline-block 444 | } 445 | 446 | .site-footer .social-icons { 447 | text-align: right 448 | } 449 | 450 | .site-footer .social-icons a { 451 | width: 40px; 452 | height: 40px; 453 | line-height: 40px; 454 | margin-left: 6px; 455 | margin-right: 0; 456 | border-radius: 100%; 457 | background-color: #33353d 458 | } 459 | 460 | .copyright-text { 461 | margin: 0 462 | } 463 | 464 | @media (max-width:991px) { 465 | .site-footer [class^=col-] { 466 | margin-bottom: 30px 467 | } 468 | } 469 | 470 | @media (max-width:768px) { 471 | .site-footer { 472 | padding-bottom: 0 473 | } 474 | 475 | .site-footer .copyright-text, 476 | .site-footer .social-icons { 477 | text-align: center 478 | } 479 | } 480 | 481 | .social-icons { 482 | padding-left: 0; 483 | margin-bottom: 0; 484 | list-style: none 485 | } 486 | 487 | .social-icons li { 488 | display: inline-block; 489 | margin-bottom: 4px 490 | } 491 | 492 | .social-icons li.title { 493 | margin-right: 15px; 494 | text-transform: uppercase; 495 | color: #96a2b2; 496 | font-weight: 700; 497 | font-size: 13px 498 | } 499 | 500 | .social-icons a { 501 | background-color: #eceeef; 502 | color: #818a91; 503 | font-size: 16px; 504 | display: inline-block; 505 | line-height: 44px; 506 | width: 44px; 507 | height: 44px; 508 | text-align: center; 509 | margin-right: 8px; 510 | border-radius: 100%; 511 | --webkit-transition: all .2s linear; 512 | --o-transition: all .2s linear; 513 | transition: all .2s linear 514 | } 515 | 516 | .social-icons a:active, 517 | .social-icons a:focus, 518 | .social-icons a:hover { 519 | color: #fff; 520 | background-color: #29a598; 521 | } 522 | 523 | .social-icons.size-sm a { 524 | line-height: 34px; 525 | height: 34px; 526 | width: 34px; 527 | font-size: 14px 528 | } 529 | 530 | 531 | @media (max-width:768px) { 532 | .social-icons li.title { 533 | display: block; 534 | margin-right: 0; 535 | font-weight: 600 536 | } 537 | } -------------------------------------------------------------------------------- /AboutPages/shubham_about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | About Me - Web Developer 7 | 78 | 79 | 80 |
81 |

About Me - Web Developer

82 |
83 |
84 |

Hello Everyone

85 | Your Photo 86 |

Welcome to my about page!

87 |

88 | "I am Shubham Rout, an avid adventurer in the digital landscape. 89 | My commitment lies in the craft of web development and design, and I'm continually 90 | on the lookout for fresh prospects to craft engaging online experiences." 91 |

92 |

93 | If you're as enthusiastic about technology and creativity as I am, 94 | don't hesitate to get in touch. Let's collaborate and build something 95 | amazing together! 96 |

97 |
98 |
99 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 115 | 116 | 117 |
118 |
119 | 123 | 126 | 127 | 128 | -------------------------------------------------------------------------------- /AboutPages/somnath/somnath_about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | About Me 7 | 8 | 9 | 10 | Somnath 11 |

Hello Folks! Myself Somnath Shaw 👋

12 |

13 | Hello! I'm a Computer Science student focused on building a strong foundation in programming, software development, and computer science theory. I've started my journey with Java and Python, and I'm excited about creating web and mobile applications. 14 | I'm always eager to explore new technologies. Currently, I'm diving into data structures and algorithms (DSA) and getting my feet wet in frontend development. I'm open to connecting on LinkedIn for new opportunities or discussions. Let's connect! 15 |

16 | 17 |

🎉 Get ready for exciting adventures ahead. Feel free to explore and connect with others.

18 |

🌟 If you have any questions , don't hesitate to reach out to in below links!

19 | 20 |
21 |
22 |
23 | 24 |

LinkedIn

25 |

26 |
27 |
28 | 29 |

GitHub

30 |

31 |
32 |
33 | 34 |

Twitter

35 |

36 |
37 |
38 | 39 |

Cloud

40 |

41 |
42 |
43 | 44 |

Instagram

45 |

46 |
47 |
48 |
49 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /AboutPages/somnath/stylePage.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #000; 3 | color: #fff; 4 | font-family: Arial, sans-serif; 5 | } 6 | 7 | .container { 8 | max-width: 800px; 9 | margin: 0 auto; 10 | text-align: center; 11 | padding: 50px; 12 | } 13 | 14 | .profile h1 { 15 | font-size: 36px; 16 | margin-bottom: 10px; 17 | } 18 | 19 | .social-icons { 20 | margin-top: 20px; 21 | } 22 | 23 | .icon { 24 | font-size: 36px; 25 | margin: 0 20px; 26 | transition: transform 0.3s ease-in-out; 27 | color: #fff; 28 | text-decoration: none; 29 | } 30 | 31 | .icon:hover { 32 | transform: scale(1.2); 33 | } 34 | 35 | .card { 36 | background-color: #232323; 37 | width: 150px; 38 | border-radius: 0.5rem; 39 | padding: 1rem; 40 | opacity: 0.9; 41 | margin-left: 1.5rem; 42 | margin-top: 1rem; 43 | } 44 | 45 | .card:hover { 46 | opacity: 1.8; 47 | } 48 | 49 | .cards-container { 50 | display: flex; 51 | flex-wrap: wrap; 52 | } 53 | 54 | .card-img { 55 | width: 100%; 56 | border-radius: 0.3rem; 57 | } 58 | 59 | .card-title { 60 | font-weight: 600; 61 | } 62 | 63 | .card-info { 64 | font-size: 0.75rem; 65 | opacity: 0.5; 66 | } 67 | #firstH { 68 | text-align: center; 69 | font-family: 'Courier New', Courier, monospace; 70 | } 71 | 72 | #firstP { 73 | margin-left: 200px; 74 | margin-right: 200px; 75 | font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; 76 | } 77 | 78 | #myImg { 79 | border-radius: 50%; 80 | height: 15rem; 81 | width: 15rem; 82 | display: block; 83 | margin-left: auto; 84 | margin-right: auto; 85 | } 86 | 87 | body { 88 | background: linear-gradient(to bottom right, rgb(48, 182, 115), rgb(227, 114, 133)); 89 | } 90 | -------------------------------------------------------------------------------- /AboutPages/sonu_about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | About Me 7 | 62 | 63 | 64 | 65 |
66 |

About Me

67 |
68 | 69 |
70 |
71 |

Hello everyone

72 |
73 | Sonu 74 |
75 |

76 | Hi there! I'm Sonu, a research student who has a quest to learn 77 | many new things and is eager to explore new places. I am pursuing my research under a 78 | Bachelor Of Technology At Institute of Technical Research, India. Currently, I am living in 79 | Bhubaneswar, Odisha. 80 |

81 |

82 | I collaborate with fellow enthusiasts to create interactive and visually appealing websites. 83 | I enjoy keeping up with the latest web development trends and technologies, always eager to implement 84 | them in my projects. I have a keen eye for design, and my work combines both functionality and 85 | aesthetics to deliver exceptional user experiences. 86 | 87 |

88 |
89 |
90 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 106 | 107 | 108 |
109 |
110 | 114 | 115 | -------------------------------------------------------------------------------- /AboutPages/subhashree_about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | About Me Page 11 | 38 | 39 | 40 |
41 |

Hey there!

42 |
43 | 44 |
45 |

My name is Subhashree Prusty and I'm just a noob developer.

46 |
47 |

Socials :

48 |
49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 |
59 |
60 |
61 | 62 | 63 | -------------------------------------------------------------------------------- /AboutPages/suhani_about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | About Me 7 | 42 | 43 | 44 |
45 |
46 |

Hello everyone 👋

47 |

Welcome to my about page!

48 |

49 | 🎉 Get ready for exciting adventures ahead. Feel free to explore and connect with others. 50 | 51 |

52 |

🌟 If you have any questions , don't hesitate to reach out to in below links!

53 | 54 |

55 |
56 |
57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 |
72 |
73 | 74 | 75 | 76 | 77 | -------------------------------------------------------------------------------- /AboutPages/tanay_about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | About Me 7 | 46 | 47 | 48 |
49 |

About Me

50 |
51 |
52 | 53 |

Hi, I'm tanay

54 |

55 | Hi, I'm a passionate learner, tech newbie, and dedicated student currently pursuing a Computer Science degree as a sophomore at SVIIT. 56 |

57 |

58 | 🌱 Learning Enthusiast: 59 | I'm on an exciting journey of discovery in the tech realm. Every day presents an opportunity to explore new horizons and expand my knowledge. 60 |

61 | 62 |

63 | 🚀 Aspiring Fullstack Developer: 64 | I aspire to become a Fullstack Developer and i am actively acquiring skills in JavaScript, C++, HTML, CSS, and React. Each line of code I write is a step toward mastering this craft. 65 |

66 | 67 |

68 | 📧 Connect with Me: 69 | Whether for networking, collaboration, or a casual tech chat, I'm always open to connecting. Let's embark on this tech adventure and shape the future together! 🌟 70 |
71 | linkedin 72 |

73 |
74 | 75 | 76 | -------------------------------------------------------------------------------- /AboutPages/vivek_upadhyay.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | About Me 7 | 48 | 49 | 50 |
51 |
52 |

Hello everyone 👋

53 | vivek 54 |

55 | I'm Vivek Upadhyay, a passionate explorer of the digital realm. I'm 56 | dedicated to the art of front end development and design, and I'm 57 | always seeking new opportunities to create captivating online 58 | experiences. 59 |

60 |

61 | If you're as enthusiastic about technology and creativity as I am, 62 | don't hesitate to get in touch. Let's collaborate and build something 63 | amazing together! 64 |

65 |
66 |
67 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 83 | 84 | 85 |
86 |
87 | 91 | 92 | 93 | -------------------------------------------------------------------------------- /CONTRIBUTION.md: -------------------------------------------------------------------------------- 1 | # SocialHub 2 | 3 | This project is a collaborative effort and we welcome contributions from anyone who is interested in adding their about page and any other enhancements. 4 | 5 | ## Getting Started 6 | 7 | To get started, please follow these steps: 8 | 9 | 1. Fork this repository. 10 | 2. Create code file in the `AboutPages` folder with your name as the filename and if you have multiple code files then create folder containing code files with your name as foldername. 11 | 3. Add any necessary image files to the `asset` folder and if you have multiple image files then create folder containing image files with your name as foldername. 12 | 4. Before creating a pull request, make sure you run command "git pull" on terminal and review the code in local server. 13 | 5. Pull request should not contain any merge conflicts. 14 | 15 | ## Contributing 16 | 17 | * We welcome contributions of all kinds, including bug fixes, new features, and improvements to user interface. 18 | 19 | * Editing texts on the existing code is not considered as a contribution. 20 | 21 | * Please do not create multiple commits for a single pull request rather you test it on your local before commiting to the forked repo. 22 | 23 | * Please do not create pull requests that update the README.md file. 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /Readme.md: -------------------------------------------------------------------------------- 1 | # SocialHub - Hacktoberfest-2023🔥 2 | 3 | Welcome to SocialHub, an open-source project with a simple yet powerful goal: to create innovative "About Me" pages that foster meaningful connections among users. 😃 4 |
5 | If it's your first contribution do [check this out](https://github.com/suhani1804/first-contributions/) 6 |
7 | Visit the site before contributing [SocialHub](https://hacktober2023socialhub.netlify.app/) (Updated) 8 | 9 | ![image](https://user-images.githubusercontent.com/70385488/192114009-0830321a-d227-4a4d-8411-6c03b54d7ce6.png) 10 | 11 |
12 | 13 | ![Open Source Love](https://firstcontributions.github.io/open-source-badges/badges/open-source-v1/open-source.svg) 14 | Hacktober Badge 15 | Star Badge 16 | Contributions 17 | 18 |
19 | This repository aims to help code beginners with their first successful pull request and open source contribution. 🤝: 20 | 21 | 22 | 🚀: Feel free to use this project to make your first contribution to an open-source project on GitHub. Practice making your first pull request to a public repository before doing the real thing! 23 | 24 | 🚀: Make sure to grab amazing knowledge during Hacktoberfest by getting involved in the open-source community. 25 | 26 | This repository is open to all members of the GitHub community. Any member can contribute to this project! ❤️: 27 | 28 | ## What is Hacktoberfest? 🤔: 29 | 30 | A month-long celebration from October 1st to October 31st presented by [Digital Ocean](https://hacktoberfest.digitalocean.com/) and [DEV Community](https://dev.to/) collaborated with [GitHub](https://github.com/blog/2433-celebrate-open-source-this-october-with-hacktoberfest) to get people involved in [Open Source](https://github.com/open-source). Create your very first pull request to any public repository on GitHub and contribute to the open-source developer community. 31 | 32 | ## Steps to follow :scroll: 33 | 34 | ### 0. Star The Repo ⭐: 35 | 36 | Star the repo by pressing the topmost-right button to start your wonderful journey. 37 | 38 | ### 1. Fork it 🍴: 39 | 40 | You can get your own fork/copy of repository by using the Fork button present at top-right of your screen. 41 | 42 | ### 2. Clone it 🌪️: 43 | 44 | `NOTE: commands are to be executed on Linux, Mac, and Windows(using Powershell)` 45 | 46 | You need to clone or (download) it to local machine using command 47 | 48 | ```sh 49 | # This clones your forked repository 50 | $ git clone "link of repo" 51 | ``` 52 | 53 | `NOTE: Please don't forget to replace` **_`link of repo`_** `with the actual link of the repository on your forked version.` 54 | 55 | ### 3. Set it up ⬆️: 56 | 57 | Commit your changes and push to GitHub using following commands : 58 | 59 | ```sh 60 | $ git init 61 | ``` 62 | 63 | ```sh 64 | # To add all files to branch Folder_Name 65 | $ git add . 66 | ``` 67 | 68 | Type in a message relevant for the code reviewer using 69 | 70 | ```sh 71 | # This message get associated with all files you have changed 72 | $ git commit -m 'relevant message' 73 | ``` 74 | 75 | Now, Push your awesome work to your remote repository using 76 | 77 | ```sh 78 | # To push your work to your remote repository 79 | $ git push -u origin BranchName 80 | ``` 81 | 82 | Finally, go to your repository in the browser and click on `compare and pull requests`. 83 | Then add a title and description to your pull request that explains your precious effort. 84 | 85 | # Email Banners-Lite 86 | -------------------------------------------------------------------------------- /about.css: -------------------------------------------------------------------------------- 1 | .about { 2 | width: 100%; 3 | min-height: inherit; 4 | display: flex; 5 | justify-content: center; 6 | align-items: center; 7 | } 8 | main { 9 | background-color: #ffffff; 10 | width: 75%; 11 | height: 100%; 12 | padding: 3rem; 13 | padding-top: 2rem; 14 | padding-right: 2rem; 15 | border-radius: 12px; 16 | margin-bottom: 20px; 17 | backdrop-filter: blur(8px); 18 | box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); 19 | } 20 | .heading { 21 | font-size: 40px; 22 | font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", 23 | sans-serif; 24 | } 25 | .aboutinfo { 26 | font-size: 18px; 27 | font-family: cursive; 28 | font-style: italic; 29 | } 30 | .navbar-brand { 31 | font-family: "Young Serif", serif; 32 | font-size: 5vh !important; 33 | color: black !important; 34 | } 35 | .navbar-nav { 36 | color: black; 37 | display: flex; 38 | width: 100%; 39 | justify-content: end; 40 | } 41 | .navbar { 42 | color: black; 43 | padding: 1vh 1vw; 44 | } 45 | header { 46 | padding: 20px; 47 | } 48 | main { 49 | margin: 70px; 50 | } 51 | nav { 52 | display: flex; 53 | justify-content: space-evenly; 54 | } 55 | 56 | /* Styles for phones and smaller screens */ 57 | @media (max-width: 768px) { 58 | .about { 59 | display: flex; 60 | margin: 40px 0px; 61 | } 62 | main { 63 | width: 90%; 64 | margin: 10px; 65 | } 66 | .heading { 67 | font-size: 30px; 68 | } 69 | .navbar-brand { 70 | font-size: 3vh !important; 71 | } 72 | .navbar-nav { 73 | flex-direction: column; 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 28 | 29 | 30 | 35 | 36 | 37 | 38 | 39 | About | SocialHub 40 | 41 | 42 |
43 |
44 | 45 | 59 |
60 |
61 |
62 |
63 |

About Us-

64 |
65 |

66 | Welcome to SocialHub, an open-source project with a simple yet 67 | powerful goal: to create innovative "About Me" pages that foster 68 | meaningful connections among users. 😃
69 | 70 |

    71 |
  • 72 | This repository aims to help code beginners with their first 73 | successful pull request and open source contribution. 🤝: 🚀 74 |
    • 75 |
  • 76 | Feel free to use this project to make your first contribution to an 77 | open-source project on GitHub. Practice making your first pull 78 | request to a public repository before doing the real thing! 🚀 79 |
    • 80 |
  • 81 | Make sure to grab amazing knowledge during Hacktoberfest by getting 82 | involved in the open-source community. This repository is open to 83 | all members of the GitHub community. Any member can contribute to 84 | this project! ❤️ 85 |
    • 86 |
87 | 88 |

89 |
90 |
91 |
92 | 117 | 118 | 119 | -------------------------------------------------------------------------------- /assets/Akhil Mahajan.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CareerDevelopmentHub/SocialHub/46ea8dbce367a3cd7b7e92686f9e2c085dabbca5/assets/Akhil Mahajan.jpg -------------------------------------------------------------------------------- /assets/Font/Titania-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CareerDevelopmentHub/SocialHub/46ea8dbce367a3cd7b7e92686f9e2c085dabbca5/assets/Font/Titania-Regular.ttf -------------------------------------------------------------------------------- /assets/Honeshwar/Honeshwar's Resume.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CareerDevelopmentHub/SocialHub/46ea8dbce367a3cd7b7e92686f9e2c085dabbca5/assets/Honeshwar/Honeshwar's Resume.pdf -------------------------------------------------------------------------------- /assets/Honeshwar/honeshwar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CareerDevelopmentHub/SocialHub/46ea8dbce367a3cd7b7e92686f9e2c085dabbca5/assets/Honeshwar/honeshwar.png -------------------------------------------------------------------------------- /assets/Nishant.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CareerDevelopmentHub/SocialHub/46ea8dbce367a3cd7b7e92686f9e2c085dabbca5/assets/Nishant.jpg -------------------------------------------------------------------------------- /assets/Pratik/aboutPratik.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CareerDevelopmentHub/SocialHub/46ea8dbce367a3cd7b7e92686f9e2c085dabbca5/assets/Pratik/aboutPratik.jpeg -------------------------------------------------------------------------------- /assets/Pratik/facebook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CareerDevelopmentHub/SocialHub/46ea8dbce367a3cd7b7e92686f9e2c085dabbca5/assets/Pratik/facebook.png -------------------------------------------------------------------------------- /assets/Pratik/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CareerDevelopmentHub/SocialHub/46ea8dbce367a3cd7b7e92686f9e2c085dabbca5/assets/Pratik/github.png -------------------------------------------------------------------------------- /assets/Pratik/instagram.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CareerDevelopmentHub/SocialHub/46ea8dbce367a3cd7b7e92686f9e2c085dabbca5/assets/Pratik/instagram.png -------------------------------------------------------------------------------- /assets/Pratik/linkedin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CareerDevelopmentHub/SocialHub/46ea8dbce367a3cd7b7e92686f9e2c085dabbca5/assets/Pratik/linkedin.png -------------------------------------------------------------------------------- /assets/Pratik/me_image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CareerDevelopmentHub/SocialHub/46ea8dbce367a3cd7b7e92686f9e2c085dabbca5/assets/Pratik/me_image.png -------------------------------------------------------------------------------- /assets/Pratik/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CareerDevelopmentHub/SocialHub/46ea8dbce367a3cd7b7e92686f9e2c085dabbca5/assets/Pratik/twitter.png -------------------------------------------------------------------------------- /assets/Pratik/youtube.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CareerDevelopmentHub/SocialHub/46ea8dbce367a3cd7b7e92686f9e2c085dabbca5/assets/Pratik/youtube.png -------------------------------------------------------------------------------- /assets/Shubham/Shubham.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CareerDevelopmentHub/SocialHub/46ea8dbce367a3cd7b7e92686f9e2c085dabbca5/assets/Shubham/Shubham.png -------------------------------------------------------------------------------- /assets/Shubham/Shubham1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CareerDevelopmentHub/SocialHub/46ea8dbce367a3cd7b7e92686f9e2c085dabbca5/assets/Shubham/Shubham1.jpg -------------------------------------------------------------------------------- /assets/Shubham/SocialHub.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CareerDevelopmentHub/SocialHub/46ea8dbce367a3cd7b7e92686f9e2c085dabbca5/assets/Shubham/SocialHub.png -------------------------------------------------------------------------------- /assets/Sonu/SonuHack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CareerDevelopmentHub/SocialHub/46ea8dbce367a3cd7b7e92686f9e2c085dabbca5/assets/Sonu/SonuHack.png -------------------------------------------------------------------------------- /assets/Sonu/sonuk.jpg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CareerDevelopmentHub/SocialHub/46ea8dbce367a3cd7b7e92686f9e2c085dabbca5/assets/Sonu/sonuk.jpg.jpg -------------------------------------------------------------------------------- /assets/amaanwarsi.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CareerDevelopmentHub/SocialHub/46ea8dbce367a3cd7b7e92686f9e2c085dabbca5/assets/amaanwarsi.jpg -------------------------------------------------------------------------------- /assets/cj-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CareerDevelopmentHub/SocialHub/46ea8dbce367a3cd7b7e92686f9e2c085dabbca5/assets/cj-logo.png -------------------------------------------------------------------------------- /assets/ck.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CareerDevelopmentHub/SocialHub/46ea8dbce367a3cd7b7e92686f9e2c085dabbca5/assets/ck.png -------------------------------------------------------------------------------- /assets/femaleicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CareerDevelopmentHub/SocialHub/46ea8dbce367a3cd7b7e92686f9e2c085dabbca5/assets/femaleicon.png -------------------------------------------------------------------------------- /assets/harshsinghcs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CareerDevelopmentHub/SocialHub/46ea8dbce367a3cd7b7e92686f9e2c085dabbca5/assets/harshsinghcs.png -------------------------------------------------------------------------------- /assets/hp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CareerDevelopmentHub/SocialHub/46ea8dbce367a3cd7b7e92686f9e2c085dabbca5/assets/hp.png -------------------------------------------------------------------------------- /assets/images 3.JPEG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CareerDevelopmentHub/SocialHub/46ea8dbce367a3cd7b7e92686f9e2c085dabbca5/assets/images 3.JPEG -------------------------------------------------------------------------------- /assets/kom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CareerDevelopmentHub/SocialHub/46ea8dbce367a3cd7b7e92686f9e2c085dabbca5/assets/kom.png -------------------------------------------------------------------------------- /assets/level.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CareerDevelopmentHub/SocialHub/46ea8dbce367a3cd7b7e92686f9e2c085dabbca5/assets/level.jpg -------------------------------------------------------------------------------- /assets/mahendra.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CareerDevelopmentHub/SocialHub/46ea8dbce367a3cd7b7e92686f9e2c085dabbca5/assets/mahendra.jpg -------------------------------------------------------------------------------- /assets/nabin.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CareerDevelopmentHub/SocialHub/46ea8dbce367a3cd7b7e92686f9e2c085dabbca5/assets/nabin.jpg -------------------------------------------------------------------------------- /assets/nabin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CareerDevelopmentHub/SocialHub/46ea8dbce367a3cd7b7e92686f9e2c085dabbca5/assets/nabin.png -------------------------------------------------------------------------------- /assets/sai_binayak.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CareerDevelopmentHub/SocialHub/46ea8dbce367a3cd7b7e92686f9e2c085dabbca5/assets/sai_binayak.jpg -------------------------------------------------------------------------------- /assets/samyak.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CareerDevelopmentHub/SocialHub/46ea8dbce367a3cd7b7e92686f9e2c085dabbca5/assets/samyak.jpg -------------------------------------------------------------------------------- /assets/somnath/Cloud.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CareerDevelopmentHub/SocialHub/46ea8dbce367a3cd7b7e92686f9e2c085dabbca5/assets/somnath/Cloud.png -------------------------------------------------------------------------------- /assets/somnath/Github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CareerDevelopmentHub/SocialHub/46ea8dbce367a3cd7b7e92686f9e2c085dabbca5/assets/somnath/Github.png -------------------------------------------------------------------------------- /assets/somnath/Insta.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CareerDevelopmentHub/SocialHub/46ea8dbce367a3cd7b7e92686f9e2c085dabbca5/assets/somnath/Insta.png -------------------------------------------------------------------------------- /assets/somnath/Linkedin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CareerDevelopmentHub/SocialHub/46ea8dbce367a3cd7b7e92686f9e2c085dabbca5/assets/somnath/Linkedin.png -------------------------------------------------------------------------------- /assets/somnath/SomnathImg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CareerDevelopmentHub/SocialHub/46ea8dbce367a3cd7b7e92686f9e2c085dabbca5/assets/somnath/SomnathImg.jpg -------------------------------------------------------------------------------- /assets/somnath/Twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CareerDevelopmentHub/SocialHub/46ea8dbce367a3cd7b7e92686f9e2c085dabbca5/assets/somnath/Twitter.png -------------------------------------------------------------------------------- /assets/somnath/somnath.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CareerDevelopmentHub/SocialHub/46ea8dbce367a3cd7b7e92686f9e2c085dabbca5/assets/somnath/somnath.jpeg -------------------------------------------------------------------------------- /assets/subha_holopin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CareerDevelopmentHub/SocialHub/46ea8dbce367a3cd7b7e92686f9e2c085dabbca5/assets/subha_holopin.png -------------------------------------------------------------------------------- /assets/suhani.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CareerDevelopmentHub/SocialHub/46ea8dbce367a3cd7b7e92686f9e2c085dabbca5/assets/suhani.png -------------------------------------------------------------------------------- /assets/sulagna.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CareerDevelopmentHub/SocialHub/46ea8dbce367a3cd7b7e92686f9e2c085dabbca5/assets/sulagna.png -------------------------------------------------------------------------------- /assets/vivekk.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CareerDevelopmentHub/SocialHub/46ea8dbce367a3cd7b7e92686f9e2c085dabbca5/assets/vivekk.jpg -------------------------------------------------------------------------------- /contact.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --dark: #374151; 3 | --darker: #1f2937; 4 | --darkest: #111827; 5 | --gray: #aeb2ba; 6 | --pink: #ec4899; 7 | --purple: #8b5cf6; 8 | --cyan: #00ffff; 9 | } 10 | .contact { 11 | width: 100%; 12 | min-height: inherit; 13 | margin-top: 64px; 14 | display: flex; 15 | justify-content: center; 16 | align-items: center; 17 | 18 | .form-group { 19 | margin-bottom: 15px; 20 | } 21 | .form-group label { 22 | display: block; 23 | margin-bottom: 5px; 24 | } 25 | .form-group input, 26 | .form-group textarea { 27 | width: 100%; 28 | padding: 10px; 29 | box-sizing: border-box; 30 | background-color: var(--darker); 31 | font-family: "Fira Sans"; 32 | font-weight: 600; 33 | font-size: 1.25rem; 34 | border-radius: 1rem; 35 | color: var(--gray); 36 | border: none; 37 | } 38 | .form-group button { 39 | padding: 10px 20px; 40 | background: linear-gradient(to right, var(--pink), var(--purple)); 41 | font-family: "Inter", sans-serif; 42 | font-weight: 600; 43 | font-size: 1.2rem; 44 | color: #fff; 45 | border: none; 46 | border-radius: 1rem; 47 | cursor: pointer; 48 | } 49 | .form-group button:hover, 50 | .form-group button:focus, 51 | .form-group button:active { 52 | cursor: pointer; 53 | border-radius: 1rem; 54 | background: linear-gradient(to right, var(--cyan), var(--pink)); 55 | color: white; 56 | border: none; 57 | border-radius: 5px; 58 | box-shadow: 0 0 20px rgba(249, 104, 203, 0.5); 59 | -webkit-transform: scale(1.1); 60 | transform: scale(1.1); 61 | } 62 | } 63 | main { 64 | background: var(--dark); 65 | height: 39rem; 66 | width: 75%; 67 | padding: 3rem; 68 | padding-top: 2rem; 69 | padding-right: 2rem; 70 | border-radius: 12px; 71 | margin-bottom: 20px; 72 | backdrop-filter: blur(8px); 73 | box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); 74 | } 75 | .heading { 76 | font-size: 40px; 77 | color: var(--gray); 78 | font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", 79 | sans-serif; 80 | } 81 | .contactinfo { 82 | font-size: 18px; 83 | font-family: cursive; 84 | font-style: italic; 85 | color: var(--gray); 86 | } 87 | .navbar-brand { 88 | font-family: "Young Serif", serif; 89 | font-size: 5vh; 90 | color: black; 91 | } 92 | .navbar-nav { 93 | color: black; 94 | display: flex; 95 | width: 100%; 96 | justify-content: end; 97 | } 98 | .navbar { 99 | color: black; 100 | padding: 1vh 1vw; 101 | } 102 | header { 103 | padding: 20px; 104 | } 105 | nav { 106 | display: flex; 107 | justify-content: space-evenly; 108 | } 109 | 110 | @media (max-width: 768px) { 111 | .contact { 112 | margin: 40px 0px; 113 | height: auto; 114 | } 115 | main { 116 | width: 90%; 117 | margin: 10px; 118 | } 119 | .heading { 120 | font-size: 30px; 121 | } 122 | .navbar-brand { 123 | font-size: 3vh; 124 | } 125 | .navbar-nav { 126 | flex-direction: column; 127 | } 128 | } 129 | -------------------------------------------------------------------------------- /contact.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 8 | 11 | 14 | 17 | 18 | 21 | 25 | 28 | 29 | 34 | 35 | 40 | 43 | 44 | ContactUs | SocialHub 45 | 46 | 47 |
48 |
49 | 89 |
90 |
91 |
92 |
93 |

Contact Us:

94 |
95 |
98 |
99 | 100 | 105 |
106 |
107 | 108 | 113 |
114 |
115 | 116 | 121 |
122 |
123 | 124 |
125 |
126 |
127 |
128 |
129 | 152 | 153 | 154 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | const numbers = ['one', 'two', 'four', 'five'] 2 | 3 | numbers.splice(2, 0,'three'); 4 | 5 | console.log(numbers) -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, sans-serif; 3 | min-height: 100vh; 4 | margin: 0; 5 | padding: 0; 6 | background: #aa4b6b; /* fallback for old browsers */ 7 | background: -webkit-linear-gradient( 8 | to right, 9 | #3b8d99, 10 | #6b6b83, 11 | #aa4b6b 12 | ); /* Chrome 10-25, Safari 5.1-6 */ 13 | background: linear-gradient(to right, #3b8d99, #6b6b83, #aa4b6b); 14 | } 15 | .navbar-brand { 16 | font-family: "Young Serif", serif; 17 | font-size: 5vh !important; 18 | color: black !important; 19 | } 20 | .navbar-nav { 21 | color: black; 22 | display: flex; 23 | width: 100%; 24 | justify-content: end; 25 | align-items: center; 26 | } 27 | .navbar { 28 | color: black; 29 | padding: 0 15px 0 15px; 30 | backdrop-filter: blur(12px); 31 | box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); 32 | min-height: 64px; 33 | } 34 | header { 35 | 36 | 37 | background-image: linear-gradient(to right top, rgb(239, 191, 219), #7f9de2, rgb(239, 191, 219)); 38 | color: #000000; 39 | padding: 20px; 40 | 41 | padding: 20px; 42 | } 43 | nav { 44 | display: flex; 45 | justify-content: space-evenly; 46 | 47 | 48 | padding: 20px; 49 | } 50 | nav { 51 | display: flex; 52 | justify-content: space-evenly; 53 | 54 | } 55 | nav ul { 56 | list-style: none; 57 | padding: 0; 58 | margin: 0; 59 | } 60 | nav li { 61 | display: inline-block; 62 | } 63 | .nav-item { 64 | color: #000; 65 | text-decoration: none; 66 | margin-right: 4px; 67 | font-size: larger; 68 | font-weight: 600; 69 | } 70 | nav a:hover{ 71 | text-decoration: none; 72 | } 73 | .hero { 74 | 75 | background-size: cover; 76 | color: #000000; 77 | display: flex; 78 | flex-direction: column; 79 | justify-content: center; 80 | align-items: center; 81 | height: 100vh; 82 | text-align: center; 83 | 84 | 85 | background-size: cover; 86 | color: #000000; 87 | display: flex; 88 | flex-direction: column; 89 | justify-content: center; 90 | align-items: center; 91 | height: 100vh; 92 | text-align: center; 93 | 94 | } 95 | .srout{ 96 | position: relative; 97 | bottom:35px; 98 | border-radius: 50%; 99 | } 100 | .hero h1 { 101 | font-size: 4rem; 102 | margin: 0; 103 | } 104 | .hero p { 105 | font-size: 1.5rem; 106 | margin: 20px 0; 107 | } 108 | .second { 109 | color: #000000; 110 | display: flex; 111 | flex-direction: column; 112 | justify-content: center; 113 | align-items: center; 114 | text-align: center; 115 | } 116 | .second h1 { 117 | font-size: 4rem; 118 | margin: 0; 119 | } 120 | .second p { 121 | font-size: 1.5rem; 122 | margin: 20px 0; 123 | } 124 | .hero button { 125 | background-color: #000; 126 | border: none; 127 | border-radius: 5px; 128 | color: #fff; 129 | font-size: 1.2rem; 130 | padding: 10px 20px; 131 | cursor: pointer; 132 | } 133 | .hero button:hover { 134 | background-color: #333; 135 | color: #fff; 136 | } 137 | .about-me { 138 | 139 | 140 | border: 1px solid #ddd; 141 | 142 | padding: 20px; 143 | margin-bottom: 20px; 144 | display: flex; 145 | align-items: center; 146 | justify-content: center; 147 | flex-wrap: wrap; 148 | flex-basis: 20%; 149 | 150 | } 151 | .content 152 | { 153 | background-color: rgba(181, 221, 248, 0.7); /* Adjust the alpha value for transparency */ 154 | border: 1px solid #ffffff; 155 | padding: 20px; 156 | margin: 30px; 157 | width: 250px; 158 | height: 400px; 159 | text-align: center; 160 | transition: all 0.3s ease; 161 | color: rgb(0, 0, 0); 162 | backdrop-filter: blur(10px); 163 | } 164 | #rowTwo{ 165 | height: 420px; 166 | } 167 | .content:hover { 168 | transform: translateY(0); 169 | box-shadow: inset 0 0 60px #8ef6ff, 170 | inset 20px 0 80px rgb(179, 106, 239), 171 | inset -20px 0 80px #fefffe, 172 | inset 20px 0 300px #bcf3ff, 173 | inset -20px 0 300px #74e8db, 174 | 0 0 50px #ffeeee, 175 | -10px 0 80px rgb(128, 193, 237), 176 | 10px 0 60px #dab7f1; 177 | } 178 | 179 | 180 | 181 | .content img{ 182 | width: 200px; 183 | height: 200px; 184 | } 185 | 186 | footer{ 187 | position: relative; 188 | bottom: 0; 189 | left: 0; 190 | right: 0; 191 | background: #333; 192 | height: auto; 193 | width: 100%; 194 | font-family: Arial, sans-serif; 195 | padding-top: 40px; 196 | color: #fff; 197 | } 198 | .footer-content{ 199 | display: flex; 200 | align-items: center; 201 | justify-content: center; 202 | flex-direction: column; 203 | text-align: center; 204 | } 205 | .footer-content h3{ 206 | margin: 0; 207 | font-size: 1.8rem; 208 | font-weight: 400; 209 | text-transform: capitalize; 210 | line-height: 3rem; 211 | } 212 | .footer-content p{ 213 | max-width: 500px; 214 | margin: 10px auto; 215 | line-height: 28px; 216 | font-size: 14px; 217 | } 218 | .socials{ 219 | padding: 0; 220 | list-style: none; 221 | display: flex; 222 | align-items: center; 223 | justify-content: center; 224 | margin: 1rem 0 3rem 0; 225 | } 226 | .socials li{ 227 | margin: 0 20px; 228 | } 229 | .socials a{ 230 | text-decoration: none; 231 | color: #fff; 232 | } 233 | .socials a i{ 234 | font-size: 1.1rem; 235 | transition: color .4s ease; 236 | } 237 | .socials a:hover i{ 238 | color: aqua; 239 | 240 | border: 1px solid #ddd; 241 | padding: 20px; 242 | margin-bottom: 20px; 243 | display: flex; 244 | align-items: center; 245 | justify-content: center; 246 | flex-wrap: wrap; 247 | flex-basis: 20%; 248 | 249 | } 250 | .content { 251 | display: flex; 252 | flex-direction: column; 253 | align-items: center; 254 | justify-content: center; 255 | background-color: #fff; 256 | backdrop-filter: blur(10px); 257 | padding: 20px; 258 | margin: 30px; 259 | width: 250px; 260 | height: 425px; 261 | text-align: center; 262 | border-radius: 0.25rem; 263 | color: rgb(0, 0, 0); 264 | box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); 265 | } 266 | 267 | .navbar-nav a:hover { 268 | transition: 0.25s; 269 | color: rgb(128, 193, 237); 270 | } 271 | .content:hover { 272 | 273 | transform: translateY(0); 274 | box-shadow: inset 0 0 60px #8ef6ff, inset 20px 0 80px rgb(186, 127, 235), 275 | inset -20px 0 80px #fefffe, inset 20px 0 300px #bcf3ff, 276 | inset -20px 0 300px #74e8db, 0 0 50px #ffeeee, 277 | -10px 0 80px rgb(128, 193, 237), 10px 0 60px #dab7f1; 278 | 279 | 280 | cursor: default; 281 | transform: translateY(0); 282 | box-shadow: 0 0 25px #ffeeee, -10px 0 40px rgb(128, 193, 237), 283 | 10px 0 60px #dab7f1; 284 | transition: 0.25s; 285 | transform: scale(1.05); 286 | background: #aa4b6b; /* fallback for old browsers */ 287 | background: -webkit-linear-gradient( 288 | #3b8d99, 289 | #6b6b83, 290 | #aa4b6b 291 | ); /* Chrome 10-25, Safari 5.1-6 */ 292 | background: linear-gradient(#3b8d99, #6b6b83, #aa4b6b); 293 | } 294 | 295 | .content h2 { 296 | margin-top: 10px; 297 | font-weight: bold; 298 | 299 | } 300 | 301 | .content img { 302 | width: 200px; 303 | height: 200px; 304 | } 305 | footer { 306 | background-color: #333; 307 | color: #fff; 308 | padding: 10px; 309 | text-align: center; 310 | } 311 | .socials { 312 | display: flex; 313 | justify-content: center; 314 | } 315 | .fa { 316 | padding: 0.5vw; 317 | } 318 | 319 | .scrollToTop { 320 | position: absolute; 321 | bottom: 60%; 322 | right: 6%; 323 | background-color: #ffffff; 324 | border: none; 325 | padding: 1px; 326 | border-radius: 50%; 327 | cursor: pointer; 328 | display: flex; 329 | align-items: center; 330 | } 331 | .footer-content a img{ 332 | width: 50px; 333 | height: 50px; 334 | } 335 | 336 | @media(max-width: 574px) { 337 | .scrollToTop{ 338 | bottom: 35%; 339 | } 340 | .footer-content a img{ 341 | width: 35px; 342 | height: 35px; 343 | } 344 | } 345 | --------------------------------------------------------------------------------