Skip to content

Commit 015b3bc

Browse files
HolmesMatthewHolmesMatthew
committed
Adding lab3
1 parent 76d1e29 commit 015b3bc

File tree

4 files changed

+282
-0
lines changed

4 files changed

+282
-0
lines changed

‎Code/matthew/html_css/labs/lab_3/about.html‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>About</title>
8+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
9+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
10+
<link rel="home" href="C:\Users\wmatt\class_kiwi\Code\matthew\html_css\labs\lab_3\home_page.html">
11+
</head>
12+
<body>
13+
<nav class="navbar navbar-expand-lg navbar-light bg-light">
14+
<div class="container-fluid">
15+
<a class="navbar-brand" href="home_page.html">Company Name</a>
16+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
17+
<span class="navbar-toggler-icon"></span>
18+
</button>
19+
<div class="collapse navbar-collapse" id="navbarNav">
20+
<ul class="navbar-nav">
21+
<li class="nav-item">
22+
<a class="nav-link active" aria-current="page" href="home_page.html">Home</a>
23+
</li>
24+
<li class="nav-item">
25+
<a class="nav-link" href="about.html">about</a>
26+
</li>
27+
<li class="nav-item">
28+
<a class="nav-link" href="financial.html">Financials</a>
29+
</li>
30+
31+
</ul>
32+
</div>
33+
</div>
34+
</nav>
35+
<br>
36+
37+
38+
<div class="container-lg">
39+
<div class="card">
40+
<div class="card-body">
41+
<h5 class="card-title text-center">Mission statement</h5>
42+
<!-- <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> -->
43+
</div>
44+
<img src="https://picsum.photos/1000/200" class="card-img-bottom" alt="...">
45+
</div>
46+
</div>
47+
<br>
48+
<br>
49+
<div class="container-lg text-center">
50+
<h4>Leaders in Change <small class="text-muted">Since a long time ago</small></h4>
51+
<br>
52+
<p>Inspiring words from the marketing team</p>
53+
</div>
54+
<br>
55+
56+
<footer>
57+
<table class="table">
58+
59+
<tbody>
60+
<tr>
61+
<td></td>
62+
</tr>
63+
</tbody>
64+
</table>
65+
<p class="text-center">Matthew Holmes &copy; 2022</p>
66+
</footer>
67+
</body>
68+
</html>

‎Code/matthew/html_css/labs/lab_3/financial.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Document</title>
8+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
9+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
10+
<link rel="home" href="C:\Users\wmatt\class_kiwi\Code\matthew\html_css\labs\lab_3\home_page.html">
11+
</head>
12+
<body>
13+
<nav class="navbar navbar-expand-lg navbar-light bg-light">
14+
<div class="container-fluid">
15+
<a class="navbar-brand" href="home_page.html">Company Name</a>
16+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
17+
<span class="navbar-toggler-icon"></span>
18+
</button>
19+
<div class="collapse navbar-collapse" id="navbarNav">
20+
<ul class="navbar-nav">
21+
<li class="nav-item">
22+
<a class="nav-link active" aria-current="page" href="home_page.html">Home</a>
23+
</li>
24+
<li class="nav-item">
25+
<a class="nav-link" href="about.html">about</a>
26+
</li>
27+
<li class="nav-item">
28+
<a class="nav-link" href="financial.html">Financials</a>
29+
</li>
30+
31+
</ul>
32+
</div>
33+
</div>
34+
</nav>
35+
36+
<footer>
37+
<table class="table">
38+
39+
<tbody>
40+
<tr>
41+
<td></td>
42+
</tr>
43+
</tbody>
44+
</table>
45+
<p>Matthew Holmes &copy; 2022</p>
46+
</footer>
47+
</body>
48+
</html>

‎Code/matthew/html_css/labs/lab_3/home_page.html‎

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Document</title>
8+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
9+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
10+
<link rel="about" href="C:\Users\wmatt\class_kiwi\Code\matthew\html_css\labs\lab_3\about.html">
11+
<link rel="financial" href="C:\Users\wmatt\class_kiwi\Code\matthew\html_css\labs\lab_3\financial.html">
12+
<link rel="stylesheet" href="style.css">
13+
</head>
14+
<body>
15+
<nav class="navbar navbar-expand-lg navbar-light bg-light">
16+
<div class="container-fluid">
17+
<a class="navbar-brand" href="#">Company Name</a>
18+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
19+
<span class="navbar-toggler-icon"></span>
20+
</button>
21+
<div class="collapse navbar-collapse" id="navbarNav">
22+
<ul class="navbar-nav">
23+
<li class="nav-item">
24+
<a class="nav-link active" aria-current="page" href="#">Home</a>
25+
</li>
26+
<li class="nav-item">
27+
<a class="nav-link" href="about.html">About</a>
28+
</li>
29+
<li class="nav-item">
30+
<a class="nav-link" href="financial.html">Financials</a>
31+
</li>
32+
<!-- <li class="nav-item">
33+
<a class="nav-link disabled">Disabled</a>
34+
</li> -->
35+
</ul>
36+
</div>
37+
</div>
38+
</nav>
39+
40+
41+
<!-- picture carousel -->
42+
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
43+
<div class="carousel-indicators">
44+
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
45+
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
46+
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
47+
</div>
48+
<div class="carousel-inner">
49+
<div class="carousel-item active">
50+
<img src="https://picsum.photos/1001/150" class="d-block w-100" alt="...">
51+
<div class="carousel-caption d-none d-md-block">
52+
<h5>First slide label</h5>
53+
<p>Some representative placeholder content for the first slide.</p>
54+
</div>
55+
</div>
56+
<div class="carousel-item">
57+
<img src="https://picsum.photos/1002/150" class="d-block w-100" alt="...">
58+
<div class="carousel-caption d-none d-md-block">
59+
<h5>Second slide label</h5>
60+
<p>Some representative placeholder content for the second slide.</p>
61+
</div>
62+
</div>
63+
<div class="carousel-item">
64+
<img src="https://picsum.photos/1003/150" class="d-block w-100" alt="...">
65+
<div class="carousel-caption d-none d-md-block">
66+
<h5>Third slide label</h5>
67+
<p>Some representative placeholder content for the third slide.</p>
68+
</div>
69+
</div>
70+
</div>
71+
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
72+
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
73+
<span class="visually-hidden">Previous</span>
74+
</button>
75+
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
76+
<span class="carousel-control-next-icon" aria-hidden="true"></span>
77+
<span class="visually-hidden">Next</span>
78+
</button>
79+
</div>
80+
81+
<br>
82+
<br>
83+
<!--Picture card 1 -->
84+
<div class="container-fluid">
85+
<div class="card bg-dark text-white">
86+
<img src="https://picsum.photos/1500/201" class="card-img" alt="...">
87+
<div class="card-img-overlay">
88+
<h5 class="card-title">Help us help you</h5>
89+
<p class="card-text">Mission statement but different.</p>
90+
91+
</div>
92+
</div>
93+
</div>
94+
95+
<br>
96+
<br>
97+
<!--Picture card 2 -->
98+
<div class="container-fluid">
99+
<div class="card bg-dark text-white">
100+
<img src="https://picsum.photos/1501/200" class="card-img" alt="...">
101+
<div class="card-img-overlay">
102+
<h5 class="card-title">Here for you</h5>
103+
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
104+
105+
</div>
106+
</div>
107+
</div>
108+
109+
<br>
110+
<br>
111+
<br>
112+
113+
<div class="container-fluid">
114+
<div class="row justify-content-evenly">
115+
<!--thumbnail 1 -->
116+
<div class="card mb-3" style="max-width: 540px;">
117+
<div class="row g-0">
118+
<div class="col-md-4">
119+
<img src="https://picsum.photos/200/200" class="img-fluid rounded-start" alt="...">
120+
</div>
121+
<div class="col-md-8">
122+
<div class="card-body">
123+
<h5 class="card-title"><a class="btn btn-light" href="about.html">Chief Executive Officer</a></h5>
124+
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
125+
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
126+
</div>
127+
</div>
128+
</div>
129+
</div>
130+
<!--thumbnail 2 -->
131+
<div class="card mb-3" style="max-width: 540px;">
132+
<div class="row g-0">
133+
<div class="col-md-4">
134+
<img src="https://picsum.photos/200/200" class="img-fluid rounded-start" alt="...">
135+
</div>
136+
<div class="col-md-8">
137+
<div class="card-body">
138+
<h5 class="card-title"><a class="btn btn-light" href="about.html">Chief Financial Executive Officer</a></h5>
139+
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
140+
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
141+
</div>
142+
</div>
143+
</div>
144+
</div>
145+
</div>
146+
147+
<br>
148+
<br>
149+
<br>
150+
</div>
151+
<footer>
152+
<table class="table text-center">
153+
154+
<tbody>
155+
<tr>
156+
<td></td>
157+
</tr>
158+
</tbody>
159+
</table>
160+
<p>Matthew Holmes &copy; 2022</p>
161+
</footer>
162+
</body>
163+
</html>

‎Code/matthew/html_css/labs/lab_3/style.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
footer {
2+
text-align: center;
3+
}

0 commit comments

Comments
 (0)