<main class="main">
<div class="container news flow">
<h2 class="news__title">Sign up for newsletters</h2>
<div class="news-grid">
<div class="card__group">
<div class="card active">
<input class="custom" type="checkbox" id="check1" / checked>
<label for="check1">
<h5>Daily Bits</h5>
<p>Today’s biggest news</p>
</label>
</div>
<div class="card">
<input class="custom" type="checkbox" id="check2" />
<label for="check2">
<h5>Week in Review</h5>
<p>The week’s biggest news</p>
</label>
</div>
</div>
<div class="card__group">
<div class="card">
<input class="custom" type="checkbox" id="check3" />
<label for="check3">
<h5>The Exchange</h5>
<p>Art, money and markets</p>
</label>
</div>
<div class="card">
<input class="custom" type="checkbox" id="check4" />
<label for="check4">
<h5>Event Updates</h5>
<p>Announcements and discounts</p>
</label>
</div>
</div>
<div class="card__group">
<div class="card">
<input class="custom" type="checkbox" id="check5" />
<label for="check5">
<h5>Sponsorship</h5>
<p>Partnership insights</p>
</label>
</div>
<div class="card">
<input class="custom" type="checkbox" id="check6" />
<label for="check6">
<h5>This Week in Art</h5>
<p>Art news of the week</p>
</label>
</div>
</div>
</div>
<div class="news__form">
<input type="email" placeholder="Enter your email address" />
<button class="news__btn">Subscribe</button>
</div>
</div>
</main>
@import url("https://fonts.googleapis.com/css2?family=Mulish:wght@400;600;700&display=swap");
:root {
--clr-neutral-300: hsl(232, 41%, 97%);
--clr-neutral-400: hsl(98, 0%, 50%);
--clr-neutral-900: #020203;
--clr-accent: hsl(248, 66%, 66%);
/* font weight */
--fw-400: 400;
--fw-600: 600;
--fw-700: 700;
/* Type */
--ff-primary: "Mulish", sans-serif;
}
/* min width 768px */
/* reset */
*,
*::before,
*::after {
box-sizing: border-box;
}
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol[class],
ul[class] li,
figure,
figcaption,
blockquote,
dl,
dd {
margin: 0;
}
/* Set core root defaults */
html:focus-within {
scroll-behavior: smooth;
}
/* Set core body defaults */
body {
min-height: 100vh;
text-rendering: optimizeSpeed;
line-height: 1.6;
}
/* A elements that don't have a class get default styles */
a:not([class]) {
text-decoration-skip-ink: auto;
}
ol[class],
ul[class] {
list-style: none;
padding: 0;
}
input,
button,
textarea,
select {
font: inherit;
}
img,
picture {
max-width: 100%;
height: auto;
display: block;
}
/* general layout */
.flow > * + * {
margin-top: var(--flow-spacer, var(--spacer));
}
* {
font-family: inherit;
line-height: inherit;
color: inherit;
}
html,
body {
overflow-x: hidden;
width: 100%;
height: 100%;
-webkit-tap-highlight-color: transparent;
}
body {
min-height: 100%;
font-family: var(--ff-primary);
font-size: 1rem;
font-weight: var(--fw-400);
background: linear-gradient(119.36deg, #eceef5 0%, #e3e5fb 100%);
color: var(--clr-neutral-900);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
-moz-font-feature-settings: "liga" on;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.main,
.container {
width: min(95%, 1136px);
margin: 0 auto;
}
.news {
background-color: #fff;
padding: 2.125em 1.25em;
border-radius: 10px;
box-shadow: 0px 34px 85px -25px #bbc0ea;
}
.news__title {
font-size: 1.75rem;
margin-bottom: 1.5em;
}
.news-grid {
display: grid;
}
.custom {
opacity: 0;
position: relative;
}
.custom + label {
display: grid;
grid-template-columns: 24px auto;
grid-template-rows: auto auto;
align-items: center;
column-gap: 1em;
position: relative;
cursor: pointer;
}
.custom[type="checkbox"] + label::before {
content: "";
width: 24px;
height: 24px;
border-radius: 3px;
border: 1px solid #8f94a1;
background: transparent;
}
.custom[type="checkbox"] + label::after {
content: "\2713";
color: white;
font-size: 1.25rem;
position: absolute;
top: 0px;
left: 4px;
transform: scale(0);
transition: all 300ms ease-in-out;
}
.custom[type="checkbox"]:checked + label::before {
background-color: var(--clr-accent);
}
.custom[type="checkbox"]:checked + label::after {
transform: scale(1);
}
h5 {
font-size: 1.25rem;
white-space: nowrap;
}
p {
grid-column: 2/ -2;
}
.card {
padding: 0 12px;
}
.card.active {
background-color: var(--clr-neutral-300);
height: 88px;
width: 100%;
}
// ======= form
.news__form {
display: flex;
flex-direction: column;
gap: 20px;
margin-top: 30px;
}
input[type="email"] {
border: 0;
outline: 0;
padding: 20px 30px;
border-radius: 3px;
border: 1px solid #8f94a1;
}
.news__btn {
border: none;
outline: none;
background: transparent;
background-color: var(--clr-accent);
padding: 20px 30px;
color: white;
border-radius: 3px;
cursor: pointer;
}
@media (min-width: 550px) {
.news-grid {
grid-auto-flow: column;
grid-template-columns: repeat(3, 1fr);
}
.news {
padding: 4.125em 2.25em;
}
.news__form {
flex-direction: row;
gap: 10px;
}
input[type="email"] {
flex: 0 0 480px;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.