From 2b6eabfa4fea51d6fd176da4c1c9487771f4524d Mon Sep 17 00:00:00 2001 From: DevanshSrivastava19 Date: Sat, 30 Oct 2021 16:46:03 +0530 Subject: [PATCH 1/2] Added responsiveness to pricing component --- components/home/pricing.js | 61 ++++++++++++++++++++++++++------------ pages/index.js | 2 +- 2 files changed, 43 insertions(+), 20 deletions(-) diff --git a/components/home/pricing.js b/components/home/pricing.js index 96c8244..954d769 100644 --- a/components/home/pricing.js +++ b/components/home/pricing.js @@ -13,26 +13,26 @@ function Pricing() Basic Plan $14.99 - + First Feature Second Feature Third Feature Fourth Feature - + - Get Plan + Get Plan Advanced Plan $29.99 - + First Feature Second Feature Third Feature Fourth Feature Fifth Feature - + Get Plan @@ -43,28 +43,29 @@ function Pricing() const Container = styled.div` @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap'); display: flex; justify-content: space-evenly; - padding-top: 16%; - padding-bottom: 18%; + padding-top: 4.5vw; + padding-bottom: 4.5vw; background-color:rgba(239, 239, 239,1); font-family: 'Poppins', sans-serif; `; const Intro= styled.div` - width:37.5%; + width:40%; padding-left: 7%; margin-top: 0px; + height: max-content; `; const IntroLabel=styled.p` - font-size:225%; + font-size: 2.3vw; color: #676767; `; const IntroHeading=styled.p` - font-size: 281.25%; + font-size: 2.9vw; padding-right:35%; margin-top: 0%; `; const IntroDescription= styled.p` - font-size: 168.75%; + font-size: 1.7vw; padding-right:20%; margin-top: 0%; color: #676767; @@ -82,15 +83,17 @@ const Card=styled.div` text-align: center; border-radius: 5%; padding-bottom: 5%; + height: max-content; + `; const CardCategory= styled.p` - font-size: 168.75%; + font-size: 1.7vw; font-weight:bolder; `; const CardPrice=styled.p` - font-size: 225%; - padding-top: 2%; + font-size: 2.3vw; + margin-top: 0; color: #676767; font-weight:bold; `; @@ -99,18 +102,38 @@ const GetPlan=styled.button` color:rgba(239, 239, 239,1); border-radius: 7%; width:50%; - height:9.5%; - font-size: 130%; + height:2.945vw; + font-size: 1.3vw; border-style: none; font-weight: bold; `; -const CardFeatures=styled.ul` +const CardFeatures1=styled.ul` list-style: none; padding-inline-start: 0%; + padding-bottom: 1.5vw; + margin-top:1.04vw; + margin-bottom: 1.04vw; + @media (max-width: 768px){ + margin-top:0vw; + margin-bottom: 0vw; + padding-bottom: 0vw; + + } `; +const CardFeatures2=styled.ul` + list-style: none; + padding-inline-start: 0%; + padding-bottom: 0.8vw; + margin-top:1.04vw; + margin-bottom: 1.04vw; + @media (max-width: 768px){ + margin-top:0vw; + margin-bottom: 0vw; + padding-bottom: 0vw; +} `; const FeaturesListElement=styled.li` - font-size: 180%; - padding-top: 3%; + font-size: 1.7vw; + padding-bottom: 0.5vw; color: #676767; diff --git a/pages/index.js b/pages/index.js index a6d323e..9f77322 100644 --- a/pages/index.js +++ b/pages/index.js @@ -10,7 +10,7 @@ export default function Home() { return ( - Like this random styled-component, we have to render every page + From d13cb6de32422ca9f5a9005ced0a673b906e2c00 Mon Sep 17 00:00:00 2001 From: DevanshSrivastava19 Date: Tue, 16 Nov 2021 23:44:33 +0530 Subject: [PATCH 2/2] Updated pricing.js(Responsiveness) --- components/home/Pricing/pricing.js | 106 ++++++++++++++++++++++------- 1 file changed, 80 insertions(+), 26 deletions(-) diff --git a/components/home/Pricing/pricing.js b/components/home/Pricing/pricing.js index 954d769..d23d427 100644 --- a/components/home/Pricing/pricing.js +++ b/components/home/Pricing/pricing.js @@ -41,59 +41,111 @@ function Pricing() } const Container = styled.div` -@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap'); display: flex; +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap'); + display: flex; justify-content: space-evenly; - padding-top: 4.5vw; - padding-bottom: 4.5vw; + padding-top: 10%; + padding-bottom: 10%; background-color:rgba(239, 239, 239,1); font-family: 'Poppins', sans-serif; + margin:0px; + overflow-x: hidden; + @media (max-width: 768px){ + flex-direction: column; + + } `; const Intro= styled.div` - width:40%; + width:42%; padding-left: 7%; margin-top: 0px; height: max-content; + @media (max-width: 1024px){ + padding-left: 4%; + padding-bottom:7%}; + @media (max-width: 768px){ + width:inherit; + padding-left: 2%; + }; + `; const IntroLabel=styled.p` - font-size: 2.3vw; + font-size:36px; color: #676767; + @media (max-width: 1024px){ + margin-bottom:10px; + /* font-size:30px;*/ + } `; const IntroHeading=styled.p` - font-size: 2.9vw; - padding-right:35%; + font-size: 45px; + padding-right:25%; margin-top: 0%; + + @media (max-width: 1024px){ + padding-right:10%; + padding-bottom: 5%; + font-size:36px; + ;}; + @media (max-width: 768px){ + font-size:45px; + }; + `; const IntroDescription= styled.p` - font-size: 1.7vw; + font-size: 27px; padding-right:20%; margin-top: 0%; + color: #676767; line-height: 1.6em; + @media (max-width: 1024px){ + padding-right:5%; + font-size: 23px; + ;} + @media (max-width: 768px){ + font-size: 27px; + }; `; const CardContainer= styled.div` display:flex; justify-content: space-around; - width:60%; + width:57%; + @media (max-width: 768px){ + width:inherit; + }; + @media (max-width: 420px){ + flex-direction: column; + } `; const Card=styled.div` width:40%; - padding:0; + /* padding:0;*/ background-color: white; text-align: center; border-radius: 5%; padding-bottom: 5%; height: max-content; + @media (max-width: 420px) + { + width:60%; + margin-left: 20%; + margin-right:20%; + margin-bottom: 15%; + } `; const CardCategory= styled.p` - font-size: 1.7vw; + font-size: 27px; font-weight:bolder; + padding-top: 5%; + padding-bottom: 5%; `; const CardPrice=styled.p` - font-size: 2.3vw; - margin-top: 0; + font-size: 36px; + /*margin-top: 0;*/ color: #676767; font-weight:bold; `; @@ -102,8 +154,8 @@ const GetPlan=styled.button` color:rgba(239, 239, 239,1); border-radius: 7%; width:50%; - height:2.945vw; - font-size: 1.3vw; + height:46px; + font-size: 20px; border-style: none; font-weight: bold; `; @@ -113,12 +165,9 @@ const CardFeatures1=styled.ul` padding-bottom: 1.5vw; margin-top:1.04vw; margin-bottom: 1.04vw; - @media (max-width: 768px){ - margin-top:0vw; - margin-bottom: 0vw; - padding-bottom: 0vw; + - } + `; const CardFeatures2=styled.ul` list-style: none; @@ -126,15 +175,20 @@ const CardFeatures2=styled.ul` padding-bottom: 0.8vw; margin-top:1.04vw; margin-bottom: 1.04vw; - @media (max-width: 768px){ - margin-top:0vw; - margin-bottom: 0vw; - padding-bottom: 0vw; -} `; + + `; const FeaturesListElement=styled.li` - font-size: 1.7vw; + font-size: 27px; padding-bottom: 0.5vw; color: #676767; + @media (max-width: 1024px){ + font-size: 20px; + + } + @media (max-width: 768px) + { + font-size: 27px; + } `;