Add files via upload

Oto-Gelashvili · Mar 1, 2024 · dff2d05 · dff2d05
commit dff2d05
Show file tree

Hide file tree

Showing 11 changed files with 244 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,21 @@
+# Frontend Mentor - Four card feature section solution
+
+This is a solution to the [Four card feature section challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/four-card-feature-section-weK1eFYK). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
+
+### The challenge
+
+Users should be able to:
+
+- View the optimal layout for the site depending on their device's screen size
+
+## My process
+
+built with 2 break points.first at 768px second at 1440px
+
+### Built with
+
+- Semantic HTML5 markup
+- CSS custom properties
+- Flexbox
+- CSS Grid
+- Mobile-first workflow
diff --git a/design/desktop-design.jpg b/design/desktop-design.jpg
diff --git a/design/desktop-preview.jpg b/design/desktop-preview.jpg
diff --git a/design/mobile-design.jpg b/design/mobile-design.jpg
diff --git a/images/favicon-32x32.png b/images/favicon-32x32.png
diff --git a/images/icon-calculator.svg b/images/icon-calculator.svg
diff --git a/images/icon-karma.svg b/images/icon-karma.svg
diff --git a/images/icon-supervisor.svg b/images/icon-supervisor.svg
diff --git a/images/icon-team-builder.svg b/images/icon-team-builder.svg
diff --git a/index.html b/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="style.css" />
+    <link rel="icon" href="images/favicon-32x32.png" />
+    <title>Four Card Feature Section</title>
+  </head>
+  <body>
+    <header class="container-header">
+      <h1>
+        <span>Reliable, efficient delivery</span><br />Powered by Technology
+      </h1>
+      <p>
+        Our Artificial Intelligence powered tools use millions of project data
+        points to ensure that your project is successful
+      </p>
+    </header>
+    <section class="container-section">
+      <div class="box supervisor">
+        <h2>Supervisor</h2>
+        <p>Monitors activity to identify project roadblocks</p>
+        <img src="images/icon-supervisor.svg" alt="icon of loop" />
+      </div>
+      <div class="flex-column-section">
+        <div class="box team">
+          <h2>Team Builder</h2>
+          <p>
+            Scans our talent network to create the optimal team for your project
+          </p>
+          <img src="images/icon-team-builder.svg" alt="icon of team-building" />
+        </div>
+        <div class="box karma">
+          <h2>Karma</h2>
+          <p>Regularly evaluates our talent to ensure quality</p>
+          <img src="images/icon-karma.svg" alt="icon of lightbulb" />
+        </div>
+      </div>
+      <div class="box calc">
+        <h2>Calculator</h2>
+        <p>Uses data from past projects to provide better delivery estimates</p>
+        <img src="images/icon-calculator.svg" alt="icon of Calculator" />
+      </div>
+    </section>
+  </body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,165 @@
+html {
+  font-size: 62.5%;
+}
+:root {
+  --clr-letters: #4d4f62;
+  --clr-supervisor: #44d3d2;
+  --clr-team-builder: #ea5454;
+  --clr-karma: #fcae4a;
+  --clr-calculator: #549ef2;
+
+  --fs-h1: 2.4rem;
+  --fs-header-p: 1.5rem;
+  --fs-h2: 2rem;
+  --fs-p-section: 1.3rem;
+
+  --ff-primary: "Poppins", sans-serif;
+
+  --fw-heading: 600;
+  --fw-p: 400;
+  --fw-span: 275;
+}
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  font-family: var(--ff-primary);
+}
+body {
+  background: #fafafa;
+  color: var(--clr-letters);
+}
+.container-header {
+  margin: 8.5rem 3.2rem 7.6rem 3.2rem;
+}
+.container-section {
+  margin: 0 3.2rem 7.8rem 3.2rem;
+}
+.box {
+  padding: 2.8rem;
+  background: #ffffff;
+  box-shadow: 0px 15px 30px -11px rgba(131, 166, 210, 0.5);
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+}
+.supervisor {
+  border-top: 3.55px solid var(--clr-supervisor);
+}
+.team {
+  border-top: 3.55px solid var(--clr-team-builder);
+}
+.karma {
+  border-top: 3.55px solid var(--clr-karma);
+}
+.calc {
+  border-top: 3.55px solid var(--clr-calculator);
+}
+header {
+  display: flex;
+  flex-direction: column;
+  gap: 1.6rem;
+}
+h1 {
+  font-size: var(--fs-h1);
+  line-height: 100%;
+  letter-spacing: 0.17px;
+  text-align: center;
+}
+span {
+  font-weight: var(--fw-span);
+}
+header p {
+  font-size: var(--fs-header-p);
+  font-weight: var(--fw-p);
+  line-height: 167%;
+  text-align: center;
+  letter-spacing: 0.104167px;
+}
+p {
+  opacity: 0.5;
+  mix-blend-mode: normal;
+}
+img {
+  width: 5.7rem;
+  height: 5.7rem;
+  align-self: flex-end;
+}
+section {
+  display: flex;
+  flex-direction: column;
+  gap: 2.4rem;
+}
+h2 {
+  font-size: var(--fs-h2);
+  font-weight: var(--fw-heading);
+  line-height: 3rem;
+  margin-bottom: 1px;
+}
+section p {
+  font-size: var(--fs-p-section);
+  font-weight: var(--fw-p);
+  line-height: 177%;
+  letter-spacing: 0.0902778px;
+  margin-bottom: 3.4rem;
+}
+.flex-column-section {
+  display: flex;
+  flex-direction: column;
+  gap: 2.4rem;
+}
+@media screen and (min-width: 768px) {
+  section {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr 1fr;
+  }
+  .flex-column-section {
+    grid-row: 1/-1;
+    grid-column: 2/3;
+    gap: 3rem;
+  }
+  .box {
+    padding: 3.2rem;
+  }
+  section {
+    gap: 3rem;
+  }
+  h2 {
+    margin-bottom: 6px;
+  }
+  section p {
+    margin-bottom: 4rem;
+    height: 5rem;
+  }
+  img {
+    width: 64px;
+    height: 64px;
+  }
+  .container-header {
+    margin: 8rem 12rem 6.4rem 12rem;
+  }
+  .container-section {
+    margin: 0 8rem 8rem 8rem;
+  }
+}
+@media screen and (min-width: 1440px) {
+  :root {
+    --fs-h1: 3.6rem;
+  }
+  .container-header {
+    margin: 8rem 45rem 6.4rem 45rem;
+  }
+  .container-section {
+    margin: 0 16.5rem 8rem 16.5rem;
+  }
+  section {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+  }
+  .box {
+    width: 350px;
+  }
+}