d:/Prachi Workspace/Study/html projects/demo project/Frontend Mentor …

…Challenges/challenge 12_stats preview card/stats-preview-card-component-solution/index.html
developer-prachi · Oct 4, 2024 · 4f7f8b8 · 4f7f8b8
commit 4f7f8b8
Show file tree

Hide file tree

Showing 6 changed files with 245 additions and 0 deletions.
diff --git a/images/favicon-32x32.png b/images/favicon-32x32.png
diff --git a/images/image-header-desktop.jpg b/images/image-header-desktop.jpg
diff --git a/images/image-header-mobile.jpg b/images/image-header-mobile.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <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=Inter:wght@100..900&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="style.css">
+  <link rel="stylesheet" href="query.css">
+
+  <title>stats preview card</title>
+</head>
+
+<body>
+
+  <section class="container">
+    <article class="section-one">
+      <h1 class="heading">Get <span class="insight">insights</span> that help your business grow.</h1>
+      <p class="content">Discover the benefits of data analytics and make better decisions regarding revenue, customer
+        experience, and
+        overall efficiency.</p>
+
+      <div class="company-details">
+        <div>
+
+          <p class="comapnies-det"> 10k+ </p>
+          <p class="companies-info"> companies </p>
+
+        </div>
+        <div>
+
+          <p class="comapnies-det"> 314 </p>
+          <p class="companies-info"> templates </p>
+
+        </div>
+        <div>
+
+          <p class="comapnies-det"> 12m+</p>
+          <p class="companies-info">queries </p>
+
+        </div>
+      </div>
+    </article>
+    <article class="section-two">
+      <img src="images/image-header-desktop.jpg" alt="photos of company employees" class="image">
+    </article>
+  </section>
+
+</body>
+
+</html>
diff --git a/query.css b/query.css
@@ -0,0 +1,114 @@
+/*BELOW 1200px (smaller desktops)/*
+/*****************************************************/
+@media (max-width: 75em) {
+  html {
+    font-size: 56.25%;
+  }
+}
+
+/*****************************************************/
+/*BELOW 1024px (Tablets and small desktop)/*
+/*****************************************************/
+@media (max-width: 64em) {
+  html {
+    font-size: 50%;
+  }
+}
+
+/*****************************************************/
+/*BELOW 910 (Tablets)/*
+/*****************************************************/
+@media (max-width: 56em) {
+  .section-one {
+    width: 43rem;
+    padding: 5rem;
+    height: 33rem;
+  }
+  .image {
+    width: 43rem;
+    height: 33rem;
+  }
+  .content {
+    margin-bottom: 5rem;
+  }
+}
+
+/*****************************************************/
+/*BELOW 704 (smaller Tablets)/*
+/*****************************************************/
+@media (max-width: 44em) {
+  html {
+    /* 7/16 */
+    font-size: 43%;
+  }
+  .section-one {
+    width: 43rem;
+    padding: 5rem;
+    height: 33rem;
+  }
+  .image {
+    width: 43rem;
+    height: 33rem;
+  }
+  .content {
+    margin-bottom: 5rem;
+  }
+}
+
+/*****************************************************/
+/*BELOW 650px ( phones)/*
+/*****************************************************/
+@media (max-width: 40em) {
+  .container {
+    display: flex;
+    flex-direction: column-reverse;
+    align-items: center;
+    justify-content: center;
+  }
+  body {
+    height: 100vh;
+    padding: 5rem;
+  }
+  .image {
+    align-self: flex-start;
+    position: relative;
+  }
+  .section-one {
+    width: auto;
+    padding: 3rem;
+    text-align: center;
+    height: auto;
+  }
+  .image {
+    width: 100%;
+    height: auto;
+    border-radius: 0.5rem;
+  }
+  .company-details {
+    display: flex;
+    flex-direction: column;
+    gap: 3rem;
+  }
+}
+
+/* @media (max-width: 40em) {
+    .container {
+     display: flex;
+      flex-direction: column-reverse;
+      align-items: center;
+      justify-content: center;
+    }
+    body {
+      height: auto;
+      padding: 2rem;
+    }
+    .section-one {
+      width: auto;
+      padding: 2rem;
+      text-align: center;
+    }
+    .image {
+      width: 100%;
+      height: auto;
+      border-radius: 0.5rem;
+    } */
diff --git a/style.css b/style.css
@@ -0,0 +1,78 @@
+/* Font-sizes(px): 
+10/12/14/16/18/20/24/30/36/44/52/62/74/86/98 
+
+- SPACING SYSTEM (px)
+2/4/8/12/16/24/32/48/64/80/96/128 */
+
+* {
+  padding: 0px;
+  margin: 0px;
+  box-sizing: border-box;
+}
+html {
+  /* width: 62.5%; */
+  font-size: 62.5%;
+}
+
+body {
+  background-color: hsl(233, 47%, 7%);
+  font-family: "Inter", sans-serif;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100vh;
+}
+
+.container {
+  display: flex;
+  /* overflow: hidden; */
+}
+
+.heading {
+  color: hsl(0, 0%, 100%);
+  font-size: 3rem;
+  margin-bottom: 2rem;
+}
+.insight {
+  color: hsl(277, 64%, 61%);
+}
+.content {
+  color: hsla(0, 0%, 100%, 0.6);
+  font-size: 1.4rem;
+  font-weight: 500;
+  line-height: 2.5rem;
+  margin-bottom: 6rem;
+}
+.section-one {
+  background-color: hsl(244, 38%, 16%);
+  border-radius: 0.5rem;
+  padding: 7rem;
+  width: 50rem;
+  height: 40rem;
+}
+
+.image {
+  width: 50rem;
+  height: 40rem;
+  border-top-right-radius: 0.5rem;
+  border-bottom-right-radius: 0.5rem;
+  background: linear-gradient(hsl(277, 64%, 61%)),
+    url("images/image-header-desktop.jpg");
+  /* background-size: cover;
+  background-position: center; */
+}
+.comapnies-det {
+  color: hsl(0, 0%, 100%);
+  font-size: 2rem;
+  font-weight: 700;
+  margin-bottom: 0.5rem;
+}
+.companies-info {
+  color: hsla(0, 0%, 100%, 0.6);
+  font-size: 1.2rem;
+  text-transform: uppercase;
+}
+.company-details {
+  display: flex;
+  justify-content: space-between;
+}