scrimba
The Weekly Web Dev Challenge
The Weekly Web Dev Challenge: Fix the form! ๐Ÿ”ง
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: Fix the form! ๐Ÿ”ง
AboutCommentsNotes
The Weekly Web Dev Challenge: Fix the form! ๐Ÿ”ง
Expand for more info
index.css
run
preview
console
/*

PART 1:

You've been ordered to improve your company's newsletter form.
You can design it however you want, but the manager wants the button to
animate both on the :hover and the :active state.

1. Redesign the page (e.g. colors, positions, sizing, spacing)
2. Improve the button's hover effect
3. Improve thee button's click effect

SKILLS:
color, background, margin, padding, border-radius,
CSS pseudo selectors (:active, :hover), transform
*/


body {
margin: 0;
background: #ac8d0b;
}

form {
}

h3 {
color: green;
margin-top: 20px;
margin-bottom: 0;
}

input {
border-radius: 20px;
width: 200px;
}

button {
display: block;
border-radius: 2px;
background: #3d492b;
font-size: 15px;
}

button:hover {
font-size: 20px;
}

button:active {
color: red;
}

Console
โ€บ
"email: "
,
โ€บ
"email: "
,
โ€บ
"email: "
,
โ€บ
"email: "
,
/index.html?
-5:08