Processs-Timeline

Aditya01229 · May 23, 2024 · 3408a0d · 3408a0d
1 parent 6f5ef32
commit 3408a0d
Show file tree

Hide file tree

Showing 2 changed files with 231 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>adfyou</title>
+    <link
+      href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="styles/style.css" />
+  </head>
+  <body>
+    <!-- NAVBAR + MAIN BODY -->
+
+    <!-- TIMELINE -->
+    <section class="process" id="process">
+      <h2 class="heading"><span>Process</span></h2>
+
+      <div class="timeline-items">
+        <div class="timeline-item">
+          <div class="timeline-dot"></div>
+          <div class="timeline-content">
+            <h3>Step 1: Initial Video</h3>
+            <p>
+              It all starts with you filming a 2-minute video talking about any
+              topic you're passionate about. This initial video is crucial as it
+              serves as the foundation for creating your digital twin.
+            </p>
+          </div>
+        </div>
+        <div class="timeline-item">
+          <div class="timeline-dot"></div>
+          <div class="timeline-content">
+            <h3>Step 2: Digital Clone Creation</h3>
+            <p>
+                Once we have your video, we feed it into our sophisticated Al algorithm. This advanced technology meticulously analyzes your body, face, and voice to create an accurate and lifelike virtual replica of you.
+            </p>
+          </div>
+        </div>
+        <div class="timeline-item">
+          <div class="timeline-dot"></div>
+          <div class="timeline-content">
+            <h3>Step 3: Content Strategy and Production</h3>
+            <p>
+              Generate Custom Content With your digital twin ready, we can now
+              generate videos of you speaking on any subject you wish, tailored
+              for social media. Whether it's sharing insights, giving tips, or
+              promoting your services, the possibilities are endless.
+            </p>
+          </div>
+        </div>
+        <div class="timeline-item">
+          <div class="timeline-dot"></div>
+          <div class="timeline-content">
+            <h3>Step 4: Multi-Platform Distribution</h3>
+            <p>
+                Finally, we distribute your videos across major platforms like Instagram, YouTube, TikTok, and Twitter, ensuring a strong and consistent online presence that keeps you top of mind with your audience.
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <script src="https://unpkg.com/boxicons@2.1.4/dist/boxicons.js"></script>
+    <script src="scripts/script.js"></script>
+  </body>
+</html>
diff --git a/styles/style.css b/styles/style.css
@@ -0,0 +1,163 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    text-decoration: none;
+    border: none;
+    outline: none;
+    scroll-behavior: smooth;
+    font-family: "Poppins", sans-serif;
+}
+
+:root {
+    --bg-color: #080808;
+    --second-bg-color: #131313;
+    --text-color: white;
+    --main-color: white;
+}
+
+html {
+    font-size: 60%;
+    overflow-x: hidden;
+}
+
+body {
+    background-color: var(--bg-color);
+    color: var(--text-color);
+}
+
+.heading {
+    color: black;
+    font-size: 5rem;
+    text-align: center;
+    margin: 5rem 0;
+    display: block;
+}
+
+.heading span {
+    background-color: white;
+    padding: 1px 4px;
+}
+
+.process {
+    padding: 100px 15px;
+    background: var(--second-bg-color);
+}
+
+.process h2 {
+    margin-bottom: 5rem;
+}
+
+.timeline-items {
+    max-width: 1200px;
+    margin: auto;
+    display: flex;
+    flex-wrap: wrap;
+    position: relative;
+}
+
+.timeline-items::before {
+    content: "";
+    position: absolute;
+    width: 9px;
+    height: 78%;
+    background-color: #b96ffd;
+    left: calc(50% - 4px);
+    top: calc(9.8%);
+}
+
+.timeline-item {
+    margin-bottom: 40px;
+    width: 100%;
+    position: relative;
+}
+
+.timeline-item:last-child {
+    margin-bottom: 0px;
+}
+
+.timeline-item:nth-child(odd) {
+    padding-right: calc(50% + 30px);
+    text-align: right;
+}
+
+.timeline-item:nth-child(even){
+    padding-left: calc(50% + 30px);
+}
+
+.timeline-dot {
+    height: 30px;
+    width: 30px;
+    background-color: var(--main-color);
+    box-shadow: 0 0 15px var(--main-color);
+    position: absolute;
+    left: calc(50% - 14px);
+    border-radius: 50%;
+    top: calc(50% - 20px);
+}
+
+.timeline-content {
+    background-color: var(--bg-color);
+    border: solid white 1px;
+    padding: 30px 50px;
+    /* border-radius: 1rem; */
+    box-shadow: 0 0 5px var(--main-color);
+    cursor: pointer;
+    transition: 0.3s ease-in-out;
+}
+
+.timeline-content:hover {
+    transform: scale(1.03);
+    box-shadow: 0 0 0px var(--main-color);
+}
+
+.timeline-content h3 {
+    font-size: 20px;
+    color: white;
+    margin: 0 0 10px;
+    font-weight: 500;
+}
+
+.timeline-content p {
+    color: white;
+    font-size: 16px;
+    font-weight: 300;
+    line-height: 22px;
+}
+
+::-webkit-scrollbar {
+    width: 15px;
+}
+
+::-webkit-scrollbar-thumb {
+    background-color: var(--main-color);
+    width: 50px;
+}
+
+@media (max-width: 680px) {
+    .timeline-items {
+        max-width: 1200px;
+        margin: auto;
+        display: flex;
+        flex-wrap: wrap;
+        position: relative;
+    }
+
+    .timeline-items::before {
+        left: 14px;
+    }
+    .timeline-item:nth-child(odd) {
+        padding-right: 10px;
+        padding-left: 60px;
+        text-align: left;
+    }
+    .timeline-item:nth-child(even){
+        padding-right: 10px;
+        padding-left: 60px;
+    }
+    .timeline-dot {
+        position: absolute;
+        left: 3px;
+        top: calc(50% - 20px);
+    }
+}