diff --git a/Day-2 Task/assets/css/style.css b/Day-2 Task/assets/css/style.css index 0dc84e7..9488759 100644 --- a/Day-2 Task/assets/css/style.css +++ b/Day-2 Task/assets/css/style.css @@ -1,1085 +1,1144 @@ /*-------------------------------------------------------------- # General --------------------------------------------------------------*/ + body { - font-family: "Open Sans", sans-serif; - color: #272829; + font-family: "Open Sans", sans-serif; + color: #272829; } a { - color: #149ddd; + color: #149ddd; + text-decoration: none; } a:hover { - color: #37b3ed; - text-decoration: none; + color: #37b3ed; + text-decoration: none; } -h1, h2, h3, h4, h5, h6 { - font-family: "Raleway", sans-serif; +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: "Raleway", sans-serif; } + /*-------------------------------------------------------------- # Back to top button --------------------------------------------------------------*/ + .back-to-top { - position: fixed; - display: none; - width: 40px; - height: 40px; - border-radius: 50px; - right: 15px; - bottom: 15px; - background: #149ddd; - color: #fff; - transition: display 0.5s ease-in-out; - z-index: 99999; + position: fixed; + display: none; + width: 40px; + height: 40px; + border-radius: 50px; + right: 15px; + bottom: 15px; + background: #149ddd; + color: #fff; + transition: display 0.5s ease-in-out; + z-index: 99999; } .back-to-top i { - font-size: 24px; - position: absolute; - top: 7px; - left: 8px; + font-size: 24px; + position: absolute; + top: 7px; + left: 8px; } .back-to-top:hover { - color: #fff; - background: #2eafec; - transition: background 0.2s ease-in-out; + color: #fff; + background: #2eafec; + transition: background 0.2s ease-in-out; } + /*-------------------------------------------------------------- # Header --------------------------------------------------------------*/ + #header { - position: fixed; - top: 0; - left: 0; - bottom: 0; - width: 300px; - transition: all ease-in-out 0.5s; - z-index: 9997; - transition: all 0.5s; - padding: 0 15px; - background: #040b14; - overflow-y: auto; + position: fixed; + top: 0; + left: 0; + bottom: 0; + width: 300px; + transition: all ease-in-out 0.5s; + z-index: 9997; + transition: all 0.5s; + padding: 0 15px; + background: #040b14; + overflow-y: auto; } #header .profile img { - margin: 15px auto; - display: block; - width: 120px; - border: 8px solid #2c2f3f; + margin: 15px auto; + display: block; + width: 120px; + border: 8px solid #2c2f3f; } #header .profile h1 { - font-size: 24px; - margin: 0; - padding: 0; - font-weight: 600; - -moz-text-align-last: center; - text-align-last: center; - font-family: "Poppins", sans-serif; + font-size: 24px; + margin: 0; + padding: 0; + font-weight: 600; + -moz-text-align-last: center; + text-align-last: center; + font-family: "Poppins", sans-serif; } -#header .profile h1 a, #header .profile h1 a:hover { - color: #fff; - text-decoration: none; +#header .profile h1 a, +#header .profile h1 a:hover { + color: #fff; + text-decoration: none; } #header .profile .social-links a { - font-size: 18px; - display: inline-block; - background: #212431; - color: #fff; - line-height: 1; - padding: 8px 0; - margin-right: 4px; - border-radius: 50%; - text-align: center; - width: 36px; - height: 36px; - transition: 0.3s; + font-size: 18px; + display: inline-block; + background: #212431; + color: #fff; + line-height: 1; + padding: 8px 0; + margin-right: 4px; + border-radius: 50%; + text-align: center; + width: 36px; + height: 36px; + transition: 0.3s; } #header .profile .social-links a:hover { - background: #149ddd; - color: #fff; - text-decoration: none; + background: #149ddd; + color: #fff; + text-decoration: none; } #main { - margin-left: 300px; + margin-left: 300px; } @media (max-width: 1199px) { - #header { - left: -300px; - } - #main { - margin-left: 0; - } + #header { + left: -300px; + } + #main { + margin-left: 0; + } } + /*-------------------------------------------------------------- # Navigation Menu --------------------------------------------------------------*/ + + /* Desktop Navigation */ + .nav-menu { - padding-top: 30px; + padding-top: 30px; } .nav-menu * { - margin: 0; - padding: 0; - list-style: none; + margin: 0; + padding: 0; + list-style: none; } -.nav-menu > ul > li { - position: relative; - white-space: nowrap; +.nav-menu>ul>li { + position: relative; + white-space: nowrap; } .nav-menu a { - display: flex; - align-items: center; - color: #a8a9b4; - padding: 12px 15px; - margin-bottom: 8px; - transition: 0.3s; - font-size: 15px; + display: flex; + align-items: center; + color: #a8a9b4; + padding: 12px 15px; + margin-bottom: 8px; + transition: 0.3s; + font-size: 15px; } .nav-menu a i { - font-size: 24px; - padding-right: 8px; - color: #6f7180; + font-size: 24px; + padding-right: 8px; + color: #6f7180; } -.nav-menu a:hover, .nav-menu .active > a, .nav-menu li:hover > a { - text-decoration: none; - color: #fff; +.nav-menu a:hover, +.nav-menu .active>a, +.nav-menu li:hover>a { + text-decoration: none; + color: #fff; } -.nav-menu a:hover i, .nav-menu .active > a i, .nav-menu li:hover > a i { - color: #149ddd; +.nav-menu a:hover i, +.nav-menu .active>a i, +.nav-menu li:hover>a i { + color: #149ddd; } + /* Mobile Navigation */ + .mobile-nav-toggle { - position: fixed; - right: 15px; - top: 15px; - z-index: 9998; - border: 0; - background: none; - font-size: 24px; - transition: all 0.4s; - outline: none !important; - line-height: 1; - cursor: pointer; - text-align: right; + position: fixed; + right: 15px; + top: 15px; + z-index: 9998; + border: 0; + background: none; + font-size: 24px; + transition: all 0.4s; + outline: none !important; + line-height: 1; + cursor: pointer; + text-align: right; } .mobile-nav-toggle i { - color: #149ddd; + color: #149ddd; } .mobile-nav-active { - overflow: hidden; + overflow: hidden; } .mobile-nav-active #header { - left: 0; + left: 0; } .mobile-nav-active .mobile-nav-toggle i { - color: #fff; + color: #fff; } + /*-------------------------------------------------------------- # Hero Section --------------------------------------------------------------*/ + #hero { - width: 100%; - height: 100vh; - background: url("../img/hero-bg.jpg") top center; - background-size: cover; + width: 100%; + height: 100vh; + background: url("../img/hero-bg.jpg") top center; + background-size: cover; } #hero:before { - content: ""; - background: rgba(5, 13, 24, 0.3); - position: absolute; - bottom: 0; - top: 0; - left: 0; - right: 0; - z-index: 1; + content: ""; + background: rgba(5, 13, 24, 0.3); + position: absolute; + bottom: 0; + top: 0; + left: 0; + right: 0; + z-index: 1; } #hero .hero-container { - position: relative; - z-index: 2; - min-width: 300px; + position: relative; + z-index: 2; + min-width: 300px; } #hero h1 { - margin: 0 0 10px 0; - font-size: 64px; - font-weight: 700; - line-height: 56px; - color: #fff; + margin: 0 0 10px 0; + font-size: 64px; + font-weight: 700; + line-height: 56px; + color: #fff; } #hero p { - color: #fff; - margin-bottom: 50px; - font-size: 26px; - font-family: "Poppins", sans-serif; + color: #fff; + margin-bottom: 50px; + font-size: 26px; + font-family: "Poppins", sans-serif; } #hero p span { - color: #fff; - padding-bottom: 4px; - letter-spacing: 1px; - border-bottom: 3px solid #149ddd; + color: #fff; + padding-bottom: 4px; + letter-spacing: 1px; + border-bottom: 3px solid #149ddd; } @media (min-width: 1024px) { - #hero { - background-attachment: fixed; - } + #hero { + background-attachment: fixed; + } } @media (max-width: 768px) { - #hero h1 { - font-size: 28px; - line-height: 36px; - } - #hero h2 { - font-size: 18px; - line-height: 24px; - margin-bottom: 30px; - } + #hero h1 { + font-size: 28px; + line-height: 36px; + } + #hero h2 { + font-size: 18px; + line-height: 24px; + margin-bottom: 30px; + } } + /*-------------------------------------------------------------- # Sections General --------------------------------------------------------------*/ + section { - /* Ugly Padding */ - padding: 0 0; - overflow: hidden; + /* Ugly Padding */ + padding: 60px 0; + overflow: hidden; } .section-bg { - background: #f5f8fd; + background: #f5f8fd; } .section-title { - /* Give Me Padding */ + /* Give Me Padding */ + padding-bottom: 30px; } -.section-title p{ - /* Do something with me too */ - margin-bottom: 0; +.section-title p { + /* Do something with me too */ + margin-bottom: 0; } .section-title h2 { - font-size: 32px; - font-weight: bold; - margin-bottom: 20px; - padding-bottom: 20px; - position: relative; - color: #173b6c; + font-size: 32px; + font-weight: bold; + margin-bottom: 20px; + padding-bottom: 20px; + position: relative; + color: #173b6c; } .section-title h2::after { - content: ''; - position: absolute; - display: block; - width: 50px; - height: 3px; - background: #149ddd; - bottom: 0; - left: 0; + content: ""; + position: absolute; + display: block; + width: 50px; + height: 3px; + background: #149ddd; + bottom: 0; + left: 0; } .section-title p { - margin-bottom: 0; + margin-bottom: 0; } + /*-------------------------------------------------------------- # About --------------------------------------------------------------*/ + .about .content h3 { - font-weight: 700; - font-size: 26px; - color: #173b6c; + font-weight: 700; + font-size: 26px; + color: #173b6c; } .about .content ul { - list-style: none; - padding: 0; - /* REMOVE MY MARGIN */ - margin-bottom: 0; + list-style: none; + padding: 0; + /* REMOVE MY MARGIN */ } .about .content ul li { - padding-bottom: 10px; + padding-bottom: 10px; } .about .content ul i { - font-size: 20px; - padding-right: 2px; - color: #149ddd; + font-size: 20px; + padding-right: 2px; + color: #149ddd; } .about .content p:last-child { - margin-bottom: 0; + margin-bottom: 0; } + /*-------------------------------------------------------------- # Facts --------------------------------------------------------------*/ + .facts { - padding-bottom: 30px; + padding-bottom: 30px; } .facts .count-box { - /* Ugly Padding */ - padding: 0; - width: 100%; + /* Ugly Padding */ + padding: 30px; + width: 100%; } .facts .count-box i { - display: block; - /* Ugly Font Size */ - font-size: 500px; - color: #149ddd; - float: left; + display: block; + /* Ugly Font Size */ + font-size: 44px; + color: #149ddd; + float: left; } .facts .count-box span { - font-size: 48px; - line-height: 40px; - display: block; - font-weight: 700; - color: #050d18; - margin-left: 60px; + font-size: 48px; + line-height: 40px; + display: block; + font-weight: 700; + color: #050d18; + margin-left: 60px; } .facts .count-box p { - padding: 15px 0 0 0; - margin: 0 0 0 60px; - font-family: "Raleway", sans-serif; - font-size: 14px; - color: #122f57; + padding: 15px 0 0 0; + margin: 0 0 0 60px; + font-family: "Raleway", sans-serif; + font-size: 14px; + color: #122f57; } .facts .count-box a { - font-weight: 600; - display: block; - margin-top: 20px; - color: #122f57; - font-size: 15px; - font-family: "Poppins", sans-serif; - transition: ease-in-out 0.3s; + font-weight: 600; + display: block; + margin-top: 20px; + color: #122f57; + font-size: 15px; + font-family: "Poppins", sans-serif; + transition: ease-in-out 0.3s; } .facts .count-box a:hover { - color: #1f5297; + color: #1f5297; } + /*-------------------------------------------------------------- # Akills --------------------------------------------------------------*/ + .skills .progress { - height: 50px; - display: block; - background: none; + height: 50px; + display: block; + background: none; } .skills .progress .skill { - padding: 10px 0; - margin: 0 0 6px 0; - text-transform: uppercase; - display: block; - font-weight: 600; - font-family: "Poppins", sans-serif; - color: #050d18; + padding: 10px 0; + margin: 0 0 6px 0; + text-transform: uppercase; + display: block; + font-weight: 600; + font-family: "Poppins", sans-serif; + color: #050d18; } .skills .progress .skill .val { - float: right; - font-style: normal; + float: right; + font-style: normal; } .skills .progress-bar-wrap { - background: #dce8f8; + background: #dce8f8; } .skills .progress-bar { - width: 1px; - height: 10px; - transition: .9s; - background-color: #149ddd; + width: 1px; + height: 10px; + transition: 0.9s; + background-color: #149ddd; } + /*-------------------------------------------------------------- # Resume --------------------------------------------------------------*/ + .resume .resume-title { - font-size: 26px; - font-weight: 700; - margin-top: 20px; - margin-bottom: 20px; - color: #050d18; + font-size: 26px; + font-weight: 700; + margin-top: 20px; + margin-bottom: 20px; + color: #050d18; } .resume .resume-item { - padding: 0 0 20px 20px; - margin-top: -2px; - border-left: 2px solid #1f5297; - position: relative; + padding: 0 0 20px 20px; + margin-top: -2px; + border-left: 2px solid #1f5297; + position: relative; } .resume .resume-item h4 { - line-height: 18px; - font-size: 18px; - font-weight: 600; - text-transform: uppercase; - font-family: "Poppins", sans-serif; - color: #050d18; - margin-bottom: 10px; + line-height: 18px; + font-size: 18px; + font-weight: 600; + text-transform: uppercase; + font-family: "Poppins", sans-serif; + color: #050d18; + margin-bottom: 10px; } .resume .resume-item h5 { - font-size: 16px; - background: #e4edf9; - padding: 5px 15px; - display: inline-block; - font-weight: 600; - margin-bottom: 10px; + font-size: 16px; + background: #e4edf9; + padding: 5px 15px; + display: inline-block; + font-weight: 600; + margin-bottom: 10px; } .resume .resume-item ul { - padding-left: 20px; + padding-left: 20px; } .resume .resume-item ul li { - padding-bottom: 10px; + padding-bottom: 10px; } .resume .resume-item:last-child { - padding-bottom: 0; + padding-bottom: 0; } .resume .resume-item::before { - content: ""; - position: absolute; - width: 16px; - height: 16px; - border-radius: 50px; - left: -9px; - top: 0; - background: #fff; - border: 2px solid #1f5297; + content: ""; + position: absolute; + width: 16px; + height: 16px; + border-radius: 50px; + left: -9px; + top: 0; + background: #fff; + border: 2px solid #1f5297; } + /*-------------------------------------------------------------- # Portfolio --------------------------------------------------------------*/ + .portfolio .portfolio-item { - margin-bottom: 30px; + margin-bottom: 30px; } .portfolio #portfolio-flters { - padding: 0; - margin: 0 auto 35px auto; - list-style: none; - text-align: center; - background: #fff; - border-radius: 50px; - padding: 2px 15px; + padding: 0; + margin: 0 auto 35px auto; + list-style: none; + text-align: center; + background: #fff; + border-radius: 50px; + padding: 2px 15px; } .portfolio #portfolio-flters li { - cursor: pointer; - display: inline-block; - padding: 10px 15px 8px 15px; - font-size: 14px; - font-weight: 600; - line-height: 1; - text-transform: uppercase; - color: #272829; - margin-bottom: 5px; - transition: all 0.3s ease-in-out; + cursor: pointer; + display: inline-block; + padding: 10px 15px 8px 15px; + font-size: 14px; + font-weight: 600; + line-height: 1; + text-transform: uppercase; + color: #272829; + margin-bottom: 5px; + transition: all 0.3s ease-in-out; } -.portfolio #portfolio-flters li:hover, .portfolio #portfolio-flters li.filter-active { - color: #149ddd; +.portfolio #portfolio-flters li:hover, +.portfolio #portfolio-flters li.filter-active { + color: #149ddd; } .portfolio #portfolio-flters li:last-child { - margin-right: 0; + margin-right: 0; } .portfolio .portfolio-wrap { - transition: 0.3s; - position: relative; - overflow: hidden; - z-index: 1; + transition: 0.3s; + position: relative; + overflow: hidden; + z-index: 1; } .portfolio .portfolio-wrap::before { - content: ""; - background: rgba(255, 255, 255, 0.5); - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; - transition: all ease-in-out 0.3s; - z-index: 2; - opacity: 0; + content: ""; + background: rgba(255, 255, 255, 0.5); + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + transition: all ease-in-out 0.3s; + z-index: 2; + opacity: 0; } .portfolio .portfolio-wrap .portfolio-links { - opacity: 1; - left: 0; - right: 0; - bottom: -60px; - z-index: 3; - position: absolute; - transition: all ease-in-out 0.3s; - display: flex; - justify-content: center; + opacity: 1; + left: 0; + right: 0; + bottom: -60px; + z-index: 3; + position: absolute; + transition: all ease-in-out 0.3s; + display: flex; + justify-content: center; } .portfolio .portfolio-wrap .portfolio-links a { - color: #fff; - font-size: 28px; - text-align: center; - background: rgba(20, 157, 221, 0.75); - transition: 0.3s; - width: 50%; + color: #fff; + font-size: 28px; + text-align: center; + background: rgba(20, 157, 221, 0.75); + transition: 0.3s; + width: 50%; } .portfolio .portfolio-wrap .portfolio-links a:hover { - background: rgba(20, 157, 221, 0.95); + background: rgba(20, 157, 221, 0.95); } -.portfolio .portfolio-wrap .portfolio-links a + a { - border-left: 1px solid #37b3ed; +.portfolio .portfolio-wrap .portfolio-links a+a { + border-left: 1px solid #37b3ed; } .portfolio .portfolio-wrap:hover::before { - top: 0; - left: 0; - right: 0; - bottom: 0; - opacity: 1; + top: 0; + left: 0; + right: 0; + bottom: 0; + opacity: 1; } .portfolio .portfolio-wrap:hover .portfolio-links { - opacity: 1; - bottom: 0; + opacity: 1; + bottom: 0; } + /*-------------------------------------------------------------- # Services --------------------------------------------------------------*/ + .services .icon-box { - margin-bottom: 20px; + margin-bottom: 20px; } .services .icon { - float: left; - display: flex; - align-items: center; - justify-content: center; - width: 54px; - height: 54px; - background: #149ddd; - border-radius: 50%; - transition: 0.5s; - border: 1px solid #149ddd; + float: left; + display: flex; + align-items: center; + justify-content: center; + width: 54px; + height: 54px; + background: #149ddd; + border-radius: 50%; + transition: 0.5s; + border: 1px solid #149ddd; } .services .icon i { - color: #fff; - font-size: 24px; + color: #fff; + font-size: 24px; } .services .icon-box:hover .icon { - background: #fff; + background: #fff; } .services .icon-box:hover .icon i { - color: #149ddd; + color: #149ddd; } .services .title { - margin-left: 80px; - font-weight: 700; - margin-bottom: 15px; - font-size: 18px; + margin-left: 80px; + font-weight: 700; + margin-bottom: 15px; + font-size: 18px; } .services .title a { - color: #343a40; + color: #343a40; } .services .title a:hover { - color: #149ddd; + color: #149ddd; } .services .description { - margin-left: 80px; - line-height: 24px; - font-size: 14px; + margin-left: 80px; + line-height: 24px; + font-size: 14px; } + /*-------------------------------------------------------------- # Testimonials --------------------------------------------------------------*/ + .testimonials .testimonial-item { - box-sizing: content-box; - text-align: center; - min-height: 320px; + box-sizing: content-box; + text-align: center; + min-height: 320px; } .testimonials .testimonial-item .testimonial-img { - width: 90px; - border-radius: 50%; - margin: 0 auto; + width: 90px; + border-radius: 50%; + margin: 0 auto; } .testimonials .testimonial-item h3 { - font-size: 18px; - font-weight: bold; - margin: 10px 0 5px 0; - color: #111; + font-size: 18px; + font-weight: bold; + margin: 10px 0 5px 0; + color: #111; } .testimonials .testimonial-item h4 { - font-size: 14px; - color: #999; - margin: 0; + font-size: 14px; + color: #999; + margin: 0; } -.testimonials .testimonial-item .quote-icon-left, .testimonials .testimonial-item .quote-icon-right { - color: #c3e8fa; - font-size: 26px; +.testimonials .testimonial-item .quote-icon-left, +.testimonials .testimonial-item .quote-icon-right { + color: #c3e8fa; + font-size: 26px; } .testimonials .testimonial-item .quote-icon-left { - display: inline-block; - left: -5px; - position: relative; + display: inline-block; + left: -5px; + position: relative; } .testimonials .testimonial-item .quote-icon-right { - display: inline-block; - right: -5px; - position: relative; - top: 10px; + display: inline-block; + right: -5px; + position: relative; + top: 10px; } .testimonials .testimonial-item p { - font-style: italic; - margin: 0 15px 15px 15px; - padding: 20px; - background: #fff; - position: relative; - margin-bottom: 35px; - border-radius: 6px; - box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1); + font-style: italic; + margin: 0 15px 15px 15px; + padding: 20px; + background: #fff; + position: relative; + margin-bottom: 35px; + border-radius: 6px; + box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1); } .testimonials .testimonial-item p::after { - content: ""; - width: 0; - height: 0; - border-top: 20px solid #fff; - border-right: 20px solid transparent; - border-left: 20px solid transparent; - position: absolute; - bottom: -20px; - left: calc(50% - 20px); + content: ""; + width: 0; + height: 0; + border-top: 20px solid #fff; + border-right: 20px solid transparent; + border-left: 20px solid transparent; + position: absolute; + bottom: -20px; + left: calc(50% - 20px); } -.testimonials .owl-nav, .testimonials .owl-dots { - margin-top: 5px; - text-align: center; +.testimonials .owl-nav, +.testimonials .owl-dots { + margin-top: 5px; + text-align: center; } .testimonials .owl-dot { - display: inline-block; - margin: 0 5px; - width: 12px; - height: 12px; - border-radius: 50%; - background-color: #ddd !important; + display: inline-block; + margin: 0 5px; + width: 12px; + height: 12px; + border-radius: 50%; + background-color: #ddd !important; } .testimonials .owl-dot.active { - background-color: #149ddd !important; + background-color: #149ddd !important; } @media (max-width: 767px) { - .testimonials { - margin: 30px 10px; - } + .testimonials { + margin: 30px 10px; + } } + /*-------------------------------------------------------------- # Contact --------------------------------------------------------------*/ + .contact { - padding-bottom: 130px; + padding-bottom: 130px; } .contact .info { - padding: 30px; - background: #fff; - width: 100%; - box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.12); + padding: 30px; + background: #fff; + width: 100%; + box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.12); } .contact .info i { - font-size: 20px; - color: #149ddd; - float: left; - width: 44px; - height: 44px; - background: #dff3fc; - display: flex; - justify-content: center; - align-items: center; - border-radius: 50px; - transition: all 0.3s ease-in-out; + font-size: 20px; + color: #149ddd; + float: left; + width: 44px; + height: 44px; + background: #dff3fc; + display: flex; + justify-content: center; + align-items: center; + border-radius: 50px; + transition: all 0.3s ease-in-out; } .contact .info h4 { - padding: 0 0 0 60px; - font-size: 22px; - font-weight: 600; - margin-bottom: 5px; - color: #050d18; + padding: 0 0 0 60px; + font-size: 22px; + font-weight: 600; + margin-bottom: 5px; + color: #050d18; } .contact .info p { - padding: 0 0 10px 60px; - margin-bottom: 20px; - font-size: 14px; - color: #173b6c; + padding: 0 0 10px 60px; + margin-bottom: 20px; + font-size: 14px; + color: #173b6c; } .contact .info .email p { - padding-top: 5px; + padding-top: 5px; } .contact .info .social-links { - padding-left: 60px; + padding-left: 60px; } .contact .info .social-links a { - font-size: 18px; - display: inline-block; - background: #333; - color: #fff; - line-height: 1; - padding: 8px 0; - border-radius: 50%; - text-align: center; - width: 36px; - height: 36px; - transition: 0.3s; - margin-right: 10px; + font-size: 18px; + display: inline-block; + background: #333; + color: #fff; + line-height: 1; + padding: 8px 0; + border-radius: 50%; + text-align: center; + width: 36px; + height: 36px; + transition: 0.3s; + margin-right: 10px; } .contact .info .social-links a:hover { - background: #149ddd; - color: #fff; + background: #149ddd; + color: #fff; } -.contact .info .email:hover i, .contact .info .address:hover i, .contact .info .phone:hover i { - background: #149ddd; - color: #fff; +.contact .info .email:hover i, +.contact .info .address:hover i, +.contact .info .phone:hover i { + background: #149ddd; + color: #fff; } .contact .php-email-form { - width: 100%; - padding: 30px; - background: #fff; - box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.12); + width: 100%; + padding: 30px; + background: #fff; + box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.12); } .contact .php-email-form .form-group { - padding-bottom: 8px; + padding-bottom: 8px; } .contact .php-email-form .validate { - display: none; - color: red; - margin: 0 0 15px 0; - font-weight: 400; - font-size: 13px; + display: none; + color: red; + margin: 0 0 15px 0; + font-weight: 400; + font-size: 13px; } .contact .php-email-form .error-message { - display: none; - color: #fff; - background: #ed3c0d; - text-align: left; - padding: 15px; - font-weight: 600; + display: none; + color: #fff; + background: #ed3c0d; + text-align: left; + padding: 15px; + font-weight: 600; } -.contact .php-email-form .error-message br + br { - margin-top: 25px; +.contact .php-email-form .error-message br+br { + margin-top: 25px; } .contact .php-email-form .sent-message { - display: none; - color: #fff; - background: #18d26e; - text-align: center; - padding: 15px; - font-weight: 600; + display: none; + color: #fff; + background: #18d26e; + text-align: center; + padding: 15px; + font-weight: 600; } .contact .php-email-form .loading { - display: none; - background: #fff; - text-align: center; - padding: 15px; + display: none; + background: #fff; + text-align: center; + padding: 15px; } .contact .php-email-form .loading:before { - content: ""; - display: inline-block; - border-radius: 50%; - width: 24px; - height: 24px; - margin: 0 10px -6px 0; - border: 3px solid #18d26e; - border-top-color: #eee; - -webkit-animation: animate-loading 1s linear infinite; - animation: animate-loading 1s linear infinite; + content: ""; + display: inline-block; + border-radius: 50%; + width: 24px; + height: 24px; + margin: 0 10px -6px 0; + border: 3px solid #18d26e; + border-top-color: #eee; + -webkit-animation: animate-loading 1s linear infinite; + animation: animate-loading 1s linear infinite; } -.contact .php-email-form input, .contact .php-email-form textarea { - border-radius: 0; - box-shadow: none; - font-size: 14px; +.contact .php-email-form input, +.contact .php-email-form textarea { + border-radius: 0; + box-shadow: none; + font-size: 14px; } .contact .php-email-form input { - height: 44px; + height: 44px; } .contact .php-email-form textarea { - padding: 10px 12px; + padding: 10px 12px; } .contact .php-email-form button[type="submit"] { - background: #149ddd; - border: 0; - padding: 10px 24px; - color: #fff; - transition: 0.4s; - border-radius: 4px; + background: #149ddd; + border: 0; + padding: 10px 24px; + color: #fff; + transition: 0.4s; + border-radius: 4px; } .contact .php-email-form button[type="submit"]:hover { - background: #37b3ed; + background: #37b3ed; } @-webkit-keyframes animate-loading { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } } @keyframes animate-loading { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } } + /*-------------------------------------------------------------- # Breadcrumbs --------------------------------------------------------------*/ + .breadcrumbs { - padding: 20px 0; - background: #f9f9f9; + padding: 20px 0; + background: #f9f9f9; } .breadcrumbs h2 { - font-size: 26px; - font-weight: 300; + font-size: 26px; + font-weight: 300; } .breadcrumbs ol { - display: flex; - flex-wrap: wrap; - list-style: none; - padding: 0; - margin: 0; - font-size: 15px; + display: flex; + flex-wrap: wrap; + list-style: none; + padding: 0; + margin: 0; + font-size: 15px; } -.breadcrumbs ol li + li { - padding-left: 10px; +.breadcrumbs ol li+li { + padding-left: 10px; } -.breadcrumbs ol li + li::before { - display: inline-block; - padding-right: 10px; - color: #0e2442; - content: "/"; +.breadcrumbs ol li+li::before { + display: inline-block; + padding-right: 10px; + color: #0e2442; + content: "/"; } @media (max-width: 768px) { - .breadcrumbs .d-flex { - display: block !important; - } - .breadcrumbs ol { - display: block; - } - .breadcrumbs ol li { - display: inline-block; - } + .breadcrumbs .d-flex { + display: block !important; + } + .breadcrumbs ol { + display: block; + } + .breadcrumbs ol li { + display: inline-block; + } } + /*-------------------------------------------------------------- # Portfolio Details --------------------------------------------------------------*/ + .portfolio-details { - padding-top: 40px; + padding-top: 40px; } .portfolio-details .portfolio-details-container { - position: relative; + position: relative; } .portfolio-details .portfolio-details-carousel { - position: relative; - z-index: 1; + position: relative; + z-index: 1; } -.portfolio-details .portfolio-details-carousel .owl-nav, .portfolio-details .portfolio-details-carousel .owl-dots { - margin-top: 5px; - text-align: left; +.portfolio-details .portfolio-details-carousel .owl-nav, +.portfolio-details .portfolio-details-carousel .owl-dots { + margin-top: 5px; + text-align: left; } .portfolio-details .portfolio-details-carousel .owl-dot { - display: inline-block; - margin: 0 10px 0 0; - width: 12px; - height: 12px; - border-radius: 50%; - background-color: #ddd !important; + display: inline-block; + margin: 0 10px 0 0; + width: 12px; + height: 12px; + border-radius: 50%; + background-color: #ddd !important; } .portfolio-details .portfolio-details-carousel .owl-dot.active { - background-color: #149ddd !important; + background-color: #149ddd !important; } .portfolio-details .portfolio-info { - padding: 30px; - position: absolute; - right: 0; - bottom: -70px; - background: #fff; - box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1); - z-index: 2; + padding: 30px; + position: absolute; + right: 0; + bottom: -70px; + background: #fff; + box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1); + z-index: 2; } .portfolio-details .portfolio-info h3 { - font-size: 22px; - font-weight: 400; - margin-bottom: 20px; - padding-bottom: 20px; - border-bottom: 1px solid #eee; + font-size: 22px; + font-weight: 400; + margin-bottom: 20px; + padding-bottom: 20px; + border-bottom: 1px solid #eee; } .portfolio-details .portfolio-info ul { - list-style: none; - padding: 0; - font-size: 15px; + list-style: none; + padding: 0; + font-size: 15px; } -.portfolio-details .portfolio-info ul li + li { - margin-top: 10px; +.portfolio-details .portfolio-info ul li+li { + margin-top: 10px; } .portfolio-details .portfolio-description { - padding-top: 50px; + padding-top: 50px; } .portfolio-details .portfolio-description h2 { - width: 50%; - font-size: 26px; - font-weight: 400; - margin-bottom: 20px; + width: 50%; + font-size: 26px; + font-weight: 400; + margin-bottom: 20px; } .portfolio-details .portfolio-description p { - padding: 0; + padding: 0; } @media (max-width: 768px) { - .portfolio-details .portfolio-description h2 { - width: 100%; - } - .portfolio-details .portfolio-info { - position: static; - margin-top: 30px; - } + .portfolio-details .portfolio-description h2 { + width: 100%; + } + .portfolio-details .portfolio-info { + position: static; + margin-top: 30px; + } } + /*-------------------------------------------------------------- # Footer --------------------------------------------------------------*/ + #footer { - padding: 15px; - color: #f4f6fd; - font-size: 14px; - position: fixed; - left: 0; - bottom: 0; - width: 300px; - z-index: 9999; - background: #040b14; + padding: 15px; + color: #f4f6fd; + font-size: 14px; + position: fixed; + left: 0; + bottom: 0; + width: 300px; + z-index: 9999; + background: #040b14; } #footer .copyright { - text-align: center; + text-align: center; } #footer .credits { - padding-top: 5px; - text-align: center; - font-size: 13px; - color: #eaebf0; + padding-top: 5px; + text-align: center; + font-size: 13px; + color: #eaebf0; } @media (max-width: 1199px) { - #footer { - position: static; - width: auto; - padding-right: 20px 15px; - } + #footer { + position: static; + width: auto; + padding-right: 20px 15px; + } +<<<<<<< Updated upstream +} +======= } +>>>>>>> Stashed changes diff --git a/Day-2 Task/index.html b/Day-2 Task/index.html index df09ed5..246f0fe 100644 --- a/Day-2 Task/index.html +++ b/Day-2 Task/index.html @@ -2,352 +2,353 @@ - - + + - Portfolio Design - - + Portfolio Design + + - - + + - - + + - - - - - - - + + + + + + + - - + + - - - -
-
-

Alex Smith

-

I'm

-
-
- -
- - -
-
- -
-

About

-

Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint - consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit - in iste officiis commodi quidem hic quas. -

-
- -
-
- -
-
-

UI/UX Designer & Web Developer.

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et - dolore - magna aliqua. -

-
-
-
    -
  • Birthday: 1 May 1995
    • -
  • Website: www.example.com
    • -
  • Phone: +123 456 7890
    • -
  • City: City : New York, USA
    • -
-
-
-
    -
  • Age: 30
    • -
  • Degree: Master
    • -
  • PhEmailone: email@example.com
    • -
  • Freelance: Available
    • -
-
-
+ + +
+
+

Alex Smith

- Officiis eligendi itaque labore et dolorum mollitia officiis optio vero. Quisquam sunt adipisci omnis et - ut. Nulla accusantium dolor incidunt officia tempore. Et eius omnis. - Cupiditate ut dicta maxime officiis quidem quia. Sed et consectetur qui quia repellendus itaque neque. - Aliquid amet quidem ut quaerat cupiditate. Ab et eum qui repellendus omnis culpa magni laudantium dolores. + I'm

-
- -
-
- - -
-
- -
-

Facts

-

Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint - consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit - in iste officiis commodi quidem hic quas.

-
- -
- -
-
- - 232 -

Happy Clients consequuntur quae

-
-
- -
-
- - 521 -

Projects adipisci atque cum quia aut

-
-
- -
-
- - 1,463 -

Hours Of Support aut commodi quaerat

-
-
- -
-
- - 15 -

Hard Workers rerum asperiores dolor

-
-
- -
- -
-
- - -
-
- -
-

Skills

-

Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint - consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit - in iste officiis commodi quidem hic quas.

-
- -
- -
- -
- HTML 100% -
-
+
+ + +
+ +
+
+
+

About

+

+ Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas. +

-
- -
- CSS 90% -
-
+
+
+ +
+
+

UI/UX Designer & Web Developer.

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +

+
+
+
    +
  • + + Birthday: 1 May 1995 +
    • +
  • + + Website: www.example.com +
    • +
  • + + Phone: +123 456 7890 +
    • +
  • + + City: City : New York, USA +
    • +
+
+
+
    +
  • + + Age: 30 +
    • +
  • + + Degree: Master +
    • +
  • + + PhEmailone: email@example.com +
    • +
  • + + Freelance: Available +
    • +
+
+
+

+ Officiis eligendi itaque labore et dolorum mollitia officiis optio vero. Quisquam sunt adipisci omnis et ut. Nulla accusantium dolor incidunt officia tempore. Et eius omnis. Cupiditate ut dicta maxime officiis quidem quia. Sed et consectetur qui quia + repellendus itaque neque. Aliquid amet quidem ut quaerat cupiditate. Ab et eum qui repellendus omnis culpa magni laudantium dolores. +

+
-
- -
- JavaScript 75% -
-
+
+ + + +
+
+
+

Facts

+

+ Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas. +

-
- - - - -
-
- PHP 80% -
-
+
+
+
+ + 232 +

Happy Clients consequuntur quae

+
+
+ +
+
+ + 521 +

Projects adipisci atque cum quia aut

+
+
+ +
+
+ + 1,463 +

Hours Of Support aut commodi quaerat

+
+
+ +
+
+ + 15 +

Hard Workers rerum asperiores dolor

+
+
-
- -
- WordPress/CMS 90% -
-
+
+ + + +
+
+
+

Skills

+

+ Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas. +

-
- -
- Photoshop 55% -
-
+
+
+
+ HTML 100% +
+
+
+
+ +
+ CSS 90% +
+
+
+
+ +
+ JavaScript 75% +
+
+
+
+
+ +
+
+ PHP 80% +
+
+
+
+ +
+ WordPress/CMS 90% +
+
+
+
+ +
+ Photoshop 55% +
+
+
+
+
-
+
+ + + +
+
+
+

Services

+

+ Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas. +

+
-
- - - - -
- - -
-
- -
-

Services

-

Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint - consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit - in iste officiis commodi quidem hic quas.

-
- -
-
-
-

Lorem Ipsum

-

Voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint - occaecati cupiditate non provident

-
-
-
-

Dolor Sitema

-

Minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo - consequat tarad limino ata

-
-
-
-

Sed ut perspiciatis

-

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu - fugiat nulla pariatur

-
-
-
-

Magni Dolores

-

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt - mollit anim id est laborum

-
-
-
-

Nemo Enim

-

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium - voluptatum deleniti atque

-
-
-
-

Eiusmod Tempor

-

Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum - soluta nobis est eligendi

-
-
- -
-
- - -
-
- -
-

Contact

-

Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint - consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit - in iste officiis commodi quidem hic quas.

-
- -
- -
-
-
-
- - -
+
+
+
+

Lorem Ipsum

+

+ Voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident +

+
+
+
+

Dolor Sitema

+

+ Minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat tarad limino ata +

+
+
+
+

Sed ut perspiciatis

+

+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur +

+
+
+
+

Magni Dolores

+

+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum +

+
+
+
+

Nemo Enim

+

+ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque +

+
+
+
+

Eiusmod Tempor

+

+ Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi +

+
-
- - -
+
+
+ + + +
+
+
+

Contact

+

+ Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas. +

-
-
- - -
-
-
- - -
-
-
-
Loading
-
-
Your message has been sent. Thank you!
-
-
- - - - - - -
- -
- - - - - - - - - - - - - - - - - - +
+
+
+
+
+ + +
+
+
+ + +
+
+
+
+ + +
+
+
+ + +
+
+
+
Loading
+
+
+ Your message has been sent. Thank you! +
+
+
+ +
+
+
+
+ + + +
+ + + + + + + + + + + + + + + + + + + - \ No newline at end of file + diff --git a/Day-2 Task/npm b/Day-2 Task/npm new file mode 100644 index 0000000..e69de29