Goutam/artavenue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Goutam
2026-04-20 19:58:32 +05:30
parent 3eeb6c7344
commit c859db18a6
19 changed files with 273 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/Advanced Digital.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 308 KiB

After

Width:  |  Height:  |  Size: 360 KiB

12
images/ArtAvenueright.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 245 KiB

BIN
images/Choose.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 572 KiB

After

Width:  |  Height:  |  Size: 487 KiB

BIN
images/High.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 148 KiB

After

Width:  |  Height:  |  Size: 141 KiB

BIN
images/Limited.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 143 KiB

After

Width:  |  Height:  |  Size: 107 KiB

BIN
images/Material1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 278 KiB

After

Width:  |  Height:  |  Size: 217 KiB

BIN
images/Material2.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 207 KiB

After

Width:  |  Height:  |  Size: 188 KiB

BIN
images/Material3.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 220 KiB

After

Width:  |  Height:  |  Size: 226 KiB

BIN
images/Material4.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 267 KiB

After

Width:  |  Height:  |  Size: 152 KiB

BIN
images/Material5.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 MiB

After

Width:  |  Height:  |  Size: 1.6 MiB

BIN
images/Multiple.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 115 KiB

After

Width:  |  Height:  |  Size: 141 KiB

BIN
images/Schedule.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1023 KiB

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
images/Slow.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 139 KiB

After

Width:  |  Height:  |  Size: 90 KiB

BIN
images/Whatwefi ve.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 294 KiB

After

Width:  |  Height:  |  Size: 268 KiB

BIN
images/Whatwethird.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 313 KiB

After

Width:  |  Height:  |  Size: 301 KiB

BIN
images/afterslide.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.4 MiB

After

Width:  |  Height:  |  Size: 8.1 MiB

BIN
images/beforeslide.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.0 MiB

After

Width:  |  Height:  |  Size: 13 MiB

335
index.html
View File

@@ -7,6 +7,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap --> <!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- AOS CSS -->
<link href="https://unpkg.com/aos@2.3.4/dist/aos.css" rel="stylesheet">
<!-- Custom CSS --> <!-- Custom CSS -->
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="responsive.css"> <link rel="stylesheet" href="responsive.css">
@@ -26,10 +28,10 @@
</div> </div>
<!-- Right Vertical Text --> <!-- Right Vertical Text -->
<div class="vertical-text"> <div class="vertical-text">
Art Avenue <img src="images/ArtAvenueright.svg" alt="">
</div> </div>
<!-- Content --> <!-- Content -->
<div class="container h-100 d-flex align-items-center justify-content-center text-center"> <div class="container h-100 d-flex align-items-center justify-content-center text-center" >
<div class="content text-white"> <div class="content text-white">
<p class="tagline">PROPOSAL — DIGITAL PROTOTYPING</p> <p class="tagline">PROPOSAL — DIGITAL PROTOTYPING</p>
<h1 class="main-heading"> <h1 class="main-heading">
@@ -46,29 +48,29 @@
</div> </div>
</div> </div>
<!-- Scroll Button --> <!-- Scroll Button -->
<div class="scroll-down" class="cta-section"> <a href="#footer" class="scroll-down">
<img src="images/heroarrow.svg" alt=""> <img src="images/heroarrow.svg" alt="">
</div> </a>
</section> </section>
<section class="about-section "> <section class="about-section ">
<div class="container"> <div class="container">
<div class="row align-items-start"> <div class="row align-items-start">
<!-- LEFT SIDE --> <!-- LEFT SIDE -->
<div class="col-lg-6"> <div class="col-lg-6">
<div class="heading-main"> <div class="heading-main" data-aos="fade-right">
<h6>ABOUT US</h6> <h6>ABOUT US</h6>
<h2> <h2>
Introducing Advanced Digital Product Introducing Advanced Digital Product
Manipulation & Prototyping Manipulation & Prototyping
</h2> </h2>
</div> </div>
<div class="image-wrap"> <div class="image-wrap" data-aos="fade-up">
<img src="images/Advanced Digital.png" class="img-fluid img-top" alt=""> <img src="images/Advanced Digital.png" class="img-fluid img-top" alt="">
</div> </div>
</div> </div>
<!-- RIGHT SIDE --> <!-- RIGHT SIDE -->
<div class="col-lg-6"> <div class="col-lg-6">
<div class="experience-box"> <div class="experience-box" data-aos="fade-left">
<h1>2K+</h1> <h1>2K+</h1>
<span>YEARS OF <br> EXPERIENCE</span> <span>YEARS OF <br> EXPERIENCE</span>
</div> </div>
@@ -91,10 +93,10 @@
<section class="compare-section"> <section class="compare-section">
<div class="container"> <div class="container">
<div class="top-content"> <div class="top-content">
<div class="heading-main"> <div class="heading-main" data-aos="fade-up">
<h2>Design Without Limits.<br>Visualize Before You Manufacture.</h2> <h2>Design Without Limits.<br>Visualize Before You Manufacture.</h2>
</div> </div>
<div class="right-text"> <div class="right-text" data-aos="fade-down">
<p> <p>
A premium digital prototyping solution crafted for Art Avenue, A premium digital prototyping solution crafted for Art Avenue,
enabling exploration, testing, and scaling of product designs enabling exploration, testing, and scaling of product designs
@@ -104,41 +106,57 @@
</div> </div>
<div class="wrapper"> <div class="wrapper">
<div class="before"> <div class="before">
<img src="images/beforeslide.png"> <img src="images/beforeslide.png">
<span class="label">BEFORE</span> <span class="label">BEFORE</span>
</div> </div>
<div class="after"> <div class="after">
<img src="images/afterslide.png"> <img src="images/afterslide.png">
<span class="label">AFTER</span> <span class="label">AFTER</span>
</div> </div>
<div class="scroller"> <div class="scroller">
<div class="circle"></div> <div class="circle"></div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<script> <script>
let isDown = false;
const wrapper = document.querySelector(".wrapper"); const wrapper = document.querySelector(".wrapper");
const after = document.querySelector(".after"); const after = document.querySelector(".after");
const scroller = document.querySelector(".scroller"); const scroller = document.querySelector(".scroller");
let isDown = false;
let targetX = wrapper.offsetWidth / 2;
let currentX = targetX;
// mouse events
scroller.addEventListener("mousedown", () => isDown = true); scroller.addEventListener("mousedown", () => isDown = true);
window.addEventListener("mouseup", () => isDown = false); window.addEventListener("mouseup", () => isDown = false);
window.addEventListener("mousemove", (e) => { window.addEventListener("mousemove", (e) => {
if (!isDown) return; if (!isDown) return;
let rect = wrapper.getBoundingClientRect(); const rect = wrapper.getBoundingClientRect();
let x = e.clientX - rect.left; targetX = e.clientX - rect.left;
x = Math.max(0, Math.min(x, rect.width)); targetX = Math.max(0, Math.min(targetX, rect.width));
after.style.width = x + "px";
scroller.style.left = x + "px";
}); });
</script>
<section class="challenge-section"> // smooth animation loop
function animate() {
currentX += (targetX - currentX) * 0.15; // 🔥 smoothing factor
after.style.width = currentX + "px";
scroller.style.left = currentX + "px";
requestAnimationFrame(animate);
}
animate();
</script>
<section class="challenge-section" data-aos="fade-up" data-aos-delay="100">
<div class="container text-center"> <div class="container text-center">
<!-- Heading --> <!-- Heading -->
<div class="heading-main mb-5"> <div class="heading-main mb-5">
@@ -153,7 +171,7 @@
<div class="row g-0"> <div class="row g-0">
<!-- Card 1 --> <!-- Card 1 -->
<div class="col-lg-3 col-md-6"> <div class="col-lg-3 col-md-6">
<div class="challenge-card"> <div class="challenge-card" data-aos="fade-up" data-aos-delay="200">
<h5>Multiple Physical Samples</h5> <h5>Multiple Physical Samples</h5>
<img src="images/Multiple.png" alt=""> <img src="images/Multiple.png" alt="">
<p> <p>
@@ -163,7 +181,7 @@
</div> </div>
<!-- Card 2 --> <!-- Card 2 -->
<div class="col-lg-3 col-md-6"> <div class="col-lg-3 col-md-6">
<div class="challenge-card"> <div class="challenge-card" data-aos="fade-up" data-aos-delay="300">
<h5>Slow Decision-Making</h5> <h5>Slow Decision-Making</h5>
<img src="images/Slow.png" alt=""> <img src="images/Slow.png" alt="">
<p> <p>
@@ -173,7 +191,7 @@
</div> </div>
<!-- Card 3 --> <!-- Card 3 -->
<div class="col-lg-3 col-md-6"> <div class="col-lg-3 col-md-6">
<div class="challenge-card"> <div class="challenge-card" data-aos="fade-up" data-aos-delay="400">
<h5>High Production Costs</h5> <h5>High Production Costs</h5>
<img src="images/High.png" alt=""> <img src="images/High.png" alt="">
<p> <p>
@@ -183,7 +201,7 @@
</div> </div>
<!-- Card 4 --> <!-- Card 4 -->
<div class="col-lg-3 col-md-6"> <div class="col-lg-3 col-md-6">
<div class="challenge-card"> <div class="challenge-card" data-aos="fade-up" data-aos-delay="400">
<h5>Limited Experimentation</h5> <h5>Limited Experimentation</h5>
<img src="images/Limited.png" alt=""> <img src="images/Limited.png" alt="">
<p> <p>
@@ -205,7 +223,7 @@
<div class="row g-4"> <div class="row g-4">
<!-- LEFT: OLD WAY --> <!-- LEFT: OLD WAY -->
<div class="col-lg-6"> <div class="col-lg-6">
<div class="approach-card old-way text-start"> <div class="approach-card old-way text-start" data-aos="fade-right">
<h6 class="label red">TRADITIONAL PROTOTYPING</h6> <h6 class="label red">TRADITIONAL PROTOTYPING</h6>
<h2 class="title">The Old Way</h2> <h2 class="title">The Old Way</h2>
<div class="steps-grid"> <div class="steps-grid">
@@ -219,7 +237,7 @@
</div> </div>
<!-- RIGHT: NEW WAY --> <!-- RIGHT: NEW WAY -->
<div class="col-lg-6"> <div class="col-lg-6">
<div class="approach-card new-way text-start"> <div class="approach-card new-way text-start" data-aos="fade-left">
<h6 class="label gold">OUR APPROACH</h6> <h6 class="label gold">OUR APPROACH</h6>
<h2 class="title">The New Way</h2> <h2 class="title">The New Way</h2>
<div class="steps-grid"> <div class="steps-grid">
@@ -237,44 +255,65 @@
<section class="evolution-section"> <section class="evolution-section">
<div class="container"> <div class="container">
<div class="evolutionwrap"> <div class="evolutionwrap">
<!-- TOP HEADINGS --> <!-- TOP HEADINGS -->
<div class="evolution-header"> <div class="evolution-header" data-aos="fade-up">
<div class="phase phase-left"> <div class="phase phase-left" data-aos="fade-right" data-aos-delay="100">
<h3>Phase 1 : Raw Sketch</h3> <h3>Phase 1 : Raw Sketch</h3>
<p>IDEA & CONCEPTUALIZATION</p> <p>IDEA & CONCEPTUALIZATION</p>
</div> </div>
<div class="phase phase-right">
<div class="phase phase-right" data-aos="fade-left" data-aos-delay="200">
<h3>Phase 2 : Photorealistic Prototype</h3> <h3>Phase 2 : Photorealistic Prototype</h3>
<p>DIGITAL VISUALIZATION & REFINEMENT</p> <p>DIGITAL VISUALIZATION & REFINEMENT</p>
</div> </div>
</div> </div>
<!-- MAIN IMAGE BOX --> <!-- MAIN IMAGE BOX -->
<div class="evolution-box"> <div class="evolution-box" data-aos="zoom-in" data-aos-delay="300">
<!-- LEFT LABEL -->
<div class="tag tag-left">Ideation</div> <div class="tag tag-left" data-aos="fade-right" data-aos-delay="400">
<!-- RIGHT LABEL --> Ideation
<div class="tag tag-right">H-FI Visualization</div> </div>
<!-- CENTER IMAGE -->
<img src="images/Sketch.png" alt="Evolution Design" class="evolution-image"> <div class="tag tag-right" data-aos="fade-left" data-aos-delay="400">
H-FI Visualization
</div>
<img src="images/Sketch.png"
alt="Evolution Design"
class="evolution-image"
data-aos="fade-up"
data-aos-delay="500">
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<section class="services-section"> <section class="services-section">
<div class="container text-center"> <div class="container text-center">
<!-- Heading --> <!-- Heading -->
<div class="heading-main mb-5"> <div class="heading-main mb-5"
data-aos="fade-up">
<h2>What We Do</h2> <h2>What We Do</h2>
<p> <p>
Comprehensive digital prototyping services tailored to your Comprehensive digital prototyping services tailored to your
product development needs product development needs
</p> </p>
</div> </div>
<!-- Grid --> <!-- Grid -->
<div class="row g-4"> <div class="row g-4">
<!-- 01 --> <!-- 01 -->
<div class="col-lg-3 col-md-6"> <div class="col-lg-3 col-md-6">
<div class="service-card"> <div class="service-card"
data-aos="flip-up"
data-aos-delay="100"
data-aos-duration="900">
<span class="number">01</span> <span class="number">01</span>
<h5>Client Asset Integration</h5> <h5>Client Asset Integration</h5>
<p> <p>
@@ -282,9 +321,13 @@
</p> </p>
</div> </div>
</div> </div>
<!-- 02 --> <!-- 02 -->
<div class="col-lg-3 col-md-6"> <div class="col-lg-3 col-md-6">
<div class="service-card"> <div class="service-card"
data-aos="flip-up"
data-aos-delay="200"
data-aos-duration="900">
<span class="number">02</span> <span class="number">02</span>
<h5>Reference-Based Creation</h5> <h5>Reference-Based Creation</h5>
<p> <p>
@@ -292,15 +335,23 @@
</p> </p>
</div> </div>
</div> </div>
<!-- IMAGE --> <!-- IMAGE -->
<div class="col-lg-3 col-md-6"> <div class="col-lg-3 col-md-6"
data-aos="zoom-in"
data-aos-delay="150"
data-aos-duration="900">
<div class="image-card"> <div class="image-card">
<img src="images/Whatwethird.png" alt=""> <img src="images/Whatwethird.png" alt="">
</div> </div>
</div> </div>
<!-- 03 --> <!-- 03 -->
<div class="col-lg-3 col-md-6"> <div class="col-lg-3 col-md-6">
<div class="service-card"> <div class="service-card"
data-aos="flip-up"
data-aos-delay="300"
data-aos-duration="900">
<span class="number">03</span> <span class="number">03</span>
<h5>Material & Texture Swapping</h5> <h5>Material & Texture Swapping</h5>
<p> <p>
@@ -308,9 +359,13 @@
</p> </p>
</div> </div>
</div> </div>
<!-- 04 --> <!-- 04 -->
<div class="col-lg-3 col-md-6"> <div class="col-lg-3 col-md-6">
<div class="service-card"> <div class="service-card"
data-aos="flip-up"
data-aos-delay="400"
data-aos-duration="900">
<span class="number">04</span> <span class="number">04</span>
<h5>Seamless Pattern Creation</h5> <h5>Seamless Pattern Creation</h5>
<p> <p>
@@ -318,15 +373,23 @@
</p> </p>
</div> </div>
</div> </div>
<!-- IMAGE --> <!-- IMAGE -->
<div class="col-lg-3 col-md-6"> <div class="col-lg-3 col-md-6"
data-aos="zoom-in"
data-aos-delay="250"
data-aos-duration="900">
<div class="image-card"> <div class="image-card">
<img src="images/Whatwefi ve.png" alt=""> <img src="images/Whatwefi ve.png" alt="">
</div> </div>
</div> </div>
<!-- 05 --> <!-- 05 -->
<div class="col-lg-3 col-md-6"> <div class="col-lg-3 col-md-6">
<div class="service-card"> <div class="service-card"
data-aos="flip-up"
data-aos-delay="500"
data-aos-duration="900">
<span class="number">05</span> <span class="number">05</span>
<h5>Cross-Product Scaling</h5> <h5>Cross-Product Scaling</h5>
<p> <p>
@@ -334,9 +397,13 @@
</p> </p>
</div> </div>
</div> </div>
<!-- 06 --> <!-- 06 -->
<div class="col-lg-3 col-md-6"> <div class="col-lg-3 col-md-6">
<div class="service-card"> <div class="service-card"
data-aos="flip-up"
data-aos-delay="600"
data-aos-duration="900">
<span class="number">06</span> <span class="number">06</span>
<h5>Contextual Staging</h5> <h5>Contextual Staging</h5>
<p> <p>
@@ -344,9 +411,13 @@
</p> </p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- VISUAL --> <!-- VISUAL -->
<section class="visualprototyping"> <section class="visualprototyping">
<div class="container"> <div class="container">
@@ -382,11 +453,11 @@
<div class="compare-card"> <div class="compare-card">
<div class="wrapper"> <div class="wrapper">
<div class="before"> <div class="before">
<img src="images/Visualafterright.png"> <img src="images/Visualbeforeright.png">
<span class="label">BEFORE</span> <span class="label">BEFORE</span>
</div> </div>
<div class="after"> <div class="after">
<img src="images/Visualbeforeright.png"> <img src="images/Visualafterright.png">
<span class="label">AFTER</span> <span class="label">AFTER</span>
</div> </div>
<div class="scroller"> <div class="scroller">
@@ -402,60 +473,105 @@
<script> <script>
document.querySelectorAll(".wrapper").forEach(wrapper => { document.querySelectorAll(".wrapper").forEach(wrapper => {
let isDown = false; const after = wrapper.querySelector(".after");
const after = wrapper.querySelector(".after"); const scroller = wrapper.querySelector(".scroller");
const scroller = wrapper.querySelector(".scroller");
scroller.addEventListener("mousedown", () => isDown = true); let isDown = false;
window.addEventListener("mouseup", () => isDown = false);
window.addEventListener("mousemove", (e) => { let targetX = wrapper.offsetWidth / 2;
if (!isDown) return; let currentX = targetX;
let rect = wrapper.getBoundingClientRect(); // start drag
let x = e.clientX - rect.left; scroller.addEventListener("mousedown", () => isDown = true);
x = Math.max(0, Math.min(x, rect.width)); // stop drag
window.addEventListener("mouseup", () => isDown = false);
after.style.width = x + "px"; // track mouse
scroller.style.left = x + "px"; window.addEventListener("mousemove", (e) => {
if (!isDown) return;
const rect = wrapper.getBoundingClientRect();
targetX = e.clientX - rect.left;
targetX = Math.max(0, Math.min(targetX, rect.width));
});
// 🔥 smooth animation loop per slider
function animate() {
currentX += (targetX - currentX) * 0.15; // smoothing factor
after.style.width = currentX + "px";
scroller.style.left = currentX + "px";
requestAnimationFrame(animate);
}
animate();
}); });
</script>
}); <section class="material-section">
</script> <div class="container">
<section class="material-section">
<div class="container"> <div class="optionmult">
<div class="optionmult">
<!-- TITLE --> <!-- TITLE -->
<h3 class="material-title">Multiple Material Options</h3> <h3 class="material-title"
<!-- TOP IMAGES --> data-aos="fade-up"
<div class="material-grid top-grid"> data-aos-duration="900">
<div class="material-item"><img src="images/Material1.png"></div> Multiple Material Options
<div class="material-item"><img src="images/Material2.png"></div> </h3>
<div class="material-item"><img src="images/Material3.png"></div>
<div class="material-item"><img src="images/Material4.png"></div> <!-- TOP IMAGES -->
</div> <div class="material-grid top-grid">
<div class="material-item"
data-aos="zoom-in"
data-aos-delay="100">
<img src="images/Material1.png">
</div> </div>
<!-- CENTER VIDEO -->
<div class="material-video"> <div class="material-item"
<img src="/images/Material5.png" class="video-thumb"> data-aos="zoom-in"
<div class="play-btn"> data-aos-delay="200">
▶ <img src="images/Material2.png">
</div>
</div> </div>
<!-- BOTTOM IMAGES -->
<div class="material-grid bottom-grid"> <div class="material-item"
<!-- data-aos="zoom-in"
<button class="nav-btn left">←</button> --> data-aos-delay="300">
<div class="material-item"><img src="images/Material9.png"></div> <img src="images/Material3.png">
<div class="material-item"><img src="images/Material7.png"></div>
<div class="material-item"><img src="images/Material8.png"></div>
<div class="material-item"><img src="images/Material9.png"></div>
<!--
<button class="nav-btn right">→</button> -->
</div> </div>
<div class="material-item"
data-aos="zoom-in"
data-aos-delay="400">
<img src="images/Material4.png">
</div>
</div> </div>
</section> </div>
<!-- CENTER VIDEO -->
<div class="material-video"
data-aos="fade-up"
data-aos-delay="200"
data-aos-duration="1000">
<img src="/images/Material5.png" class="video-thumb">
<div class="play-btn"
data-aos="pulse"
data-aos-delay="500">
▶
</div>
</div>
<!-- BOTTOM IMAGES (if added later they will also animate same way) -->
</div>
</section>
<!-- SECTION 1 : IMPACT --> <!-- SECTION 1 : IMPACT -->
<section class="impact-section"> <section class="impact-section">
<div class="container text-center"> <div class="container text-center">
@@ -465,20 +581,20 @@
What this means for your bottom line and product <br> development efficiency What this means for your bottom line and product <br> development efficiency
</p> </p>
</div> </div>
<div class="impact-grid"> <div class="impact-grid" >
<div class="impact-card"> <div class="impact-card" data-aos="zoom-in" data-aos-delay="100">
<h3>50–70%</h3> <h3>50–70%</h3>
<p>Reduction in prototyping cost</p> <p>Reduction in prototyping cost</p>
</div> </div>
<div class="impact-card"> <div class="impact-card" data-aos="zoom-in" data-aos-delay="100">
<h3>3x</h3> <h3>3x</h3>
<p>Faster product approval cycles</p> <p>Faster product approval cycles</p>
</div> </div>
<div class="impact-card"> <div class="impact-card" data-aos="zoom-in" data-aos-delay="100">
<h3>10x</h3> <h3>10x</h3>
<p>Increased design experimentation</p> <p>Increased design experimentation</p>
</div> </div>
<div class="impact-card"> <div class="impact-card" data-aos="zoom-in" data-aos-delay="100">
<h3>100%</h3> <h3>100%</h3>
<p>Better product-market fit</p> <p>Better product-market fit</p>
</div> </div>
@@ -490,14 +606,14 @@
<div class="container"> <div class="container">
<div class="row align-items-center"> <div class="row align-items-center">
<!-- LEFT IMAGES --> <!-- LEFT IMAGES -->
<div class="col-lg-6"> <div class="col-lg-6" >
<div class="why-images"> <div class="why-images" data-aos="fade-right">
<img src="images/Choose.png" class="img-small"> <img src="images/Choose.png" class="img-small">
</div> </div>
</div> </div>
<!-- RIGHT CONTENT --> <!-- RIGHT CONTENT -->
<div class="col-lg-6"> <div class="col-lg-6">
<div class="why-content"> <div class="why-content" data-aos="fade-left">
<h2>Why Choose Us</h2> <h2>Why Choose Us</h2>
<p class="why-subtext"> <p class="why-subtext">
What this means for your bottom line and product development efficiency What this means for your bottom line and product development efficiency
@@ -530,8 +646,17 @@
</div> </div>
</div> </div>
</section> </section>
<footer> <footer id="footer">
<p>Designed By AchievAR.ai</p> <p>Designed By AchievAR.ai</p>
</footer> </footer>
<!-- AOS JS -->
<script src="https://unpkg.com/aos@2.3.4/dist/aos.js"></script>
<script>
AOS.init({
duration: 1000,
once: true,
offset: 100
});
</script>
</body> </body>
</html> </html>

45
style.css
View File

@@ -71,9 +71,9 @@
} }
.vertical-text { .vertical-text {
position: absolute; position: absolute;
right: 8%; right: 5%;
top: 70%; top: 22%;
transform: rotate(90deg) translateY(-50%); /* transform: rotate(90deg) translateY(-50%); */
transform-origin: right center; transform-origin: right center;
z-index: 3; z-index: 3;
font-weight: bold; font-weight: bold;
@@ -124,7 +124,7 @@
height: 100%; height: 100%;
} }
.about-section { .about-section {
padding: 70px 0px; padding: 40px 0px;
} }
.heading-main h6 { .heading-main h6 {
color: rgb(196, 139, 43); color: rgb(196, 139, 43);
@@ -179,7 +179,7 @@
color: rgb(0, 0, 0); color: rgb(0, 0, 0);
} }
.challenge-section { .challenge-section {
padding: 80px 0px; padding: 50px 0px;
} }
.heading-main p { .heading-main p {
max-width: 700px; max-width: 700px;
@@ -277,7 +277,7 @@
} }
.services-section { .services-section {
background: rgb(245, 241, 237); background: rgb(245, 241, 237);
padding: 70px 0px; padding: 50px 0px;
} }
.heading-main h2 { .heading-main h2 {
font-size: 37px; font-size: 37px;
@@ -324,7 +324,7 @@
border-radius: 18px; border-radius: 18px;
} }
.evolution-section { .evolution-section {
padding: 80px 0px; padding: 50px 0px;
} }
.evolution-header { .evolution-header {
display: flex; display: flex;
@@ -358,6 +358,7 @@
border-radius: 30px; border-radius: 30px;
font-size: 13px; font-size: 13px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 15px; box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 15px;
z-index: 9999;
} }
.tag-left { .tag-left {
left: 120px; left: 120px;
@@ -378,7 +379,7 @@
letter-spacing: 2px; letter-spacing: 2px;
} }
.material-section { .material-section {
padding: 80px 0px; padding: 50px 0px;
} }
.material-title { .material-title {
text-align: center; text-align: center;
@@ -452,7 +453,7 @@
} }
.impact-section { .impact-section {
background: #F5F1ED; background: #F5F1ED;
padding: 80px 0px; padding: 50px 0px;
} }
.impact-title { .impact-title {
font-size: 28px; font-size: 28px;
@@ -484,7 +485,7 @@
color: #3A3A3A; color: #3A3A3A;
} }
.why-section { .why-section {
padding: 80px 0px; padding: 60px 0px 0;
} }
.why-images { .why-images {
} }
@@ -589,7 +590,7 @@
padding: 20px 20px; padding: 20px 20px;
} }
.compare-section { .compare-section {
padding: 60px 80px; padding: 50px 0px;
} }
/* TOP TEXT */ /* TOP TEXT */
.top-content { .top-content {
@@ -612,12 +613,12 @@
.wrapper { .wrapper {
position: relative; position: relative;
width: 100%; width: 100%;
height: 450px; height: 506px;
overflow: hidden; overflow: hidden;
border-radius: 6px; border-radius: 6px;
} }
.wrapper img { .wrapper img {
width: 100%; /* width: 100%; */
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
} }
@@ -675,8 +676,11 @@
font-size: 18px; font-size: 18px;
} }
.visualprototyping { .visualprototyping {
padding: 70px 0; padding: 50px 0 0;
} }
.compare-card .wrapper {
height: 340px;
}
.compare-card { .compare-card {
border: 1px solid #EFEFEF; border: 1px solid #EFEFEF;
box-shadow: 15px 20px 45px rgba(233, 233, 233, 0.43); box-shadow: 15px 20px 45px rgba(233, 233, 233, 0.43);
@@ -690,4 +694,17 @@
font-size: 20px; font-size: 20px;
font-weight: 500; font-weight: 500;
color: black; 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;
} }