scrimba
Learn Accessibility
Skip Navigation Link
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
Skip Navigation Link
Expand for more info
index.css
run
preview
console
* {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
body {
min-width: 900px;
line-height: 1.5;
color: #333333;
}
main {
width: 900px;
margin: 0 auto;
}
a {
color: inherit;
text-decoration: none;
}
ul {
list-style-type: none;
}
.icon {
font-size: 2rem;
}

/* Navbar */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
width: 800px;
margin: 0 auto;
}
.logo {
display: flex;
align-items: center;
}
.logo-text {
margin-left: 5px;
}
.nav-link {
margin: 5px;
padding: 10px;
font-size: 1rem;
}
.nav-links {
display: flex;
}

/* Hero Section */
.hero-section {
position: relative;
width: 800px;
margin: 120px auto 200px;
}
.hero-heading {
font-size: 5rem;
font-weight: 700;
margin: 0;
}
.hero-heading span {
color: #007000;
font-weight: 700;
line-height: 1;
}
.hero-text {
font-size: 1.25rem;
max-width: 300px;
margin-bottom: 30px;
}
.hero-image {
max-width: 350px;
position: absolute;
right: -20px;
top: -50px;
z-index: -1;
}
.hero-link {
border: 2px solid #333333;
padding: 8px 20px;
border-radius: 40px;
width: 100px;
}

/* Info Section */
.info-section {
margin: 250px auto 200px;
width: 800px;
}
.info {
margin-left: 200px;
}
.info-heading {
font-size: 3rem;
margin: 0;
}
.info a {
color: #007000;
text-decoration: underline;
}
.statistics {
width: 620px;
width: 100%;
position: relative;
background-color: #333333;
display: flex;
justify-content: space-around;
align-items: center;
padding: 10px 30px;
}
.info-image {
position: absolute;
left: -30px;
top: -170px;
max-width: 200px;
}
.stat-heading {
color: #cccccc;
font-size: 1.25rem;
font-weight: 500;
margin-bottom: 0;
}
.stat-number {
font-size: 2.5rem;
font-weight: 500;
margin-top: 0;
margin-bottom: 20px;
}
.stat p {
color: #ffffff;
}

/* About Section */
.about-section {
background-color: rgba(255, 255, 255, 0.85);
background-blend-mode: lighten;
background-image: url(images/clouds.jpg);
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
width: 700px;
margin: 0 auto;
padding: 40px;
border: 2px solid #333333;
}
.about-heading {
margin: 0;
font-size: 3rem;
}
.about span {
color: #007000;
}
.about-link {
margin-top: 30px;
margin-bottom: 30px;
}
.about a {
border: 2px solid #333333;
padding: 8px 20px;
border-radius: 40px;
}

/* Sign Up Form */
.form-heading {
font-size: 3rem;
margin: 0;
}
.form-intro {
font-size: 1.25rem;
margin-bottom: 20px;
}
.form-section {
margin: 120px auto;
width: 450px;
text-align: center;
}
.input {
display: block;
width: 300px;
margin: 5px auto 10px;
border-radius: 20px;
padding: 8px 20px;
border: 2px solid #333333;
font-family: 'Poppins', sans-serif;
}
.input::-webkit-input-placeholder {
color: #555555;
}
.submit-button {
border: 2px solid #333333;
padding: 8px 20px;
border-radius: 40px;
margin: 10px auto 0;
width: 130px;
font-family: 'Poppins', sans-serif;
}
.submit-button:hover {
background-color: #dddddd;
cursor: pointer;
}

/* Footer */
.footer {
background-color: #333333;
margin-top: 100px;
}
.social-links {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 auto;
padding: 20px 40px;
width: 800px;
color: #ffffff;
}
.social-links p {
display: inline;
font-size: 1rem;
}
.social-links ion-icon {
padding-right: 10px;
}
.social-link {
display: flex;
align-items: center;
}

/*
Challenge: Build your very own skip navigation link for our home page!

Requirements:
1. Its default state should be visually hidden yet accessible to all keyboard users.
2. It should utilize the transition property.


Steps:
1. In the HTML, place the link inside the nav, above the logo.
2. Give the link the class 'skip-nav-link'.
3. Give the main element the id 'main'
4. Give the skip nav link an href attribute linked to the main section.
5. Finally, apply your CSS to the class name 'skip-nav-link'.
*/
Console
/index.html
-1:43