-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathposts.html
118 lines (115 loc) · 6.23 KB
/
posts.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Barter Better</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>
</head>
<body>
<div class="app-container">
<header id="header">
<button type="submit" value="submit" class="btn btn-regular" id="login"></button>
<div class="settings" id="settings">
<i class="fa fa-bell"></i>
<i class="fa fa-cog"></i>
<a href="./profile.html"><img src="./img/profile-1.png" alt="user"></a>
</div>
<input type="search" name="search" id="search-bar" placeholder=" Search..."><button type="submit" value="search" name="search" class="btn btn-regular" id="magnifying-glass"> <i class="fa fa-search"></i> </button>
<button type="submit" class="btn btn-success" id="sidebar-hamburger"> <i class="fa fa-bars"></i> </button>
<a href="#">
<div class="logo" id="logo">
<img src="./img/logo2.png" alt="">
<h2>Barter|Better</h2>
</div>
</a>
<div class="sidebar" id="sidebar">
<div class="logo" id="logo">
<img src="./img/logo2.png" alt="">
<h2>Barter|Better</h2>
</div>
<button type="submit" class="btn btn-danger" id="sidebar-close-btn"> <i class="fa fa-close"></i> </button>
</div>
<div class="create-new-post" id="create-new-post">
<button class="btn btn-success" id="create-new-post-btn">Create a new post <i class="fa fa-pen"></i> </button>
</div>
</header>
<main>
<div class="container-fluid">
<div class="app" id="app-container">
<div class="post" id="post-entry">
<div class="title" id="post-title">
<h1>Shoes to swap for pants</h1>
</div>
<div class="images" id="images">
<div class="img-container" id="img-main">
<img src="./img/mens_footwear_8168725_heromob.jpg" alt="">
</div>
<div class="thumbnails" id="thumbnail-images">
<img src="./img/shoes2.png" alt="">
<img src="./img/shoes3.png" alt="">
<img src="./img/shoes4.png" alt="">
<img src="./img/shoes5.png" alt="">
</div>
</div>
<div class="subtitle" id="subtitle">
<h2>Enter a subtitle here</h2>
</div>
<div class="share" id="share-icons">
<i class="fab fa-twitter"></i>
<i class="fab fa-facebook"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-discord"></i>
<i class="fa fa-envelope"></i>
</div>
<div class="post-body" id="post-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo repellat dolore eaque culpa hic perferendis numquam unde? Facere, iste autem. Atque error aut itaque quis, placeat assumenda voluptate recusandae. Labore, sunt magni? Reprehenderit minima aperiam itaque dolor esse dolore magni.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo repellat dolore eaque culpa hic perferendis numquam unde? Facere, iste autem. Atque error aut itaque quis, placeat assumenda voluptate recusandae. Labore, sunt magni? Reprehenderit minima aperiam itaque dolor esse dolore magni. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum enim nemo adipisci culpa, laborum animi ipsa autem veniam quam. Vero, autem. Temporibus cumque officia hic ab quod minima rem fuga.
</p>
</div>
</div>
<div class="poster" id="poster-details">
<img src="./img/profile-1.png" alt="">
<div class="details" id="user-details">
<ul>
<li>Name</li>
<li>Region</li>
<li>Contact</li>
</ul>
<ul id="values">
<li>Sean Patterson</li>
<li>Gauteng</li>
<li>+2779 415 7439</li>
</ul>
<div class="form-control" id="form-control">
<form action="./message.html" method="post" class="form" id="message-form">
<input class="form-group" type="text" name="name" id="name" placeholder="Your name" required>
<input class="form-group" type="email" name="email" id="email" placeholder="Your email address" required>
<textarea name="message" id="message" cols="18" rows="5" placeholder="Your message..." required></textarea>
<input class="form-group" type="tel" name="tel" id="tel" placeholder="Phone no. (Optional)">
<button type="submit" class="form-group" value="Send" name="submit" id="submit">Send message <i class="fa fa-paper-plane"></i> </button>
</form>
</div>
</div>
</div>
</div>
</div>
</main>
<footer>
<a href="#"> <button type="submit" value"submit" class="btn btn-regular" id="back-to-top"> <i class="fa fa-chevron-up"></i> </button> </a>
</footer>
</div>
<script src="./form-data.js"></script>
<script src="./connect.js"></script>
<script defer src="./pagination.js"></script>
<script defer src="./data.js"></script>
<script defer src="./app.js"></script>
</body>
</html>