create book club template (sans footer)
This commit is contained in:
@ -7,27 +7,47 @@
|
||||
--font-family-mono: 'Jura', sans-serif;
|
||||
--font-family-sans: 'Sora', sans-serif;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
font-family: var(--font-family-sans);
|
||||
color: var(--foreground-text);
|
||||
margin: 0;
|
||||
// border-radius: 2566px;
|
||||
background: radial-gradient(50% 50% at 50% 50%, rgba(142, 154, 236, 0.40) 0%, rgba(142, 154, 236, 0.00) 100%);
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 908px;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--foreground-text);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: var(--wp--preset--font-family--eb-garamond);
|
||||
font-size: 38px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
border: 1px solid;
|
||||
border-radius: 0.85em;
|
||||
padding: .75em .5em
|
||||
padding: .75em 1.5em;
|
||||
text-decoration: none;
|
||||
font-size: 16px;
|
||||
|
||||
&--solid {
|
||||
background-color: var(--foreground-text);
|
||||
color: var(--background);
|
||||
}
|
||||
}
|
||||
|
||||
.site-navigation {
|
||||
@ -45,16 +65,6 @@ a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.header-logo {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 63px;
|
||||
}
|
||||
|
||||
.logo-spacer {
|
||||
width: 155px;
|
||||
}
|
||||
|
||||
ul.pages-list {
|
||||
display: flex;
|
||||
@ -73,12 +83,257 @@ a {
|
||||
}
|
||||
}
|
||||
|
||||
/* .div {
|
||||
text-align: center;
|
||||
padding-block: 20rem;
|
||||
background: radial-gradient(circle at 85% 50%, rgba(142, 154, 236, 0.40) 0%, rgba(142, 154, 236, 0.00) 50%);
|
||||
} */
|
||||
section {
|
||||
padding-block: 82px;
|
||||
}
|
||||
|
||||
.div h2 {
|
||||
font-size: 38px;
|
||||
.hero--container {
|
||||
max-width: 1440px;
|
||||
margin-inline: auto;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
|
||||
.hero--text {
|
||||
grid-column: 2 / 4;
|
||||
|
||||
h2 {
|
||||
font-family: var(--wp--preset--font-family--eb-garamond);
|
||||
font-size: 38px;
|
||||
font-weight: 400;
|
||||
max-width: 385px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: var(wp--preset--font-family--sora);
|
||||
font-size: 18px;
|
||||
max-width: 446px;
|
||||
}
|
||||
}
|
||||
|
||||
.hero--img {
|
||||
grid-column: 4 / 6;
|
||||
width: 100%;
|
||||
border: 1px solid white;
|
||||
border-top-left-radius: 12px;
|
||||
border-bottom-left-radius: 12px;
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sponsor-logos {
|
||||
padding-block: 41px;
|
||||
.container {
|
||||
display: flex;
|
||||
text-align: center;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
column-gap: 2rem;
|
||||
row-gap: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
section.pitch {
|
||||
padding-block: 82px;
|
||||
text-align: center;
|
||||
|
||||
h2 {
|
||||
font-family: var(--wp--preset--font-family--eb-garamond);
|
||||
font-size: 38px;
|
||||
font-weight: 400;
|
||||
line-height: 100%;
|
||||
max-width: 527px;
|
||||
margin-inline: auto;
|
||||
margin-bottom: 54px;
|
||||
}
|
||||
|
||||
.pitch--cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 300px);
|
||||
gap: 16px;
|
||||
|
||||
.pitch--card-item {
|
||||
border: 1px solid #FAF7EF;
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
padding-block: 40px;
|
||||
padding-inline: 25px;
|
||||
// height: 244px;
|
||||
|
||||
h3 {
|
||||
font-family: var(--wp--preset--font-family--sora);
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: var(--wp--preset--font-family--sora);
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
line-height: 1.3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section.book-club-examples {
|
||||
text-align: center;
|
||||
|
||||
h2 {
|
||||
font-weight: 400;
|
||||
max-width: 563px;
|
||||
margin-inline: auto;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.book-club-example-cards {
|
||||
padding-block: 84px;
|
||||
.book-club-example-card--item {
|
||||
display: flex;
|
||||
max-width: 908px;
|
||||
border: 1px solid var(--foreground-text);
|
||||
border-radius: 12px;
|
||||
margin-inline: auto;
|
||||
margin-block: 36px;
|
||||
|
||||
&--img {
|
||||
border-radius: 12px;
|
||||
border-right: 1px solid #F6F6F8;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
&--text {
|
||||
* { text-align: left; }
|
||||
padding-inline: 40px;
|
||||
padding-block: 36px;
|
||||
p { font-size: 18px; }
|
||||
strong { font-weight: 600; }
|
||||
&--description { font-size: 16px; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding-inline: 5em;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
section.testimonial-section {
|
||||
h2 {
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
// TODO: turn this into a carousel
|
||||
.testimonial-cards {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
padding-block: 84px;
|
||||
.testimonial-card--item {
|
||||
border: 1px solid var(--foreground-text);
|
||||
border-radius: 12px;
|
||||
padding: 64px;
|
||||
max-width: 446px;
|
||||
|
||||
.bio {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
padding-bottom: 32px;
|
||||
align-items: center;
|
||||
&--img {
|
||||
border-radius: 100%;
|
||||
border: 1px solid var(--foreground-text);
|
||||
width: 61px;
|
||||
}
|
||||
&--name {
|
||||
max-width: 12ch;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
&--description {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section.faq {
|
||||
padding-block: 84px;
|
||||
h2 {
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
// TODO: animate the accordion https://css-tricks.com/how-to-animate-the-details-element/
|
||||
.faq-list {
|
||||
border: 1px solid white;
|
||||
border-radius: 12px;
|
||||
.faq--item {
|
||||
padding-inline: 60px;
|
||||
padding-inline-start: calc(60px - 16px);
|
||||
padding-block: 45px;
|
||||
border-bottom: 1px solid;
|
||||
&:last-of-type { border-bottom: none; }
|
||||
.answer {
|
||||
margin-top: 16px;
|
||||
padding-left: 16px;
|
||||
display: block;
|
||||
}
|
||||
summary {
|
||||
font-weight: 600;
|
||||
list-style-type: '+';
|
||||
span { margin-left: 16px; }
|
||||
}
|
||||
}
|
||||
|
||||
.faq--item[open] summary {
|
||||
list-style-type: '-';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section.book-club-benefits {
|
||||
text-align: center;
|
||||
h2 {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.benefit-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 16px;
|
||||
row-gap: 90px;
|
||||
margin-block: 140px;
|
||||
|
||||
.benefit-card--item {
|
||||
img {
|
||||
max-width: 215px;
|
||||
border: 1px solid var(--foreground-text);
|
||||
border-radius: 12px;
|
||||
}
|
||||
p {
|
||||
max-width: 289px;
|
||||
margin-inline: auto;
|
||||
strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.book-club-benefits-cta {
|
||||
.btn {
|
||||
padding-inline: 4em;
|
||||
display: inline-block;
|
||||
}
|
||||
p {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user