scrimba
Frontend Career Path
Working with APIs
Promise Rejection
Quick update - Modern CSS
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

AboutCommentsNotes
Quick update - Modern CSS
Expand for more info
index.css
run
preview
console
* {
box-sizing: border-box;
}

body {
margin: 0;
background: no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color: white;
font-family: Arial, Helvetica, sans-serif;
text-shadow: 0px 0px 20px #242424;
}

main {
padding: 15px;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
}

div.top {
display: flex;
justify-content: space-between;
}

h1.time {
text-align: center;
font-size: 5rem;
}

div#crypto {
font-size: 1.3rem;
}

div#crypto > p {
margin: 0;
}

div#crypto-top {
display: flex;
align-items: center;
margin-bottom: 5px;
}

div#crypto-top > span {
margin-left: 10px;
}

div#weather {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: flex-end;
align-self: flex-start;
margin-top: -20px;
}

div#weather > img {
width: 70px;
}

p.weather-city {
width: 100%;
text-align: right;
margin: 0;
margin-top: -10px;
font-size: 1.2rem;
}

p.weather-temp {
margin: 0;
font-size: 1.7rem;
margin-left: -10px;
}

p#author {
font-size: 1rem;
}
Console
/index.html
-1:33