-
mrschnei authored
Added UI for blood and food pages. Updated UI for home and mask pages. Blood and Food pages now show database of drives. Create accounts limit length of input
mrschnei authoredAdded UI for blood and food pages. Updated UI for home and mask pages. Blood and Food pages now show database of drives. Create accounts limit length of input
mask.html 5.40 KiB
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<title>How to make a mask:</title>
<style>
.about {
padding: 14px 16px;
background-color: lightgray;
margin: 10px;
border-radius: 7px;
}
</style>
</head>
<body>
<div class="jumbotron text-center" style="margin-bottom:0; ">
<h1>ServicePoints!</h1>
<p>Connect with your Org</p>
</div>
<nav class="navbar navbar-expand-sm navbar-dark" style="background-color:#7952b3;">
<a class="navbar-brand" href="/">Home</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="/accounts/blood/">Blood Drives</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/accounts/food/">Food Drives</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Mask Making</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/accounts/tutorsu/">Tutoring</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Settings
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/accounts/profile/">View Profile</a>
{% if leader == 1 %}
<a class="dropdown-item" href="/accounts/manageOrg/">Manage Org</a>
{% endif %}
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/accounts/logout/">Logout</a>
</div>
</li>
</ul>
</div>
</nav>
<div class="container" style="margin-top:30px">
<div class="row">
<div class="col-sm-8" style="margin:25px 0px;">
<div>
<h1>How to Make Masks</h1>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/VgHrnS6n4iA" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<b>
Above is a video tutorial for making masks with simple materials that can be bought cheaply or found around the home.
</b>
</div>
<h2 style="margin-top: 50px;">Where to donate masks</h2>
<p>
Find places can be tricky as the stock in masks rises around the country. Donations can still be useful for organizations or communities
that might not be able to purchase masks. Places to donate in your local area can be found through some searches on google.
</p>
<h5>Some links that might be useful: </h5>
<a style="font-size: 18px;" href="https://deaconess.com/How-to-make-a-Face-Mask/Mask-Donations?state=Michigan">Deaconess</a>
</div>
<div class="col-sm-4">
<div class="about">
<h2>About</h2>
<p>Masks...</p>
</div>
<div>
<h2>Your Info: </h2>
<p>Username: {{username}}</p>
<p>Organization: {{org}}</p>
<p>Hours: {{hours}}</p>
<hr class="d-sm-none">
</div>
</div>
</div>
</div>
<div class="jumbotron text-center" style="margin-bottom:0; ">
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>