scrimba
Responsive Design
Taking it to the next level
Styling the about page
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
Styling the about page
Expand for more info
about.html
run
preview
console
<!DOCTYPE html>
<html>
<head>
<title>Jake & Elwood</title>
<!-- viewport meta to render pages on mobile properly -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- link to google fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap" rel="stylesheet">

<!-- https://cdnjs.com/libraries/font-awesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.css" rel="stylesheet">

<!-- link to my CSS -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<header class="header main-grid">
<div class="header-content">
<a class="logo-link" href="index.html">
<img src="img/logo.png" alt="" class="logo">
</a>
<button aria-label="Open navigation" class="open-nav">&#9776;</button>

<nav class="nav">
<button aria-label="Close navigation" class="close-nav">&times;</button>
<ul class="nav-list">
<li class="nav-item"><a href="index.html" class="nav-link">home</a></li>
<li class="nav-item"><a href="about.html" class="nav-link">about us</a></li>
<li class="nav-item"><a href="contact.html" class="nav-link">contact</a></li>
</ul>
</nav>


</div>
</header>

<main class="main-grid">

<h1 class="page-title">About us.</h1>
<p class="subtitle">We’re two brothers from Chicago. We can help you with SEO, SEM, content marketing and whatever else.</p>

<img class="main-image" src="img/about-me.jpg" alt="a man wearing goggles">

<div class="main-text">
<h2 class="section-title">We're really great guys</h2>
<p>We grew up in downtown Chicago, and we used to play in a band. Jake loves fried chicken, and Elwood loves dry white toast. </p>
<p>While the band didn't make it, the hard work we put in trying to promote it sure did. Like a lot of people, we needed a website, and we needed to rank. The "experts" didn't seem to know what they were talking about, so we figured it out on our own.</p>
<h2 class="section-title">We can do all sorts of great stuff </h2>
<p>Honestly most people in this industry seem to be full of crap. We don't care what you've heard, or what others have told you, we get results and at the end of the day, what else matters? </p>
<p>So sure, maybe we're a bit different from what you'd expect, but if you want to rank, market, and build your way to the top, we're the brothers for you.</p>
</div>

</main>

<footer class="footer main-grid">
<div class="footer-main">
<img src="img/logo.png" alt="" class="footer-logo">
<p class="footer-text">Two brothers from Chicago that are just trying to pay back their debt by helping others with their SEO, SEM, and Content Marketing needs.</p>
<p class="footer-fineprint">© Jake&Elwood 2019</p>
</div>
<ul class="social-list">
<li class="social-item"><a href="#" class="social-link"><i class="fab fa-facebook-square"></i></a></li>
<li class="social-item"><a href="#" class="social-link"><i class="fab fa-twitter"></i></a></li>
<li class="social-item"><a href="#" class="social-link"><i class="fab fa-instagram"></i></a></li>
</ul>
</footer>


<script src="script.js"></script>
</body>
</html>
Console
about.html
-8:48