Add files via upload

gauravgorane · Mar 11, 2024 · b96369e · b96369e
1 parent 1bd3ad4
commit b96369e
Show file tree

Hide file tree

Showing 6 changed files with 190 additions and 0 deletions.
diff --git a/3_column_preview_card_component/images/favicon-32x32.png b/3_column_preview_card_component/images/favicon-32x32.png
diff --git a/3_column_preview_card_component/images/icon-luxury.svg b/3_column_preview_card_component/images/icon-luxury.svg
diff --git a/3_column_preview_card_component/images/icon-sedans.svg b/3_column_preview_card_component/images/icon-sedans.svg
diff --git a/3_column_preview_card_component/images/icon-suvs.svg b/3_column_preview_card_component/images/icon-suvs.svg
diff --git a/3_column_preview_card_component/index.html b/3_column_preview_card_component/index.html
@@ -0,0 +1,65 @@
+<!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 | 3-column preview card component</title>
+
+</head>
+
+<body>
+
+  <main>
+
+    <div class="container">
+
+      <div class="car1">
+        <img src="./images/icon-sedans.svg" alt="Sedans Car">
+
+        <h1 class="title">Sedans</h1>
+
+        <p class="car_detail">Choose a sedan for its affordability and excellent fuel economy. Ideal for cruising in the city or on your next road trip.</p>
+
+        <button class="btn">Learn More</button>
+      </div>
+
+      <div class="car2">
+        <img src="./images/icon-suvs.svg" alt="SUVs Car">
+
+        <h1 class="title">SUVs</h1>
+
+        <p class="car_detail">Take an SUV for its spacious interior, power, and versatility. Perfect for your next family vacation and off-road adventures.</p>
+
+        <button class="btn">Learn More</button>
+
+      </div>
+
+      <div class="car3">
+        <img src="./images/icon-luxury.svg" alt="Sedans Car">
+
+        <h1 class="title">Luxury</h1>
+
+        <p class="car_detail">Cruise in the best car brands without the bloated prices. Enjoy the enhanced comfort of a luxury rental and arrive in style.</p>
+
+        <button class="btn">Learn More</button>
+
+      </div>
+
+    </div>
+
+  </main>
+
+  <!-- <footer>
+    <div class="attribution">
+      Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
+      Coded by <a href="https://www.github.com/gauravgorane">Gaurav Gorane</a>.
+    </div>
+  </footer> -->
+
+</body>
+
+</html>
diff --git a/3_column_preview_card_component/style.css b/3_column_preview_card_component/style.css
@@ -0,0 +1,122 @@
+@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:[email protected]&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:[email protected]&display=swap');
+
+:root {
+    --Transparent_white_paragraphs: hsla(0, 0%, 100%, 0.75);
+    --Very_light_gray_background_headings_buttons: hsl(0, 0%, 95%);
+    --Bright_orange: hsl(31, 77%, 52%);
+    --Dark_cyan: hsl(184, 100%, 22%);
+    --Very_dark_cyan: hsl(179, 100%, 13%);
+    --fw_Big_Shoulders_Display: 700;
+    --fw_Lexend_Deca: 700;
+}
+
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html{
+    font-size: 62.5%;
+}
+
+img{
+    height: 100%;
+    max-width: 100%;
+    display: block;
+}
+
+body{
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--Very_light_gray_background_headings_buttons);
+    font-family: 'Lexend Deca', sans-serif;
+    color: var(--Very_light_gray_background_headings_buttons);
+}
+
+.container{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    max-width: 92rem;
+    border-radius: 1rem;
+    margin: 2.4rem;
+    overflow: hidden;
+}
+
+.car1{
+    background-color: var(--Bright_orange);
+    padding: 5rem;
+}
+
+.car2{
+    background-color: var(--Dark_cyan);
+    padding: 5rem;
+
+}
+
+.car3{
+    background-color: var(--Very_dark_cyan);
+    padding: 5rem;
+}
+
+.title{
+    font-family: 'Big Shoulders Display', sans-serif;
+    text-transform: uppercase;
+    font-size: 4rem;
+    margin: 3.4rem 0 2.6rem;
+}
+
+.car_detail{
+    font-size: 1.5rem;
+    line-height: 1.67;
+}
+
+.btn{
+    border: 2px solid var(--Very_light_gray_background_headings_buttons);
+    border-radius: 12rem;
+    font-size: 1.56rem;
+    padding: 1.4rem 3rem;
+    margin-top: 8rem;
+    font-family: 'Lexend Deca', sans-serif;
+    transition: all 0.2s ease-in-out;
+}
+
+.car1 .btn{
+    color: var(--Bright_orange);
+}
+
+.car2 .btn{
+    color: var(--Dark_cyan);
+}
+
+.car3 .btn{
+    color: var(--Very_dark_cyan);
+}
+
+.attribution {
+    font-size: 11px;
+    text-align: center;
+}
+
+.attribution a {
+    color: hsl(228, 45%, 44%);
+}
+
+@media screen and (max-width:970px){
+    .container{
+        flex-wrap: wrap;
+    }
+    .btn{
+        margin-top: 2rem;
+    }
+}
+
+.btn:hover{
+    cursor: pointer;
+    background-color: transparent;
+    color: var(--Very_light_gray_background_headings_buttons);
+}