Scribd
Upload
81 views4 pages

Home Page Code PDF

The document is the code for a homepage that displays posts from users. It includes code for a navigation bar, three example posts with images and comments, and links to necessary style sheets and scripts to display the content properly.

Uploaded by

Burhan Ahmed
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
81 views4 pages

Home Page Code PDF

The document is the code for a homepage that displays posts from users. It includes code for a navigation bar, three example posts with images and comments, and links to necessary style sheets and scripts to display the content properly.

Uploaded by

Burhan Ahmed
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 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