120 lines
1.9 KiB
CSS
120 lines
1.9 KiB
CSS
@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: 90%;
|
|
/* height: 100vh; */
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.topSection {
|
|
margin-top: 4rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.topSection h1 {
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
.topSection .title1 {
|
|
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 {
|
|
text-align: center;
|
|
color: var(--grayishBlue);
|
|
}
|
|
|
|
|
|
.middleSection {
|
|
}
|
|
|
|
.card {
|
|
margin-top: 1rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: white;
|
|
border-top: 2px solid;
|
|
box-shadow: var(--veryLightGray);
|
|
}
|
|
.card-title {
|
|
/* font-size: ; */
|
|
color: var(--veryDarkBlue);
|
|
}
|
|
.card-blurb {
|
|
color: var(--grayishBlue);
|
|
/* font-size: ; */
|
|
}
|
|
.card-image {
|
|
margin-top: 2rem;
|
|
align-self: flex-end;
|
|
}
|
|
|
|
.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 {
|
|
} */
|