scrimba
UI Design
Final Project
Defining the Hero Section CSS (Part 1)
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

Defining the Hero Section CSS (Part 1)
AboutCommentsNotes
Defining the Hero Section CSS (Part 1)
Expand for more info
index.css
run
preview
console
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Playfair+Display&display=swap');

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

body {
background: #D8EACB;
font-family: 'Montserrat', sans-serif;
}

a {
text-decoration: none;
}

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

img {
width: 100%;
}

header {
display: flex;
justify-content: space-between;
background: #EEEEEE;
padding: .5em;
}

.logo {
color: black;
font-weight: bold;
}

.menu {
cursor: pointer;
}

nav ul {
visibility: hidden;
opacity: 0;
position: fixed;
width: 100%;
top: 0;
left: 0;
background: #72A84A;
height: 100vh;
padding-top: 5em;
z-index: 100;
}

nav ul li a {
color: black;
font-size: 1.5em;
font-weight: bold;
padding: 1em;
display: block;
}

.exit a {
width: 30px;
height: 30px;
position: absolute;
top: 0;
right: 0;
}

Console
/index.html
-6:39