Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!-- bootstrap v4.6 -->
<!DOCTYPE html>
<html lang="en">

<head>
	<!-- Required meta tags -->
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
	<!-- Bootstrap CSSv4.6 -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous" />
	<!-- Bootstrap icons -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.0/font/bootstrap-icons.css" />
	<!-- CSS External -->
	<link rel="stylesheet" href="mystyles.css" />

	<title>Lab Activity 10</title>
</head>

<body>
	<!-- Navigation section -->
	<nav class="navbar navbar-dark navbar-expand-lg fixed-top shadow-sm bg-dark">
		<a href="#" class="navbar-brand">COSW 20 Bootstrap II</a>

		<!-- Navbar Toggler -->
		<button type="button" data-toggle="collapse" data-target="#navbarMain" aria-controls="navbarMain" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler">
			<span class="navbar-toggler-icon"></span>
		</button>
		<div id="navbarMain" class="collapse navbar-collapse">
			<ul class="navbar-nav ml-auto">
				<li class="nav-item active">
					<a href="#features" class="nav-link">Features</a>
				</li>
				<li class="nav-item">
					<a href="#portfolio" class="nav-link">Portfolio</a>
				</li>
				<li class="nav-item">
					<a href="#testimonials" class="nav-link">Testimonials</a>
				</li>
				<li class="nav-item">
					<a href="#about" class="nav-link">About</a>
				</li>
			</ul>
			<div class="navbar-text ml-lg-3">
				<a href="#" class="btn btn-danger text-white shadow">Sign Up</a>
			</div>
		</div>
	</nav>

	<!-- Hero section -->
	<section class="bg-light" id="features">
		<div class="container">
			<div class="row">
				<div class="col-lg-6 order-2 order-lg-1">
					<h1>Front end Skills</h1>
					<p class="lead">
						Ipsum aliqua occaecat reprehenderit minim aliquip
						exercitation commodo do nulla. Exercitation quis nulla
						reprehenderit ex consequat. Eiusmod labore occaecat ad
						aliqua elit labore minim ipsum mollit consequat ea ullamco
						fugiat. Magna incididunt exercitation irure laborum velit
						do est excepteur cupidatat reprehenderit.
					</p>
					<p class="lead">
						Irure nostrud aliqua reprehenderit deserunt adipisicing
						ullamco magna nostrud dolor ullamco ullamco voluptate
						consectetur irure.
					</p>
					<p>
						<a href="#" class="btn btn-danger shadow mr-2">CSS Layout</a><a href="#" class="btn btn-outline-danger">Responsive Web Design</a>
					</p>
				</div>
				<div class="col-lg-6 order-2 order-lg-2">
					<img src="https://d19m59y37dris4.cloudfront.net/bootstrap-101/img/macbook.png" alt="..." class="img-fluid" />
				</div>
			</div>
		</div>
	</section>

	<!-- Services section -->
	<section>
		<div class="container">
			<h2>Services</h2>
			<p class="text-muted mb-5">
				There are many variations of passages of Lorem Ipsum available,
				but the majority have suffered alteration in some form.
			</p>
			<div class="row">
				<div class="col-sm-6 col-lg-4 mb-3 text-center">
					<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-gpu-card text-danger services-icon" viewBox="0 0 16 16">
						<path fill-rule="evenodd" d="M0 1.5A.5.5 0 0 1 .5 1h1a.5.5 0 0 1 .5.5V4h13.5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5H2v2.5a.5.5 0 0 1-1 0V2H.5a.5.5 0 0 1-.5-.5Zm3 11h3.5v1a.5.5 0 0 1-.5.5H3.5a.5.5 0 0 1-.5-.5v-1Zm4 1v-1h4v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5ZM4 8a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm1.5-2.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5Zm6 1a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3ZM9 8a2.5 2.5 0 1 1 5 0 2.5 2.5 0 0 1-5 0Z" />
					</svg>
					<h4>Magna aliqua exercitation</h4>
					<p class="text-muted">
						Magna aliqua exercitation do dolore dolore aute in
						voluptate ad incididunt velit.
					</p>
				</div>
				<div class="col-sm-6 col-lg-4 mb-3 text-center">
					<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-headset text-danger services-icon" viewBox="0 0 16 16">
						<path d="M8 1a5 5 0 0 0-5 5v1h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a6 6 0 1 1 12 0v6a2.5 2.5 0 0 1-2.5 2.5H9.366a1 1 0 0 1-.866.5h-1a1 1 0 1 1 0-2h1a1 1 0 0 1 .866.5H11.5A1.5 1.5 0 0 0 13 12h-1a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h1V6a5 5 0 0 0-5-5z" />
					</svg>
					<h4>Reprehenderit sunt elit</h4>
					<p class="text-muted">
						Reprehenderit sunt elit excepteur proident.
					</p>
				</div>
				<div class="col-sm-6 col-lg-4 mb-3 text-center">
					<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-rainbow text-danger services-icon" viewBox="0 0 16 16">
						<path d="M8 4.5a7 7 0 0 0-7 7 .5.5 0 0 1-1 0 8 8 0 1 1 16 0 .5.5 0 0 1-1 0 7 7 0 0 0-7-7zm0 2a5 5 0 0 0-5 5 .5.5 0 0 1-1 0 6 6 0 1 1 12 0 .5.5 0 0 1-1 0 5 5 0 0 0-5-5zm0 2a3 3 0 0 0-3 3 .5.5 0 0 1-1 0 4 4 0 1 1 8 0 .5.5 0 0 1-1 0 3 3 0 0 0-3-3zm0 2a1 1 0 0 0-1 1 .5.5 0 0 1-1 0 2 2 0 1 1 4 0 .5.5 0 0 1-1 0 1 1 0 0 0-1-1z" />
					</svg>
					<h4>Ex et exercitation</h4>
					<p class="text-muted">
						Ex et exercitation aliquip et laboris voluptate aliqua.
					</p>
				</div>
				<div class="col-sm-6 col-lg-4 mb-3 text-center">
					<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-controller text-danger services-icon" viewBox="0 0 16 16">
						<path d="M11.5 6.027a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm-1.5 1.5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1zm2.5-.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm-1.5 1.5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1zm-6.5-3h1v1h1v1h-1v1h-1v-1h-1v-1h1v-1z" />
						<path d="M3.051 3.26a.5.5 0 0 1 .354-.613l1.932-.518a.5.5 0 0 1 .62.39c.655-.079 1.35-.117 2.043-.117.72 0 1.443.041 2.12.126a.5.5 0 0 1 .622-.399l1.932.518a.5.5 0 0 1 .306.729c.14.09.266.19.373.297.408.408.78 1.05 1.095 1.772.32.733.599 1.591.805 2.466.206.875.34 1.78.364 2.606.024.816-.059 1.602-.328 2.21a1.42 1.42 0 0 1-1.445.83c-.636-.067-1.115-.394-1.513-.773-.245-.232-.496-.526-.739-.808-.126-.148-.25-.292-.368-.423-.728-.804-1.597-1.527-3.224-1.527-1.627 0-2.496.723-3.224 1.527-.119.131-.242.275-.368.423-.243.282-.494.575-.739.808-.398.38-.877.706-1.513.773a1.42 1.42 0 0 1-1.445-.83c-.27-.608-.352-1.395-.329-2.21.024-.826.16-1.73.365-2.606.206-.875.486-1.733.805-2.466.315-.722.687-1.364 1.094-1.772a2.34 2.34 0 0 1 .433-.335.504.504 0 0 1-.028-.079zm2.036.412c-.877.185-1.469.443-1.733.708-.276.276-.587.783-.885 1.465a13.748 13.748 0 0 0-.748 2.295 12.351 12.351 0 0 0-.339 2.406c-.022.755.062 1.368.243 1.776a.42.42 0 0 0 .426.24c.327-.034.61-.199.929-.502.212-.202.4-.423.615-.674.133-.156.276-.323.44-.504C4.861 9.969 5.978 9.027 8 9.027s3.139.942 3.965 1.855c.164.181.307.348.44.504.214.251.403.472.615.674.318.303.601.468.929.503a.42.42 0 0 0 .426-.241c.18-.408.265-1.02.243-1.776a12.354 12.354 0 0 0-.339-2.406 13.753 13.753 0 0 0-.748-2.295c-.298-.682-.61-1.19-.885-1.465-.264-.265-.856-.523-1.733-.708-.85-.179-1.877-.27-2.913-.27-1.036 0-2.063.091-2.913.27z" />
					</svg>
					<h4>In ipsum ad</h4>
					<p class="text-muted">
						In ipsum ad aute qui proident ad anim nisi esse adipisicing
						amet consequat duis.
					</p>
				</div>
				<div class="col-sm-6 col-lg-4 mb-3 text-center">
					<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-display text-danger services-icon" viewBox="0 0 16 16">
						<path d="M0 4s0-2 2-2h12s2 0 2 2v6s0 2-2 2h-4c0 .667.083 1.167.25 1.5H11a.5.5 0 0 1 0 1H5a.5.5 0 0 1 0-1h.75c.167-.333.25-.833.25-1.5H2s-2 0-2-2V4zm1.398-.855a.758.758 0 0 0-.254.302A1.46 1.46 0 0 0 1 4.01V10c0 .325.078.502.145.602.07.105.17.188.302.254a1.464 1.464 0 0 0 .538.143L2.01 11H14c.325 0 .502-.078.602-.145a.758.758 0 0 0 .254-.302 1.464 1.464 0 0 0 .143-.538L15 9.99V4c0-.325-.078-.502-.145-.602a.757.757 0 0 0-.302-.254A1.46 1.46 0 0 0 13.99 3H2c-.325 0-.502.078-.602.145z" />
					</svg>
					<h4>Ad commodo nostrud</h4>
					<p class="text-muted">
						Ad commodo nostrud id dolore id cillum dolore duis tempor
						et tempor.
					</p>
				</div>
				<div class="col-sm-6 col-lg-4 mb-3 text-center">
					<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-pc text-danger services-icon" viewBox="0 0 16 16">
						<path fill-rule="evenodd" d="M5 0a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1H5Zm.5 14a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Zm2 0a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1ZM5 1.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5ZM5.5 3a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5Z" />
					</svg>
					<h4>Velit minim Lorem tempor</h4>
					<p class="text-muted">
						Velit minim Lorem tempor do incididunt id pariatur
						reprehenderit cupidatat.
					</p>
				</div>
			</div>
		</div>
	</section>
	<!-- Portfolio Section -->
	<section class="bg-light" id="portfolio">
		<div class="container">
			<h2>Portfolio</h2>
			<p class="lead text-muted mb-5">
				In enim non sit irure ut adipisicing laboris et laborum.
			</p>
			<div class="row">
				<div class="col-lg-4 col-md-6 mb-4">
					<div class="card shadow border-0 h-100">
						<a href="#"><img src="https://d19m59y37dris4.cloudfront.net/bootstrap-101/img/mockup0.jpg" alt="" class="card-img-top" /></a>
						<div class="card-body">
							<h5>
								<a href="#" class="text-dark">Ex cupidatat eu</a>
							</h5>
							<p class="text-muted card-text">
								Ex cupidatat eu officia consequat incididunt labore
								occaecat ut veniam labore et cillum id et.
							</p>
							<p class="card-text"><a href="#">Read more</a></p>
						</div>
					</div>
				</div>
				<div class="col-lg-4 col-md-6 mb-4">
					<div class="card shadow border-0 h-100">
						<a href="#"><img src="https://d19m59y37dris4.cloudfront.net/bootstrap-101/img/mockup1.jpg" alt="" class="card-img-top" /></a>
						<div class="card-body">
							<h5>
								<a href="#" class="text-dark">Tempor aute occaecat</a>
							</h5>
							<p class="text-muted card-text">
								Tempor aute occaecat pariatur esse aute amet.
							</p>
							<p class="card-text"><a href="#">Read more</a></p>
						</div>
					</div>
				</div>
				<div class="col-lg-4 col-md-6 mb-4">
					<div class="card shadow border-0 h-100">
						<a href="#"><img src="https://d19m59y37dris4.cloudfront.net/bootstrap-101/img/mockup2.jpg" alt="" class="card-img-top" /></a>
						<div class="card-body">
							<h5>
								<a href="#" class="text-dark">Voluptate ex irure</a>
							</h5>
							<p class="text-muted card-text">
								Voluptate ex irure ipsum ipsum ullamco ipsum
								reprehenderit non ut mollit commodo.
							</p>
							<p class="card-text"><a href="#">Read more</a></p>
						</div>
					</div>
				</div>
				<div class="col-lg-4 col-md-6 mb-4">
					<div class="card shadow border-0 h-100">
						<a href="#"><img src="https://d19m59y37dris4.cloudfront.net/bootstrap-101/img/mockup3.jpg" alt="" class="card-img-top" /></a>
						<div class="card-body">
							<h5>
								<a href="#" class="text-dark">Tempor commodo</a>
							</h5>
							<p class="text-muted card-text">
								Tempor commodo nostrud ex Lorem occaecat duis
								occaecat minim.
							</p>
							<p class="card-text"><a href="#">Read more</a></p>
						</div>
					</div>
				</div>
				<div class="col-lg-4 col-md-6 mb-4">
					<div class="card shadow border-0 h-100">
						<a href="#"><img src="https://d19m59y37dris4.cloudfront.net/bootstrap-101/img/mockup4.jpg" alt="" class="card-img-top" /></a>
						<div class="card-body">
							<h5>
								<a href="#" class="text-dark">Et fugiat sint occaecat</a>
							</h5>
							<p class="text-muted card-text">
								Et fugiat sint occaecat voluptate incididunt anim
								nostrud ea cillum cillum consequat.
							</p>
							<p class="card-text"><a href="#">Read more</a></p>
						</div>
					</div>
				</div>
				<div class="col-lg-4 col-md-6 mb-4">
					<div class="card shadow border-0 h-100">
						<a href="#"><img src="https://d19m59y37dris4.cloudfront.net/bootstrap-101/img/mockup5.jpg" alt="" class="card-img-top" /></a>
						<div class="card-body">
							<h5>
								<a href="#" class="text-dark">Et labore tempor et</a>
							</h5>
							<p class="text-muted card-text">
								Et labore tempor et adipisicing dolor.
							</p>
							<p class="card-text"><a href="#">Read more</a></p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>

	<!-- Quote section -->
	<section class="bg-danger" id="testimonials">
		<div class="container">
			<blockquote class="blockquote text-center mb-0">
				<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-suit-heart text-muted quote-icon pull-left" viewBox="0 0 16 16">
					<path d="m8 6.236-.894-1.789c-.222-.443-.607-1.08-1.152-1.595C5.418 2.345 4.776 2 4 2 2.324 2 1 3.326 1 4.92c0 1.211.554 2.066 1.868 3.37.337.334.721.695 1.146 1.093C5.122 10.423 6.5 11.717 8 13.447c1.5-1.73 2.878-3.024 3.986-4.064.425-.398.81-.76 1.146-1.093C14.446 6.986 15 6.131 15 4.92 15 3.326 13.676 2 12 2c-.777 0-1.418.345-1.954.852-.545.515-.93 1.152-1.152 1.595L8 6.236zm.392 8.292a.513.513 0 0 1-.784 0c-1.601-1.902-3.05-3.262-4.243-4.381C1.3 8.208 0 6.989 0 4.92 0 2.755 1.79 1 4 1c1.6 0 2.719 1.05 3.404 2.008.26.365.458.716.596.992a7.55 7.55 0 0 1 .596-.992C9.281 2.049 10.4 1 12 1c2.21 0 4 1.755 4 3.92 0 2.069-1.3 3.288-3.365 5.227-1.193 1.12-2.642 2.48-4.243 4.38z" />
				</svg>
				<p class="text-white mb-0">There is no place like 127.0.0.1</p>
				<footer class="blockquote-footer text-white">
					Someone famous in
					<cite title="Source Title">Source Title</cite>
				</footer>
			</blockquote>
		</div>
	</section>

	<!-- Footer section-->
	<div class="py-5 bg-light" id="about">
		<div class="container">
			<div class="row">
				<div class="col-md-5 mb-4 mb-lg-0">
					<h5>Bootstrap 101</h5>
					<ul class="contact-info list-unstyled">
						<li>
							<a href="mailto:sales@landy.com" class="text-dark">hello@bootstrap101.com</a>
						</li>
						<li>
							<a href="tel:123456789" class="text-dark">+00 123 456 789</a>
						</li>
					</ul>
					<p class="text-muted">
						Laborum aute enim consectetur eu laboris commodo.
					</p>
				</div>
				<div class="col-md-4">
					<h5>Pages</h5>
					<ul class="links list-unstyled">
						<li><a href="#" class="text-muted">Nisi in commodo</a></li>
						<li><a href="#" class="text-muted">Reprehenderit</a></li>
						<li><a href="#" class="text-muted">Nostrud</a></li>
						<li><a href="#" class="text-muted">Et eu eu</a></li>
					</ul>
				</div>
				<div class="col-md-3">
					<h5>Favorites</h5>
					<ul class="links list-unstyled">
						<li>
							<a href="#" class="text-muted">Minim labore nulla</a>
						</li>
						<li><a href="#" class="text-muted">Nulla qui nisi</a></li>
						<li><a href="#" class="text-muted">Iris Vor Arnim</a></li>
						<li>
							<a href="#" class="text-muted">Consectetur cupidatat</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<div class="py-3 bg-dark text-white">
		<div class="container">
			<div class="row">
				<div class="col-md-7 text-center text-md-left">
					<p class="mb-md-0">Fake @6Nov2021 Raya Bergin</p>
				</div>
				<div class="col-md-5 text-center text-md-right">
					<p class="mb-0">
						Adapted from a Template by
						<a href="https://bootstrapious.com/" class="external text-white">Bootstrapious</a>
					</p>
				</div>
			</div>
		</div>
	</div>

	<!-- jQuery first, then Popper.js, then Bootstrap JS -->
	<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>
</body>

</html>
              
            
!

CSS

              
                /* MY TEMPLATE */
* {
	/* Outline to view layout on screen while styling | Remove after styling */
	/* outline: 1px dashed #ff0075; */
	margin: 0;
	padding: 0;
	scroll-behavior: smooth;
}
html {
	box-sizing: border-box;
	font-size: 100%;
}
*,
*:before,
*:after {
	box-sizing: inherit;
}

body {
	padding-top: 3.5em;
}

section {
	padding-top: 5em;
	padding-bottom: 5em;
}

.bi {
	display: inline-block;
	fill: currentColor;
	width: 2em;
	height: 2em;
	vertical-align: -0.05em;
	stroke-width: 1;
}

.services-icon {
	margin-bottom: 1.25em;
	font-size: 1.875rem;
}

.quote-icon {
	font-size: 2rem;
	margin-bottom: 1.25em;
}

body {
	font-family: "Source Sans Pro", sans-serif;
	color: #404040;
}
h1,
h2 {
	font-family: "Source Sans Pro", sans-serif;
}

              
            
!

JS

              
                
              
            
!
999px

Console