Skip to content

Codespace humble sniffle x5xgpq7pr65jc67w4 #89

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions .learn/resets/01-Add-Bootstrap-To-Your-Website/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<!-- Your Bootstrap Link should always be before the CSS link -->

<title>01 Add Bootstrap To Your Website</title>
</head>
<body>
<button type="button" class="btn btn-danger">This should be a red button</button>
<!-- Your Bootstrap Scripts should always be before the </body> closing tag -->

</body>
</html>
19 changes: 19 additions & 0 deletions .learn/resets/02-Bootstrap-Skeleton/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<!-- Your Bootstrap Link should always be before the CSS link -->

<title>02 Bootstrap Skeleton</title>
</head>
<body>

<h1>This is my first example using bootstrap</h1>
<p>I can't believe that bootstrap is so easy, now HTML and CSS are a simple but very useful technology.</p>

<!-- Bootstrap JS files DON'T REMOVE THESE FILES -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>
</html>
22 changes: 22 additions & 0 deletions .learn/resets/03-Bootstrap-Grid/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>03 Bootstrap Grid</title>
</head>
<body>
<div class="container">
<h1>Let's test the grid baby!</h1>
<div class="row">
<div class="col-6">First col</div>
<div class="col-6">Second col</div>
</div>
<div class="row">
<div>Third col</div>
<div>Fourth col</div>
</div>
</div>
</body>
</html>
22 changes: 22 additions & 0 deletions .learn/resets/04-Navbar/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>04 Navbar</title>
</head>
<body>
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Profile</a>
</li>
<li>
<a href="#">Messages</a>
</li>
</ul>
</body>
</html>
13 changes: 13 additions & 0 deletions .learn/resets/05-Sidebar-With-Menu/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>05 Sidebar With Menu</title>
</head>
<body>
<!-- your code here, remember to wrap everything in a container-fluid <div> -->

</body>
</html>
16 changes: 16 additions & 0 deletions .learn/resets/06-Hero-Section-And-Three-Boxes/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
<title>06 Hero Section And 3 Boxes</title>
</head>

<body>

</body>

</html>
12 changes: 12 additions & 0 deletions .learn/resets/07-Buttons-Alert-And-Table/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>07 Buttons, Alert and Table</title>
</head>
<body>

</body>
</html>
19 changes: 19 additions & 0 deletions .learn/resets/08-Bootstrap-Forms/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<title>08 Bootstrap Forms</title>
</head>
<body>
<div class="col-3 mx-auto my-5">
<!-- Add your code below this line -->
</div>
</body>
</html>
19 changes: 17 additions & 2 deletions exercises/01-Add-Bootstrap-To-Your-Website/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,27 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<!-- Your Bootstrap Link should always be before the CSS link -->

<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>

<title>01 Add Bootstrap To Your Website</title>
</head>
<body>
<button type="button" class="btn btn-danger">This should be a red button</button>
<!-- Your Bootstrap Scripts should always be before the </body> closing tag -->

<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
crossorigin="anonymous"
></script>
</body>
</html>
27 changes: 20 additions & 7 deletions exercises/02-Bootstrap-Skeleton/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,29 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<!-- Your Bootstrap Link should always be before the CSS link -->

<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<title>02 Bootstrap Skeleton</title>
</head>
<body>

<h1>This is my first example using bootstrap</h1>
<p>I can't believe that bootstrap is so easy, now HTML and CSS are a simple but very useful technology.</p>

<div class="container-fluid bg-secondary">
<h1>This is my first example using bootstrap</h1>
<p>I can't believe that bootstrap is so easy, now HTML and CSS are a simple but very useful technology.</p>
</div>
<!-- Bootstrap JS files DON'T REMOVE THESE FILES -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
crossorigin="anonymous"
></script>
</body>
</html>
19 changes: 14 additions & 5 deletions exercises/03-Bootstrap-Grid/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,29 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<title>03 Bootstrap Grid</title>
</head>
<body>
<div class="container">
<div class="container-fluid">
<h1>Let's test the grid baby!</h1>
<div class="row">
<div class="col-6">First col</div>
<div class="col-6">Second col</div>
</div>
<div class="row">
<div>Third col</div>
<div>Fourth col</div>
<div class="col w-200">Third col</div>
<div class="col w-200">Fourth col</div>
<div class="col w-200">Fiventh col</div>
</div>
<div class="row">
<div class="col-12 bg-danger">Johan</div>
</div>
</div>
</body>
</html>
</html>
45 changes: 25 additions & 20 deletions exercises/04-Navbar/index.html
Original file line number Diff line number Diff line change
@@ -1,22 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>04 Navbar</title>
</head>
<body>
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Profile</a>
</li>
<li>
<a href="#">Messages</a>
</li>
</ul>
</body>
</html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<title>04 Navbar</title>
</head>
<body>
<ul class="nav nav-tabs">
<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="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Messages</a>
</li>
</ul>
</body>
</html>
31 changes: 29 additions & 2 deletions exercises/05-Sidebar-With-Menu/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,38 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<title>05 Sidebar With Menu</title>
</head>

<body>
<!-- your code here, remember to wrap everything in a container-fluid <div> -->

<div class="container-fluid">
<div class="row">
<div class="col-2">
<ul class="nav flex-column">
<li class="nav-item"></li>
<a class="nav-link" href="#">Home</a>
<li class="nav-item"></li>
<a class="nav-link" href="#">Profile</a>
<li class="nav-item"></li>
<a class="nav-link" href="#">Messages</a>
</ul>
</div>
<div class="col-10 bg-light">
<h4>Hello!</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio accusamus autem molestias mollitia rerum voluptate, saepe
necessitatibus nemo officiis atque reprehenderit laboriosam est, explicabo officia commodi repellat totam quia. Est.
</p>
<button type="button" class="btn btn-primary">Click me!</button>
</div>
</div>
</div>
</body>
</html>
Loading