rmcg.dev/FrontendMentor/newbie/four-card-feature-section/css/style.css

187 lines
3.2 KiB
CSS
Raw Normal View History

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap');
/*
* Challenge colors, font
*
* The font-size for 20px is to make rem clearer for increments
*
* Mobile: 375px (375x1360)
* Desktop: 1440px (1440x922)
*/
:root {
font-family: 'Poppins', sans-serif;
font-size: 20px;
/* Primary Colors */
--red: hsl(0, 78%, 62%);
--cyan: hsl(180, 62%, 55%);
--orange: hsl(34, 97%, 64%);
--blue: hsl(212, 86%, 64%);
/* Neutral */
--veryDarkBlue: hsl(234, 12%, 34%);
--grayishBlue: hsl(229, 6%, 66%);
--veryLightGray: hsl(0, 0%, 98%);
}
* {
margin: 0;
padding: 0;
/* box-sizing: border-box; */
}
/* Basic Styling */
body {
font-size: 15px;
background-color: var(--veryLightGray);
height: 100vh;
}
.flexContainer {
display: flex;
flex-direction: column;
width: 83.5%;
/* height: 100vh; */
margin: 0 auto;
2020-09-28 00:36:12 +02:00
max-width: 400px;
}
.topSection {
2020-09-28 00:36:12 +02:00
/* think this change was brought about by browser differences. Was previously 3.8 */
margin-top: 3.65rem;
text-align: center;
}
.topSection > .title {
2020-09-28 00:36:12 +02:00
font-size: calc(24px + (35 - 24) * ((100vw - 375px) / (1440 - 375)));
}
.topSection .title1 {
margin-top: 0.5rem;
font-weight: 200;
color: var(--grayishBlue);
}
/* should be a class but wanted to play with :nth-child() */
.topSection .title2 {
font-weight: 600;
color: var(--veryDarkBlue);
}
.topSection .blurb {
margin-top: 0.7rem;
text-align: center;
color: var(--grayishBlue);
font-size: 16px;
}
.middleSection {
margin-top: 2.5rem;
}
.card {
margin-top: 1.3rem;
background-color: white;
border-top: 4px solid;
border-radius: 6px;
box-shadow: 0px 10px 15px rgba(56, 75, 108, 0.2);
padding: 23px 30px 26px 30px;
}
.card-title {
font-size: 20px;
color: var(--veryDarkBlue);
font-weight: 600;
}
.card-blurb {
margin-top: 0.3rem;
color: var(--grayishBlue);
font-size: 13px;
}
.card-image {
display: block;
margin-top: 1.8rem;
margin-left: auto;
width: 22%;
}
.column1 {
}
.supervisor {
border-top-color: var(--cyan);
}
.column2 {
}
.teamBuilder {
border-top-color: var(--red);
}
.karma {
border-top-color: var(--orange);
}
.column3 {
}
.calculator {
border-top-color: var(--blue);
}
/* .attribution {
} */
2020-09-28 00:36:12 +02:00
/* arbitrary figure atm */
/* @media screen and (min-width: 600px) {
.flexContainer {
width: 78%;
}
} */
@media screen and (min-width: 1000px) {
.flexContainer {
max-width: 1440px;
}
.topSection {
margin-top: 3.45rem;
}
.topSection .blurb {
width: 45%;
margin-left: auto;
margin-right: auto;
font-size: 15px;
}
.flexContainer {
width: 78%;
}
.middleSection {
margin-top: 3.3rem;
display: flex;
}
.card {
margin-top: 0;
padding: 27px 30px 36px 25px;
}
.card-blurb {
margin-top: 0.5rem;
}
.card-image {
margin-top: 2rem;
}
.column {
display: flex;
flex-direction: column;
margin: auto;
max-width: calc((100% /3) - 1.5rem);
}
.karma {
margin-top: 1.3rem;
}
}