diff --git a/mir coder portfolio/assets/css/style.css b/mir coder portfolio/assets/css/style.css new file mode 100644 index 0000000..7563da4 --- /dev/null +++ b/mir coder portfolio/assets/css/style.css @@ -0,0 +1,1497 @@ +/*-----------------------------------*\ + #main.css +\*-----------------------------------*/ + +/** + * copyright 2022 codewithsadee + */ + + + + + +/*-----------------------------------*\ + #CUSTOM PROPERTY +\*-----------------------------------*/ + +:root { + + /** + * COLORS + */ + + /* background colors */ + --bg-white: hsla(0, 0%, 100%, 1); + --bg-light-gray: hsla(240, 1%, 83%, 1); + --bg-jet: hsla(0, 0%, 18%, 1); + --bg-eerie-black: hsla(0, 0%, 13%, 1); + --bg-rich-black-fogra-29: hsla(229, 23%, 9%, 1); + --bg-smoky-black: hsla(0, 0%, 6%, 1); + --bg-black: hsla(0, 0%, 0%, 1); + + /* gradient colors */ + --gradient-1: linear-gradient(to top, var(--bg-black) 0%, transparent 40%); + --gradient-2: radial-gradient(circle at 75% 100%, hsla(79, 100%, 70%, 0.3) 0%, transparent 100%); + + /* text colors */ + --text-white: hsla(0, 0%, 100%, 1); + --text-light-gray: hsla(240, 1%, 83%, 1); + --text-rich-black-fogra-29: hsla(216, 42%, 12%, 1); + --text-smoky-black: hsla(0, 0%, 6%, 1); + --text-black: hsla(0, 0%, 0%, 1); + + /* border colors */ + --border-white: hsla(0, 0%, 100%, 1); + --border-light-gray: hsla(240, 1%, 83%, 1); + --border-gainsboro: hsla(220, 13%, 91%, 1); + --border-eerie-black: hsla(0, 0%, 13%, 1); + --border-smoky-black: hsla(0, 0%, 6%, 1); + + /** + * TYPOGRAPHY + */ + + /* font family */ + --fontFamily-recoleta: 'Recoleta'; + --fontFamily-roboto: 'Roboto', sans-serif; + + /* font size */ + --fontSize-1: 4.6rem; + --fontSize-2: 4.5rem; + --fontSize-3: 4rem; + --fontSize-4: 3rem; + --fontSize-5: 2.4rem; + --fontSize-6: 1.8rem; + --fontSize-7: 2rem; + --fontSize-8: 1.6rem; + --fontSize-9: 1.5rem; + --fontSize-10: 1.4rem; + + /* font weight */ + --weight-regular: 400; + --weight-medium: 500; + + /** + * SPACING + */ + + --section-spacing: 70px; + + /** + * BORDER RADIUS + */ + + --radius-pill: 500px; + --radius-circle: 50%; + + /** + * TRANSITION + */ + + --transition-1: 0.25s ease; + --transition-2: 0.5s ease; + --transition-3: 1000ms cubic-bezier(0.03, 0.98, 0.52, 0.99) 0s; + --cubic-in: cubic-bezier(0.51, 0.03, 0.64, 0.28); + --cubic-out: cubic-bezier(0.05, 0.83, 0.52, 0.97); + +} + + + + + +/*-----------------------------------*\ + #RESET +\*-----------------------------------*/ + +*, +*::before, +*::after { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +li { list-style: none; } + +a, +img, +span, +input, +button, +textarea, +ion-icon { display: block; } + +a { + color: inherit; + text-decoration: none; +} + +img { height: auto; } + +input, +button, +textarea { + background: none; + border: none; + font: inherit; +} + +input, +textarea { width: 100%; } + +button { cursor: pointer; } + +ion-icon { pointer-events: none; } + +address { font-style: normal; } + +html { + font-size: 10px; + scroll-behavior: smooth; +} + +body { + background-color: var(--bg-black); + color: var(--text-light-gray); + font-family: var(--fontFamily-roboto); + font-size: var(--fontSize-8); + line-height: 1.75; + overflow: hidden; +} + +body.loaded { overflow-y: auto; } + +body.nav-active { overflow: hidden; } + +::-webkit-scrollbar { width: 5px; } + +::-webkit-scrollbar-track { border-inline-start: 1px solid var(--border-eerie-black); } + +::-webkit-scrollbar-thumb { background-color: var(--bg-white); } + + + + + +/*-----------------------------------*\ + #REUSED STYLE +\*-----------------------------------*/ + +.container { padding-inline: 16px; } + +.btn\:hover { + position: relative; + z-index: 1; +} + +.btn\:hover::before, +.btn\:hover::after { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; + transition: var(--transition-1); + will-change: transform; + pointer-events: none; +} + +.btn\:hover::after { + border: 1px solid var(--bg-white); + transform: scale(1.2); + opacity: 0; +} + +.btn\:hover:is(:hover, :focus-visible)::before { + transform: scale(0.5); + opacity: 0; +} + +.btn\:hover:is(:hover, :focus-visible)::after { + transform: scale(1); + opacity: 1; +} + +.text-center { text-align: center; } + +.has-before, +.has-after { + position: relative; + z-index: 1; +} + +.has-before::before, +.has-after::after { + content: ""; + position: absolute; +} + +.img-holder { + aspect-ratio: var(--width) / var(--height); + overflow: hidden; + background-color: var(--bg-jet); +} + +.img-cover { + width: 100%; + height: 100%; + object-fit: cover; +} + +[data-tilt] { transition: var(--transition-3); } + +.title { + color: var(--text-white); + font-family: var(--fontFamily-recoleta); + font-weight: var(--weight-regular); +} + +.h1 { + font-size: var(--fontSize-2); + line-height: 1.2; +} + +.h2, +.h3, +.h4, +.h5 { line-height: 1.3; } + +.h2 { font-size: var(--fontSize-3); } + +.h3 { font-size: var(--fontSize-4); } + +.h4 { font-size: var(--fontSize-5); } + +.h5 { font-size: var(--fontSize-7); } + +.h6 { font-size: var(--fontSize-6); } + +.btn { + color: var(--text-white); + font-size: var(--fontSize-9); + font-weight: var(--weight-medium); + display: flex; + align-items: center; + gap: 10px; + max-width: max-content; + height: 56px; + padding-inline: 30px; +} + +.btn::before { background-color: var(--bg-smoky-black); } + +.btn ion-icon { + font-size: 1.8rem; + --ionicon-stroke-width: 50px; +} + +.section { + padding-block: var(--section-spacing); + overflow-x: hidden; +} + + + + + +/*-----------------------------------*\ + #PRELOADER +\*-----------------------------------*/ + +.preloader { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100vh; + box-shadow: inset 55vw 0 0 0 var(--bg-white), + inset -55vw 0 0 0 var(--bg-white); + display: grid; + place-items: center; + z-index: 10; +} + +.preloader.loaded { + transition: 300ms ease 500ms; + pointer-events: none; + box-shadow: inset 0 0 0 0 var(--bg-white), + inset 0 0 0 0 var(--bg-white); +} + +.preloader .line { + width: 1px; + height: 100%; + background-color: var(--bg-black); + transition: var(--transition-2); + animation: loading 1000ms linear forwards; +} + +@keyframes loading { + 0% { transform: scaleY(0); } + 100% { transform: scaleY(0.3); } +} + +.preloader.loaded .line { animation: loaded 500ms ease forwards; } + +@keyframes loaded { + 0% { transform: scaleY(0.3); } + + 100% { + transform: scaleY(1); + opacity: 0; + } +} + + + + + +/*-----------------------------------*\ + #HEADER +\*-----------------------------------*/ + +.header .btn { display: none; } + +.header { + position: absolute; + top: 0; + left: 0; + width: 100%; + background-color: var(--bg-black); + padding-block: 20px; + z-index: 4; +} + +.header.active { + position: fixed; + background-color: var(--bg-jet); + padding-block: 10px; + animation: slideIn 500ms ease-out forwards; +} + +@keyframes slideIn { + 0% { + opacity: 0; + transform: translateY(-100%); + } + + 100% { + opacity: 1; + transform: translateY(0); + } +} + +.header .container { + display: flex; + justify-content: space-between; + align-items: center; +} + +.nav-open-btn { + width: 50px; + height: 50px; + display: grid; + place-content: center; + gap: 6px; +} + +.nav-open-btn .line { + width: 24px; + height: 2px; + background-color: var(--bg-black); + transition: var(--transition-1); +} + +.nav-open-btn:is(:hover, :focus-visible) .line { background-color: var(--bg-white); } + +.nav-open-btn:is(:hover, :focus-visible) .line-1 { transform: scaleX(0.7); } + +.nav-open-btn::before { background-color: var(--bg-white); } + +.nav-open-btn::after { background-color: var(--bg-black); } + +.navbar { + position: fixed; + background-color: var(--bg-black); + top: 0; + left: -300px; + width: 100%; + max-width: 300px; + height: 100vh; + padding: 25px 20px; + visibility: hidden; + transition: 250ms var(--cubic-in); + z-index: 3; +} + +.navbar.active { + transform: translateX(300px); + visibility: visible; + transition: 500ms var(--cubic-out); +} + +.navbar-top { + display: flex; + justify-content: space-between; + align-items: center; + padding-block-end: 20px; + border-block-end: 1px solid var(--border-smoky-black); + margin-block-end: 10px; +} + +.nav-close-btn { + width: 30px; + height: 30px; + background-color: var(--bg-smoky-black); + color: var(--text-white); + font-size: 2rem; + display: grid; + place-items: center; +} + +.nav-close-btn ion-icon { --ionicon-stroke-width: 50px; } + +.navbar-link { + padding: 8px; + margin-block-start: 4px; +} + +.navbar-link:is(:hover, :focus-visible) { color: var(--text-white); } + +.overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100vh; + background-color: var(--bg-black); + opacity: 0; + pointer-events: none; + z-index: 2; + transition: var(--transition-1); +} + +.overlay.active { + opacity: 0.5; + pointer-events: all; +} + + + + + +/*-----------------------------------*\ + #HERO +\*-----------------------------------*/ + +.hero { + position: relative; + padding-block-start: 120px; +} + +.hero .container { + display: grid; + gap: 50px; +} + +.banner-outline { + position: relative; + max-width: max-content; + margin-inline: auto; +} + +.banner-outline::after { + top: 20px; + right: 0; + width: 100%; + height: 100%; + outline: 1px solid var(--border-eerie-black); + border-radius: var(--radius-pill); +} + +.hero-banner { + position: relative; + border-radius: var(--radius-pill); +} + +.hero-banner::after { + top: 0; + left: 0; + bottom: 0; + right: 0; + background-image: var(--gradient-1); + opacity: 0.7; + pointer-events: none; +} + +.banner-outline .span { + position: absolute; + bottom: 40px; + left: 50%; + transform: translateX(-50%); + font-size: var(--fontSize-4); + min-width: max-content; + z-index: 1; +} + +.hero .btn { + margin-block: 20px; + margin-inline: auto; +} + +.hero .shape { + position: absolute; + max-width: 100%; + z-index: -1; +} + +.hero .shape-1 { + top: -60px; + left: 120px; +} + +.hero .shape-2 { + top: 180px; + left: 0; +} + + + + + +/*-----------------------------------*\ + #SERVICE +\*-----------------------------------*/ + +.service { + border-block-start: 1px solid var(--border-eerie-black); + margin-block-start: var(--section-spacing); +} + +.service .container { padding-inline: 0; } + +.service-item { border-block-end: 1px solid var(--border-eerie-black); } + +.service-card { + position: relative; + padding-block: 45px; +} + +.service-card .card-icon { + max-width: max-content; + margin-inline: auto; + transition: var(--transition-1); +} + +.service-card .card-title { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -100%); + color: var(--text-white); + font-size: var(--fontSize-5); + font-weight: var(--weight-regular); + line-height: 1.3; + opacity: 0; + transition: var(--transition-1); +} + +.service-card:is(:hover, :focus-visible) .card-title { + opacity: 1; + transform: translate(-50%, -50%); +} + +.service-card:is(:hover, :focus-visible) .card-icon { opacity: 0; } + + + + + +/*-----------------------------------*\ + #ABOUT +\*-----------------------------------*/ + +.tab-container { border: 1px solid var(--border-eerie-black); } + +.tab-btn { + width: 100%; + padding-block: 16px; + border-block-end: 1px solid var(--border-eerie-black); + transition: var(--transition-1); +} + +.tab-btn:is(:hover, :focus-visible, .active) { background: var(--bg-eerie-black); } + +.tab-content { + display: none; + padding: 30px; +} + +.tab-content.active { + display: block; + animation: fade 500ms linear forwards; +} + +@keyframes fade { + 0% { opacity: 0; } + 100% { opacity: 1; } +} + +.tab-content .grid-list { + display: grid; + gap: 30px; +} + +.tab-content .section-title { margin-block-end: 30px; } + +.tab-content .section-text, +.about-item:not(:last-child) { margin-block-end: 20px; } + +.about-item .span { line-height: 1.4; } + +.social-list { + display: flex; + align-items: center; + gap: 20px; +} + +.social-link { color: var(--text-white); } + +.skill-wrapper { + display: flex; + align-items: center; + justify-content: space-between; + margin-block: 30px 12px; +} + +.skill-wrapper .span { + font-family: var(--fontFamily-recoleta); + font-weight: var(--weight-medium); +} + +.progress-bar { + background-color: var(--bg-smoky-black); + height: 4px; +} + +.progress-fill { + background-color: var(--bg-white); + height: 100%; +} + +.interview-card { position: relative; } + +.interview-card .btn { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 60px; + height: 60px; + justify-content: center; + border-radius: var(--radius-circle); + color: var(--text-smoky-black); +} + +.interview-card .btn::before, +.interview-card .btn::after { border-radius: inherit; } + +.interview-card .btn::before { background-color: var(--bg-white); } + +.interview-card .btn:is(:hover, :focus-visible) { color: var(--text-white); } + +.exhibition-card { position: relative; } + +.exhibition-card .card-icon { + position: absolute; + top: 30px; + right: 30px; + background-color: var(--bg-white); + width: 40px; + height: 40px; + border-radius: var(--radius-circle); + color: var(--bg-smoky-black); + display: grid; + place-items: center; +} + + + + + +/*-----------------------------------*\ + #CTA +\*-----------------------------------*/ + +.cta { border-block: 1px solid var(--border-eerie-black); } + +.cta .section-title::before { + content: ""; + display: block; + background-color: var(--bg-white); + width: 60px; + height: 30px; + border-radius: 30px 30px 0 0; + margin-inline: auto; + margin-block-end: 15px; +} + +.cta .btn { + margin-inline: auto; + margin-block-start: 30px; +} + + + + + +/*-----------------------------------*\ + #PROJECT +\*-----------------------------------*/ + +.project-card .card-banner::before { + top: 0; + left: 0; + bottom: 0; + right: 0; + background-color: var(--bg-rich-black-fogra-29); + background-image: var(--gradient-2); + opacity: 0; + transition: var(--transition-1); +} + +.project-card .card-banner:is(:hover, :focus-within)::before { opacity: 0.9; } + +.project-card .btn { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -100%); + min-width: max-content; + opacity: 0; + transition: var(--transition-2); +} + +.project-card .card-banner:is(:hover, :focus-within) .btn { + transform: translate(-50%, -50%); + opacity: 1; +} + +.project-card .card-content { padding: 24px 30px 0; } + +.project-card .card-subtitle { + font-size: var(--fontSize-10); + text-transform: uppercase; + letter-spacing: 2px; + margin-block-end: 10px; +} + +.project-card .card-title { + display: inline; + background-image: linear-gradient(var(--bg-white), var(--bg-white)); + background-repeat: no-repeat; + background-position: left bottom; + background-size: 0 1px; + transition: var(--transition-1); +} + +.project-card .card-title:is(:hover, :focus-visible) { background-size: 100% 1px; } + +.slider-list { + display: flex; + align-items: flex-start; + gap: 30px; + overflow: auto; + scroll-snap-type: inline mandatory; + padding-block-end: 5px; +} + +.slider-list::-webkit-scrollbar { display: none; } + +.slider-item { + min-width: 100%; + scroll-snap-align: start; +} + + + + + +/*-----------------------------------*\ + #TESTIMONIALS +\*-----------------------------------*/ + +.testi { border-block: 1px solid var(--border-eerie-black); } + +.testi-content { padding-inline-start: 15px; } + +.testi .section-text { + text-indent: -15px; + line-height: 1.5; + margin-block-end: 20px; +} + +.profile-card .card-banner { display: none; } + +.profile-card .card-subtitle { font-size: var(--fontSize-10); } + + + + + +/*-----------------------------------*\ + #CONTACT +\*-----------------------------------*/ + +.contact .section-title { + font-size: var(--fontSize-1); + margin-block-end: 25px; +} + +.contact-content { + display: grid; + gap: 60px; +} + +.contact-form .input-field { + height: 50px; + padding-block: 12px; + margin-block-end: 20px; + color: var(--text-white); + outline: none; + border-block-end: 1px solid var(--border-eerie-black); + transition: border-color var(--transition-1); +} + +.contact-form .input-field::placeholder { color: var(--text-light-gray); } + +.contact-form .input-field:focus { border-color: var(--border-light-gray); } + +textarea.input-field { + min-height: 165px; + resize: none; +} + +.contact-form .btn { margin-block-start: 30px; } + +.contact .map { + width: 100%; + filter: grayscale(1); +} + +.contact-item { + display: flex; + justify-content: flex-start; + align-items: center; + gap: 15px; +} + +.contact-item:not(:last-child) { + padding-block-end: 30px; + border-block-end: 1px solid var(--border-eerie-black); + margin-block-end: 30px; +} + +.contact-item .title { color: var(--text-light-gray); } + + + + + +/*-----------------------------------*\ + #FOOTER +\*-----------------------------------*/ + +.footer { border-block-start: 1px solid var(--border-eerie-black); } + +.footer .container { + display: flex; + justify-content: space-between; + align-items: center; + gap: 20px; +} + +.copyright { + flex-grow: 1; + font-family: var(--fontFamily-recoleta); +} + +.back-top-btn .span { display: none; } + +.back-top-btn { + color: var(--text-white); + padding: 32px 16px; + border-inline: 1px solid var(--border-eerie-black); +} + + + + + +/*-----------------------------------*\ + #CUSTOM CURSOR +\*-----------------------------------*/ + +.cursor-dot, +.cursor-outline { display: none; } + + + + + +/*-----------------------------------*\ + #MEDIA QUERIES +\*-----------------------------------*/ + +/** + * responsive for large than 575px screen + */ + +@media (min-width: 575px) { + + /** + * CUSTOM PROPERTY + */ + + :root { + + /** + * TYPOGRAPHY + */ + + /* font size */ + --fontSize-1: 5.6rem; + --fontSize-5: 3.2rem; + + } + + + + /** + * REUSED STYLE + */ + + .container { + max-width: 540px; + width: 100%; + margin-inline: auto; + } + + + + /** + * HERO + */ + + .hero .banner-outline { max-width: 410px; } + + .hero .banner-outline::after { right: -15px; } + + + + /** + * SERVICE + */ + + .service .container { max-width: unset; } + + .service-list { + display: flex; + flex-wrap: wrap; + } + + .service-item { width: 50%; } + + .service-item:nth-child(2n) { + border-inline-start: 1px solid var(--border-eerie-black); + } + + .service-card .card-title { --fontSize-5: 2.4rem; } + + + + /** + * ABOUT + */ + + .tab-btn-list { + display: flex; + flex-wrap: wrap; + } + + .tab-btn-item { + width: 50%; + flex-grow: 1; + } + + .tab-btn-item:nth-child(2n) { + border-inline-start: 1px solid var(--border-eerie-black); + } + + .tab-content { padding: 40px; } + + .about-list { + display: grid; + grid-template-columns: 1fr 1fr; + } + + .interview-card { + max-width: max-content; + margin-inline: auto; + } + + + + /** + * TESTIMONIALS + */ + + .profile-card .card-banner { + display: block; + border-radius: var(--radius-circle); + } + + .testi .profile-card { + display: flex; + align-items: center; + gap: 20px; + } + +} + + + + + +/** + * responsive for large than 768px screen + */ + +@media (min-width: 768px) { + + /** + * CUSTOM PROPERTY + */ + + :root { + + /** + * TYPOGRAPHY + */ + + /* font size */ + --fontSize-1: 6.6rem; + + /** + * SPACING + */ + + --section-spacing: 100px; + + } + + + + /** + * REUSED STYLE + */ + + .container { max-width: 720px; } + + + + /** + * HERO + */ + + .hero { text-align: left; } + + .hero .container { + grid-template-columns: 1fr 1fr; + align-items: center; + gap: 40px; + } + + .banner-outline { order: 1; } + + .hero .btn { margin-inline: 0; } + + + + /** + * SERVICE + */ + + .service-item { width: 25%; } + + .service-item:not(:last-child) { + border-inline-end: 1px solid var(--border-eerie-black); + } + + + + /** + * ABOUT + */ + + .tab-btn-item { width: 20%; } + + .tab-btn-item:not(:first-child) { + border-inline-start: 1px solid var(--border-eerie-black); + } + + :is([data-tab-content="interview"], [data-tab-content="exhibition"]) .grid-list { + grid-template-columns: 1fr 1fr; + } + + + + /** + * CTA + */ + + .cta { padding-block: 40px; } + + .cta .section-title { + display: flex; + align-items: center; + } + + .cta .section-title::before { + border-radius: 0 30px 30px 0; + width: 30px; + height: 60px; + flex-shrink: 0; + margin-block-end: 0; + } + + + + /** + * PROJECTS + */ + + .slider-item { min-width: calc(50% - 15px); } + + + + /** + * CUSTOM CURSOR + */ + + .cursor-dot, + .cursor-outline { + display: block; + position: fixed; + top: -60px; + left: -60px; + transform: translate(-50%, -50%); + border-radius: var(--radius-circle); + z-index: 10; + transition-property: opacity, transform; + transition-duration: 300ms; + transition-timing-function: ease-in-out; + pointer-events: none; + } + + .cursor-dot { + width: 60px; + height: 60px; + background-color: var(--bg-white); + transform: translate(-50%, -50%) scale(0.1); + } + + .cursor-dot.hovered { + transform: translate(-50%, -50%) scale(1); + mix-blend-mode: exclusion; + } + + .cursor-outline { + width: 30px; + height: 30px; + border: 2px solid var(--border-white); + opacity: 0.5; + transition-duration: 100ms; + } + + .cursor-outline.hovered { opacity: 0; } + +} + + + + + +/** + * responsive for large than 992px screen + */ + +@media (min-width: 992px) { + + /** + * CUSTOM PROPERTY + */ + + :root { + + /** + * TYPOGRAPHY + */ + + /* font size */ + --fontSize-2: 7rem; + + } + + + + /** + * REUSED STYLE + */ + + .container { max-width: 960px; } + + + + /** + * HEADER + */ + + .header .container { + margin-inline: 0; + min-width: 100%; + } + + .nav-open-btn, + .navbar-top { display: none; } + + .navbar { + all: unset; + display: block; + } + + .navbar-list { + display: flex; + gap: 16px; + } + + .header .btn { display: flex; } + + + + /** + * HERO + */ + + .hero .container { grid-template-columns: 1fr 0.7fr; } + + .hero .banner-outline { max-width: 366px; } + + .hero .wrapper { + display: flex; + align-items: center; + gap: 30px; + } + + .hero .btn { flex-shrink: 0; } + + + + /** + * SERVICE + */ + + .service { border-block-end: 1px solid var(--border-eerie-black); } + + .service-list { + gap: 158px; + flex-wrap: nowrap; + } + + .service .service-item { + border-inline: 1px solid var(--border-eerie-black); + border-block-end: none; + } + + + + /** + * ABOUT + */ + + .tab-content .grid-list { grid-template-columns: 1fr 1fr; } + + :is([data-tab-content="interview"], [data-tab-content="exhibition"], [data-tab-content="awward"]) .grid-list { + grid-template-columns: repeat(3, 1fr); + } + + + + /** + * CTA + */ + + .cta .container { + display: flex; + align-items: center; + justify-content: space-between; + } + + .cta .section-title { + text-align: left; + gap: 30px; + } + + .cta .btn { + flex-shrink: 0; + margin: 0; + } + + + + /** + * PROJECTS + */ + + .slider-item { min-width: calc(33.33% - 20px); } + + + + /** + * CONTACT + */ + + .contact-content { + grid-template-columns: 0.8fr 1fr 0.6fr; + gap: 30px; + align-items: center; + } + + + + /** + * BACK TO TOP + */ + + .back-top-btn .span { display: block; } + + .back-top-btn { + display: flex; + align-items: center; + gap: 10px; + } + +} + + + + + +/** + * responsive for large than 1200px screen + */ + +@media (min-width: 1200px) { + + /** + * CUSTOM PROPERTY + */ + + :root { + + /** + * TYPOGRAPHY + */ + + /* font size */ + --fontSize-2: 9rem; + --fontSize-4: 4rem; + --fontSize-5: 4rem; + --fontSize-6: 2rem; + + } + + + + /** + * REUSED STYLE + */ + + .container, + .service .container { max-width: 1200px; } + + .h1 { line-height: 1.1; } + + + + /** + * HEADER + */ + + .header { padding-block: 40px; } + + .header .container { padding-inline: 60px; } + + .navbar-list { gap: 50px; } + + + + /** + * HERO + */ + + .hero { padding-block-start: 160px; } + + .hero .banner-outline { max-width: 410px; } + + .hero-text { max-width: 30ch; } + + + + /** + * ABOUT + */ + + .tab-content { padding: 60px; } + + .tab-content .grid-list { gap: 50px; } + +} + + + + + +/** + * responsive for large than 1400px screen + */ + +@media (min-width: 1400px) { + + /** + * REUSED STYLE + */ + + .container, + .service .container { max-width: 1320px; } + + + + /** + * HEADER + */ + + .header { padding-inline: 90px; } + + + + /** + * HERO + */ + + .hero .container { grid-template-columns: 1fr 0.85fr; } + +} \ No newline at end of file diff --git a/mir coder portfolio/assets/font/font.css b/mir coder portfolio/assets/font/font.css new file mode 100644 index 0000000..d150292 --- /dev/null +++ b/mir coder portfolio/assets/font/font.css @@ -0,0 +1,31 @@ +/*-----------------------------------*\ + #style.css +\*-----------------------------------*/ + +/** + * copyright 2022 codewithsadee + */ + + + +/** + * RECOLETA FONT + */ + +@font-face { + font-family: 'Recoleta'; + src: local('Recoleta Regular'), local('Recoleta-Regular'), + url('./recoleta/Recoleta-Regular.woff2') format('woff2'); + font-weight: 400; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Recoleta'; + src: local('Recoleta Medium'), local('Recoleta-Medium'), + url('./recoleta/Recoleta-Medium.woff2') format('woff2'); + font-weight: 500; + font-style: normal; + font-display: swap; +} \ No newline at end of file diff --git a/mir coder portfolio/assets/font/recoleta/Recoleta-Medium.woff2 b/mir coder portfolio/assets/font/recoleta/Recoleta-Medium.woff2 new file mode 100644 index 0000000..44678ae Binary files /dev/null and b/mir coder portfolio/assets/font/recoleta/Recoleta-Medium.woff2 differ diff --git a/mir coder portfolio/assets/font/recoleta/Recoleta-Regular.woff2 b/mir coder portfolio/assets/font/recoleta/Recoleta-Regular.woff2 new file mode 100644 index 0000000..fb9dc51 Binary files /dev/null and b/mir coder portfolio/assets/font/recoleta/Recoleta-Regular.woff2 differ diff --git a/mir coder portfolio/assets/images/85377861.jpg b/mir coder portfolio/assets/images/85377861.jpg new file mode 100644 index 0000000..85c9075 Binary files /dev/null and b/mir coder portfolio/assets/images/85377861.jpg differ diff --git a/mir coder portfolio/assets/images/Boos Your Business.png b/mir coder portfolio/assets/images/Boos Your Business.png new file mode 100644 index 0000000..52796ec Binary files /dev/null and b/mir coder portfolio/assets/images/Boos Your Business.png differ diff --git a/mir coder portfolio/assets/images/CV.pdf b/mir coder portfolio/assets/images/CV.pdf new file mode 100644 index 0000000..c9b0285 Binary files /dev/null and b/mir coder portfolio/assets/images/CV.pdf differ diff --git a/mir coder portfolio/assets/images/IMG_9217.JPG b/mir coder portfolio/assets/images/IMG_9217.JPG new file mode 100644 index 0000000..4fceaab Binary files /dev/null and b/mir coder portfolio/assets/images/IMG_9217.JPG differ diff --git a/mir coder portfolio/assets/images/PAK-FOOD__1_-removebg-preview.png b/mir coder portfolio/assets/images/PAK-FOOD__1_-removebg-preview.png new file mode 100644 index 0000000..721eb27 Binary files /dev/null and b/mir coder portfolio/assets/images/PAK-FOOD__1_-removebg-preview.png differ diff --git a/mir coder portfolio/assets/images/Thumbs.db b/mir coder portfolio/assets/images/Thumbs.db new file mode 100644 index 0000000..3c3b29e Binary files /dev/null and b/mir coder portfolio/assets/images/Thumbs.db differ diff --git a/mir coder portfolio/assets/images/Untitled design (2)-fotor-bg-remover-2024031774340.png b/mir coder portfolio/assets/images/Untitled design (2)-fotor-bg-remover-2024031774340.png new file mode 100644 index 0000000..a893e06 Binary files /dev/null and b/mir coder portfolio/assets/images/Untitled design (2)-fotor-bg-remover-2024031774340.png differ diff --git a/mir coder portfolio/assets/images/Untitled design.png b/mir coder portfolio/assets/images/Untitled design.png new file mode 100644 index 0000000..51fca9b Binary files /dev/null and b/mir coder portfolio/assets/images/Untitled design.png differ diff --git a/mir coder portfolio/assets/images/about-banner.jpg b/mir coder portfolio/assets/images/about-banner.jpg new file mode 100644 index 0000000..856a37e Binary files /dev/null and b/mir coder portfolio/assets/images/about-banner.jpg differ diff --git a/mir coder portfolio/assets/images/awward-2.jpg b/mir coder portfolio/assets/images/awward-2.jpg new file mode 100644 index 0000000..7cbc01e Binary files /dev/null and b/mir coder portfolio/assets/images/awward-2.jpg differ diff --git a/mir coder portfolio/assets/images/awward-3.jpg b/mir coder portfolio/assets/images/awward-3.jpg new file mode 100644 index 0000000..cfb8008 Binary files /dev/null and b/mir coder portfolio/assets/images/awward-3.jpg differ diff --git a/mir coder portfolio/assets/images/contact-icon-1.png b/mir coder portfolio/assets/images/contact-icon-1.png new file mode 100644 index 0000000..b4cc31c Binary files /dev/null and b/mir coder portfolio/assets/images/contact-icon-1.png differ diff --git a/mir coder portfolio/assets/images/contact-icon-2.png b/mir coder portfolio/assets/images/contact-icon-2.png new file mode 100644 index 0000000..ab93e62 Binary files /dev/null and b/mir coder portfolio/assets/images/contact-icon-2.png differ diff --git a/mir coder portfolio/assets/images/contact-icon-3.png b/mir coder portfolio/assets/images/contact-icon-3.png new file mode 100644 index 0000000..e72eae0 Binary files /dev/null and b/mir coder portfolio/assets/images/contact-icon-3.png differ diff --git a/mir coder portfolio/assets/images/download (1).png b/mir coder portfolio/assets/images/download (1).png new file mode 100644 index 0000000..4a63578 Binary files /dev/null and b/mir coder portfolio/assets/images/download (1).png differ diff --git a/mir coder portfolio/assets/images/exhibition-1.jpg b/mir coder portfolio/assets/images/exhibition-1.jpg new file mode 100644 index 0000000..60228ad Binary files /dev/null and b/mir coder portfolio/assets/images/exhibition-1.jpg differ diff --git a/mir coder portfolio/assets/images/exhibition-2.jpg b/mir coder portfolio/assets/images/exhibition-2.jpg new file mode 100644 index 0000000..dc6471d Binary files /dev/null and b/mir coder portfolio/assets/images/exhibition-2.jpg differ diff --git a/mir coder portfolio/assets/images/exhibition-3.jpg b/mir coder portfolio/assets/images/exhibition-3.jpg new file mode 100644 index 0000000..dd3643d Binary files /dev/null and b/mir coder portfolio/assets/images/exhibition-3.jpg differ diff --git a/mir coder portfolio/assets/images/exhibition-4.jpg b/mir coder portfolio/assets/images/exhibition-4.jpg new file mode 100644 index 0000000..ce22327 Binary files /dev/null and b/mir coder portfolio/assets/images/exhibition-4.jpg differ diff --git a/mir coder portfolio/assets/images/exhibition-5.jpg b/mir coder portfolio/assets/images/exhibition-5.jpg new file mode 100644 index 0000000..fffce2e Binary files /dev/null and b/mir coder portfolio/assets/images/exhibition-5.jpg differ diff --git a/mir coder portfolio/assets/images/exhibition-6.jpg b/mir coder portfolio/assets/images/exhibition-6.jpg new file mode 100644 index 0000000..9287735 Binary files /dev/null and b/mir coder portfolio/assets/images/exhibition-6.jpg differ diff --git a/mir coder portfolio/assets/images/gym 2.png b/mir coder portfolio/assets/images/gym 2.png new file mode 100644 index 0000000..0ceb8af Binary files /dev/null and b/mir coder portfolio/assets/images/gym 2.png differ diff --git a/mir coder portfolio/assets/images/hero-shape-1.png b/mir coder portfolio/assets/images/hero-shape-1.png new file mode 100644 index 0000000..6442818 Binary files /dev/null and b/mir coder portfolio/assets/images/hero-shape-1.png differ diff --git a/mir coder portfolio/assets/images/hero-shape-2.png b/mir coder portfolio/assets/images/hero-shape-2.png new file mode 100644 index 0000000..5985984 Binary files /dev/null and b/mir coder portfolio/assets/images/hero-shape-2.png differ diff --git a/mir coder portfolio/assets/images/interview-1.jpg b/mir coder portfolio/assets/images/interview-1.jpg new file mode 100644 index 0000000..326626d Binary files /dev/null and b/mir coder portfolio/assets/images/interview-1.jpg differ diff --git a/mir coder portfolio/assets/images/interview-2.jpg b/mir coder portfolio/assets/images/interview-2.jpg new file mode 100644 index 0000000..59d8b2a Binary files /dev/null and b/mir coder portfolio/assets/images/interview-2.jpg differ diff --git a/mir coder portfolio/assets/images/interview-3.jpg b/mir coder portfolio/assets/images/interview-3.jpg new file mode 100644 index 0000000..5ec7a75 Binary files /dev/null and b/mir coder portfolio/assets/images/interview-3.jpg differ diff --git a/mir coder portfolio/assets/images/logo.svg b/mir coder portfolio/assets/images/logo.svg new file mode 100644 index 0000000..54a2c4f --- /dev/null +++ b/mir coder portfolio/assets/images/logo.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/mir coder portfolio/assets/images/project-2.jpg b/mir coder portfolio/assets/images/project-2.jpg new file mode 100644 index 0000000..274313a Binary files /dev/null and b/mir coder portfolio/assets/images/project-2.jpg differ diff --git a/mir coder portfolio/assets/images/project-3.jpg b/mir coder portfolio/assets/images/project-3.jpg new file mode 100644 index 0000000..35e253c Binary files /dev/null and b/mir coder portfolio/assets/images/project-3.jpg differ diff --git a/mir coder portfolio/assets/images/project-4.jpg b/mir coder portfolio/assets/images/project-4.jpg new file mode 100644 index 0000000..0b885ba Binary files /dev/null and b/mir coder portfolio/assets/images/project-4.jpg differ diff --git a/mir coder portfolio/assets/images/project-5.jpg b/mir coder portfolio/assets/images/project-5.jpg new file mode 100644 index 0000000..73eb23a Binary files /dev/null and b/mir coder portfolio/assets/images/project-5.jpg differ diff --git a/mir coder portfolio/assets/images/service-icon-1.svg b/mir coder portfolio/assets/images/service-icon-1.svg new file mode 100644 index 0000000..bc68275 --- /dev/null +++ b/mir coder portfolio/assets/images/service-icon-1.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/mir coder portfolio/assets/images/service-icon-2.svg b/mir coder portfolio/assets/images/service-icon-2.svg new file mode 100644 index 0000000..a5be3fc --- /dev/null +++ b/mir coder portfolio/assets/images/service-icon-2.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/mir coder portfolio/assets/images/service-icon-3.svg b/mir coder portfolio/assets/images/service-icon-3.svg new file mode 100644 index 0000000..3acb855 --- /dev/null +++ b/mir coder portfolio/assets/images/service-icon-3.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/mir coder portfolio/assets/images/service-icon-4.svg b/mir coder portfolio/assets/images/service-icon-4.svg new file mode 100644 index 0000000..e1ea2df --- /dev/null +++ b/mir coder portfolio/assets/images/service-icon-4.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/mir coder portfolio/assets/images/skill-banner.jpg b/mir coder portfolio/assets/images/skill-banner.jpg new file mode 100644 index 0000000..b8763e9 Binary files /dev/null and b/mir coder portfolio/assets/images/skill-banner.jpg differ diff --git a/mir coder portfolio/assets/js/script.js b/mir coder portfolio/assets/js/script.js new file mode 100644 index 0000000..9c54286 --- /dev/null +++ b/mir coder portfolio/assets/js/script.js @@ -0,0 +1,161 @@ +'use strict'; + + + +/** + * PRELOADER + */ + +const preloader = document.querySelector("[data-preloader]"); + +window.addEventListener("DOMContentLoaded", function () { + preloader.classList.add("loaded"); + document.body.classList.add("loaded"); +}); + + + +/** + * add event on multiple elements + */ + +const addEventOnElements = function (elements, eventType, callback) { + for (let i = 0, len = elements.length; i < len; i++) { + elements[i].addEventListener(eventType, callback); + } +} + + + +/** + * Mobile navbar toggle + */ + +const navbar = document.querySelector("[data-navbar]"); +const navTogglers = document.querySelectorAll("[data-nav-toggler]"); +const navLinks = document.querySelectorAll("[data-nav-link]"); +const overlay = document.querySelector("[data-overlay]"); + +addEventOnElements(navTogglers, "click", function () { + navbar.classList.toggle("active"); + overlay.classList.toggle("active"); + document.body.classList.toggle("nav-active"); +}); + +addEventOnElements(navLinks, "click", function () { + navbar.classList.remove("active"); + overlay.classList.remove("active"); + document.body.classList.remove("nav-active"); +}); + + + +/** + * Header active + */ + +const header = document.querySelector("[data-header]"); + +window.addEventListener("scroll", function () { + header.classList[window.scrollY > 100 ? "add" : "remove"]("active"); +}); + + + +/** + * Element tilt effect + */ + +const tiltElements = document.querySelectorAll("[data-tilt]"); + +const initTilt = function (event) { + + /** get tilt element center position */ + const centerX = this.offsetWidth / 2; + const centerY = this.offsetHeight / 2; + + const tiltPosY = ((event.offsetX - centerX) / centerX) * 10; + const tiltPosX = ((event.offsetY - centerY) / centerY) * 10; + + this.style.transform = `perspective(1000px) rotateX(${tiltPosX}deg) rotateY(${tiltPosY - (tiltPosY * 2)}deg)`; + +} + +addEventOnElements(tiltElements, "mousemove", initTilt); + +addEventOnElements(tiltElements, "mouseout", function () { + this.style.transform = `perspective(1000px) rotateX(0deg) rotateY(0deg)`; +}); + + + +/** + * Tab content + */ + +const tabBtns = document.querySelectorAll("[data-tab-btn]"); +const tabContents = document.querySelectorAll("[data-tab-content]"); + +let lastActiveTabBtn = tabBtns[0]; +let lastActiveTabContent = tabContents[0]; + +const filterContent = function () { + + if (!(lastActiveTabBtn === this)) { + + lastActiveTabBtn.classList.remove("active"); + lastActiveTabContent.classList.remove("active"); + + this.classList.add("active"); + lastActiveTabBtn = this; + + const currentTabContent = document.querySelector(`[data-tab-content="${this.dataset.tabBtn}"]`); + + currentTabContent.classList.add("active"); + lastActiveTabContent = currentTabContent; + + } + +} + +addEventOnElements(tabBtns, "click", filterContent); + + + +/** + * Custom cursor + */ + +const cursors = document.querySelectorAll("[data-cursor]"); +const hoveredElements = [...document.querySelectorAll("button"), ...document.querySelectorAll("a")]; + +window.addEventListener("mousemove", function (event) { + + const posX = event.clientX; + const posY = event.clientY; + + /** cursor dot position */ + cursors[0].style.left = `${posX}px`; + cursors[0].style.top = `${posY}px`; + + /** cursor outline position */ + setTimeout(function () { + cursors[1].style.left = `${posX}px`; + cursors[1].style.top = `${posY}px`; + }, 80); + +}); + +/** add hovered class when mouseover on hoverElements */ +addEventOnElements(hoveredElements, "mouseover", function () { + for (let i = 0, len = cursors.length; i < len; i++) { + cursors[i].classList.add("hovered"); + } +}); + +/** remove hovered class when mouseout on hoverElements */ +addEventOnElements(hoveredElements, "mouseout", function () { + for (let i = 0, len = cursors.length; i < len; i++) { + cursors[i].classList.remove("hovered"); + } +}); \ No newline at end of file diff --git a/mir coder portfolio/index.html b/mir coder portfolio/index.html new file mode 100644 index 0000000..031c7f2 --- /dev/null +++ b/mir coder portfolio/index.html @@ -0,0 +1,932 @@ + + + + + + + + + + Mir Coder - Portfolio + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ + + + + + + +
+
+ + + + + + + Get A Quote + + + + + + +
+ +
+
+ + + + + +
+
+ + + +
+
+ + + +
+ +

Get Your Website From Me.

+ +
+ + Download CV + + + + +

+ From device to cloud to edge Innovate from anywhere with secure +

+
+ +
+ + shape + + shape + +
+
+ + + + + + + +
+
+ + + +
+
+ + + + + + + +
+
+ +
+ +
    + +
  • + +
  • + +
  • + +
  • + +
  • + +
  • + +
  • + +
  • + +
  • + +
  • + +
+ +
+
+ +
+ about banner +
+ +
+ +

+ Only Motto Your Work is Mine Work +

+ +

+ I specialize in building new websites from start and enhancing existing ones. With my expertise, + I can create attractive and user-friendly interfaces while ensuring smooth functionality on the backend. +

+ +
    + +
  • +

    Name

    + + Mir Coder +
  • + +
  • +

    Phone Number

    + + +92 31. 858. 311. 56 +
  • + +
  • +

    Email Address

    + + mirkashi111@gmail.com
    kashifmir302@gmail.com
    +
  • + +
  • +

    Social Network

    + + +
  • + +
+ +
+ +
+
+ +
+
+ +
+ +

+ We help to create visual strategies. +

+ +

+ Skilled Full Stack Web Developer proficient in HTML, CSS, Javascript, PHP, MySQL, and Laravel. + I specialize in building new websites from start and enhancing existing ones. +

+ +
    + +
  • +
    + Website Development + + 95% +
    + +
    +
    +
    +
  • + +
  • +
    + Design UI & UX + + 85% +
    + +
    +
    +
    +
  • + +
+ +
+ +
+ skill banner +
+ +
+
+ +
+
+ +
+ interview 1 + + +
+ +
+ interview 2 + + +
+ +
+ interview 3 + + +
+ +
+
+ +
+ +

+ We’re a team of creatives who are excited about unique ideas and help IT-tech companies to make identity + by crafting UI/UX and Web Development. +

+ +
    + +
  • +
    +
    + certificate +
    +
    +
  • + +
  • +
    +
    + certificate +
    +
    +
  • + +
  • +
    +
    + certificate +
    +
    +
  • + +
+ +
+ +
+
    + +
  • +
    + +
    + image +
    + +
    + +
    + +
    +
  • + +
  • +
    + +
    + video +
    + +
    + +
    + +
    +
  • + +
  • +
    + +
    + music +
    + +
    + +
    + +
    +
  • + +
  • +
    + +
    + image +
    + +
    + +
    + +
    +
  • + +
  • +
    + +
    + image +
    + +
    + +
    + +
    +
  • + +
  • +
    + +
    + image +
    + +
    + +
    + +
    +
  • + +
+
+ +
+ +
+
+ + + + + + + +
+
+ +

+ Let's Work Together On Your Next Project! +

+ + + Hire Me Now + + + + +
+
+ + + + + + + +
+ + + +
+ + + + + + + +
+
+ +
+ +
+ “ The website developer exceeded expectations, delivering a user-friendly interface, extensive customization options, and responsive design. Their prompt support and + competitive pricing make them a top choice for businesses of all sizes. Highly recommended. ” +
+ +
+
+ Alexis browni JR. +
+ +
+

Mustafa Khan.

+ +

Software Engineering.

+
+
+ +
+ +
+
+ + + + + + + +
+
+ +

Get In Touch

+ +
+ +
+ + + + + + + + + + + + +
+ + + +
    + +
  • + +
    + contact icon +
    + +
    + +92 31 (858) 311 56 + + +92 31 (758) 376 84 +
    + +
  • + +
  • + +
    + contact icon +
    + +
    +
    + 044- 03 Islamabad, Pak, + Pakistan +
    +
    + +
  • + +
  • + +
    + contact icon +
    + +
    + mirkashi111@gmail.com + + kashifmir302@gmail.com +
    + +
  • + +
+ +
+ +
+
+ +
+
+ + + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + + + + \ No newline at end of file