Explorer
project
images
clouds.jpg
hero-image.jpg
pal9000.jpg
index.css
index.html
index.js
Dependencies
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
* {
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'.
*/