adding subscribe icon card

Author: Joe

public/index.html

@@ -11,7 +11,7 @@
       rel="stylesheet"
     />
     <link
-      href="https://fonts.googleapis.com/css?family=Poppins&display=swap"
+      href="https://fonts.googleapis.com/css?family=Alata&display=swap"
       rel="stylesheet"
     />
   </head>

src/App.vue

@@ -1,16 +1,17 @@
 <template>
   <Content>
     <div class="row">
-      <!-- <div class="col-md-6 offset-md-3">
+      <div class="col-sm-6 offset-sm-3 col-md-6 offset-md-3">
         <BlogCard />
         <CoolPieChartCard />
         <IconProgressCard />
         <AreaChartCard />
         <CarouselCard />
         <LineChartCard />
         <ProfileImageCard />
-      </div> -->
-      <div class="col-md-10 offset-md-1">
+        <SubscribeIconCard />
+      </div>
+      <!-- <div class="col-md-10 offset-md-1">
         <div class="row">
           <div class="col-md-4">
             <BlogCard />
@@ -26,7 +27,7 @@
             <ProfileImageCard />
           </div>
         </div>
-      </div>
+      </div> -->
     </div>
   </Content>
 </template>
@@ -40,6 +41,7 @@ import AreaChartCard from "./components/cards/AreaChartCard";
 import CarouselCard from "./components/cards/CarouselCard";
 import LineChartCard from "./components/cards/LineChartCard";
 import ProfileImageCard from "./components/cards/ProfileImageCard";
+import SubscribeIconCard from "./components/cards/SubscribeIconCard";
 
 require("./assets/css/bootstrap.css");
 require("./assets/css/tonicons.css");
@@ -55,15 +57,16 @@ export default {
     AreaChartCard,
     CarouselCard,
     LineChartCard,
-    ProfileImageCard
+    ProfileImageCard,
+    SubscribeIconCard
   }
 };
 </script>
 
 <style>
 body {
   background: #f3f3f3;
-  font-family: "Poppins", Helvetica, Arial, sans-serif;
+  font-family: "Alata", Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -72,4 +75,8 @@ body {
   box-sizing: border-box;
   line-height: 1;
 }
+
+button {
+  font-family: "Alata", Helvetica, Arial, sans-serif;
+}
 </style>

src/components/cards/ProfileImageCard.vue

@@ -32,6 +32,7 @@ const Card = styled.div`
   background: #f3f3f3;
   box-shadow: 8px 8px 10px #e0e0e0, -2px -2px 15px #ffffff;
   overflow: hidden;
+  margin-bottom: 10rem;
 `;
 
 const BackgroundColor = styled.div`

src/components/cards/SubscribeIconCard.vue

@@ -0,0 +1,87 @@
+<template>
+  <Card>
+    <Pricetag>
+      £25/month
+    </Pricetag>
+    <Icon class="ti-Line-Heart" />
+    <Value>3,642 Likes</Value>
+    <DateRange>This week</DateRange>
+    <Description>
+      Now kickstart with your next design. Subscribe today and save $20/month
+    </Description>
+    <CoolButton>Subscribe</CoolButton>
+  </Card>
+</template>
+
+<script>
+import styled from "vue-styled-components";
+
+const Card = styled.div`
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  padding: 1.5rem;
+  border-radius: 0.5rem;
+  background: linear-gradient(to right, #4c429a 0%, #9956ce 100%);
+  box-shadow: 8px 8px 10px #e0e0e0, -2px -2px 15px #ffffff;
+  color: #ffffff;
+  margin-bottom: 10rem;
+`;
+
+const Pricetag = styled.div`
+  position: absolute;
+  top: 0;
+  right: 0;
+  font-size: 0.75rem;
+  line-height: 2;
+  text-align: center;
+  border-bottom-left-radius: 0.75rem;
+  background: #c322e0;
+  padding: 0 0.5rem;
+`;
+
+const Icon = styled.span`
+  font-size: 2.5rem;
+`;
+
+const Value = styled.div`
+  padding-top: 1rem;
+  font-size: 2rem;
+  font-weight: bold;
+  margin-bottom: 1rem;
+`;
+
+const DateRange = styled.div`
+  font-size: 0.875rem;
+  margin-bottom: 1rem;
+`;
+
+const Description = styled.div`
+  font-size: 0.825rem;
+  line-height: 1.5;
+  color: rgba(255, 255, 255, 0.75);
+  margin-bottom: 1.25rem;
+`;
+
+const CoolButton = styled.button`
+  height: 2.5rem;
+  padding: 0 1rem;
+  font-size: 0.875rem;
+  border: 0;
+  border-radius: 0.375rem;
+  background: #c322e0;
+  color: #ffffff;
+`;
+
+export default {
+  components: {
+    Card,
+    Pricetag,
+    Icon,
+    Value,
+    DateRange,
+    Description,
+    CoolButton
+  }
+};
+</script>