Add files via upload

gauravgorane · Mar 14, 2024 · 1ca88fe · 1ca88fe
1 parent 03ef9d3
commit 1ca88fe
Show file tree

Hide file tree

Showing 5 changed files with 223 additions and 0 deletions.
diff --git a/Stats_preview_card_component/images/favicon-32x32.png b/Stats_preview_card_component/images/favicon-32x32.png
diff --git a/Stats_preview_card_component/images/image-header-desktop.jpg b/Stats_preview_card_component/images/image-header-desktop.jpg
diff --git a/Stats_preview_card_component/images/image-header-mobile.jpg b/Stats_preview_card_component/images/image-header-mobile.jpg
diff --git a/Stats_preview_card_component/index.html b/Stats_preview_card_component/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="stylesheet" href="style.css">
+  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
+
+  <title>Frontend Mentor | Stats preview card component</title>
+
+</head>
+<body>
+
+  <main>
+    <div class="container">
+
+      <div class="data">
+
+        <h1 class="heading">Get <span>insights</span> that help your business grow.</h1>
+
+        <p class="details">Discover the benefits of data analytics and make better decisions regarding revenue, customer experience, and overall efficiency.</p>
+
+        <div class="stats">
+
+          <p class="content"><span>10k+</span>COMPANIES</p>
+          <p class="content"><span>314</span>TEMPLATES</p>
+          <p class="content"><span>12M+</span>QUERIES</p>
+
+        </div>
+
+      </div>
+
+      <div class="wrapper">
+        <picture>
+          <source media="(min-width: 800px)" srcset="./images/image-header-desktop.jpg">
+          <img src="./images/image-header-mobile.jpg" alt="">
+        </picture>
+      </div>
+
+    </div>
+  </main>
+
+  <!-- <footer>
+    <div class="attribution">
+      <p>
+        Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
+        Coded by <a href="https://github.com/gauravgorane">Gaurav Gorane</a>.
+      </p>
+    </div>
+  </footer> -->
+
+</body>
+</html>
diff --git a/Stats_preview_card_component/style.css b/Stats_preview_card_component/style.css
@@ -0,0 +1,170 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:[email protected]&family=Lexend+Deca:[email protected]&display=swap');
+
+:root {
+    --Very_dark_blue_main_background: hsl(233, 47%, 7%);
+    --Dark_desaturated_blue_card_background: hsl(244, 38%, 16%);
+    --Soft_violet_accent: hsl(277, 64%, 61%);
+
+    --White_main_heading_stats: hsl(0, 0%, 100%);
+    --Slightly_transparent_white_main_paragraph: hsla(0, 0%, 100%, 0.75);
+    --Slightly_transparent_white_stat_headings: hsla(0, 0%, 100%, 0.6);
+
+    --fw_Inter_400: 400;
+    --fw_Inter_700: 700;
+
+    --fw_Lexend_400: 400;
+}
+
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+img{
+    display: block;
+    max-width: 100%;
+}
+
+body{
+    font-size: 15px;
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-family: 'Inter', sans-serif;
+    background-color: var(--Very_dark_blue_main_background);
+}
+
+.container{
+    display: flex;
+    flex-direction: column-reverse;
+    justify-content: center;
+    align-items: center;
+    margin: 1.5rem;
+    border-radius: 0.6rem;
+    overflow: hidden;
+}
+
+/* Image */
+
+.wrapper{
+    background-color: var(--Soft_violet_accent);
+}
+
+.wrapper img{
+    mix-blend-mode: multiply;
+}
+
+/* Data */
+
+.data{
+    padding: 2.4rem 2rem;
+    background-color: var(--Dark_desaturated_blue_card_background);
+    text-align: center;
+}
+
+/* Heading */
+
+.heading{
+    font-size: 1.7rem;
+    color: var(--Slightly_transparent_white_stat_headings);
+}
+
+.heading span{
+    color: var(--Soft_violet_accent);
+}
+
+/* Paragraphs */
+
+.details{
+    margin: 1rem 0;
+    line-height: 1.6;
+    color: var(--Slightly_transparent_white_stat_headings);
+}
+
+/* Stats */
+
+.stats{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    gap: 1.8rem;
+    margin-top: 2.4rem;
+}
+
+.content{
+    font-family: 'Lexend Deca', sans-serif;
+    font-size: 13px;
+    color: var(--Slightly_transparent_white_stat_headings);
+}
+
+.content span{
+    display: block;
+    font-family: 'Inter', sans-serif;
+    font-size: 1.5rem;
+    font-weight: var(--fw_Inter_700);
+    margin-bottom: 6px;
+}
+
+
+/* Footer */
+
+.attribution {
+    font-size: 11px;
+    text-align: center;
+}
+
+.attribution a {
+    color: hsl(228, 45%, 44%);
+}
+
+@media screen and (min-width: 800px) {
+    .container{
+        max-width: 69rem;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        overflow: hidden;
+        gap: 2rem;
+        background-color: var(--Dark_desaturated_blue_card_background);
+    }
+    .data{
+        text-align: left;
+        margin: auto 2.4rem;
+    }
+    .heading{
+        font-size: 2.26rem;
+    }
+    .details{
+        margin: 1.6rem 0;
+    }
+    .stats{
+        justify-content: flex-start;
+        flex-direction: row;
+        gap: 4rem;
+        margin-top: 4.8rem;
+    }
+    .wrapper img{
+        width: 100%;
+    }
+}
+
+@media screen and (max-width: 1130px) and (min-width: 800px){
+    .data{
+        padding: 0;
+        margin: auto 2.4rem;
+    }
+    .heading{
+        font-size: 1.4rem;
+    }
+    .details{
+        margin: 0.8rem 0;
+    }
+    .stats{
+        margin-top: 1.2rem;
+    }
+    .content span{
+        font-size: 1rem;
+    }
+}