scrimba
Frontend Career Path
Learn UI design
Refactoring
Fixing the Color & Contrast
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

Fixing the Color & Contrast
AboutCommentsNotes
Fixing the Color & Contrast
Expand for more info
index.css
run
preview
console
@import url('https://fonts.googleapis.com/css?family=Nunito:400,700&display=swap');

* {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
}

body {
background: #3b4acd;
color: #A5B2D3;
padding: .5em;
font-family: serif;
height: 100vh;
text-align:center;
}

header {
display: flex;
align-items: center;
justify-content: center;
}

header svg {
width: 1.5em;
cursor: pointer;
}

a {
color: white;
}


ul {
list-style: none;
padding: 0;
}

a.logo {
font-weight: bold;
margin: 0 1em;
}

a.cta-btn {
margin-left: auto;
background: #FC85AE;
padding: 1em;
display: inline-block;
border-radius: 2em;
font-size: .6em;
color: #303A52;
font-weight: bold;
}

/* Navigation */


nav {
position: fixed;
background: #576483;
height: 100vh;
left: 0;
top: 0;
width: 80%;
visibility: hidden;
transform: translateX(-50%);
opacity: 0;
transition: all .3s;
text-align: center;
}


nav p {
margin-bottom: 0;
}

nav svg {
cursor: pointer;
width: 1em;
}

nav ul li a {
display: block;
padding: .2em;
font-size: 1.8em;
}

.selected {
background: #9E579D;
}

.open-nav {
visibility: unset;
opacity: 1;
transform: translateX(0);
}


/* Main Section */


h1 {
color: white;
margin-top: 1em;
}

.panel {
background: #39445F;
border-radius: .3em;
}

h3 {
color: #FC85AE;
margin: 0;
font-size: 2em;
}

ul.data li p {
color: white;
font-weight: bold;
font-size: 1.8em;
margin: .3em 0 1em;
}

ul.data li:last-child p {
margin-bottom: 0;
}
ul.secondary {
margin-top: 2em;
}
ul.secondary li p {
font-size: 1.3em;
}

main {
border: 1px solid white;
}


/* Your Fixes Below */

Console
/index.html
-3:57