Programming_Formative_Assessment/bs4_template.html at master · vvvm23/Programming_Formative_Assessment · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- Bootstrap CSS -->
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
		<link rel="stylesheet" href="style.css">

		<!-- Required meta tags -->
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<title>Template Page</title>
	</head>

	<body data-spy="scroll" data-target=".navbar" data-offset="50">
		<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
			<ul class="navbar-nav">
				<li class="nav-item">
					<a class="nav-link" href="index.html">Home</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="science.html">Science</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="medicine.html">Medicine</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="comms.html">Communication</a>
				</li>
				<li class="nav-item">
					<a class="nav-link">   |   </a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#s1">#1</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#s2">#2</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#s3">#3</a>
				</li>
			</ul>
		</nav>
		<div id="left">
			<h1 id="s1">First Paragraph</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ante nunc, luctus a ante nec, commodo aliquet justo. Pellentesque lobortis sagittis sem vitae ultricies. Proin mattis dignissim turpis, et volutpat tellus sagittis vitae. Sed facilisis fermentum mollis. Aliquam eget augue libero. Donec sollicitudin a erat id viverra. Nunc tristique odio accumsan orci efficitur, et elementum mauris ullamcorper. Aliquam vestibulum congue massa, a blandit nunc rhoncus eu. Ut aliquam nisi non maximus convallis. Maecenas aliquam ex eget sagittis placerat. Aenean ultricies justo nulla, vitae eleifend mauris ultrices sit amet. Praesent mollis erat quis nibh malesuada ultrices. </p>
			<h1 id="s2">Second Paragraph</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ante nunc, luctus a ante nec, commodo aliquet justo. Pellentesque lobortis sagittis sem vitae ultricies. Proin mattis dignissim turpis, et volutpat tellus sagittis vitae. Sed facilisis fermentum mollis. Aliquam eget augue libero. Donec sollicitudin a erat id viverra. Nunc tristique odio accumsan orci efficitur, et elementum mauris ullamcorper. Aliquam vestibulum congue massa, a blandit nunc rhoncus eu. Ut aliquam nisi non maximus convallis. Maecenas aliquam ex eget sagittis placerat. Aenean ultricies justo nulla, vitae eleifend mauris ultrices sit amet. Praesent mollis erat quis nibh malesuada ultrices. </p>
		</div>
		<div id="right">
			<img src="media/placeholder.jpg" alt="Placeholder Image (DELETING THIS TAG MAKES THE HTML INVALID)" />
		</div>
		<!-- Place HTML markup above this -->
		<!-- Optional JavaScript -->
		<!-- jQuery first, then Popper.js, then Bootstrap JS -->
		<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
		<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
	</body>
</html>