-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
135 lines (130 loc) · 7.42 KB
/
index.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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Instagram Photo Feed with Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="https://kit.fontawesome.com/6822fb3c96.js" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid p-0">
<nav class="navbar bg-light">
<div class="container-fluid d-flex">
<a class="navbar-brand ms-5 me-auto" href="#">
<i class="fa-brands fa-instagram fa-lg"></i>
<span class="fw-bold">Instagram</span>
</a>
<button type="button" class="btn btn-success me-4" data-bs-toggle="modal" data-bs-target="#exampleModal">Create a new post</button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Create a new post</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body mb-3">
<form>
<div class="mb-4">
<label for="message-text" class="col-form-label">Caption:</label>
<textarea class="form-control" id="message-text" placeholder="Add the caption of your post here"></textarea>
</div>
</form>
<a href="#" class="text-reset text-decoration-none border rounded bg-light p-2 me-1"><i class="fa-solid fa-camera fa-fw"></i></a>
<a href="#" class="text-reset text-decoration-none border rounded bg-light p-2"><i class="fa-solid fa-location-dot fa-fw"></i></a>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-success">Publish</button>
</div>
</div>
</div>
</div>
<div class="dropdown navbar pe-5">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fa-solid fa-gear"></i>
</a>
<ul class="dropdown-menu dropdown-menu-end me-5">
<li><a class="dropdown-item" href="#">Profile</a></li>
<li><a class="dropdown-item" href="#">Accesibility</a></li>
<li><a class="dropdown-item" href="#">Privacy and Data</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item text-danger" href="#">Log out</a></li>
</ul>
</div>
</div>
</nav>
</div>
<div class="container-fluid">
<nav>
<div class="nav nav-tabs d-flex justify-content-center" id="nav-tab" role="tablist">
<button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true"><i class="fa-solid fa-table-cells"></i></button>
<button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false"><i class="fa-solid fa-square"></i></button>
</div>
</nav>
<div class="tab-content mt-1" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab" tabindex="0">
<div class="row mb-2">
<img class="col-4 img-fluid pe-0" src="assets/dog in car.jpg">
<img class="col-4 img-fluid pe-0" src="assets/students in the park.jpg">
<img class="col-4 img-fluid" src="assets/greece beach.jpg">
</div>
<div class="row mb-2">
<img class="col-4 img-fluid pe-0" src="assets/woman laughing.jpg">
<img class="col-4 img-fluid pe-0" src="assets/torre eiffel.jpeg">
<img class="col-4 img-fluid" src="assets/messi chilena.jpg">
</div>
<div class="row mb-2">
<img class="col-4 img-fluid pe-0" src="assets/family in the park.jpg">
<img class="col-4 img-fluid pe-0" src="assets/coding.jpg">
<img class="col-4 img-fluid" src="assets/students in the classroom.jpg">
</div>
</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">
<div class="row justify-content-md-center">
<div class="card col-5 p-0 mb-4">
<div class="card-body d-flex justify-content-between pb-0">
<h5 class="card-title">My Crazy dog Spark!</h5>
<p>08/26</p>
</div>
<img class="img-fluid" src="assets/dog in car.jpg">
<div class="card-body">
<h6>204 Likes</h6>
<p class="card-text">This is an example of a very good photo that you can post on instagram</p>
</div>
</div>
</div>
<div class="row justify-content-md-center">
<div class="card col-5 p-0 mb-4">
<div class="card-body d-flex justify-content-between pb-0">
<h5 class="card-title">The greatness of Greece</h5>
<p>04/09</p>
</div>
<img class="img-fluid" src="assets/greece beach.jpg">
<div class="card-body">
<h6>26985 Likes</h6>
<p class="card-text">This is an example of a very good photo that you can post on instagram</p>
</div>
</div>
</div>
<div class="row justify-content-md-center">
<div class="card col-5 p-0 mb-4">
<div class="card-body d-flex justify-content-between pb-0">
<h5 class="card-title">Amazing GOAL by Messi!</h5>
<p>06/10</p>
</div>
<img class="img-fluid" src="assets/messi chilena.jpg">
<div class="card-body">
<h6>204 Likes</h6>
<p class="card-text">This is an example of a very good photo that you can post on instagram</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>