diff --git a/images/Sketch.png b/images/Sketch.png index 3b1e104..9614109 100644 Binary files a/images/Sketch.png and b/images/Sketch.png differ diff --git a/images/Video.mp4 b/images/Video.mp4 new file mode 100644 index 0000000..820f985 Binary files /dev/null and b/images/Video.mp4 differ diff --git a/index.html b/index.html index 1a5660d..8fff2ad 100644 --- a/index.html +++ b/index.html @@ -553,19 +553,15 @@
- - - -
- ▶ -
- -
+ data-aos="fade-up" + data-aos-delay="200" + data-aos-duration="1000"> + + + + diff --git a/style.css b/style.css index 667caae..0c9a52c 100644 --- a/style.css +++ b/style.css @@ -2,36 +2,38 @@ margin: 0px; padding: 0px; font-family: Parkinsans, sans-serif; - } - /* Chrome, Edge, Safari */ - ::-webkit-scrollbar { - width: 1px; - } - ::-webkit-scrollbar-track { - background: transparent; - } - ::-webkit-scrollbar-thumb { - background: rgba(0, 0, 0, 0.3); - } - /* Firefox */ - * { - scrollbar-width: thin; - scrollbar-color: rgba(0,0,0,0.3) transparent; - } - h2 { +} + +::-webkit-scrollbar { + width: 1px; +} + +::-webkit-scrollbar-track { + background: transparent; +} + +::-webkit-scrollbar-thumb { + background: rgba(0, 0, 0, 0.3); +} + +* { + scrollbar-width: thin; + scrollbar-color: rgba(0, 0, 0, 0.3) transparent; +} + +h2 { font-family: "Instrument Serif", serif; - } - .hero-section { +} + +.hero-section { position: relative; height: 90vh; width: 98%; - margin: 0px auto; + margin: 20px auto 70px; border-radius: 20px; - margin-bottom: 70px; - /* overflow: hidden; */ - margin-top: 20px; - } - .hero-video { +} + +.hero-video { position: absolute; top: 50%; left: 50%; @@ -44,36 +46,41 @@ z-index: 1; border-radius: 20px; overflow: hidden; - } - .topflex-wrapp { +} + +.topflex-wrapp { display: flex; align-items: flex-end; justify-content: space-between; width: 100%; padding: 0px 20px; - } - .overlay { - } - .logo { +} + +.overlay { +} + +.logo { position: absolute; top: 10px; color: white; z-index: 3; width: 100%; - } - .logo h4 { +} + +.logo h4 { letter-spacing: 3px; font-weight: 600; - } - .logo span { +} + +.logo span { font-size: 12px; opacity: 0.7; - } - .vertical-text { +} + +.vertical-text { position: absolute; right: 5%; top: 34%; - /* transform: rotate(90deg) translateY(-50%); */ transform-origin: right center; z-index: 3; font-weight: bold; @@ -81,29 +88,34 @@ color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.42); font-family: Parkinsans, sans-serif; - } - .content { +} + +.content { z-index: 3; - } - .tagline { +} + +.tagline { font-size: 14px; letter-spacing: 2px; margin-bottom: 2px; font-family: Parkinsans, sans-serif; color: rgb(254, 197, 187); - } - .main-heading { +} + +.main-heading { font-size: 71px; font-family: "Instrument Serif", serif; letter-spacing: 2px; - } - .subtext { +} + +.subtext { margin-top: 2px; font-size: 20px; font-family: Parkinsans, sans-serif; margin-bottom: 30px; - } - .steps { +} + +.steps { font-size: 14px; font-family: Parkinsans, sans-serif; background: linear-gradient(90deg, rgba(253, 169, 19, 0) 0%, rgba(253, 169, 19, 0.3) 49.04%, rgba(253, 169, 19, 0) 100%); @@ -111,245 +123,292 @@ width: fit-content; margin: 0px auto; padding: 6px 50px; - } - .scroll-down { +} + +.scroll-down { position: absolute; bottom: -39px; width: 100%; cursor: pointer; z-index: 3; - } - .scroll-down img { +} + +.scroll-down img { width: 100%; height: 100%; - } - .about-section { +} + +.about-section { padding: 40px 0px; - } - .heading-main h6 { +} + +.heading-main h6 { color: rgb(196, 139, 43); font-size: 14px; letter-spacing: 1px; margin-bottom: 10px; font-family: Parkinsans, sans-serif; - } - .image-wrap { +} + +.image-wrap { position: relative; margin-top: 30px; - } - .img-top { +} + +.img-top { width: 90%; - } - .img-bottom { +} + +.img-bottom { width: 65%; position: absolute; right: 0px; bottom: -80px; box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 30px; - } - .experience-box { +} + +.experience-box { display: flex; align-items: center; gap: 28px; margin-top: 150px; - } - .experience-box h1 { +} + +.experience-box h1 { font-size: 120px; font-weight: 700; margin: 0px; color: rgb(26, 18, 6); font-family: Parkinsans, sans-serif; - } - .experience-box span { +} + +.experience-box span { color: rgb(189, 123, 5); font-size: 20px; - } - hr { +} + +hr { margin: 30px 0px; opacity: 0.3; - } - .content-text p { +} + +.content-text p { color: rgb(85, 85, 85); font-size: 16px; line-height: 1.7; margin: 0px 0px 30px; - } - .content-text .highlight { +} + +.content-text .highlight { font-weight: 600; color: rgb(0, 0, 0); - } - .challenge-section { +} + +.challenge-section { padding: 50px 0px; - } - .heading-main p { +} + +.heading-main p { max-width: 700px; margin: auto; color: rgb(102, 102, 102); font-size: 16px; line-height: 1.6; - } - .challenge-wrapper { +} + +.challenge-wrapper { background: rgb(255, 255, 255); overflow: hidden; border: 1px solid rgb(239, 239, 239); box-shadow: rgba(233, 233, 233, 0.43) 15px 20px 45px; border-radius: 15px; - } - .challenge-card { +} + +.challenge-card { padding: 30px 25px; text-align: left; height: 100%; border-right: 1px solid rgb(238, 238, 238) !important; - } - .challenge-card:last-child { +} + +.challenge-card:last-child { border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; - } - .challenge-card h5 { +} + +.challenge-card h5 { font-size: 20px; font-weight: 500; width: 70%; margin-bottom: 20px; color: rgb(17, 17, 17); - } - .challenge-card img { +} + +.challenge-card img { width: 100%; border-radius: 12px; margin-bottom: 15px; - } - .challenge-card p { +} + +.challenge-card p { font-size: 15px; color: rgb(58, 58, 58); line-height: 1.6; - } - .approach-section { - } - .heading-main p { +} + +.approach-section { +} + +.heading-main p { color: rgb(102, 102, 102); font-size: 16px; - } - .approach-card { +} + +.approach-card { padding: 40px; margin-top: 40px; background: rgb(255, 255, 255); border: 1px solid rgb(239, 239, 239); box-shadow: rgba(233, 233, 233, 0.43) 15px 20px 45px; border-radius: 15px; - } - .label { +} + +.label { font-size: 16px; letter-spacing: 1px; margin-bottom: 10px; - } - .label.red { +} + +.label.red { color: rgb(229, 57, 53); - } - .label.gold { +} + +.label.gold { color: rgb(255, 144, 48); - } - .title { +} + +.title { font-size: 34px; margin-bottom: 25px; font-weight: 500; - } - .steps-grid { +} + +.steps-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; - } - .step { +} + +.step { padding: 14px 18px; border-radius: 10px; font-size: 18px; background: rgb(249, 249, 249); - } - .step.red { +} + +.step.red { background: rgba(238, 43, 43, 0.04); border: 1px solid rgba(238, 43, 43, 0.18); border-radius: 8px; - } - .step.gold { +} + +.step.gold { background: rgb(255, 249, 237); border: 1px solid rgb(245, 228, 193); border-radius: 8px; - } - .services-section { +} + +.services-section { background: rgb(245, 241, 237); padding: 50px 0px; - } - .heading-main h2 { +} + +.heading-main h2 { font-size: 37px; font-weight: 500; margin-bottom: 10px; line-height: 52px; - } - .heading-main p { +} + +.heading-main p { max-width: 650px; margin: auto; - color: rgb(56 56 56); + color: rgb(56, 56, 56); font-size: 16px; - } - .service-card { +} + +.service-card { background: rgb(255, 255, 255); padding: 35px; border-radius: 18px; text-align: left; height: 100%; border: 1px solid rgb(230, 226, 220); - } - .number { +} + +.number { font-size: 39px; display: block; margin-bottom: 15px; color: rgb(17, 17, 17); font-family: "Instrument Serif", serif; - } - .service-card h5 { +} + +.service-card h5 { font-size: 20px; margin-bottom: 15px; line-height: 30px; - } - .service-card p { +} + +.service-card p { font-size: 14px; color: rgb(32, 32, 32); line-height: 1.6; margin: 42px 0px 0px; - } - .image-card img { +} + +.image-card img { width: 100%; height: 100%; object-fit: cover; border-radius: 18px; - } - .evolution-section { +} + +.evolution-section { padding: 50px 0px; - } - .evolution-header { +} + +.evolution-header { display: flex; justify-content: space-between; margin-bottom: 30px; - } - .phase h3 { +} + +.phase h3 { font-size: 22px; font-weight: 500; - } - .phase p { +} + +.phase p { font-size: 18px; letter-spacing: 1px; color: rgb(58, 58, 58); - } - .evolution-box { +} + +.evolution-box { position: relative; background: rgb(255, 255, 255); border-radius: 20px; - } - .evolution-image { +} + +.evolution-image { width: 100%; border-radius: 15px; - } - .tag { +} + +.tag { position: absolute; top: -20px; border: 1px solid rgba(208, 208, 208, 0.37); @@ -359,14 +418,17 @@ font-size: 13px; box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 15px; z-index: 9999; - } - .tag-left { +} + +.tag-left { left: 120px; - } - .tag-right { +} + +.tag-right { right: 111px; - } - .evolution-arrow { +} + +.evolution-arrow { position: absolute; top: 50%; left: 50%; @@ -377,39 +439,46 @@ border-radius: 30px; font-size: 14px; letter-spacing: 2px; - } - .material-section { +} + +.material-section { padding: 50px 0px; - } - .material-title { +} + +.material-title { text-align: center; margin-bottom: 25px; font-size: 20px; color: rgb(51, 51, 51); - } - .material-grid { +} + +.material-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; - } - .material-item img { +} + +.material-item img { width: 100%; border-radius: 15px; display: block; - } - .material-video { +} + +.material-video { position: relative; margin: 30px 0px; - border: 1px solid #EFEFEF; - box-shadow: 15px 20px 45px rgba(233, 233, 233, 0.43); + border: 1px solid rgb(239, 239, 239); + box-shadow: rgba(233, 233, 233, 0.43) 15px 20px 45px; border-radius: 15px; - padding: 20px 20px; - } - .video-thumb { + padding: 20px; +} + +.video-thumb { width: 100%; border-radius: 20px; - } - .play-btn { +} + +.play-btn { position: absolute; top: 50%; left: 50%; @@ -425,12 +494,14 @@ font-size: 20px; box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 20px; cursor: pointer; - } - .bottom-grid { +} + +.bottom-grid { position: relative; align-items: center; - } - .nav-btn { +} + +.nav-btn { position: absolute; top: 50%; transform: translateY(-50%); @@ -444,225 +515,264 @@ border-radius: 50%; box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 10px; cursor: pointer; - } - .nav-btn.left { +} + +.nav-btn.left { left: -20px; - } - .nav-btn.right { +} + +.nav-btn.right { right: -20px; - } - .impact-section { - background: #F5F1ED; +} + +.impact-section { + background: rgb(245, 241, 237); padding: 50px 0px; - } - .impact-title { +} + +.impact-title { font-size: 28px; margin-bottom: 10px; - } - .impact-subtitle { +} + +.impact-subtitle { font-size: 14px; color: rgb(102, 102, 102); margin-bottom: 40px; - } - .impact-grid { +} + +.impact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; - } - .impact-card { +} + +.impact-card { padding: 40px 20px; - background: #FFFFFF; - border: 1px solid #EFEFEF; + background: rgb(255, 255, 255); + border: 1px solid rgb(239, 239, 239); border-radius: 15px; - } - .impact-card h3 { - font-size: 28px; +} + +.impact-card h3 { font-family: "Instrument Serif", serif; font-size: 52px; - } - .impact-card p { +} + +.impact-card p { font-size: 15px; - color: #3A3A3A; - } - .why-section { - padding: 60px 0px 0; - } - .why-images { - } - .img-small { + color: rgb(58, 58, 58); +} + +.why-section { + padding: 60px 0px 0px; +} + +.why-images { +} + +.img-small { width: 95%; border-radius: 10px; - } - .img-large { +} + +.img-large { width: 55%; border-radius: 10px; - } - .why-content h2 { +} + +.why-content h2 { font-size: 37px; - margin: 0 0 10px; - } - .why-subtext { - color: #3A3A3A; + margin: 0px 0px 10px; +} + +.why-subtext { + color: rgb(58, 58, 58); margin-bottom: 20px; - } - .why-content ul { +} + +.why-content ul { list-style: none; padding: 0px; margin-top: 31px; - } - .why-content ul li { +} + +.why-content ul li { margin-bottom: 17px; position: relative; padding-left: 24px; - } - .why-content ul li::before { +} + +.why-content ul li::before { content: "→"; position: absolute; left: 0px; - } - .cta-section { +} + +.cta-section { padding: 60px 0px; - } - .cta-box { +} + +.cta-box { position: relative; border-radius: 15px; overflow: hidden; background: url("images/Schedule.png") center center / cover no-repeat; padding: 90px 40px; color: rgb(255, 255, 255); - } - .cta-box::before { +} + +.cta-box::before { content: ""; position: absolute; inset: 0px; background: linear-gradient(269.86deg, rgba(0, 0, 0, 0) -26.8%, rgba(0, 0, 0, 0) -12.79%, rgba(0, 2, 9, 0.65) 49.44%, rgb(0, 4, 16) 99.87%); width: 100%; - } - .cta-content { +} + +.cta-content { position: relative; z-index: 2; max-width: 500px; - } - .cta-buttons { +} + +.cta-buttons { margin-top: 20px; - } - .btn-primary { +} + +.btn-primary { background: rgb(203, 105, 88); padding: 13px 26px; color: rgb(255, 255, 255); border-radius: 0px; margin-right: 10px; text-decoration: none; - } - .btn-outline { +} + +.btn-outline { border: 1px solid rgb(255, 255, 255); padding: 13px 27px; color: rgb(255, 255, 255); text-decoration: none; - } - .btn-outline img { +} + +.btn-outline img { padding-right: 10px; - } - .why-content { - padding: 0 30px; - } - .evolutionwrap { +} + +.why-content { + padding: 0px 30px; +} + +.evolutionwrap { background: rgb(255, 255, 255); border: 1px solid rgb(239, 239, 239); box-shadow: rgba(233, 233, 233, 0.43) 15px 20px 45px; border-radius: 15px; padding: 30px; - } - footer p { +} + +footer p { text-align: center; - } - .cta-box p { +} + +.cta-box p { margin: 20px 0px 38px; font-weight: 200; - } - .cta-box h2 { +} + +.cta-box h2 { font-size: 33px; - } - .optionmult { - border: 1px solid #EFEFEF; - box-shadow: 15px 20px 45px rgba(233, 233, 233, 0.43); +} + +.optionmult { + border: 1px solid rgb(239, 239, 239); + box-shadow: rgba(233, 233, 233, 0.43) 15px 20px 45px; border-radius: 15px; - padding: 20px 20px; - } - .compare-section { + padding: 20px; +} + +.compare-section { padding: 50px 0px; - } - /* TOP TEXT */ - .top-content { +} + +.top-content { display: flex; justify-content: space-between; margin-bottom: 40px; - } - .left-text h1 { +} + +.left-text h1 { font-size: 36px; font-weight: 500; - color: #222; - } - .right-text { + color: rgb(34, 34, 34); +} + +.right-text { width: 35%; font-size: 15px; - color: #666; + color: rgb(102, 102, 102); line-height: 1.6; - } - /* SLIDER */ - .wrapper { +} + +.wrapper { position: relative; width: 100%; height: 506px; overflow: hidden; border-radius: 6px; - } - .wrapper img { - /* width: 100%; */ +} + +.wrapper img { height: 100%; object-fit: cover; - } - /* BEFORE AFTER */ - .before, .after { +} + +.before, .after { position: absolute; - top: 0; - left: 0; + top: 0px; + left: 0px; height: 100%; - } - .after { +} + +.after { width: 50%; overflow: hidden; - } - /* LABEL */ - .wrapper .label { +} + +.wrapper .label { position: absolute; top: 20px; - color: #fff; + color: rgb(255, 255, 255); font-size: 14px; letter-spacing: 2px; - } - .before .label { +} + +.before .label { right: 20px; - } - .after .label { +} + +.after .label { right: 20px; - } - /* SCROLLER */ - .scroller { +} + +.scroller { position: absolute; - top: 0; + top: 0px; left: 50%; height: 100%; width: 5px; background: white; cursor: pointer; - } - .compare-section { - background: url(./images/withoutlimitbackground.png); - } - .circle { +} + +.compare-section { + background: url("./images/withoutlimitbackground.png"); +} + +.circle { position: absolute; - background-image: url(/images/arrowcompare.svg); + background-image: url("/images/arrowcompare.svg"); top: 50%; left: 50%; transform: translate(-50%, -50%); @@ -672,42 +782,73 @@ display: flex; align-items: center; justify-content: center; - color: #c96b2c; + color: rgb(201, 107, 44); font-size: 18px; - } - .visualprototyping { - padding: 50px 0 0; - } +} + +.visualprototyping { + padding: 50px 0px 0px; +} + .compare-card .wrapper { height: 340px; } - .compare-card { - border: 1px solid #EFEFEF; - box-shadow: 15px 20px 45px rgba(233, 233, 233, 0.43); + +.compare-card { + border: 1px solid rgb(239, 239, 239); + box-shadow: rgba(233, 233, 233, 0.43) 15px 20px 45px; border-radius: 15px; - padding: 20px 20px; - } - .compare-card P { + padding: 20px; +} + +.compare-card p { text-align: center; - margin: 0; - margin-top: 20px; + margin: 20px 0px 0px; font-size: 20px; font-weight: 500; color: black; - } - .material-item { - transition: all 0.3s ease; - } - - .material-item:hover { - transform: translateY(-5px) !important; - } - .impact-card{ - transition: all 0.3s ease; - } - .impact-card:hover { - transform: translateY(-5px) !important; - } - .vertical-text img { +} + +.material-item { + transition: 0.3s; +} + +.material-item:hover { + transform: translateY(-5px) !important; +} + +.impact-card { + transition: 0.3s; +} + +.impact-card:hover { + transform: translateY(-5px) !important; +} + +.vertical-text img { width: 49px; -} \ No newline at end of file +} + +.video-player { + width: 100%; +} + +.video-player { + display: none; +} + +.hide { + display: none !important; +} + +.material-video { + width: 100%; +} + +.video-player { + width: 100%; + height: auto; + display: block; + object-fit: cover; + border-radius: 19px; +}