Skip to content

Final Project #1

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.

Sign up for GitHub

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
spmoore25 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Final Project #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
133 changes: 133 additions & 0 deletions Lab3.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="sytlesheet" href="/css/styles.css">
<title>Lab3</title>
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Company Name</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav ms-auto">
<a class="nav-link" aria-current="page" href="#">Features</a>
<a class="nav-link" href="#">Enterprise</a>
<a class="nav-link" href="#">Support</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link" href="#"><button button type="button" class="btn btn-light btn-outline-primary">Signup</button></a>
</div>
</div>
</nav>
</header>
<main class="m-5">
<div class="container pb-5">
<div class="row"></div>
<div class="col">
<h1 class="h1 text-center pt-5">Pricing</h1>
<p class="text-center"> Quickly build an effectice table for your potentional customers with this<br> Bootstrap expamples. It's build with default Bootstrap components and utilities<br> with little customization.</p>
</div>
</div>
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card">
<div class="card-body pt-0 ps-0 pe-0 pb-1">
<h5 class="card-title bg-light text-center p-4">Free</h5>
<p class="card-text">
<ul class="list-unstyled">
<li class="text-center"><b>$0</b>/ mo</li>
<li class="text-center">10 users included</li>
<li class="text-center">2GB of storage</li>
<li class="text-center">Email Support </li>
<li class="text-center pb-5">Help center access</li></p>
<div class="d-grid gap-2 col-6 mx-auto">
<button class="btn btn-outline-primary" type="button">Sign up for free</button>
</div>
</ul>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body pt-0 ps-0 pe-0 pb-1">
<h5 class="card-title bg-light text-center p-4 m-0text-center">Pro</h5>
<p class="card-text">
<ul class="list-unstyled">
<li class="text-center"><b>$15</b>/ mo</li>
<li class="text-center">20 users included</li>
<li class="text-center">10GB of storage</li>
<li class="text-center">Priority Email Support </li>
<li class="text-center pb-5">Help center access</p></li>
<div class="d-grid gap-2 col-6 mx-auto">
<button class="btn btn-primary" type="button">Get Started</button>
</div>
</ul>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body pt-0 ps-0 pe-0 pb-1">
<h5 class="card-title bg-light text-center p-4 m-0">Enterprise</h5>
<p class="card-text card-text">
<ul class="list-unstyled">
<li class="text-center"><b>$29</b>/ mo</li>
<li class="text-center">30 users included</li>
<li class="text-center">15GB of storage</li>
<li class="text-center">Phone and email Support </li>
<li class="text-center pb-5">Help center access</li></p>
<div class="d-grid gap-2 col-6 mx-auto">
<button class="btn btn-primary" type="button">Contact us</button>
</div>
</ul>
</div>
</div>
</div>
</div>
</main>
<hr style="height:1px; margin: 30px; width: 95%">
<footer>
<div class="container">
<div class="row row-cols-1 row-cols-md-4 g-4">
<div class="col">
<ul style="list-style: none;">
<img src="https://getbootstrap.com/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24">
<br>
<span>&#169; 2020</span>
</ul>
</div>
<div class="col">
<ul style="list-style: none;">
<li class="fw-bold">Features</li>
<li>Cool Stuff</li>
<li>Random Feature</li>
<li>Team Feature</li>
</ul>
</div>
<div class="col">
<ul style="list-style: none;">
<li class="fw-bold">Resources</li>
<li>Resource</li>
<li>Resource name</li>
<li>Another Resource</li>
</ul>
</div class="col">
<div>
<ul style="list-style: none;">
<li class="fw-bold">About</li>
<li>Team</li>
<li>Location</li>
<li>Privacy</li>
</ul>
</div>
</div>
</div>
</footer>
</body>
</html>
10 changes: 10 additions & 0 deletions Lab3.workspace.code-workspace
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"folders": [
{
"path": "."
}
],
"settings": {
"liveServer.settings.multiRootWorkspaceName": "web4"
}
}
7 changes: 7 additions & 0 deletions css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
/* Global Layout Set-up */
* {
margin: 0;
padding: 0;
box-sizing: border-box
}