Last updated
@import url("https://fonts.googleapis.com/css2?family=Karla:wght@400;700&display=swap");
body {
--cyan: hsl(179, 62%, 43%);
--cyan-lighter: hsl(179, 47%, 52%);
--yellow: hsl(71, 73%, 54%);
--lightGrey: hsl(204, 43%, 93%);
--blueGrey: hsl(218, 22%, 67%);
--white: hsl(69, 69%, 100%);
background-color: var(--lightGrey);
font-family: "Karla", sans-serif;
color: var(--white);
display:flex;
justify-content: center;
align-items:center;
padding:100px 80px;
}
h1 {
color: var(--cyan-lighter);
}
h2 {
color: var(--yellow);
}
h3 {
color:white;
}
.card {
width: 500px;
}
.card > div {
padding:30px;
}
/************************** join ******************************/
.join {
background-color: var(--white);
color:black;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
grid-area:join;
}
.join p {
color: var(--blueGrey);
}
/************************** subscribe ******************************/
.subscribe {
background-color: var(--cyan);
grid-area:subscribe;
}
.subscribe .pricing {
display:flex;
flex-direction:row;
align-items:center;
}
.subscribe .pricing .price {
font-size:32px;
font-weight:700;
margin-right:5px;
}
.subscribe .pricing .description {
color: #daffff;
}
button {
padding:16px;
width:100%;
background-color: var(--yellow);
border:0px;
border-radius: 8px;
color:white;
font-size:16px;
font-weight:700;
box-shadow: 5px 5px 10px rgb(0,0,0,.1);
}
/************************** why-us ******************************/
.why-us {
background-color: var(--cyan-lighter);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
grid-area:why-us;
}
.why-us ul {
list-style:none;
margin:0px;
padding:0px;
color: #daffff;
}
@media screen and (min-width: 600px) {
.card {
display:grid;
grid-template-areas:
"join join"
"subscribe why-us"
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<title>Frontend Mentor | Single Price Grid Component</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="card">
<div class="join">
<h1>Join our community</h1>
<h2>30-day, hassle-free money back guarantee</h2>
<p>
Gain access to our full library of tutorials along with expert code reviews.
Perfect for any developers who are serious about honing their skills.
</p>
</div>
<div class="subscribe">
<h3>Monthly Subscription</h3>
<div class="pricing">
<span class="price">$29</span>
<span>per month</span>
</div>
<p class="description">
Full access for less than $1 a day
</p>
<button> Sign Up</button>
</div>
<div class="why-us">
<h3>Why Us</h3>
<ul>
<li>Tutorials by industry experts</li>
<li>Peer & expert code review</li>
<li>Coding exercises</li>
<li>Access to our GitHub repos</li>
<li>Community forum</li>
<li>Flashcard decks</li>
<li>New videos every week</li>
</ul>
</div>
</div>
</body>
</html>body {
background-color: hsl(0, 0%, 98%);
font-family: "Poppins", sans-serif;
}
main {
display:flex;
flex-direction:column;
justify-content: center;
align-items:center;
padding: 60px;
}
.heading1 {
font-size:22px;
color: hsl(229, 6%, 66%);
font-weight:400;
}
.heading2 {
font-size:25px;
color: hsl(234, 12%, 34%);
font-weight:500;
}
.description {
color: hsl(229, 6%, 66%);
text-align:center;
width:500px;
margin-bottom:60px;
}
@media screen and (min-width:600px) {
.cards {
display:grid;
grid-template-columns: repeat(3, 1fr);
align-items:center;
grid-gap:20px;
}
}
.card {
border-radius:5px;
padding:30px;
margin-bottom:30px;
box-shadow: 1px 5px 15px 5px hsl(229, 6%, 66%);
display:flex;
flex-direction:column;
justify-content:center;
}
.card .title {
font-weight: 600;
color: hsl(234, 12%, 34%);
}
.card .desc {
color: hsl(229, 6%, 66%);
margin-bottom: 30px;
}
.card img {
align-self:flex-end;
}
.supervisor {
border-top: solid 3px hsl(180, 62%, 55%);
}
.team-builder {
border-top: solid 3px hsl(0, 78%, 62%);
}
.karma {
border-top: solid 3px hsl(34, 97%, 64%);
}
.calculator {
border-top: solid 3px hsl(212, 86%, 64%);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<title>Frontend Mentor | Four card feature section</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main>
<div class="heading1">Reliable, efficient delivery</div>
<div class="heading2">Powered by Technology</div>
<div class="description">
Our Artificial Intelligence powered tools use millions of project data points
to ensure that your project is successful
</div>
<div class="cards">
<div class="card supervisor">
<div class="title">Supervisor</div>
<div class="desc">Monitors activity to identify project roadblocks</div>
<img src="images/icon-supervisor.svg" alt="">
</div>
<div>
<div class="card team-builder">
<div class="title">Team Builder</div>
<div class="desc">Scans our talent network to create the optimal team for your project</div>
<img src="images/icon-team-builder.svg" alt="">
</div>
<div class="card karma">
<div class="title">Karma</div>
<div class="desc">Regularly evaluates our talent to ensure quality</div>
<img src="images/icon-karma.svg" alt="">
</div>
</div>
<div class="card calculator">
<div class="title">Calculator</div>
<div class="desc">Uses data from past projects to provide better delivery estimates</div>
<img src="images/icon-calculator.svg" alt="">
</div>
</div>
</main>
</body>
</html>