rmcg.dev/projects/FrontendMentor/newbie/single-price-grid-component.../css/style.css

272 lines
5.0 KiB
CSS
Raw Normal View History

@import url('https://fonts.googleapis.com/css2?family=Karla:wght@400;700&display=swap');
2020-09-23 15:59:24 +02:00
/* -- Basic Styling -- */
:root {
/* setting base to 20px to make my life nicer working with rem */
font-size: 20px;
/* primary site colours */
--site-cyan: hsl(179, 62%, 43%);
--site-bright-yellow: hsl(71, 73%, 54%);
2020-09-23 15:59:24 +02:00
/* secondary colours, not defined in style guide */
--site-greener-cyan: rgb(0, 195, 192);
/* neutral site colours */
--site-light-gray: hsl(204, 43%, 93%);
--site-grayish-blue: hsl(218, 22%, 67%);
2020-09-23 15:59:24 +02:00
--box-border-radius: 8px;
font-weight: 400;
}
* {
margin: 0;
padding: 0;
2020-09-23 15:59:24 +02:00
box-sizing: border-box;
}
2020-09-23 15:59:24 +02:00
/* -- General Styling -- */
body {
/* per the style guide, the body copy is 16px */
font-size: 16px;
font-family: 'Karla', sans-serif;
2020-09-23 15:59:24 +02:00
width: 85vw;
2020-09-12 13:18:25 +02:00
height: 100vh;
margin: 0 auto;
display: flex;
flex-direction: column;
2020-09-12 13:18:25 +02:00
justify-content: center;
align-content: center;
/* align-items: center; */
background-color: var(--site-light-gray);
}
2020-09-23 15:59:24 +02:00
.container {
box-shadow: 2px 10px 25px -12px rgba(0,0,0,0.5);
2020-09-12 13:18:25 +02:00
}
2020-09-23 15:59:24 +02:00
.box {
2020-09-23 16:06:31 +02:00
padding-left: 2.3rem;
padding-right: 2.3rem;
padding-top: 1.4rem;
padding-bottom: 1.4rem;
2020-09-12 13:18:25 +02:00
}
2020-09-23 15:59:24 +02:00
2020-09-12 13:18:25 +02:00
.heading {
/* margin-top: 1.5rem; */
color: white;
2020-09-23 15:59:24 +02:00
font-size: 0.95rem;
/* font-weight: 700; */
}
/* Specific stylings */
.topRow {
2020-09-23 16:06:31 +02:00
padding-top: 2.1rem;
2020-09-23 15:59:24 +02:00
padding-bottom: 2.4rem;
background-color: white;
border-top-left-radius: var(--box-border-radius);
border-top-right-radius: var(--box-border-radius);
2020-09-12 13:18:25 +02:00
}
.topRow .heading {
color: var(--site-cyan);
2020-09-23 15:59:24 +02:00
font-size: 1.20rem;
2020-09-12 13:18:25 +02:00
}
.quickSell {
2020-09-23 15:59:24 +02:00
margin-top: 0.7rem;
2020-09-12 13:18:25 +02:00
color: var(--site-bright-yellow);
2020-09-23 15:59:24 +02:00
font-size: 0.9rem;
2020-09-12 13:18:25 +02:00
}
.sellBlurb {
2020-09-23 15:59:24 +02:00
margin-top: 0.75rem;
color: gray;
font-size: 0.75rem;
line-height: 1.2rem;
2020-09-12 13:18:25 +02:00
}
.bottomRow {
2020-09-23 15:59:24 +02:00
display: flex;
2020-09-12 13:18:25 +02:00
flex-direction: column;
}
.pricingBox {
background-color: var(--site-cyan);
}
.priceRow {
display: flex;
2020-09-23 15:59:24 +02:00
align-items: center;
margin-top: 1rem;
2020-09-12 13:18:25 +02:00
}
.price {
color: white;
2020-09-23 15:59:24 +02:00
font-size: 1.5rem;
2020-09-12 13:18:25 +02:00
}
.pricePeriod {
2020-09-23 15:59:24 +02:00
color: var(--site-greener-cyan);
font-size: 1rem;
margin-left: 0.5rem;
2020-09-12 13:18:25 +02:00
}
.sell {
2020-09-23 15:59:24 +02:00
margin-top: 0.5rem;
2020-09-12 13:18:25 +02:00
color: white;
}
.signupButton {
2020-09-23 15:59:24 +02:00
text-align: center;
display: block;
margin-top: 1.5rem;
2020-09-12 13:18:25 +02:00
background-color: var(--site-bright-yellow);
color: white;
2020-09-23 15:59:24 +02:00
/* width: 85%; */
/* height: 20%; */
padding: 13px 3.25rem;
/* margin-left: auto; */
/* margin-right: auto; */
/* align-self: center; */
justify-content: center;
border-radius: 5px;
font-weight: 700;
2020-09-12 13:18:25 +02:00
}
.whyUsBox {
2020-09-23 15:59:24 +02:00
background-color: var(--site-greener-cyan);
border-bottom-left-radius: var(--box-border-radius);
border-bottom-right-radius: var(--box-border-radius);
2020-09-12 13:18:25 +02:00
}
.blurb {
2020-09-23 15:59:24 +02:00
margin-top: 0.75rem;
2020-09-12 13:18:25 +02:00
}
.blurb .unstyledList {
list-style: none;
2020-09-23 15:59:24 +02:00
font-size: 16px;
color: var(--site-light-gray);
line-height: 1rem;
}
footer {
text-align: center;
position: fixed;
bottom: 0;
/* margin-top: auto; */
2020-09-12 13:18:25 +02:00
}
/* Feel free to remove these styles or customise in your own stylesheet 👍 */
2020-09-23 15:59:24 +02:00
.attribution { font-size: 11px; text-align: center;
/* visibility: hidden; */
}
2020-09-12 13:18:25 +02:00
.attribution a { color: hsl(228, 45%, 44%); }
/**
* * style guide has 2 designs, one aimed for 375x870, and the other 1440x800
* TODO: Tweak transition point later
*/
@media screen and (max-width: 500px) {
2020-09-23 15:59:24 +02:00
.topRow {
2020-09-12 13:18:25 +02:00
}
2020-09-23 15:59:24 +02:00
.topRow .heading {
margin-top: 0.4rem;
font-size: 1.05rem;
2020-09-12 13:18:25 +02:00
}
2020-09-23 15:59:24 +02:00
.box {
padding-left: 1.25rem;
padding-right: 1.25rem;
padding-top: 1.25rem;
padding-bottom: 1.25rem;
2020-09-12 13:18:25 +02:00
}
2020-09-23 15:59:24 +02:00
.topRow.box {
padding-top: 0.6rem;
padding-bottom: 1.95rem;
2020-09-12 13:18:25 +02:00
}
2020-09-23 15:59:24 +02:00
2020-09-12 13:18:25 +02:00
.quickSell {
2020-09-23 15:59:24 +02:00
margin-top: 1.20rem;
font-size: 0.8rem;
2020-09-12 13:18:25 +02:00
}
2020-09-23 15:59:24 +02:00
2020-09-12 13:18:25 +02:00
.sellBlurb {
2020-09-23 15:59:24 +02:00
margin-top: 0.9rem;
font-size: 0.65rem;
2020-09-12 13:18:25 +02:00
}
2020-09-23 15:59:24 +02:00
.pricingBox.box {
padding-bottom: 1.25rem;
2020-09-12 13:18:25 +02:00
}
2020-09-23 15:59:24 +02:00
.pricingBox .heading {
font-size: 0.9rem;
2020-09-12 13:18:25 +02:00
}
2020-09-23 15:59:24 +02:00
2020-09-12 13:18:25 +02:00
.priceRow {
2020-09-23 15:59:24 +02:00
display: flex;
align-items: center;
margin-top: 0.8rem;
2020-09-12 13:18:25 +02:00
}
.price {
}
.pricePeriod {
}
.sell {
2020-09-23 15:59:24 +02:00
margin-top: 0.35rem;
2020-09-12 13:18:25 +02:00
}
.signupButton {
2020-09-23 15:59:24 +02:00
margin-top: 1.5rem;
padding: 13px 3.25rem;
2020-09-12 13:18:25 +02:00
}
.whyUsBox {
}
.blurb {
2020-09-23 15:59:24 +02:00
margin-top: 0.75rem;
}
.blurb .unstyledList {
font-size: 14px;
}
footer {
}
}
@media screen and (min-width: 500px) and (max-width: 800px) {
body {
/* roughly half way, arbitrary for the moment */
width: 65vw;
}
.signupButton {
font-size: 0.90rem;
}
}
@media screen and (min-width: 800px) {
body {
width: 45vw;
}
.bottomRow {
flex-direction: row;
/* flex: 0 50%; */
}
.pricingBox {
width: 50%;
border-bottom-left-radius: var(--box-border-radius);
}
.signupButton {
}
.whyUsBox {
width: 50%;
border-bottom-left-radius: 0px;
2020-09-12 13:18:25 +02:00
}
}