letdummy · SayanTan772 · Oct 5, 2022
diff --git a/Single Price Grid Component/README.md b/Single Price Grid Component/README.md
@@ -0,0 +1,32 @@
+# Single Price Grid Component
+
+![](design/desktop-preview.jpg)
+
+# Description
+
+### Hi! 👋🏻 Thanks for checking this out.
+
+### This is a simple frontend project to build a responsive single price grid component where you can learn how to make a grid layout using flexbox along with hands-on practice in building interactive elements in a website !
+<br/>
+
+### To practice this frontend challenge, check out 👇🏻
+### [Frontend Mentor - Single Price Grid Component](https://www.frontendmentor.io/challenges/single-price-grid-component-5ce41129d0ff452fec5abbbc)
+
+<br/>
+
+### [ [Frontend Mentor](https://www.frontendmentor.io/home) provides designs so that you can practice your front-end skills using a real-life workflow. The challenges include designs (both mobile and desktop), assets, and a style guide to get you started ]
+
+<br/>
+
+# Technologies Used
+
+- ### HTML
+- ### CSS
+
+<br/>
+
+# Github Link
+
+### This page is hosted through **Github Pages**.
+## Page link 👇🏻
+### [https://sayantan772.github.io/Single-Price-Grid-Component/](https://sayantan772.github.io/Single-Price-Grid-Component/)
diff --git a/Single Price Grid Component/design/desktop-design.jpg b/Single Price Grid Component/design/desktop-design.jpg
diff --git a/Single Price Grid Component/design/desktop-preview.jpg b/Single Price Grid Component/design/desktop-preview.jpg
diff --git a/Single Price Grid Component/design/mobile-design.jpg b/Single Price Grid Component/design/mobile-design.jpg
diff --git a/Single Price Grid Component/images/favicon-32x32.png b/Single Price Grid Component/images/favicon-32x32.png
diff --git a/Single Price Grid Component/index.html b/Single Price Grid Component/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
+  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
+  <link rel="stylesheet" href="style.css">
+  <title>Frontend Mentor | Single Price Grid Component</title>
+</head>
+<body>
+  <div class="container">
+    <div class="top">
+    <h2>Join our community</h2>
+    <p class="sub-heading">30-day, hassle-free money back guarantee</p>
+    <p class="details">
+    Gain access to our full library of tutorials along with expert code reviews. 
+    Perfect for any developers who are serious about honing their skills.
+    </p>
+    </div>
+    <div class="bottom">
+      <div class="left">
+        <h3>Monthly Subscription</h3>
+         <div class="price"><div class="dollar">&dollar;29</div><div class="text">per month</div></div>
+          <p class="subcription">Full access for less than &dollar;1 a day</p>
+           <div class="button"><button class="sign-up">Sign Up</button></div>
+      </div>
+      <div class="right">
+        <h3>Why Us</h3>
+         <div class="list">
+          <ul>
+            <li class="item">Tutorials by industry experts</li>
+            <li class="item">Peer &amp; expert code review</li>
+            <li class="item">Coding exercises</li>
+            <li class="item">Access to our GitHub repos</li>
+            <li class="item">Community forum</li>
+            <li class="item">Flashcard decks</li>
+            <li class="item">New videos every week</li>
+          </ul>
+         </div>
+      </div>
+    </div>
+  </div>
+
+
+</body>
+</html>
diff --git a/Single Price Grid Component/style.css b/Single Price Grid Component/style.css
@@ -0,0 +1,125 @@
+@import url('https://fonts.googleapis.com/css2?family=Karla:wght@400;700&display=swap');
+*{
+    border: 0;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+body{
+    width:100vw;
+    height:100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: hsl(204, 43%, 93%);
+    font-family: "Karla", sans-serif;
+    font-size: 16px;
+}
+.container{
+    width: 45%;
+    height: 68%;
+    border-radius: 12px;
+    display:block;
+    box-shadow: 0px 20px 35px rgba(0,0,0,0.2);
+}
+.container .top{
+    background-color:white;
+    width:100%;
+    height:43%;
+    border-radius: 12px 12px 0px 0px;
+    text-align: left;
+    padding: 32px 32px;
+}
+.container .top h2{
+    color: hsl(179, 62%, 43%);
+    font-weight:700;
+}
+.container .top .sub-heading{
+    color:hsl(71, 70%, 47%);
+    font-weight:700;
+    padding-top: 28px;
+    padding-bottom: 15px;
+}
+.container .top .details{
+    color:hsl(218, 22%, 67%);
+    font-weight:400;
+    padding-right: 50px;
+    line-height: 27px;
+}
+.container .bottom{
+    width:100%;
+    height:57%;
+    border-radius: 0px 0px 12px 12px;
+    display:flex;
+    justify-content: center;
+    align-items: center;
+    background-color:hsl(179, 62%, 43%);
+}
+.container .bottom .left{
+    width:50%;
+    height:100%;
+    border-radius: 0px 0px 0px 12px;
+    padding: 40px 40px;
+    text-align:left;
+}
+.container .bottom .left h3{
+    color:white;
+    font-weight:520;
+}
+.container .bottom .left .price{
+    width:100%;
+    padding-top:20px;
+    padding-bottom:10px;
+    display:flex;
+}
+.container .bottom .left .price .dollar{
+    float:left;
+    color:white;
+    font-weight:700px;
+    font-size: 32px;
+    padding-right: 7px;
+}
+.container .bottom .left .price .text{
+    float:left;
+    color:hsl(179, 62%, 70%);
+    transform: translate(10px,10px);
+}
+.container .bottom .left .subcription{
+    color:hsl(204, 43%, 93%);
+    padding-bottom:35px;
+}
+.container .bottom .left .button{
+    width:100%;
+    padding-right: 20px;
+}
+.container .bottom .left .button .sign-up{
+    width:100%;
+    height:45px;
+    background-color:hsl(71, 73%, 54%);
+    color:white;
+    font-weight:700;
+    letter-spacing: 1px;
+    border-radius:6px;
+    box-shadow: 0px 10px 10px rgba(0,0,0,0.15);
+    cursor:pointer;
+}
+.container .bottom .right{
+    width:50%;
+    height:100%;
+    background-color: rgba(255,255,255,0.2);
+    border-radius: 0px 0px 12px 0px;
+    padding: 40px 40px;
+}
+.container .bottom .right h3{
+    color:white;
+    font-weight:520;
+}
+.container .bottom .right .list{
+    width:100%;
+    padding-top:20px;
+    line-height:22px;
+}
+.container .bottom .right .list .item{
+    list-style:none;
+    color:hsl(179, 62%, 85%);
+}