Skip to content

Instantly share code, notes, and snippets.

@natafaye

natafaye/week3.css

Created March 2, 2022 02:35
Show Gist options
  • Save natafaye/573218dbd688fff2f3e0c40544707d60 to your computer and use it in GitHub Desktop.
Save natafaye/573218dbd688fff2f3e0c40544707d60 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
week3.css
.bg-slate {
background-color: #4F5D61;
}
Raw
week3.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="week3.css" />
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-slate">
<div class="container">
<a class="navbar-brand" href="#">Chairs</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">More Chairs</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row my-5">
<div class="col">
<img src="images/chair.jpg" width="400" />
</div>
</div>
<div class="row text-center">
<div class="col-sm col-md-12 col-lg my-5">
<h1>Heading</h1>
<p>
fdjskfldjsf kldsjfkdslf jdsklfjdskl fjdskfldsj
</p>
<button class="btn btn-success">Something</button>
</div>
<div class="col-sm col-md-12 col-lg my-5 d-none d-md-block">
<h1>We Love Customers With Big Screens</h1>
<p>
fdjskfldjsf kldsjfkdslfjdsk lfjdsklf jdskfldsj
</p>
<button class="btn btn-success">Something</button>
</div>
<div class="col-sm col-md-12 col-lg my-5">
<h1>Heading</h1>
<p>
fdjskfldj sfkldsjfkdslfj dsklfjdsklfjd skfldsj
</p>
<button class="btn btn-success">Something</button>
</div>
</div>
<div class="row my-5">
<div class="col">
More content
</div>
</div>
</div>
<footer class="bg-slate text-light py-4">
<div class="container">
<div class="row">
<div class="col-4">
Links</br />
So Many links<br />
Links
</div>
<div class="col">
Copyright 2022
</div>
</div>
</div>
</footer>
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment