scrimba
The Weekly Web Dev Challenge
The Weekly Web Dev Challenge: Pricing Component ๐Ÿ’ท
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

The Weekly Web Dev Challenge: Pricing Component ๐Ÿ’ท
AboutCommentsNotes
The Weekly Web Dev Challenge: Pricing Component ๐Ÿ’ท
Expand for more info
index.css
run
preview
console
/* Instructions */
/* When clicked, the selected card should enlarge (up to you how much) and the price should have a color of #ffd60a*/
/* The non-selected cards should reduce in opacity */
/* Stretch goal: add a toggle to display monthly and annual prices */

html, body {
margin: 0;
padding: 0;
}

body {
font-family: 'Asap', sans-serif;
}

h1,
.tagline {
text-align: center;
}

.tagline {
padding-bottom: 1em;
}

.container {
display: flex;
background: #001d3d;
margin: 0 auto;
justify-content: center;
max-width: 1000px;
}

.card {
cursor: pointer;
color: white;
background-color: #003566;
width: 300px;
text-align: center;
margin: 1em;
padding: 1em 0.25em;
position: relative;
}

.card h2 {
margin: 0;
}

.card ul li {
text-align: left;
padding: 0 0 1em 0.5em;
}

.card ul li:last-child {
padding-bottom: 5em;
}

.card-cat ul li::marker {
content: '๐Ÿฑ'
}

.card-lion ul li::marker {
content: '๐Ÿฆ'
}

.card-tiger ul li::marker {
content: '๐Ÿฏ'
}

button {
font-family: inherit;
position: absolute;
bottom: 0;
right: 20%;
padding: 1em 2em;
border: none;
font-size: 1rem;
font-weight: 700;
margin-bottom: 1em;
background-color: #ffd60a;
}

button:hover,
button:focus {
cursor: pointer;
background-color: white;
}
Console
/index.html
-2:06