Add files via upload

gauravgorane · Jun 20, 2024 · c6979d7 · c6979d7
1 parent b99604d
commit c6979d7
Show file tree

Hide file tree

Showing 13 changed files with 670 additions and 0 deletions.
diff --git a/Fylo_landing_page_with_two_column_layout/images/avatar-testimonial.jpg b/Fylo_landing_page_with_two_column_layout/images/avatar-testimonial.jpg
diff --git a/Fylo_landing_page_with_two_column_layout/images/bg-curve-desktop.svg b/Fylo_landing_page_with_two_column_layout/images/bg-curve-desktop.svg
diff --git a/Fylo_landing_page_with_two_column_layout/images/bg-curve-mobile.svg b/Fylo_landing_page_with_two_column_layout/images/bg-curve-mobile.svg
diff --git a/Fylo_landing_page_with_two_column_layout/images/favicon-32x32.png b/Fylo_landing_page_with_two_column_layout/images/favicon-32x32.png
diff --git a/Fylo_landing_page_with_two_column_layout/images/icon-arrow.svg b/Fylo_landing_page_with_two_column_layout/images/icon-arrow.svg
diff --git a/Fylo_landing_page_with_two_column_layout/images/icon-email.svg b/Fylo_landing_page_with_two_column_layout/images/icon-email.svg
diff --git a/Fylo_landing_page_with_two_column_layout/images/icon-phone.svg b/Fylo_landing_page_with_two_column_layout/images/icon-phone.svg
diff --git a/Fylo_landing_page_with_two_column_layout/images/icon-quotes.svg b/Fylo_landing_page_with_two_column_layout/images/icon-quotes.svg
diff --git a/Fylo_landing_page_with_two_column_layout/images/illustration-1.svg b/Fylo_landing_page_with_two_column_layout/images/illustration-1.svg
diff --git a/Fylo_landing_page_with_two_column_layout/images/illustration-2.svg b/Fylo_landing_page_with_two_column_layout/images/illustration-2.svg
diff --git a/Fylo_landing_page_with_two_column_layout/images/logo.svg b/Fylo_landing_page_with_two_column_layout/images/logo.svg
diff --git a/Fylo_landing_page_with_two_column_layout/index.html b/Fylo_landing_page_with_two_column_layout/index.html
@@ -0,0 +1,207 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
+  <link rel="stylesheet" href="style.css">
+  <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
+  <title>Frontend Mentor | Fylo landing page with two column layout</title>
+
+</head>
+
+<body>
+
+  <header>
+    <div class="container">
+      <nav>
+        <div class="logo">
+          <img src="./images/logo.svg" alt="Logo">
+        </div>
+        <div class="links">
+          <a href="">Features</a>
+          <a href="">Team</a>
+          <a href="">Sign In</a>
+        </div>
+      </nav>
+    </div>
+  </header>
+
+  <main>
+    <div class="container">
+
+      <section class="hero-section">
+
+        <div class="hero-data">
+
+          <h1>All your files in one secure location, accessible anywhere.</h1>
+          <p>Fylo stores your most important files in one secure location. Access them wherever you need, share and
+            collaborate with friends, family, and co-workers.</p>
+          <div class="hero-email">
+            <form>
+              <input type="email" placeholder="Enter your email..." required>
+              <button type="submit">Get Started</button>
+            </form>
+          </div>
+
+        </div>
+
+        <div class="hero-img">
+          <img src="./images/illustration-1.svg" alt="Illustration-1">
+        </div>
+
+      </section>
+    </div>
+
+    <div class="productive-top-curve">
+      <img src="./images/bg-curve-desktop.svg" alt="Top Curve">
+    </div>
+
+    <section class="productive-section">
+      <div class="container">
+        <div class="productive-section-flex">
+          <div class="productive-section-data">
+
+            <h2>Stay productive, wherever you are</h2>
+            <div class="para">
+              <p>Never let location be an issue when accessing your files. Fylo has you covered for all of your file
+                storage
+                needs.</p>
+              <p>Securely share files and folders with friends, family and colleagues for live collaboration. No email
+                attachments required!</p>
+              <p>See how Fylo works <img src="./images/icon-arrow.svg" alt="Arrow"></p>
+            </div>
+
+            <div class="testimonial">
+              <img src="./images/icon-quotes.svg" alt="Quote">
+              <p>Fylo has improved our team productivity by an order of magnitude. Since making the switch our team has
+                become a well-oiled collaboration machine.</p>
+
+              <div class="user">
+                <img src="./images/avatar-testimonial.jpg" alt="Avatar">
+                <p>
+                  <span>Kyle Burton</span>
+                  Founder & CEO, Huddle
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <div class="productive-section-img">
+            <img src="./images/illustration-2.svg" alt="Illustration-2">
+          </div>
+
+        </div>
+      </div>
+    </section>
+
+    <section class="access">
+      <div class="container">
+        <section class="access-flex">
+
+          <div class="access-data">
+            <h3>Get early access today</h3>
+            <p>It only takes a minute to sign up and our free starter tier is extremely generous. If you have any
+              questions, our support team would be happy to help you.</p>
+          </div>
+
+          <div class="access-email">
+            <form>
+              <input type="email" name="email" placeholder="[email protected]" required>
+              <button type="submit">Get Started For Free</button>
+            </form>
+          </div>
+
+        </section>
+      </div>
+    </section>
+
+  </main>
+
+  <footer>
+    <div class="container">
+
+      <div class="footer-flex">
+
+        <div class="contact">
+          <div class="footer-logo">
+            <svg width="166" height="49" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+              <defs>
+                <path id="a" d="M.014.03h93.96v48.29H.015z" />
+              </defs>
+              <g fill="none" fill-rule="evenodd">
+                <path
+                  d="M0 14.13v.123l27.95 13.13L56 14.209v-.033L27.95 1 0 14.13zm10.077.062L27.95 5.795l17.877 8.397-17.877 8.396-17.874-8.396zM27.95 32.483L0 19.55v4.784l27.95 12.964L56 24.289v-4.784L27.95 32.483zm0 9.703L0 29.25v4.783L27.95 47 56 33.99v-4.784l-28.05 12.98z"
+                  fill="#fff" />
+                <g transform="translate(72)">
+                  <mask id="b" fill="#fff">
+                    <use xlink:href="#a" />
+                  </mask>
+                  <path
+                    d="M87.56 24.152a8.1 8.1 0 0 0-2.161-5.573 7.259 7.259 0 0 0-2.34-1.673 6.864 6.864 0 0 0-2.85-.601c-1.01 0-1.961.2-2.852.601a7.257 7.257 0 0 0-2.34 1.673 8.102 8.102 0 0 0-2.16 5.574 8.102 8.102 0 0 0 2.16 5.573 7.257 7.257 0 0 0 2.34 1.672 6.864 6.864 0 0 0 2.851.602c1.01 0 1.96-.2 2.852-.602a7.259 7.259 0 0 0 2.339-1.672 8.1 8.1 0 0 0 2.16-5.574zm6.415 0c0 1.932-.357 3.723-1.07 5.373a13.098 13.098 0 0 1-2.94 4.28c-1.247 1.205-2.71 2.156-4.388 2.854-1.678.699-3.468 1.048-5.369 1.048-1.9 0-3.683-.349-5.346-1.048a13.863 13.863 0 0 1-4.366-2.876 13.351 13.351 0 0 1-2.94-4.302c-.713-1.65-1.07-3.426-1.07-5.329 0-1.873.364-3.634 1.092-5.284a13.92 13.92 0 0 1 2.962-4.325 13.671 13.671 0 0 1 4.367-2.898 13.552 13.552 0 0 1 5.301-1.048c1.901 0 3.69.35 5.369 1.048 1.678.698 3.14 1.65 4.388 2.854 1.248 1.204 2.228 2.638 2.94 4.302.713 1.665 1.07 3.449 1.07 5.351zM64.258 36.905a8.6 8.6 0 0 1-1.715.58c-.638.148-1.3.222-1.982.222a9.84 9.84 0 0 1-2.74-.379 6.003 6.003 0 0 1-2.295-1.226c-.653-.565-1.173-1.3-1.56-2.207-.385-.907-.578-2-.578-3.277V.029h6.549v29.474c0 1.07.215 1.806.646 2.207.43.401.943.602 1.537.602.742 0 1.455-.223 2.138-.669v5.262zM50.492 11.22L38.908 41.854c-.861 2.289-1.99 3.939-3.386 4.95-1.396 1.01-3.06 1.515-4.99 1.515-.297 0-.623-.022-.98-.066a7.352 7.352 0 0 1-1.025-.201l-2.138-5.975a8.486 8.486 0 0 0 1.56.557c.534.134 1.039.201 1.514.201 1.01 0 1.93-.23 2.762-.691.832-.46 1.47-1.315 1.916-2.564l.891-2.586-9.935-25.773h6.995l5.925 16.588 5.57-16.588h6.905zM23.538 7.342H6.786v8.294h16.529v5.618H6.785v15.784H.015V1.412h23.524v5.93z"
+                    fill="#fff" mask="url(#b)" />
+                </g>
+              </g>
+            </svg>
+          </div>
+
+          <p>
+            <img src="images/icon-phone.svg" alt="phone">
+            <span class="text">
+              Phone: +1-543-123-4567
+            </span>
+          </p>
+
+          <p>
+            <img src="images/icon-email.svg" alt="email">
+            <span class="text">
+              [email protected]
+            </span>
+          </p>
+        </div>
+
+        <div class="footer-links">
+          <div class="links">
+            <a href="#">About Us</a>
+            <a href="#">Jobs</a>
+            <a href="#">Press</a>
+            <a href="#">Blog</a>
+          </div>
+          <div class="links">
+            <a href="#">Contact Us</a>
+            <a href="#">Terms</a>
+            <a href="#">Privacy</a>
+          </div>
+
+          <div class="footer-social">
+            <i class='bx bxl-facebook'></i>
+            <i class='bx bxl-twitter'></i>
+            <i class='bx bxl-instagram'></i>
+          </div>
+        </div>
+      </div>
+    </div>
+  </footer>
+
+
+
+
+
+  <!-- 
+
+  
+  
+
+  About Us
+  Jobs
+  Press
+  Blog
+
+  Contact Us
+  Terms
+  Privacy -->
+
+</body>
+
+</html>