You are on page 1of 4

Homepage Code

<!DOCTYPE html>
<html>
<head>
<link rel="icon" type="image/x-icon" href="../Pics and Icons/Website Icon.PNG">
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-
fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
crossorigin="anonymous">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href="../Style Sheets/Capture Style Sheet.css" rel="stylesheet" />
</head>

<body>
<div class="divblock">
<nav class="navbar navbar-expand-md">
<span class="navbar-brand"><i class="fas fa-camera-retro"></i>
Capture</span>
<span class="NavigationBar">
<form class="form-inline">
<input class="form-control mr-sm-2 SearchInput" type="search"
placeholder="Search" aria-label="Search">
<button class="btn my-2 my-sm-0 SearchSubmit"
type="submit">Search</button>
</form>
</span>

<button class="navbar-dark navbar-toggler" type="button" data-


toggle="collapse" data-target="#navbarSupportedContent" aria-
controls="navbarSupportedContent" aria-expanded="true" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<span class="collapse navbar-collapse" id="navbarSupportedContent">


<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link active" href="Home.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Login.html">Log In</a>
</li>

<li class="nav-item">
<a class="nav-link" href="Sign Up.html">Sign Up</a>
</li>

<li class="nav-item">
<a class="nav-link" href="Terms Of Service.html">Terms Of
Service</a>
</li>

<li class="nav-item">
<a class="nav-link" href="About Us.html">About Us</a>
</li>
</span>
</nav>
</div>
<div class="container">
<div class="row">
<div class="col-12 col-lg-9">

<div class="divblock">
<img class="img-thumbnail img-responsive" src="../Example
Posts/Example 2 Image.jpg" alt="Post 1 Image" />
<div class="row">
<div class="col-3">
<img class="col-12 rounded-circle" src="../Example
Posts/Example 2 Person.jpg" alt="Post 1 Person" />
</div>
<div class="col-9">
<h3>Jason Herman</h3>
<p>
See, when you drive home today, you've got a big
windshield on the front of your car. And you've got a little bitty rearview mirror.
And the reason the windshield is so large and the rearview mirror is so small is
because what's happened in your past is not near as important as what's in your
future.
</p>
</div>

<div class="row">
<div class="w-100 col-lg-2 col-sm-6" style="float:
center;">
<button class="btn btn-outline-danger
CommentButton"><i class="far fa-heart"></i></button>
</div>
<div class="w-100 col-lg-2 col-sm-6">
<button class="btn btn-outline-danger
CommentButton"><i class="fas fa-heart-broken"></i></button>
</div>
<!--<form class="form-inline form-group mb-2">-->
<div class="w-100 col-lg-7 col-sm-10">
<input class="form-control mr-sm-2 w-100 CommentInput"
type="text" placeholder="Write Your Thoughts" aria-label="Search">
</div>
<div class="col-lg-1 col-sm-2 ">
<button class="btn my-2 my-sm-0 CommentSubmit w-100"
type="submit">Send</button>
</div>
<!--</form>-->
</div>
</div>
</div>

<div class="divblock">
<img class="img-thumbnail img-responsive" src="../Example
Posts/Example 1 Image.jpg" alt="Post 1 Image" />
<div class="row">
<div class="col-3">
<img class="col-12 rounded-circle" src="../Example
Posts/Example 1 Person.jpg" alt="Post 1 Person" />
</div>
<div class="col-9">
<h3>Hellen Jeffery</h3>
<p>
Look deep into nature, and then you will understand
everything better. ...
</p>
</div>

<div class="row">
<div class="w-100 col-lg-2 col-sm-6" style="float:
center;">
<button class="btn btn-outline-danger
CommentButton"><i class="far fa-heart"></i></button>
</div>
<div class="w-100 col-lg-2 col-sm-6">
<button class="btn btn-outline-danger
CommentButton"><i class="fas fa-heart-broken"></i></button>
</div>
<!--<form class="form-inline form-group mb-2">-->
<div class="w-100 col-lg-7 col-sm-10">
<input class="form-control mr-sm-2 w-100 CommentInput"
type="text" placeholder="Write Your Thoughts" aria-label="Search">
</div>
<div class="col-lg-1 col-sm-2 ">
<button class="btn my-2 my-sm-0 CommentSubmit w-100"
type="submit">Send</button>
</div>
<!--</form>-->
</div>
</div>
</div>

<div class="divblock">
<img class="img-thumbnail img-responsive" src="../Example
Posts/Example 3 Image.jpg" alt="Post 1 Image" />
<div class="row">
<div class="col-3">
<img class="col-12 rounded-circle" src="../Example
Posts/Example 3 Person.jpg" alt="Post 1 Person" />
</div>
<div class="col-9">
<h3>John Johnson</h3>
<p>
The better I get to know men, the more I find myself
loving dogs.
</p>
</div>

<div class="row">
<div class="w-100 col-lg-2 col-sm-6" style="float:
center;">
<button class="btn btn-outline-danger
CommentButton"><i class="far fa-heart"></i></button>
</div>
<div class="w-100 col-lg-2 col-sm-6">
<button class="btn btn-outline-danger
CommentButton"><i class="fas fa-heart-broken"></i></button>
</div>
<!--<form class="form-inline form-group mb-2">-->
<div class="w-100 col-lg-7 col-sm-10">
<input class="form-control mr-sm-2 w-100 CommentInput"
type="text" placeholder="Write Your Thoughts" aria-label="Search">
</div>
<div class="col-lg-1 col-sm-2 ">
<button class="btn my-2 my-sm-0 CommentSubmit w-100"
type="submit">Send</button>
</div>
<!--</form>-->
</div>
</div>
</div>

</div>

<div class="col-0 col-lg-3"></div>


</div>
</div>

<!-- #region Script Links -->

<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.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>

<!-- #endregion -->


</body>
</html>

You might also like