diff --git a/css/style.css b/css/style.css index f04f97c..fe7d194 100644 --- a/css/style.css +++ b/css/style.css @@ -1,302 +1,381 @@ -*{ - margin: 0; - padding: 0; - box-sizing: border-box; - font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } -a{ - text-decoration: none; - color: #3b506c; +a { + text-decoration: none; + color: #3b506c; } html { - scroll-behavior: smooth; - } -section{ - display: block; + scroll-behavior: smooth; +} +section { + display: block; } -.container{ - width: 85%; - margin: auto; - display: block; +.container { + width: 85%; + margin: auto; + display: block; } /* The style of header section */ /* logo color: #0c66ff */ /* text color: #3b506c */ -header{ - width: 100%; - box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px; - overflow: hidden; - padding: 15px 0; - display: block; - position: fixed; - top: 0; - background-color: #fff; - z-index: 1; -} -.logo, nav{ - width: 50%; - float: left; -} -header nav ul{ - text-align: right; -} -header nav ul li{ - list-style: none; - display: inline; - text-align: right; - -} -header nav ul li a{ - text-decoration: none; - padding: 0px 10px; - color: #3b506c; - font-weight: 600; - font-size: 25px; - transition: .3s all; -} -header nav ul li a:hover{ - color: #0c66ff; +header { + width: 100%; + box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px; + overflow: hidden; + padding: 15px 0; + display: block; + position: fixed; + top: 0px; + background-color: #fff; + z-index: 9999999; +} +.logo, +nav { + width: 50%; + float: left; +} +header nav ul { + text-align: right; +} +header nav ul li { + list-style: none; + display: inline; + text-align: right; +} +header nav ul li a { + text-decoration: none; + padding: 0px 10px; + color: #3b506c; + font-weight: 600; + font-size: 25px; + transition: 0.3s all; +} +header nav ul li a:hover { + color: #0c66ff; } /* Hero section style */ -.hero{ - margin-top: 100px; +.hero { + margin-top: 100px; } -.hero .content{ - text-align: center; +.hero .content { + text-align: center; } -.hero h1 , .hero p{ - color: #3b506c; +.hero h1, +.hero p { + color: #3b506c; } .hero h1 { - font-weight: 600; - font-size: 60px; -} -.hero .highlight{ - color: #0c66ff; -} -.hero p{ - margin: 70px 0px; - font-size: 25px; - font-family: 600; -} -.hero .banner img{ - margin-top: 70px; - width: 50%; - margin: auto; - display: block; + font-weight: 600; + font-size: 60px; +} +.hero .highlight { + color: #0c66ff; +} +.hero p { + margin: 70px 0px; + font-size: 25px; + font-family: 600; +} +.hero .banner img { + margin-top: 70px; + width: 50%; + margin: auto; + display: block; +} +/* Banner image animation */ +.slider-thumb { + width: 100%; + height: 100%; + position: relative; + z-index: 9999; + overflow: hidden; +} +.slider-thumb::before { + z-index: -99; + content: ""; + margin: auto; + width: 450px; + height: 450px; + background: #0C66FF; + border-radius: 62% 47% 82% 35% / 45% 45% 80% 66%; + will-change: border-radius, transform, opacity; + animation: sliderShape 5s linear infinite; + display: block; + z-index: -1; + background-image: url(https://res.cloudinary.com/de4xozulb/image/upload/v1704000539/Profile%20Pictures/h2behzdsb67kmqy1lvon.png); + background-repeat: no-repeat; + background-position: center; + -webkit-animation: sliderShape 5s linear infinite; +} +@keyframes sliderShape { + 0%, + 100% { + border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; + transform: translate3d(0, 0, 0) rotateZ(0.01deg); + } + 34% { + border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%; + transform: translate3d(0, 5px, 0) rotateZ(0.01deg); + } + 50% { + transform: translate3d(0, 0, 0) rotateZ(0.01deg); + } + 67% { + border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%; + transform: translate3d(0, -3px, 0) rotateZ(0.01deg); + } } - /* Complete ptoject style */ -.all-c-project{ - display: flex; - gap: 50px; +.all-c-project { + display: flex; + gap: 50px; } -.complete-project .col-2{ - margin-top: 70px; +.complete-project .col-2 { + margin-top: 70px; } -.complete-project .col-2:first-child{ - text-align: right; +.complete-project .col-2:first-child { + text-align: right; } -.complete-project .col-2:first-child h1{ - font-size: 50px; - color: red; - margin-bottom: 50px; +.complete-project .col-2:first-child h1 { + font-size: 50px; + color: red; + margin-bottom: 50px; } -.complete-project .col-2:first-child p{ - color: #3b506c; - font-size: 25px; - font-weight: 600; +.complete-project .col-2:first-child p { + color: #3b506c; + font-size: 25px; + font-weight: 600; } -.complete-project .col-2:last-child{ - text-align: left; - color: #3b506c; - font-size: 35px; +.complete-project .col-2:last-child { + text-align: left; + color: #3b506c; + font-size: 35px; } /* Posts style */ -.all-posts{ - display: flex; - gap: 30px; -} -.posts-section{ - display: block; -} -.posts-section .col-3{ - overflow: hidden; - background-color: #e1f0e1; - text-align: left; - padding-bottom: 50px; - border-radius: 20px; - transition: .3s all ease; - margin-top: 70px; - margin-bottom: 70px; - box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; -} -.posts-section .col-3 img{ - height: 250px; - width: 90%; - margin: auto; - text-align: center; - display: block; - transition: .3s all ease; - z-index: -1; - margin: 50px auto; - -} -.posts-section .col-3:hover > img{ - filter: grayscale(100%) -} -.posts-section .col-3 p{ - width: 90%; - margin: auto; - display: block; - margin-top: 25px; - color: #3b506c; - font-size: 18px; -} -.posts-section .col-3 h3{ - width: 90%; - margin: auto; - display: block; - color: #3b506c; - font-weight: bold; - font-size: 25px; -} -.posts-section .col-3:first-child{ - background-color: rgba(255, 0, 0, 0.103); - margin-left: 0px; -} -.posts-section .col-3:last-child{ - background-color: #FFFFDA; -} -.posts-section .col-3:hover{ - background-color: #FFFFDA; -} -.posts-section .col-3:last-child:hover{ - background-color: rgba(255, 0, 0, 0.103); +.all-posts { + display: flex; + gap: 30px; +} +.posts-section { + display: block; +} +.posts-section .col-3 { + overflow: hidden; + background-color: #e1f0e1; + text-align: left; + padding-bottom: 50px; + border-radius: 20px; + transition: 0.3s all ease; + margin-top: 70px; + margin-bottom: 70px; + box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; +} +.posts-section .col-3 img { + height: 250px; + width: 90%; + margin: auto; + text-align: center; + display: block; + transition: 0.3s all ease; + z-index: -1; + margin: 50px auto; +} +.posts-section .col-3:hover > img { + filter: grayscale(100%); +} +.posts-section .col-3 p { + width: 90%; + margin: auto; + display: block; + margin-top: 25px; + color: #3b506c; + font-size: 18px; +} +.posts-section .col-3 h3 { + width: 90%; + margin: auto; + display: block; + color: #3b506c; + font-weight: bold; + font-size: 25px; +} +.posts-section .col-3:first-child { + background-color: rgba(255, 0, 0, 0.103); + margin-left: 0px; +} +.posts-section .col-3:last-child { + background-color: #ffffda; +} +.posts-section .col-3:hover { + background-color: #ffffda; +} +.posts-section .col-3:last-child:hover { + background-color: rgba(255, 0, 0, 0.103); } /* Footer style */ -.all-footer-item{ - display: flex; - justify-content: space-around; +.all-footer-item { + display: flex; + justify-content: space-around; } -footer{ - background-color: #EEEEEE; - overflow: hidden; - width: 100%; - display: block; +footer { + background-color: #eeeeee; + overflow: hidden; + width: 100%; + display: block; } -footer .col-4{ - padding: 50px 0; - color: #3b506c; +footer .col-4 { + padding: 50px 0; + color: #3b506c; } -footer .col-4 h2{ - font-size: 25px; +footer .col-4 h2 { + font-size: 25px; } -footer .col-4 ul{ - list-style: none; - margin-top: 30px; +footer .col-4 ul { + list-style: none; + margin-top: 30px; } -footer .col-4 ul li{ - font-size: 20px; - cursor: pointer; +footer .col-4 ul li { + font-size: 20px; + cursor: pointer; } /* Bottom to top */ #myBtn { - display: none; - position: fixed; - bottom: 20px; - right: 30px; - z-index: 99; - font-size: 18px; - border: none; - outline: none; - background-color: #0c66ff; - color: white; - cursor: pointer; - padding: 15px; - border-radius: 100%; - line-height: 30px; - } - - #myBtn:hover { - background-color: #3b506c; - } + display: none; + position: fixed; + bottom: 20px; + right: 30px; + z-index: 99; + font-size: 18px; + border: none; + outline: none; + background-color: #0c66ff; + color: white; + cursor: pointer; + padding: 15px; + border-radius: 100%; + line-height: 30px; +} - .active a{ - color: #0c66ff; - } +#myBtn:hover { + background-color: #3b506c; +} +.active a { + color: #0c66ff; +} -.portfolio{ - background-color: #EDEEF0; +.portfolio { + background-color: #00000075; + background-image: url(../images/bg-banner.jpg); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + background-blend-mode: multiply; +} +.portfolio-col-2 { + display: flex; + align-items: center; + justify-content: space-between; + padding-top: 150px; } -.portfolio-col-2{ + +/* featured */ +/* CSS */ +.featured div{ + width: 80%; display: flex; - align-items: center; - justify-content: space-between; - padding-top: 150px; + margin: 30px auto; + gap: 10px; + overflow: hidden; +} +.featured div button { + display: flex; + flex-direction: column; + align-items: center; + padding: 16px 20px; + font-family: -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif; + border-radius: 6px; + border: none; + + background: #6E6D70; + box-shadow: 0px 0.5px 1px rgba(0, 0, 0, 0.1), inset 0px 0.5px 0.5px rgba(255, 255, 255, 0.5), 0px 0px 0px 0.5px rgba(0, 0, 0, 0.12); + color: #DFDEDF; + user-select: none; + -webkit-user-select: none; + touch-action: manipulation; } +.featured div button:focus { + box-shadow: inset 0px 0.8px 0px -0.25px rgba(255, 255, 255, 0.2), 0px 0.5px 1px rgba(0, 0, 0, 0.1), 0px 0px 0px 3.5px rgba(58, 108, 217, 0.5); + outline: 0; +} + + /* Hero section style */ -.all-hero{ - display: flex; +.all-hero { + display: flex; } -.hero-col-2{ - width: 100%; +.hero-col-2 { + width: 100%; } -.hero-col-2 h1{ - font-size: 70px; - margin-bottom: 20px; - color: #3b506c; +.hero-col-2 h1 { + font-size: 70px; + margin-bottom: 20px; + color: #ffffffa0; } -.hero-col-2 span{ - background: linear-gradient(to left, #E76491, #FF9A52 70%); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; +.hero-col-2 span { + background: linear-gradient(to left, #e76491, #ff9a52 70%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; } -.hero-col-2 img{ - width: 85%; +.hero-col-2 img { + width: 85%; } -.hero-col-2 p{ - color: #3b506c; - font-size: 23px; +.hero-col-2 p { + color: #ffffffa0; + font-size: 23px; } - - /* protfolio btn style */ -.btns{ - display: flex; - align-items: center; - justify-content: center; - gap: 30px; - margin: 30px 0px; -} -.btns button{ - padding: 20px 40px; - border: 1px solid #3b506c; - border-radius: 30px; - font-size: 18px; - color: #3b506c; - transition: .3s all; - overflow: hidden; +.btns { + display: flex; + align-items: center; + justify-content: center; + gap: 30px; + margin: 30px 0px; +} +.btns button { + padding: 20px 40px; + border: 1px solid #3b506c; + border-radius: 30px; + font-size: 18px; + color: #3b506c; + transition: 0.3s all; + overflow: hidden; +} +.btns button:first-child { + background: linear-gradient(to left, #b16cea, #ef6183, #ffa34d); + color: #fff; + border: 1px solid transparent; +} +.btns button:last-child:hover { + background: linear-gradient(to left, #b16cea, #ef6183, #ffa34d); + color: #fff; + border: 1px solid transparent; +} +.btns button:first-child:hover { + background: #edeef0; + color: #3b506c; + border: 1px solid #3b506c; } -.btns button:first-child{ - background: linear-gradient(to left, #B16CEA, #EF6183, #FFA34D); - color: #fff; - border: 1px solid transparent; -} -.btns button:last-child:hover{ - background: linear-gradient(to left, #B16CEA, #EF6183, #FFA34D); - color: #fff; - border: 1px solid transparent; -} -.btns button:first-child:hover{ - background: #EDEEF0; - color: #3b506c; - border: 1px solid #3b506c; -} \ No newline at end of file + +/* @supports (animation-timeline: view()) {} +@media (prefers-reduced-motion: no-preference) {} */ diff --git a/images/bg-banner.jpg b/images/bg-banner.jpg new file mode 100644 index 0000000..0897ed1 Binary files /dev/null and b/images/bg-banner.jpg differ diff --git a/index.html b/index.html index 2f1fc08..367a692 100644 --- a/index.html +++ b/index.html @@ -1,157 +1,220 @@ - - - - + + + Quick-project - - - + + + + - +
-
-
- - -
-
+
+
+ + +
+
-
-
-

Hello, I'm Mezbah,
ui/ux designer
based in The BANGLADESH.

-

I am a freelancer ui ux designer with experiennce of 2 years. In this 2 years i have worked so many companies & startups

-
- - -
-
-
- -
+
+
+

+ Hello, I'm Mezbah,
+ Full stack web developer in BANGLADESH. +

+

+ I am a Full stack web devloper with experiennce of 2 years. In this + 2 years i have worked so many Projects & startups +

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

It's Time To Amplify Your -
- Online Business -

-

This is website created by eshikon.com and owner is ali Sharif

-
- +
+
+

+ It's Time To Amplify Your +
+ Online Business +

+

This is website created by eshikon.com and owner is ali Sharif

+
+ +
-
-
-

3K

-

Dolor sit, amet consectetur adipisicing elit. Ea eaque obcaecati
consequuntur modi, blanditiis - doloremque?

-
-
-

Successfully
- completed project
- and idea

-
+
+
+

3K

+

+ Dolor sit, amet consectetur adipisicing elit. Ea eaque obcaecati +
+ consequuntur modi, blanditiis doloremque? +

+
+
+

+ Successfully
+ completed project
+ and idea +

+
-
-
- -

Unless your creativity

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, perspiciatis. Perspiciatis eveniet - ipsam ullam error dolor soluta, voluptatibus blanditiis pariatur consectetur, iure aut porro - quibusdam! Dolorem distinctio impedit fuga

-
-
- -

Get More Result

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, perspiciatis. Perspiciatis eveniet - ipsam ullam error dolor soluta, voluptatibus blanditiis pariatur consectetur, iure aut porro - quibusdam! Dolorem distinctio impedit fuga

-
-
- -

Increase you Audience

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, perspiciatis. Perspiciatis eveniet - ipsam ullam error dolor soluta, voluptatibus blanditiis pariatur consectetur, iure aut porro - quibusdam! Dolorem distinctio impedit fuga

-
+
+
+ +

Unless your creativity

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, + perspiciatis. Perspiciatis eveniet ipsam ullam error dolor soluta, + voluptatibus blanditiis pariatur consectetur, iure aut porro + quibusdam! Dolorem distinctio impedit fuga +

+
+
+ +

Get More Result

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, + perspiciatis. Perspiciatis eveniet ipsam ullam error dolor soluta, + voluptatibus blanditiis pariatur consectetur, iure aut porro + quibusdam! Dolorem distinctio impedit fuga +

+
+
+ +

Increase you Audience

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, + perspiciatis. Perspiciatis eveniet ipsam ullam error dolor soluta, + voluptatibus blanditiis pariatur consectetur, iure aut porro + quibusdam! Dolorem distinctio impedit fuga +

+
- +
- - - - +