et0and/index.html

## index.html
<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Group Member List</title>

    <!-- Bootstrap core CSS -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>

    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
        <h6 style="color: #dbe9ee; font-size: 50px;"><b>G43</b></h6>
        <div class="container">
            <img src="images/homebutton.png" alt="Home" align="left" style="height:150px">
        </div>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#"><b style="font-size: 50px;">Overview</b></a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="#"><b style="font-size: 50px;">Members
              <span class="sr-only">(current)</span>
			</b>
			</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#"><b style="font-size: 50px;">Tasks</b></a>
                </li>
            </ul>
        </div>
        </div>
    </nav>

    <!-- Page Content -->

    <style>
        * {
          box-sizing: border-box;
        }

        html,
        body {
          width: 100%;
          height: auto;
          min-height: 100%;
          margin: 0;
          padding: 0;
          color: black;
        }

        body {
          font-size: 15px;
          overflow-x: hidden;
          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }

        body.friday .friday__doll {
          display: block;
        }

        table {
          font-size: 12px;
          text-align: left;
        }

        table th {
          font-weight: normal;
          text-transform: uppercase;
        }

        @keyframes zoomOut {
          from {
            transform: translate3d(0, 0, 0);
          }

          to {
            transform: translate3d(0, 0, -100000px);
          }
        }

        a {
          transition: all 0.2s ease;
          display: block;
          border-bottom: 1px solid transparent;
        }

        a.mail {
          display: inline;
        }

        .upper {
          text-transform: uppercase;
        }

        .sidebar {
          margin: 10px 10px 15px 10px;
        }

        .sidebar p {
          margin: 0;
          line-height: 1.5;
        }

        .sidebar a {
          color: black;
        }

        .sidebar a:hover {
          border-bottom: 1px solid transparent;
        }

        a:hover {
          border-bottom: 1px solid black;
        }

        .main__wrapper {
          display: grid;
          grid-gap: 0;
          width: calc(100% - 20px);
          margin-left: 10px;
          grid-template-columns: repeat(1, 1fr);
          grid-auto-rows: 50vh;
          padding-bottom: 100px;

        }

        .centered__row {
          width: calc(100% - 20px);
          margin: 50px 10;
          border: 1px solid black;
          display: block;
          padding: 50px 20px;
        }

        .centered__row ul li {
          display: block;
          text-align: left;
        }

        .centered__row.music__row ul li::after {
          content: ''
        }


        .centered__row h2 {
          font-weight: normal;
          text-transform: uppercase;
          font-size: 14px;
        }


        @media (min-width: 813px) {
          .main__wrapper {
            grid-template-columns: repeat(2, 1fr);
          }
        }


        @media (min-width: 1020px) {
          .main__wrapper {
            grid-template-columns: repeat(3, 1fr);
          }
        }

        .main__wrapper>div.main__item {
          border: 1px solid black;

          margin: 0 -1px -1px 0;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .main__item {

          position: relative;
          text-align: center;
          flex-direction: column;
        }

        .main__item p {
          max-width: 200px;
          margin: 5px;
        }

        .main__item p.description {
          font-style: italic;
        }

        .main__item p a {
          text-decoration: none;
          color: inherit;
        }

        .main__item.full {
          width: 100%;
          align-items: center;
        }

        .main__item.high {
          height: 25vh;
        }

        .main__item.full p {
          width: 90%;
          margin: 0 auto;
          max-width: 500px;
        }

        .main__item.half {
          width: 100%;
          align-items: center;
        }

        .main__item_year {
          position: absolute;
          top: 5px;
          left: 5px;
        }

        .main__item_type {
          position: absolute;
          bottom: 5px;
          left: 5px;
          text-transform: uppercase;
          font-size: 20px;
          text-shadow: 0 0 2px black;
        }

        hr {
          display: block;
          margin-top: 0.5em;
          margin-bottom: 0.5em;
          margin-left: auto;
          margin-right: auto;
          border-style: inset;
          border-width: 1px;
        }

        ul {
          text-align: center;
          margin: 0 auto;
          list-style-type: none;
          padding: 0;
        }

        ul a {
          color: inherit;
        }

        .award {
          position: fixed;
          transform: translate3d(0, 0, 0) rotate(30deg);
          top: 20px;
          right: 20px;
          width: 80px;
          height: 80px;
          text-align: center;
          z-index: 99;
          font-size: 10px;
          background: black;
          color: white;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
        }

        .award a {
          color: white;
          text-decoration: none;
        }

        .bleed {
          position: relative;
          z-index: 3;
        }

        .bleed.end {
          margin-top: 100px;
        }

        .bleed img {
          width: 100%;
          width: 100vw;
          opacity: 0;
          transition: opacity 0.3s linear;
        }

        .bleed img.loaded {
          opacity: 1;
        }

        .friday__doll {
          position: fixed;
          bottom: 20px;
          right: 10px;
          text-align: center;
          z-index: 99;
          display: none;
        }

        .friday__doll p {
          text-transform: uppercase;
          font-size: 10px;
          margin: 0;
        }

        .friday__doll img {
          width: 50px;
        }
    </style>
    <br><br>
    <main class="main__wrapper">
        <div class="main__item">
            <div class="main__item_year">offline</div>
            <div class="main__item_type">Jane</div>
            <p>
                <a href="http://example.com"><img src="https://image.shutterstock.com/image-photo/portrait-young-beautiful-cute-cheerful-260nw-666258808.jpg" width="100" alt="Jane"></a>
            </p>
            <p class="description">Current tasks: driving the car<br><a href="https://example.com">Contribution log</a></p>
        </div>

        <div class="main__item">
            <div class="main__item_year">online</div>
            <div class="main__item_type">Harold</div>
            <p>
                <a href="http://example.com"><img src="https://res.cloudinary.com/twenty20/private_images/t_watermark-criss-cross-10/v1541223188000/photosp/718c0244-c154-478f-bb4a-d54ccf435fc6/stock-photo-men-sitting-business-working-office-smile-man-laptop-boss-718c0244-c154-478f-bb4a-d54ccf435fc6.jpg" width="100" alt="Harold"></a>
            </p>
            <p class="description">Current tasks: mopping the floors<br><a href="https://example.com">Contribution log</a></p>
        </div>

        <div class="main__item">
            <div class="main__item_year">offline</div>
            <div class="main__item_type">Tina</div>
            <p>
                <a href="http://example.com"><img src="https://createherstock.com/wp-content/uploads/2018/05/createherstock-downtown-isha-gaines-40-640x360.jpg" width="100" alt="Tina"></a>
            </p>
            <p class="description">Current tasks: finishing code on website<br><a href="https://example.com">Contribution log</a></p>
        </div>

        <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

        </div>

        <!-- Bootstrap core JavaScript -->
        <script src="vendor/jquery/jquery.min.js"></script>
        <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>

	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta name="description" content="">
	<meta name="author" content="">

	<title>Group Member List</title>

	<!-- Bootstrap core CSS -->
	<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

	</head>

	<body>

	<!-- Navigation -->
	<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
	<h6 style="color: #dbe9ee; font-size: 50px;"><b>G43</b></h6>
	<div class="container">
	<img src="images/homebutton.png" alt="Home" align="left" style="height:150px">
	</div>
	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
	<span class="navbar-toggler-icon"></span>
	</button>
	<div class="collapse navbar-collapse" id="navbarResponsive">
	<ul class="navbar-nav ml-auto">
	<li class="nav-item">
	<a class="nav-link" href="#"><b style="font-size: 50px;">Overview</b></a>
	</li>
	<li class="nav-item active">
	<a class="nav-link" href="#"><b style="font-size: 50px;">Members
	<span class="sr-only">(current)</span>
	</b>
	</a>
	</li>
	<li class="nav-item">
	<a class="nav-link" href="#"><b style="font-size: 50px;">Tasks</b></a>
	</li>
	</ul>
	</div>
	</div>
	</nav>

	<!-- Page Content -->

	<style>
	* {
	box-sizing: border-box;
	}

	html,
	body {
	width: 100%;
	height: auto;
	min-height: 100%;
	margin: 0;
	padding: 0;
	color: black;
	}

	body {
	font-size: 15px;
	overflow-x: hidden;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	}

	body.friday .friday__doll {
	display: block;
	}

	table {
	font-size: 12px;
	text-align: left;
	}

	table th {
	font-weight: normal;
	text-transform: uppercase;
	}

	@keyframes zoomOut {
	from {
	transform: translate3d(0, 0, 0);
	}

	to {
	transform: translate3d(0, 0, -100000px);
	}
	}

	a {
	transition: all 0.2s ease;
	display: block;
	border-bottom: 1px solid transparent;
	}

	a.mail {
	display: inline;
	}

	.upper {
	text-transform: uppercase;
	}

	.sidebar {
	margin: 10px 10px 15px 10px;
	}

	.sidebar p {
	margin: 0;
	line-height: 1.5;
	}

	.sidebar a {
	color: black;
	}

	.sidebar a:hover {
	border-bottom: 1px solid transparent;
	}

	a:hover {
	border-bottom: 1px solid black;
	}

	.main__wrapper {
	display: grid;
	grid-gap: 0;
	width: calc(100% - 20px);
	margin-left: 10px;
	grid-template-columns: repeat(1, 1fr);
	grid-auto-rows: 50vh;
	padding-bottom: 100px;

	}

	.centered__row {
	width: calc(100% - 20px);
	margin: 50px 10;
	border: 1px solid black;
	display: block;
	padding: 50px 20px;
	}

	.centered__row ul li {
	display: block;
	text-align: left;
	}

	.centered__row.music__row ul li::after {
	content: ''
	}


	.centered__row h2 {
	font-weight: normal;
	text-transform: uppercase;
	font-size: 14px;
	}


	@media (min-width: 813px) {
	.main__wrapper {
	grid-template-columns: repeat(2, 1fr);
	}
	}



	@media (min-width: 1020px) {
	.main__wrapper {
	grid-template-columns: repeat(3, 1fr);
	}
	}

	.main__wrapper>div.main__item {
	border: 1px solid black;

	margin: 0 -1px -1px 0;
	display: flex;
	align-items: center;
	justify-content: center;
	}

	.main__item {

	position: relative;
	text-align: center;
	flex-direction: column;
	}

	.main__item p {
	max-width: 200px;
	margin: 5px;
	}

	.main__item p.description {
	font-style: italic;
	}

	.main__item p a {
	text-decoration: none;
	color: inherit;
	}

	.main__item.full {
	width: 100%;
	align-items: center;
	}

	.main__item.high {
	height: 25vh;
	}

	.main__item.full p {
	width: 90%;
	margin: 0 auto;
	max-width: 500px;
	}

	.main__item.half {
	width: 100%;
	align-items: center;
	}

	.main__item_year {
	position: absolute;
	top: 5px;
	left: 5px;
	}

	.main__item_type {
	position: absolute;
	bottom: 5px;
	left: 5px;
	text-transform: uppercase;
	font-size: 20px;
	text-shadow: 0 0 2px black;
	}

	hr {
	display: block;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	margin-left: auto;
	margin-right: auto;
	border-style: inset;
	border-width: 1px;
	}

	ul {
	text-align: center;
	margin: 0 auto;
	list-style-type: none;
	padding: 0;
	}

	ul a {
	color: inherit;
	}

	.award {
	position: fixed;
	transform: translate3d(0, 0, 0) rotate(30deg);
	top: 20px;
	right: 20px;
	width: 80px;
	height: 80px;
	text-align: center;
	z-index: 99;
	font-size: 10px;
	background: black;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	}

	.award a {
	color: white;
	text-decoration: none;
	}

	.bleed {
	position: relative;
	z-index: 3;
	}

	.bleed.end {
	margin-top: 100px;
	}

	.bleed img {
	width: 100%;
	width: 100vw;
	opacity: 0;
	transition: opacity 0.3s linear;
	}

	.bleed img.loaded {
	opacity: 1;
	}

	.friday__doll {
	position: fixed;
	bottom: 20px;
	right: 10px;
	text-align: center;
	z-index: 99;
	display: none;
	}

	.friday__doll p {
	text-transform: uppercase;
	font-size: 10px;
	margin: 0;
	}

	.friday__doll img {
	width: 50px;
	}
	</style>
	<br><br>
	<main class="main__wrapper">
	<div class="main__item">
	<div class="main__item_year">offline</div>
	<div class="main__item_type">Jane</div>
	<p>
	<a href="http://example.com"><img src="https://image.shutterstock.com/image-photo/portrait-young-beautiful-cute-cheerful-260nw-666258808.jpg" width="100" alt="Jane"></a>
	</p>
	<p class="description">Current tasks: driving the car<br><a href="https://example.com">Contribution log</a></p>
	</div>

	<div class="main__item">
	<div class="main__item_year">online</div>
	<div class="main__item_type">Harold</div>
	<p>
	<a href="http://example.com"><img src="https://res.cloudinary.com/twenty20/private_images/t_watermark-criss-cross-10/v1541223188000/photosp/718c0244-c154-478f-bb4a-d54ccf435fc6/stock-photo-men-sitting-business-working-office-smile-man-laptop-boss-718c0244-c154-478f-bb4a-d54ccf435fc6.jpg" width="100" alt="Harold"></a>
	</p>
	<p class="description">Current tasks: mopping the floors<br><a href="https://example.com">Contribution log</a></p>
	</div>

	<div class="main__item">
	<div class="main__item_year">offline</div>
	<div class="main__item_type">Tina</div>
	<p>
	<a href="http://example.com"><img src="https://createherstock.com/wp-content/uploads/2018/05/createherstock-downtown-isha-gaines-40-640x360.jpg" width="100" alt="Tina"></a>
	</p>
	<p class="description">Current tasks: finishing code on website<br><a href="https://example.com">Contribution log</a></p>
	</div>

	<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

	</div>

	<!-- Bootstrap core JavaScript -->
	<script src="vendor/jquery/jquery.min.js"></script>
	<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

	</body>

	</html>