├── README.md ├── images ├── bg.png ├── favicon.ico ├── profile1.jpg ├── profile2.jpg ├── profile3.jpg ├── profile4.jpg └── profile5.jpg ├── index.html ├── index.js ├── screenshot.png └── styles.css /README.md: -------------------------------------------------------------------------------- 1 | # RESPONSIVE Personal PORTFOLIO Website HTML CSS And JAVASCRIPT 2 | 3 | ## Video (https://youtu.be/J8g9gyzhEoM) 4 | 5 | !["RESPONSIVE Personal PORTFOLIO Website HTML CSS And JAVASCRIPT"](https://raw.githubusercontent.com/ziddahedem/portfolio2/master/screenshot.png "RESPONSIVE Personal PORTFOLIO Website HTML CSS And JAVASCRIPT") 6 | -------------------------------------------------------------------------------- /images/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/portfolio2/f76593ac49f970e8a13997e655d06c89fdfc3fe3/images/bg.png -------------------------------------------------------------------------------- /images/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/portfolio2/f76593ac49f970e8a13997e655d06c89fdfc3fe3/images/favicon.ico -------------------------------------------------------------------------------- /images/profile1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/portfolio2/f76593ac49f970e8a13997e655d06c89fdfc3fe3/images/profile1.jpg -------------------------------------------------------------------------------- /images/profile2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/portfolio2/f76593ac49f970e8a13997e655d06c89fdfc3fe3/images/profile2.jpg -------------------------------------------------------------------------------- /images/profile3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/portfolio2/f76593ac49f970e8a13997e655d06c89fdfc3fe3/images/profile3.jpg -------------------------------------------------------------------------------- /images/profile4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/portfolio2/f76593ac49f970e8a13997e655d06c89fdfc3fe3/images/profile4.jpg -------------------------------------------------------------------------------- /images/profile5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/portfolio2/f76593ac49f970e8a13997e655d06c89fdfc3fe3/images/profile5.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 13 | 14 | 18 | 19 | 23 | 24 | 25 | Portfolio Website 26 | 27 | 28 | 29 |

30 | 31 |

32 |

33 |

34 |

YouTuber.

35 |

36 | 37 |

38 |

39 |

40 |

YouTuber.

41 |

42 |

43 | 44 |

45 |

46 | 47 |

67 |

68 | 69 |

70 | 71 |

72 |

73 |

74 | 75 |

76 |

Hello, my name is

77 |

Alexandar Smith

78 |

And I'm a

79 | Hire me 80 |

81 | 82 | 83 | 84 |

85 | 86 | 87 | 88 |

89 |

90 | 91 | 92 |

93 |

94 |

About me

95 |

96 | 97 |

98 |

99 |

100 |

101 |

102 |

I'm Alexandar a

103 |

104 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores 105 | placeat inventore rerum tempore cupiditate, amet adipisci aut eius 106 | facilis quisquam magni ratione maxime officiis earum blanditiis 107 | magnam illum obcaecati vero? Odit ipsa facilis officiis fuga 108 | voluptate similique sunt exercitationem voluptatibus, illo et fugit 109 | eveniet provident quo atque, nesciunt explicabo tenetur! 110 |

111 | Download CV 112 |

113 |

114 |

115 | 116 | 117 |

118 |

119 |

My Services

120 |

121 | 122 |

123 |

124 | 125 |

Web Design

126 |

127 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore 128 | exercitationem numquam porro asperiores neque architecto. 129 |

130 |

131 | 132 |

133 | 134 |

Advertising

135 |

136 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore 137 | exercitationem numquam porro asperiores neque architecto. 138 |

139 |

140 | 141 |

142 | 143 |

Apps Design

144 |

145 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore 146 | exercitationem numquam porro asperiores neque architecto. 147 |

148 |

149 |

150 |

151 | 152 | 153 |

154 |

155 |

My Skills

156 |

157 | 158 |

159 |

160 |

161 |

HTML5

162 |

163 |

164 | 95% 165 |

166 |

167 |

168 |

CSS

169 |

170 |

171 | 85% 172 |

173 |

174 |

175 |

JavaScript

176 |

177 |

178 | 90% 179 |

180 |

181 |

182 |

Nodejs

183 |

184 |

185 | 80% 186 |

187 |

188 | 189 |

190 |

Mongodb

191 |

192 |

193 | 95% 194 |

195 |

196 |

197 | 198 |

199 |

My creative skills and experience

200 |

201 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam 202 | tempora distinctio sed. Animi, doloribus est. Suscipit praesentium 203 | tenetur libero eos! Suscipit voluptatem qui, nulla accusantium 204 | deleniti nam recusandae officiis possimus at voluptate cupiditate 205 | soluta nostrum deserunt consequuntur, ut quis eligendi? Quidem et 206 | doloremque cupiditate veniam optio corporis voluptatum, animi nemo! 207 |

208 | Read more 209 |

210 |

211 |

212 | 213 | 214 |

215 |

216 |

My teams

217 |

218 | 219 |

220 |

221 |

222 |

224 |
225 |
226 | 227 |
228 |
Someone name
229 |
230 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. 231 | Libero, quo? 232 |
233 |
234 |
236 |
237 |
238 | 239 |
240 |
Someone name
241 |
242 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. 243 | Libero, quo? 244 |
245 |
246 |
248 |
249 |
250 | 251 |
252 |
Someone name
253 |
254 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. 255 | Libero, quo? 256 |
257 |
258 |
260 |
261 |
262 | 263 |
264 |
Someone name
265 |
266 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. 267 | Libero, quo? 268 |
269 |
270 |
272 |
273 |
274 | 275 |
276 |
Someone name
277 |
278 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. 279 | Libero, quo? 280 |
281 |
282 |
284 |
285 |
286 | 287 |
288 |
Someone name
289 |
290 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. 291 | Libero, quo? 292 |
293 |
294 |

296 |

297 |

298 |

299 |

300 | 301 | 302 |

303 |

304 |

Contact me

305 |

306 | 307 |

308 |

309 |

Get in Touch

310 |

311 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum 312 | praesentium quibusdam ratione, cum ducimus minus iure saepe ipsum 313 | repudiandae. Cum adipisci cumque dicta suscipit fuga aliquid 314 | blanditiis quo quia vitae. 315 |

316 |

317 | 318 | 319 |

Name

320 | Alexandar Smith 321 | 322 |

323 | 324 |

325 | 326 | 327 |

Address

328 | United States 329 | 330 |

331 | 332 |

333 | 334 | 335 |

Email

336 | youtube@gmail.com 337 | 338 |

339 |

340 |

341 | 356 |

357 |

358 |

359 | 360 | 363 | 364 | 365 | 366 | 367 | 368 | 369 | 370 | 371 | 372 | 373 | 374 | 375 | 376 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | AOS.init(); 2 | 3 | const menu = document.querySelector(".menu"); 4 | const navOpen = document.querySelector(".hamburger"); 5 | const navClose = document.querySelector(".close"); 6 | 7 | const navLeft = menu.getBoundingClientRect().left; 8 | navOpen.addEventListener("click", () => { 9 | if (navLeft < 0) { 10 | menu.classList.add("show"); 11 | document.body.classList.add("show"); 12 | navBar.classList.add("show"); 13 | } 14 | }); 15 | 16 | navClose.addEventListener("click", () => { 17 | if (navLeft < 0) { 18 | menu.classList.remove("show"); 19 | document.body.classList.remove("show"); 20 | navBar.classList.remove("show"); 21 | } 22 | }); 23 | 24 | // Fixed Nav 25 | const navBar = document.querySelector(".nav"); 26 | const navHeight = navBar.getBoundingClientRect().height; 27 | window.addEventListener("scroll", () => { 28 | const scrollHeight = window.pageYOffset; 29 | if (scrollHeight > navHeight) { 30 | navBar.classList.add("fix-nav"); 31 | } else { 32 | navBar.classList.remove("fix-nav"); 33 | } 34 | }); 35 | 36 | // Scroll To 37 | const links = [...document.querySelectorAll(".scroll-link")]; 38 | links.map(link => { 39 | link.addEventListener("click", e => { 40 | e.preventDefault(); 41 | 42 | const id = e.target.getAttribute("href").slice(1); 43 | const element = document.getElementById(id); 44 | const fixNav = navBar.classList.contains("fix-nav"); 45 | let position = element.offsetTop - navHeight; 46 | 47 | window.scrollTo({ 48 | top: position, 49 | left: 0, 50 | }); 51 | 52 | navBar.classList.remove("show"); 53 | menu.classList.remove("show"); 54 | document.body.classList.remove("show"); 55 | }); 56 | }); 57 | 58 | new TypeIt("#type1", { 59 | speed: 120, 60 | loop: true, 61 | waitUntilVisible: true, 62 | }) 63 | .type("Designer", { delay: 400 }) 64 | .pause(500) 65 | .delete(9) 66 | .type("Developer", { delay: 400 }) 67 | .pause(500) 68 | .delete(9) 69 | .go(); 70 | 71 | new TypeIt("#type2", { 72 | speed: 120, 73 | loop: true, 74 | waitUntilVisible: true, 75 | }) 76 | .type("Designer", { delay: 400 }) 77 | .pause(500) 78 | .delete(9) 79 | .type("Developer", { delay: 400 }) 80 | .pause(500) 81 | .delete(9) 82 | .go(); 83 | 84 | gsap.from(".logo", { opacity: 0, duration: 1, delay: 0.5, y: -10 }); 85 | gsap.from(".hamburger", { opacity: 0, duration: 1, delay: 1, x: 20 }); 86 | gsap.from(".banner", { opacity: 0, duration: 1, delay: 1.5, x: -200 }); 87 | gsap.from(".hero h3", { opacity: 0, duration: 1, delay: 2, y: -50 }); 88 | gsap.from(".hero h1", { opacity: 0, duration: 1, delay: 2.5, y: -45 }); 89 | gsap.from(".hero h4", { opacity: 0, duration: 1, delay: 3, y: -30 }); 90 | gsap.from(".hero a", { opacity: 0, duration: 1, delay: 3.5, y: 50 }); 91 | gsap.from(".nav-item", { 92 | opacity: 0, 93 | duration: 1, 94 | delay: 1.2, 95 | y: 30, 96 | stagger: 0.2, 97 | }); 98 | gsap.from(".icons span", { 99 | opacity: 0, 100 | duration: 1, 101 | delay: 4, 102 | x: -30, 103 | stagger: 0.2, 104 | }); 105 | 106 | const glide = document.querySelector(".glide"); 107 | if (glide) 108 | new Glide(glide, { 109 | type: "carousel", 110 | startAt: 0, 111 | perView: 3, 112 | gap: 30, 113 | hoverpause: true, 114 | autoplay: 2000, 115 | animationDuration: 800, 116 | animationTimingFunc: "cubic-bezier(0.165, 0.840, 0.440, 1.000)", 117 | breakpoints: { 118 | 996: { 119 | perView: 2, 120 | }, 121 | 768: { 122 | perView: 1, 123 | }, 124 | }, 125 | }).mount(); 126 | -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/portfolio2/f76593ac49f970e8a13997e655d06c89fdfc3fe3/screenshot.png -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: inherit; 7 | } 8 | 9 | html { 10 | scroll-behavior: smooth; 11 | box-sizing: border-box; 12 | font-size: 62.5%; 13 | } 14 | 15 | body { 16 | font-family: "Poppins", sans-serif; 17 | font-size: 1.6rem; 18 | font-weight: 400; 19 | background-color: #fff; 20 | color: #000; 21 | position: relative; 22 | z-index: 1; 23 | } 24 | 25 | h1, 26 | h2, 27 | h3, 28 | h4 { 29 | font-weight: 500; 30 | } 31 | 32 | a { 33 | text-decoration: none; 34 | } 35 | 36 | img { 37 | max-width: 100%; 38 | } 39 | 40 | li { 41 | list-style: none; 42 | } 43 | 44 | .container { 45 | max-width: 114rem; 46 | margin: 0 auto; 47 | } 48 | 49 | @media only screen and (max-width: 1200px) { 50 | .container { 51 | padding: 0 3rem; 52 | } 53 | } 54 | 55 | /* Header */ 56 | .header { 57 | position: relative; 58 | width: 100%; 59 | min-height: 100vh; 60 | background: #000; 61 | z-index: 1; 62 | } 63 | 64 | .header img { 65 | position: absolute; 66 | right: 5%; 67 | bottom: 0; 68 | width: 60rem; 69 | z-index: -1; 70 | } 71 | 72 | @media only screen and (max-width: 996px) { 73 | .header { 74 | min-height: 60vh; 75 | } 76 | 77 | .header img { 78 | width: 50rem; 79 | } 80 | } 81 | 82 | @media only screen and (max-width: 768px) { 83 | .header img { 84 | width: 40rem; 85 | } 86 | } 87 | 88 | @media only screen and (max-width: 567px) { 89 | .header { 90 | min-height: 100vh; 91 | } 92 | 93 | .header img { 94 | width: 35rem; 95 | } 96 | } 97 | 98 | .nav { 99 | padding: 1.6rem 0; 100 | } 101 | 102 | .nav.fix-nav { 103 | position: fixed; 104 | top: 0; 105 | left: 0; 106 | width: 100%; 107 | background-color: #dd9a05; 108 | box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); 109 | z-index: 999; 110 | } 111 | 112 | .navigation { 113 | display: flex; 114 | align-items: center; 115 | justify-content: space-between; 116 | } 117 | 118 | .logo h1 { 119 | font-size: 2.5rem; 120 | color: #fff; 121 | } 122 | 123 | .logo h1 span { 124 | font-weight: bold; 125 | color: #dd9a05; 126 | } 127 | 128 | .nav-list { 129 | display: flex; 130 | align-items: center; 131 | } 132 | 133 | .nav-item:not(:last-child) { 134 | margin-right: 0.5rem; 135 | } 136 | 137 | .nav-link:link, 138 | .nav-link:visited { 139 | color: #fff; 140 | padding: 0.8rem 1rem; 141 | transition: all 300ms ease-in-out; 142 | } 143 | 144 | .nav-link:hover { 145 | border-radius: 0.3rem; 146 | background-color: #dd9a05; 147 | } 148 | 149 | .top-nav { 150 | display: none; 151 | } 152 | 153 | .hamburger { 154 | display: none; 155 | } 156 | 157 | @media only screen and (max-width: 768px) { 158 | .menu { 159 | position: fixed; 160 | top: 0; 161 | left: -100%; 162 | width: 80%; 163 | max-width: 40rem; 164 | height: 100%; 165 | background-color: #fff; 166 | transition: all 500ms ease-in-out; 167 | z-index: 100; 168 | } 169 | 170 | .menu.show { 171 | left: 0; 172 | } 173 | 174 | .top-nav { 175 | display: flex; 176 | align-items: center; 177 | justify-content: space-between; 178 | background-color: #dd9a05; 179 | padding: 1rem 1.6rem; 180 | } 181 | 182 | .top-nav .logo span { 183 | color: #fff; 184 | } 185 | 186 | .top-nav .close { 187 | color: #fff; 188 | font-size: 2.3rem; 189 | padding: 1rem; 190 | cursor: pointer; 191 | } 192 | 193 | .hamburger { 194 | display: block; 195 | color: #fff; 196 | font-size: 2.3rem; 197 | padding: 0.5rem; 198 | cursor: pointer; 199 | } 200 | 201 | .nav-link:link, 202 | .nav-link:visited { 203 | display: block; 204 | font-size: 1.7rem; 205 | color: #222; 206 | padding: 1rem 0; 207 | } 208 | 209 | .nav-list { 210 | flex-direction: column; 211 | align-items: start; 212 | padding: 1rem 1.6rem; 213 | } 214 | 215 | body.show::before { 216 | content: ""; 217 | position: absolute; 218 | top: 0; 219 | left: 0; 220 | width: 100%; 221 | height: 100%; 222 | background-color: rgba(0, 0, 0, 0.8); 223 | z-index: 1; 224 | } 225 | 226 | .nav.show { 227 | background-color: rgba(0, 0, 0, 0.8); 228 | } 229 | } 230 | 231 | /* Hero */ 232 | .hero { 233 | position: absolute; 234 | top: 50%; 235 | transform: translate(25%, -50%); 236 | color: #fff; 237 | } 238 | 239 | .hero h3 { 240 | font-weight: 400; 241 | } 242 | 243 | .hero h1 { 244 | font-size: 4.5rem; 245 | } 246 | 247 | .hero h4 { 248 | font-size: 2rem; 249 | } 250 | .hero h4 span { 251 | color: #dd9a05; 252 | text-decoration: underline; 253 | } 254 | 255 | .hero a:link, 256 | .hero a:visited { 257 | display: inline-block; 258 | padding: 0.8rem 2.5rem; 259 | border: 1px solid #dd9a05; 260 | background-color: #dd9a05; 261 | color: #fff; 262 | margin-top: 2rem; 263 | } 264 | 265 | .hero a:hover { 266 | background-color: transparent; 267 | } 268 | 269 | @media only screen and (max-width: 996px) { 270 | .hero { 271 | transform: translate(10%, -50%); 272 | } 273 | } 274 | 275 | @media only screen and (max-width: 768px) { 276 | .hero h1 { 277 | font-size: 4rem; 278 | } 279 | } 280 | 281 | @media only screen and (max-width: 567px) { 282 | .hero { 283 | top: 35%; 284 | transform: translate(10%, -50%); 285 | } 286 | 287 | .hero h3 { 288 | font-size: 1.6rem; 289 | } 290 | 291 | .hero h1 { 292 | font-size: 3rem; 293 | } 294 | 295 | .hero h4 { 296 | font-size: 1.6rem; 297 | } 298 | } 299 | 300 | .icons { 301 | position: absolute; 302 | bottom: 5%; 303 | left: 10%; 304 | color: #fff; 305 | } 306 | 307 | .icons span:not(:last-child) { 308 | margin-right: 1rem; 309 | } 310 | 311 | .icons span { 312 | font-size: 2rem; 313 | cursor: pointer; 314 | transition: all 300ms ease-in-out; 315 | } 316 | 317 | .icons span:hover { 318 | color: #dd9a05; 319 | } 320 | 321 | @media only screen and (max-width: 567px) { 322 | .icons { 323 | display: none; 324 | } 325 | } 326 | 327 | /* About */ 328 | 329 | .section { 330 | padding: 5rem 0 7rem 0; 331 | overflow-x: hidden; 332 | } 333 | 334 | .about { 335 | margin-top: 5rem; 336 | } 337 | 338 | .about-center { 339 | display: grid; 340 | grid-template-columns: 1fr 1.5fr; 341 | gap: 3rem 5rem; 342 | } 343 | 344 | .title { 345 | margin: 4rem 0 7rem 0; 346 | text-align: center; 347 | } 348 | 349 | .title h1 { 350 | font-size: 3rem; 351 | display: inline-block; 352 | position: relative; 353 | z-index: 0; 354 | } 355 | 356 | .title h1::after { 357 | content: ""; 358 | position: absolute; 359 | left: 50%; 360 | bottom: -20%; 361 | transform: translate(-50%, -50%); 362 | background-color: #dd9a05; 363 | width: 50%; 364 | height: 0.4rem; 365 | z-index: 1; 366 | } 367 | 368 | .left img { 369 | height: 40rem; 370 | max-width: 35rem; 371 | object-fit: cover; 372 | } 373 | 374 | .right h1 { 375 | margin-bottom: 2rem; 376 | } 377 | 378 | .right p { 379 | line-height: 2; 380 | margin-bottom: 2rem; 381 | color: #333; 382 | } 383 | 384 | .right h1 span { 385 | color: #dd9a05; 386 | } 387 | 388 | a.btn { 389 | display: inline-block; 390 | padding: 1rem 2rem; 391 | background: #dd9a05; 392 | color: #fff; 393 | border-radius: 0.5rem; 394 | border: 2px solid #dd9a05; 395 | box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1); 396 | transition: all 300ms ease-in-out; 397 | } 398 | 399 | a.btn:hover { 400 | transform: translateY(-3px); 401 | background-color: transparent; 402 | color: inherit; 403 | } 404 | 405 | a.btn:active { 406 | transform: translateY(0px); 407 | } 408 | 409 | @media only screen and (max-width: 996px) { 410 | .right h1 { 411 | font-size: 2rem; 412 | } 413 | 414 | .right p { 415 | font-size: 1.5rem; 416 | } 417 | 418 | a.btn { 419 | padding: 0.7rem 1.8rem; 420 | } 421 | 422 | .left img { 423 | height: 40rem; 424 | max-width: 25rem; 425 | } 426 | } 427 | 428 | @media only screen and (max-width: 768px) { 429 | .about-center { 430 | grid-template-columns: 1fr; 431 | gap: 3rem 0rem; 432 | } 433 | 434 | .left { 435 | text-align: center; 436 | } 437 | 438 | .left img { 439 | height: 40rem; 440 | max-width: 90%; 441 | } 442 | } 443 | 444 | /* Services */ 445 | .theme { 446 | background-color: #000; 447 | } 448 | 449 | .theme .title { 450 | color: #fff; 451 | } 452 | 453 | .services-center { 454 | display: grid; 455 | grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr)); 456 | gap: 3rem; 457 | } 458 | 459 | .service { 460 | color: #fff; 461 | background-color: #111; 462 | padding: 2rem; 463 | text-align: center; 464 | border-radius: 1rem; 465 | transition: all 300ms ease-in-out; 466 | } 467 | 468 | .service span { 469 | color: #dd9a05; 470 | font-size: 4rem; 471 | transition: all 300ms ease-in-out; 472 | } 473 | 474 | .service h2 { 475 | font-size: 1.8rem; 476 | margin-bottom: 1rem; 477 | } 478 | 479 | .service p { 480 | font-size: 1.4rem; 481 | color: #f1f1f1; 482 | } 483 | 484 | .service:hover { 485 | background-color: #dd9a05; 486 | } 487 | 488 | .service:hover span { 489 | color: #fff; 490 | } 491 | 492 | /* Skills */ 493 | 494 | .skills-box:not(:last-child) { 495 | margin-bottom: 2rem; 496 | } 497 | 498 | .skills-box h4 { 499 | font-size: 1.8rem; 500 | color: #888; 501 | font-size: 500; 502 | } 503 | 504 | .skills-box .skills-ilt { 505 | width: 100%; 506 | position: relative; 507 | height: 0.4rem; 508 | background-color: #ccc; 509 | border-radius: 0.5rem; 510 | } 511 | 512 | .skills-box .skills-bar { 513 | background-color: #dd9a05; 514 | height: 0.4rem; 515 | } 516 | 517 | .skills-box .html { 518 | width: 95%; 519 | } 520 | 521 | .skills-box .css { 522 | width: 85%; 523 | } 524 | 525 | .skills-box .javascript { 526 | width: 90%; 527 | } 528 | 529 | .skills-box .nodejs { 530 | width: 80%; 531 | } 532 | 533 | .skills-box .mongodb { 534 | width: 95%; 535 | } 536 | 537 | .skills-box span { 538 | position: absolute; 539 | bottom: 10%; 540 | right: 0; 541 | font-size: 1.4rem; 542 | } 543 | 544 | .skills-center { 545 | display: grid; 546 | grid-template-columns: 1fr 1fr; 547 | gap: 6rem; 548 | } 549 | 550 | .right h3 { 551 | margin-bottom: 1rem; 552 | } 553 | 554 | .right p { 555 | margin-bottom: 2rem; 556 | } 557 | 558 | @media only screen and (max-width: 768px) { 559 | .skills-center { 560 | grid-template-columns: 1fr; 561 | } 562 | } 563 | 564 | /* Teams */ 565 | .team { 566 | color: #fff; 567 | background-color: #111; 568 | padding: 3rem; 569 | text-align: center; 570 | border-radius: 1rem; 571 | border-bottom: 4px solid transparent; 572 | transition: all 300ms ease-in-out; 573 | } 574 | 575 | .team .img-cover { 576 | overflow: hidden; 577 | border-radius: 100%; 578 | border: 4px solid #dd9a05; 579 | height: 13rem; 580 | width: 13rem; 581 | margin: 0 auto; 582 | transition: all 300ms ease-in-out; 583 | } 584 | 585 | .team .img-cover img { 586 | height: 100%; 587 | object-fit: cover; 588 | } 589 | 590 | .team h3 { 591 | font-size: 1.6rem; 592 | margin: 1rem 0; 593 | } 594 | 595 | .team p { 596 | font-size: 1.5rem; 597 | color: #ccc; 598 | width: 80%; 599 | margin: 0 auto 1rem auto; 600 | } 601 | 602 | .team:hover { 603 | border-bottom: 4px solid #fff; 604 | background-color: #dd9a05; 605 | } 606 | 607 | .team:hover .img-cover { 608 | border-color: #fff; 609 | } 610 | 611 | /* Contact */ 612 | .contact-center { 613 | display: grid; 614 | grid-template-columns: 1fr 1fr; 615 | gap: 3rem; 616 | } 617 | 618 | .left h2 { 619 | font-size: 2rem; 620 | } 621 | 622 | .left p { 623 | font-size: 1.5rem; 624 | margin-bottom: 2rem; 625 | } 626 | 627 | .left div { 628 | display: flex; 629 | align-items: center; 630 | margin-bottom: 1.5rem; 631 | } 632 | 633 | .left div .content { 634 | text-align: left; 635 | } 636 | 637 | .left .icon { 638 | margin-right: 2rem; 639 | font-size: 2.3rem; 640 | color: #dd9a05; 641 | } 642 | 643 | .form h2 { 644 | font-size: 2rem; 645 | margin-bottom: 1rem; 646 | } 647 | 648 | .form input, 649 | .form textarea { 650 | font-family: "Poppins", sans-serif; 651 | font-size: 1.6rem; 652 | padding: 1rem 0; 653 | text-indent: 1rem; 654 | border: 1px solid #ccc; 655 | border-radius: 0.5rem; 656 | margin-bottom: 1rem; 657 | width: 100%; 658 | outline: none; 659 | } 660 | 661 | .form .right div { 662 | display: flex; 663 | } 664 | 665 | .form .right div input { 666 | flex: 1 1 50%; 667 | } 668 | 669 | .form textarea { 670 | width: 100%; 671 | resize: vertical; 672 | margin-bottom: 3rem; 673 | } 674 | 675 | @media only screen and (max-width: 768px) { 676 | .contact-center { 677 | grid-template-columns: 1fr; 678 | } 679 | 680 | .contact-center .left { 681 | text-align: left; 682 | } 683 | 684 | .left div .content h3 { 685 | font-size: 1.6rem; 686 | } 687 | 688 | .left div .content span { 689 | font-size: 1.5rem; 690 | } 691 | } 692 | 693 | footer { 694 | background-color: #000; 695 | padding: 1.6rem 1rem; 696 | text-align: center; 697 | } 698 | 699 | footer p { 700 | color: #fff; 701 | } 702 | 703 | footer p span { 704 | color: #dd9a05; 705 | } 706 | --------------------------------------------------------------------------------

About me

I'm Alexandar a

My Services

Web Design

Advertising

Apps Design

My Skills

HTML5

CSS

JavaScript

Nodejs

Mongodb

My creative skills and experience

My teams

Someone name

Someone name

Someone name

Someone name

Someone name

Someone name

Contact me

Get in Touch

Name

Address

Email

Message me