├── preview.png ├── assets ├── img │ ├── about.jpg │ ├── perfil.png │ ├── work1.jpg │ ├── work2.jpg │ ├── work3.jpg │ ├── work4.jpg │ ├── work5.jpg │ └── work6.jpg ├── js │ └── main.js ├── css │ └── styles.css └── scss │ └── styles.scss ├── README.md └── index.html /preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bedimcode/portfolio-responsive-complete/HEAD/preview.png -------------------------------------------------------------------------------- /assets/img/about.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bedimcode/portfolio-responsive-complete/HEAD/assets/img/about.jpg -------------------------------------------------------------------------------- /assets/img/perfil.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bedimcode/portfolio-responsive-complete/HEAD/assets/img/perfil.png -------------------------------------------------------------------------------- /assets/img/work1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bedimcode/portfolio-responsive-complete/HEAD/assets/img/work1.jpg -------------------------------------------------------------------------------- /assets/img/work2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bedimcode/portfolio-responsive-complete/HEAD/assets/img/work2.jpg -------------------------------------------------------------------------------- /assets/img/work3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bedimcode/portfolio-responsive-complete/HEAD/assets/img/work3.jpg -------------------------------------------------------------------------------- /assets/img/work4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bedimcode/portfolio-responsive-complete/HEAD/assets/img/work4.jpg -------------------------------------------------------------------------------- /assets/img/work5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bedimcode/portfolio-responsive-complete/HEAD/assets/img/work5.jpg -------------------------------------------------------------------------------- /assets/img/work6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bedimcode/portfolio-responsive-complete/HEAD/assets/img/work6.jpg -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Portfolio Responsive Complete 2 | ## [Watch it on youtube](https://youtu.be/AKNvTxWOdKw) 3 | ### Portfolio Responsive Complete 4 | 5 | - Responsive Personal Portfolio Website HTML CSS & JavaScript. 6 | - Contains animations when scrolling. 7 | - Smooth scrolling in each section. 8 | - Developed first with the Mobile First methodology, then for desktop. 9 | - Compatible with all mobile devices and with a beautiful and pleasant user interface. 10 | 11 | 💙 Join the channel to see more videos like this. [Bedimcode](https://www.youtube.com/@Bedimcode) 12 | 13 | ![preview img](/preview.png) 14 | 15 | -------------------------------------------------------------------------------- /assets/js/main.js: -------------------------------------------------------------------------------- 1 | /*===== MENU SHOW =====*/ 2 | const showMenu = (toggleId, navId) =>{ 3 | const toggle = document.getElementById(toggleId), 4 | nav = document.getElementById(navId) 5 | 6 | if(toggle && nav){ 7 | toggle.addEventListener('click', ()=>{ 8 | nav.classList.toggle('show') 9 | }) 10 | } 11 | } 12 | showMenu('nav-toggle','nav-menu') 13 | 14 | /*==================== REMOVE MENU MOBILE ====================*/ 15 | const navLink = document.querySelectorAll('.nav__link') 16 | 17 | function linkAction(){ 18 | const navMenu = document.getElementById('nav-menu') 19 | // When we click on each nav__link, we remove the show-menu class 20 | navMenu.classList.remove('show') 21 | } 22 | navLink.forEach(n => n.addEventListener('click', linkAction)) 23 | 24 | /*==================== SCROLL SECTIONS ACTIVE LINK ====================*/ 25 | const sections = document.querySelectorAll('section[id]') 26 | 27 | const scrollActive = () =>{ 28 | const scrollDown = window.scrollY 29 | 30 | sections.forEach(current =>{ 31 | const sectionHeight = current.offsetHeight, 32 | sectionTop = current.offsetTop - 58, 33 | sectionId = current.getAttribute('id'), 34 | sectionsClass = document.querySelector('.nav__menu a[href*=' + sectionId + ']') 35 | 36 | if(scrollDown > sectionTop && scrollDown <= sectionTop + sectionHeight){ 37 | sectionsClass.classList.add('active-link') 38 | }else{ 39 | sectionsClass.classList.remove('active-link') 40 | } 41 | }) 42 | } 43 | window.addEventListener('scroll', scrollActive) 44 | 45 | /*===== SCROLL REVEAL ANIMATION =====*/ 46 | const sr = ScrollReveal({ 47 | origin: 'top', 48 | distance: '60px', 49 | duration: 2000, 50 | delay: 200, 51 | // reset: true 52 | }); 53 | 54 | sr.reveal('.home__data, .about__img, .skills__subtitle, .skills__text',{}); 55 | sr.reveal('.home__img, .about__subtitle, .about__text, .skills__img',{delay: 400}); 56 | sr.reveal('.home__social-icon',{ interval: 200}); 57 | sr.reveal('.skills__data, .work__img, .contact__input',{interval: 200}); 58 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Portfolio website complete 13 | 14 | 15 | 16 |
17 | 36 |
37 | 38 |
39 | 40 |
41 |
42 |

Hi,
I'am Marlon
Web Designer

43 | 44 | Contact 45 |
46 | 47 | 52 | 53 |
54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 |
64 |
65 | 66 | 67 |
68 |

About

69 | 70 |
71 |
72 | 73 |
74 | 75 |
76 |

I'am Marlon

77 |

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptate cum expedita quo culpa tempora, assumenda, quis fugiat ut voluptates soluta, aut earum nemo recusandae cumque perferendis! Recusandae alias accusamus atque.

78 |
79 |
80 |
81 | 82 | 83 |
84 |

Skills

85 | 86 |
87 |
88 |

Profesional Skills

89 |

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit optio id vero amet, alias architecto consectetur error eum eaque sit.

90 |
91 |
92 | 93 | HTML5 94 |
95 |
96 | 97 |
98 |
99 | 95% 100 |
101 |
102 |
103 |
104 | 105 | CSS3 106 |
107 |
108 | 109 |
110 |
111 | 85% 112 |
113 |
114 |
115 |
116 | 117 | JAVASCRIPT 118 |
119 |
120 | 121 |
122 |
123 | 65% 124 |
125 |
126 |
127 |
128 | 129 | UX/UI 130 |
131 |
132 | 133 |
134 |
135 | 85% 136 |
137 |
138 |
139 | 140 |
141 | 142 |
143 |
144 |
145 | 146 | 147 |
148 |

Work

149 | 150 |
151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 |
170 |
171 | 172 | 173 |
174 |

Contact

175 | 176 |
177 |
178 | 179 | 180 | 181 | 182 |
183 |
184 |
185 |
186 | 187 | 188 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | -------------------------------------------------------------------------------- /assets/css/styles.css: -------------------------------------------------------------------------------- 1 | /*===== GOOGLE FONTS =====*/ 2 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap"); 3 | /*===== VARIABLES CSS =====*/ 4 | :root { 5 | --header-height: 3rem; 6 | --font-semi: 600; 7 | /*===== Colores =====*/ 8 | /*Purple 260 - Red 355 - Blue 224 - Pink 340*/ 9 | /* HSL color mode */ 10 | --hue-color: 224; 11 | --first-color: hsl(var(--hue-color), 89%, 60%); 12 | --second-color: hsl(var(--hue-color), 56%, 12%); 13 | /*===== Fuente y tipografia =====*/ 14 | --body-font: "Poppins", sans-serif; 15 | --big-font-size: 2rem; 16 | --h2-font-size: 1.25rem; 17 | --normal-font-size: .938rem; 18 | --smaller-font-size: .75rem; 19 | /*===== Margenes =====*/ 20 | --mb-2: 1rem; 21 | --mb-4: 2rem; 22 | --mb-5: 2.5rem; 23 | --mb-6: 3rem; 24 | /*===== z index =====*/ 25 | --z-back: -10; 26 | --z-fixed: 100; 27 | } 28 | @media screen and (min-width: 968px) { 29 | :root { 30 | --big-font-size: 3.5rem; 31 | --h2-font-size: 2rem; 32 | --normal-font-size: 1rem; 33 | --smaller-font-size: .875rem; 34 | } 35 | } 36 | 37 | /*===== BASE =====*/ 38 | *, ::before, ::after { 39 | box-sizing: border-box; 40 | } 41 | 42 | html { 43 | scroll-behavior: smooth; 44 | } 45 | 46 | body { 47 | margin: var(--header-height) 0 0 0; 48 | font-family: var(--body-font); 49 | font-size: var(--normal-font-size); 50 | color: var(--second-color); 51 | } 52 | 53 | h1, h2, p { 54 | margin: 0; 55 | } 56 | 57 | ul { 58 | margin: 0; 59 | padding: 0; 60 | list-style: none; 61 | } 62 | 63 | a { 64 | text-decoration: none; 65 | } 66 | 67 | img { 68 | max-width: 100%; 69 | height: auto; 70 | display: block; 71 | } 72 | 73 | /*===== CLASS CSS ===== */ 74 | .section-title { 75 | position: relative; 76 | font-size: var(--h2-font-size); 77 | color: var(--first-color); 78 | margin-top: var(--mb-2); 79 | margin-bottom: var(--mb-4); 80 | text-align: center; 81 | } 82 | .section-title::after { 83 | position: absolute; 84 | content: ""; 85 | width: 64px; 86 | height: 0.18rem; 87 | left: 0; 88 | right: 0; 89 | margin: auto; 90 | top: 2rem; 91 | background-color: var(--first-color); 92 | } 93 | 94 | .section { 95 | padding-top: 3rem; 96 | padding-bottom: 2rem; 97 | } 98 | 99 | /*===== LAYOUT =====*/ 100 | .bd-grid { 101 | max-width: 1024px; 102 | display: grid; 103 | margin-left: var(--mb-2); 104 | margin-right: var(--mb-2); 105 | } 106 | 107 | .l-header { 108 | width: 100%; 109 | position: fixed; 110 | top: 0; 111 | left: 0; 112 | z-index: var(--z-fixed); 113 | background-color: #fff; 114 | box-shadow: 0 1px 4px rgba(146, 161, 176, 0.15); 115 | } 116 | 117 | /*===== NAV =====*/ 118 | .nav { 119 | height: var(--header-height); 120 | display: flex; 121 | justify-content: space-between; 122 | align-items: center; 123 | font-weight: var(--font-semi); 124 | } 125 | @media screen and (max-width: 767px) { 126 | .nav__menu { 127 | position: fixed; 128 | top: var(--header-height); 129 | right: -100%; 130 | width: 80%; 131 | height: 100%; 132 | padding: 2rem; 133 | background-color: var(--second-color); 134 | transition: 0.5s; 135 | } 136 | } 137 | .nav__item { 138 | margin-bottom: var(--mb-4); 139 | } 140 | .nav__link { 141 | position: relative; 142 | color: #fff; 143 | } 144 | .nav__link:hover { 145 | position: relative; 146 | } 147 | .nav__link:hover::after { 148 | position: absolute; 149 | content: ""; 150 | width: 100%; 151 | height: 0.18rem; 152 | left: 0; 153 | top: 2rem; 154 | background-color: var(--first-color); 155 | } 156 | .nav__logo { 157 | color: var(--second-color); 158 | } 159 | .nav__toggle { 160 | color: var(--second-color); 161 | font-size: 1.5rem; 162 | cursor: pointer; 163 | } 164 | 165 | /*Active menu*/ 166 | .active-link::after { 167 | position: absolute; 168 | content: ""; 169 | width: 100%; 170 | height: 0.18rem; 171 | left: 0; 172 | top: 2rem; 173 | background-color: var(--first-color); 174 | } 175 | 176 | /*=== Show menu ===*/ 177 | .show { 178 | right: 0; 179 | } 180 | 181 | /*===== HOME =====*/ 182 | .home { 183 | position: relative; 184 | row-gap: 5rem; 185 | padding: 4rem 0 5rem; 186 | } 187 | .home__data { 188 | align-self: center; 189 | } 190 | .home__title { 191 | font-size: var(--big-font-size); 192 | margin-bottom: var(--mb-5); 193 | } 194 | .home__title-color { 195 | color: var(--first-color); 196 | } 197 | .home__social { 198 | display: flex; 199 | flex-direction: column; 200 | } 201 | .home__social-icon { 202 | width: max-content; 203 | margin-bottom: var(--mb-2); 204 | font-size: 1.5rem; 205 | color: var(--second-color); 206 | } 207 | .home__social-icon:hover { 208 | color: var(--first-color); 209 | } 210 | .home__img { 211 | position: absolute; 212 | right: 0; 213 | bottom: 0; 214 | width: 260px; 215 | } 216 | .home__blob { 217 | fill: var(--first-color); 218 | } 219 | .home__blob-img { 220 | width: 360px; 221 | } 222 | 223 | /*BUTTONS*/ 224 | .button { 225 | display: inline-block; 226 | background-color: var(--first-color); 227 | color: #fff; 228 | padding: 0.75rem 2.5rem; 229 | font-weight: var(--font-semi); 230 | border-radius: 0.5rem; 231 | transition: 0.3s; 232 | } 233 | .button:hover { 234 | box-shadow: 0px 10px 36px rgba(0, 0, 0, 0.15); 235 | } 236 | 237 | /* ===== ABOUT =====*/ 238 | .about__container { 239 | row-gap: 2rem; 240 | text-align: center; 241 | } 242 | .about__subtitle { 243 | margin-bottom: var(--mb-2); 244 | } 245 | .about__img { 246 | justify-self: center; 247 | } 248 | .about__img img { 249 | width: 200px; 250 | border-radius: 0.5rem; 251 | } 252 | 253 | /* ===== SKILLS =====*/ 254 | .skills__container { 255 | row-gap: 2rem; 256 | text-align: center; 257 | } 258 | .skills__subtitle { 259 | margin-bottom: var(--mb-2); 260 | } 261 | .skills__text { 262 | margin-bottom: var(--mb-4); 263 | } 264 | .skills__data { 265 | display: flex; 266 | justify-content: space-between; 267 | align-items: center; 268 | position: relative; 269 | font-weight: var(--font-semi); 270 | padding: 0.5rem 1rem; 271 | margin-bottom: var(--mb-4); 272 | border-radius: 0.5rem; 273 | box-shadow: 0px 4px 25px rgba(14, 36, 49, 0.15); 274 | } 275 | .skills__icon { 276 | font-size: 2rem; 277 | margin-right: var(--mb-2); 278 | color: var(--first-color); 279 | } 280 | .skills__names { 281 | display: flex; 282 | align-items: center; 283 | } 284 | .skills__bar { 285 | position: absolute; 286 | left: 0; 287 | bottom: 0; 288 | background-color: var(--first-color); 289 | height: 0.25rem; 290 | border-radius: 0.5rem; 291 | z-index: var(--z-back); 292 | } 293 | .skills__html { 294 | width: 95%; 295 | } 296 | .skills__css { 297 | width: 85%; 298 | } 299 | .skills__js { 300 | width: 65%; 301 | } 302 | .skills__ux { 303 | width: 85%; 304 | } 305 | .skills__img { 306 | border-radius: 0.5rem; 307 | } 308 | 309 | /* ===== WORK =====*/ 310 | .work__container { 311 | row-gap: 2rem; 312 | } 313 | .work__img { 314 | box-shadow: 0px 4px 25px rgba(14, 36, 49, 0.15); 315 | border-radius: 0.5rem; 316 | overflow: hidden; 317 | } 318 | .work__img img { 319 | transition: 1s; 320 | } 321 | .work__img img:hover { 322 | transform: scale(1.1); 323 | } 324 | 325 | /* ===== CONTACT =====*/ 326 | .contact__input { 327 | width: 100%; 328 | font-size: var(--normal-font-size); 329 | font-weight: var(--font-semi); 330 | padding: 1rem; 331 | border-radius: 0.5rem; 332 | border: 1.5px solid var(--second-color); 333 | outline: none; 334 | margin-bottom: var(--mb-4); 335 | } 336 | .contact__button { 337 | display: block; 338 | border: none; 339 | outline: none; 340 | font-size: var(--normal-font-size); 341 | cursor: pointer; 342 | margin-left: auto; 343 | } 344 | 345 | /* ===== FOOTER =====*/ 346 | .footer { 347 | background-color: var(--second-color); 348 | color: #fff; 349 | text-align: center; 350 | font-weight: var(--font-semi); 351 | padding: 2rem 0; 352 | } 353 | .footer__title { 354 | font-size: 2rem; 355 | margin-bottom: var(--mb-4); 356 | } 357 | .footer__social { 358 | margin-bottom: var(--mb-4); 359 | } 360 | .footer__icon { 361 | font-size: 1.5rem; 362 | color: #fff; 363 | margin: 0 var(--mb-2); 364 | } 365 | .footer__copy { 366 | font-size: var(--smaller-font-size); 367 | } 368 | 369 | /* ===== MEDIA QUERIES=====*/ 370 | @media screen and (max-width: 320px) { 371 | .home { 372 | row-gap: 2rem; 373 | } 374 | .home__img { 375 | width: 200px; 376 | } 377 | } 378 | @media screen and (min-width: 576px) { 379 | .home { 380 | padding: 4rem 0 2rem; 381 | } 382 | .home__social { 383 | padding-top: 0; 384 | padding-bottom: 2.5rem; 385 | flex-direction: row; 386 | align-self: flex-end; 387 | } 388 | .home__social-icon { 389 | margin-bottom: 0; 390 | margin-right: var(--mb-4); 391 | } 392 | .home__img { 393 | width: 300px; 394 | bottom: 25%; 395 | } 396 | .about__container { 397 | grid-template-columns: repeat(2, 1fr); 398 | align-items: center; 399 | text-align: initial; 400 | } 401 | .skills__container { 402 | grid-template-columns: 0.7fr; 403 | justify-content: center; 404 | column-gap: 1rem; 405 | } 406 | .work__container { 407 | grid-template-columns: repeat(2, 1fr); 408 | column-gap: 2rem; 409 | padding-top: 2rem; 410 | } 411 | .contact__form { 412 | width: 360px; 413 | padding-top: 2rem; 414 | } 415 | .contact__container { 416 | justify-items: center; 417 | } 418 | } 419 | @media screen and (min-width: 768px) { 420 | body { 421 | margin: 0; 422 | } 423 | .section { 424 | padding-top: 4rem; 425 | padding-bottom: 3rem; 426 | } 427 | .section-title { 428 | margin-bottom: var(--mb-6); 429 | } 430 | .section-title::after { 431 | width: 80px; 432 | top: 3rem; 433 | } 434 | .nav { 435 | height: calc(var(--header-height) + 1.5rem); 436 | } 437 | .nav__list { 438 | display: flex; 439 | padding-top: 0; 440 | } 441 | .nav__item { 442 | margin-left: var(--mb-6); 443 | margin-bottom: 0; 444 | } 445 | .nav__toggle { 446 | display: none; 447 | } 448 | .nav__link { 449 | color: var(--second-color); 450 | } 451 | .home { 452 | padding: 8rem 0 2rem; 453 | } 454 | .home__img { 455 | width: 400px; 456 | bottom: 10%; 457 | } 458 | .about__container { 459 | padding-top: 2rem; 460 | } 461 | .about__img img { 462 | width: 300px; 463 | } 464 | .skills__container { 465 | grid-template-columns: repeat(2, 1fr); 466 | column-gap: 2rem; 467 | align-items: center; 468 | text-align: initial; 469 | } 470 | .work__container { 471 | grid-template-columns: repeat(3, 1fr); 472 | column-gap: 2rem; 473 | } 474 | } 475 | @media screen and (min-width: 992px) { 476 | .bd-grid { 477 | margin-left: auto; 478 | margin-right: auto; 479 | } 480 | .home { 481 | padding: 10rem 0 2rem; 482 | } 483 | .home__img { 484 | width: 450px; 485 | } 486 | } -------------------------------------------------------------------------------- /assets/scss/styles.scss: -------------------------------------------------------------------------------- 1 | /*===== GOOGLE FONTS =====*/ 2 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap'); 3 | 4 | /*===== VARIABLES CSS =====*/ 5 | :root{ 6 | --header-height: 3rem; 7 | --font-semi: 600; 8 | 9 | /*===== Colores =====*/ 10 | /*Purple 260 - Red 355 - Blue 224 - Pink 340*/ 11 | /* HSL color mode */ 12 | --hue-color: 224; 13 | --first-color: hsl(var(--hue-color), 89%, 60%); 14 | --second-color: hsl(var(--hue-color), 56%, 12%); 15 | 16 | /*===== Fuente y tipografia =====*/ 17 | --body-font: 'Poppins', sans-serif; 18 | 19 | --big-font-size: 2rem; 20 | --h2-font-size: 1.25rem; 21 | --normal-font-size: .938rem; 22 | --smaller-font-size: .75rem; 23 | 24 | /*===== Margenes =====*/ 25 | --mb-2: 1rem; 26 | --mb-4: 2rem; 27 | --mb-5: 2.5rem; 28 | --mb-6: 3rem; 29 | 30 | /*===== z index =====*/ 31 | --z-back: -10; 32 | --z-fixed: 100; 33 | 34 | @media screen and (min-width: 968px){ 35 | --big-font-size: 3.5rem; 36 | --h2-font-size: 2rem; 37 | --normal-font-size: 1rem; 38 | --smaller-font-size: .875rem; 39 | } 40 | } 41 | 42 | /*===== BASE =====*/ 43 | *,::before,::after{ 44 | box-sizing: border-box; 45 | } 46 | html{ 47 | scroll-behavior: smooth; 48 | } 49 | body{ 50 | margin: var(--header-height) 0 0 0; 51 | font-family: var(--body-font); 52 | font-size: var(--normal-font-size); 53 | color: var(--second-color); 54 | } 55 | h1,h2,p{ 56 | margin: 0; 57 | } 58 | ul{ 59 | margin: 0; 60 | padding: 0; 61 | list-style: none; 62 | } 63 | a{ 64 | text-decoration: none; 65 | } 66 | img{ 67 | max-width: 100%; 68 | height: auto; 69 | display: block; 70 | } 71 | 72 | /*===== CLASS CSS ===== */ 73 | .section-title{ 74 | position: relative; 75 | font-size: var(--h2-font-size); 76 | color: var(--first-color); 77 | margin-top: var(--mb-2); 78 | margin-bottom: var(--mb-4); 79 | text-align: center; 80 | 81 | &::after{ 82 | position: absolute; 83 | content: ''; 84 | width: 64px; 85 | height: 0.18rem; 86 | left: 0; 87 | right: 0; 88 | margin: auto; 89 | top: 2rem; 90 | background-color: var(--first-color); 91 | } 92 | } 93 | .section{ 94 | padding-top: 3rem; 95 | padding-bottom: 2rem; 96 | } 97 | 98 | /*===== LAYOUT =====*/ 99 | .bd-grid{ 100 | max-width: 1024px; 101 | display: grid; 102 | margin-left: var(--mb-2); 103 | margin-right: var(--mb-2); 104 | } 105 | .l-header{ 106 | width: 100%; 107 | position: fixed; 108 | top: 0; 109 | left: 0; 110 | z-index: var(--z-fixed); 111 | background-color: #fff; 112 | box-shadow: 0 1px 4px rgba(146,161,176,.15); 113 | } 114 | 115 | /*===== NAV =====*/ 116 | .nav{ 117 | height: var(--header-height); 118 | display: flex; 119 | justify-content: space-between; 120 | align-items: center; 121 | font-weight: var(--font-semi); 122 | 123 | &__menu{ 124 | @media screen and (max-width: 767px){ 125 | position: fixed; 126 | top: var(--header-height); 127 | right: -100%; 128 | width: 80%; 129 | height: 100%; 130 | padding: 2rem; 131 | background-color: var(--second-color); 132 | transition: .5s; 133 | } 134 | } 135 | &__item{ 136 | margin-bottom: var(--mb-4); 137 | } 138 | &__link{ 139 | position: relative; 140 | color: #fff; 141 | 142 | &:hover{ 143 | position: relative; 144 | 145 | &::after{ 146 | position: absolute; 147 | content: ''; 148 | width: 100%; 149 | height: 0.18rem; 150 | left: 0; 151 | top: 2rem; 152 | background-color: var(--first-color); 153 | } 154 | } 155 | } 156 | &__logo{ 157 | color: var(--second-color); 158 | } 159 | &__toggle{ 160 | color: var(--second-color); 161 | font-size: 1.5rem; 162 | cursor: pointer; 163 | } 164 | } 165 | /*Active menu*/ 166 | .active-link::after{ 167 | position: absolute; 168 | content: ''; 169 | width: 100%; 170 | height: 0.18rem; 171 | left: 0; 172 | top: 2rem; 173 | background-color: var(--first-color); 174 | } 175 | 176 | /*=== Show menu ===*/ 177 | .show{ 178 | right: 0; 179 | } 180 | 181 | /*===== HOME =====*/ 182 | .home{ 183 | position: relative; 184 | row-gap: 5rem; 185 | padding: 4rem 0 5rem; 186 | 187 | &__data{ 188 | align-self: center; 189 | } 190 | &__title{ 191 | font-size: var(--big-font-size); 192 | margin-bottom: var(--mb-5); 193 | 194 | &-color{ 195 | color: var(--first-color); 196 | } 197 | } 198 | &__social{ 199 | display: flex; 200 | flex-direction: column; 201 | &-icon{ 202 | width: max-content; 203 | margin-bottom: var(--mb-2); 204 | font-size: 1.5rem; 205 | color: var(--second-color); 206 | 207 | &:hover{ 208 | color: var(--first-color); 209 | } 210 | } 211 | } 212 | 213 | &__img{ 214 | position: absolute; 215 | right: 0; 216 | bottom: 0; 217 | width: 260px; 218 | } 219 | &__blob{ 220 | fill: var(--first-color); 221 | 222 | &-img{ 223 | width: 360px; 224 | } 225 | } 226 | } 227 | 228 | /*BUTTONS*/ 229 | .button{ 230 | display: inline-block; 231 | background-color: var(--first-color); 232 | color: #fff; 233 | padding: .75rem 2.5rem; 234 | font-weight: var(--font-semi); 235 | border-radius: .5rem; 236 | transition: .3s; 237 | 238 | &:hover{ 239 | box-shadow: 0px 10px 36px rgba(0,0,0,.15); 240 | } 241 | } 242 | 243 | /* ===== ABOUT =====*/ 244 | .about{ 245 | &__container{ 246 | row-gap: 2rem; 247 | text-align: center; 248 | } 249 | &__subtitle{ 250 | margin-bottom: var(--mb-2); 251 | } 252 | 253 | &__img{ 254 | justify-self: center; 255 | 256 | & img{ 257 | width: 200px; 258 | border-radius: .5rem; 259 | } 260 | } 261 | } 262 | 263 | /* ===== SKILLS =====*/ 264 | .skills{ 265 | &__container{ 266 | row-gap: 2rem; 267 | text-align: center; 268 | } 269 | &__subtitle{ 270 | margin-bottom: var(--mb-2); 271 | } 272 | &__text{ 273 | margin-bottom: var(--mb-4); 274 | } 275 | &__data{ 276 | display: flex; 277 | justify-content: space-between; 278 | align-items: center; 279 | position: relative; 280 | font-weight: var(--font-semi); 281 | padding: .5rem 1rem; 282 | margin-bottom: var(--mb-4); 283 | border-radius: .5rem; 284 | box-shadow: 0px 4px 25px rgba(14, 36, 49, 0.15); 285 | } 286 | &__icon{ 287 | font-size: 2rem; 288 | margin-right: var(--mb-2); 289 | color: var(--first-color); 290 | } 291 | &__names{ 292 | display: flex; 293 | align-items: center; 294 | } 295 | &__bar{ 296 | position: absolute; 297 | left: 0; 298 | bottom: 0; 299 | background-color: var(--first-color); 300 | height: .25rem; 301 | border-radius: .5rem; 302 | z-index: var(--z-back); 303 | } 304 | &__html{ 305 | width: 95%; 306 | } 307 | &__css{ 308 | width: 85%; 309 | } 310 | &__js{ 311 | width: 65%; 312 | } 313 | &__ux{ 314 | width: 85%; 315 | } 316 | &__img{ 317 | border-radius: .5rem; 318 | } 319 | } 320 | /* ===== WORK =====*/ 321 | .work{ 322 | &__container{ 323 | row-gap: 2rem; 324 | } 325 | &__img{ 326 | box-shadow: 0px 4px 25px rgba(14, 36, 49, 0.15); 327 | border-radius: .5rem; 328 | overflow: hidden; 329 | 330 | & img{ 331 | transition: 1s; 332 | 333 | &:hover{ 334 | transform: scale(1.1); 335 | } 336 | } 337 | } 338 | } 339 | 340 | /* ===== CONTACT =====*/ 341 | .contact{ 342 | &__input{ 343 | width: 100%; 344 | font-size: var(--normal-font-size); 345 | font-weight: var(--font-semi); 346 | padding: 1rem; 347 | border-radius: .5rem; 348 | border: 1.5px solid var(--second-color); 349 | outline: none; 350 | margin-bottom: var(--mb-4); 351 | } 352 | &__button{ 353 | display: block; 354 | border: none; 355 | outline: none; 356 | font-size: var(--normal-font-size); 357 | cursor: pointer; 358 | margin-left: auto; 359 | } 360 | } 361 | 362 | /* ===== FOOTER =====*/ 363 | .footer{ 364 | background-color: var(--second-color); 365 | color: #fff; 366 | text-align: center; 367 | font-weight: var(--font-semi); 368 | padding: 2rem 0; 369 | 370 | &__title{ 371 | font-size: 2rem; 372 | margin-bottom: var(--mb-4); 373 | } 374 | &__social{ 375 | margin-bottom: var(--mb-4); 376 | } 377 | &__icon{ 378 | font-size: 1.5rem; 379 | color: #fff; 380 | margin: 0 var(--mb-2); 381 | } 382 | &__copy{ 383 | font-size: var(--smaller-font-size); 384 | } 385 | } 386 | 387 | /* ===== MEDIA QUERIES=====*/ 388 | @media screen and (max-width: 320px){ 389 | .home{ 390 | row-gap: 2rem; 391 | 392 | &__img{ 393 | width: 200px; 394 | } 395 | } 396 | } 397 | 398 | @media screen and (min-width: 576px){ 399 | .home{ 400 | padding: 4rem 0 2rem; 401 | &__social{ 402 | padding-top: 0; 403 | padding-bottom: 2.5rem; 404 | flex-direction: row; 405 | align-self: flex-end; 406 | 407 | &-icon{ 408 | margin-bottom: 0; 409 | margin-right: var(--mb-4); 410 | } 411 | } 412 | &__img{ 413 | width: 300px; 414 | bottom: 25%; 415 | } 416 | } 417 | 418 | .about__container{ 419 | grid-template-columns: repeat(2,1fr); 420 | align-items: center; 421 | text-align: initial; 422 | } 423 | 424 | .skills__container{ 425 | grid-template-columns: .7fr; 426 | justify-content: center; 427 | column-gap: 1rem; 428 | } 429 | 430 | .work__container{ 431 | grid-template-columns: repeat(2,1fr); 432 | column-gap: 2rem; 433 | padding-top: 2rem; 434 | } 435 | 436 | .contact{ 437 | &__form{ 438 | width: 360px; 439 | padding-top: 2rem ; 440 | } 441 | &__container{ 442 | justify-items: center; 443 | } 444 | } 445 | } 446 | 447 | @media screen and (min-width: 768px){ 448 | body{ 449 | margin: 0; 450 | } 451 | .section{ 452 | padding-top: 4rem; 453 | padding-bottom: 3rem; 454 | } 455 | 456 | .section-title{ 457 | margin-bottom: var(--mb-6); 458 | 459 | &::after{ 460 | width: 80px; 461 | top: 3rem; 462 | } 463 | } 464 | 465 | .nav{ 466 | height: calc(var(--header-height) + 1.5rem); 467 | &__list{ 468 | display: flex; 469 | padding-top: 0; 470 | } 471 | &__item{ 472 | margin-left: var(--mb-6); 473 | margin-bottom: 0; 474 | } 475 | &__toggle{ 476 | display: none; 477 | } 478 | &__link{ 479 | color: var(--second-color); 480 | } 481 | } 482 | .home{ 483 | padding: 8rem 0 2rem; 484 | 485 | &__img{ 486 | width: 400px; 487 | bottom: 10%; 488 | } 489 | } 490 | 491 | .about{ 492 | &__container{ 493 | padding-top: 2rem; 494 | } 495 | &__img{ 496 | & img{ 497 | width: 300px; 498 | } 499 | } 500 | } 501 | .skills__container{ 502 | grid-template-columns: repeat(2,1fr); 503 | column-gap: 2rem; 504 | align-items: center; 505 | text-align: initial; 506 | } 507 | .work__container{ 508 | grid-template-columns: repeat(3,1fr); 509 | column-gap: 2rem; 510 | } 511 | } 512 | 513 | @media screen and (min-width: 992px){ 514 | .bd-grid{ 515 | margin-left: auto; 516 | margin-right: auto; 517 | } 518 | .home{ 519 | padding: 10rem 0 2rem; 520 | 521 | &__img{ 522 | width: 450px; 523 | } 524 | } 525 | } 526 | --------------------------------------------------------------------------------