Merge branch 'main' of github.com:toddehalexander/Imgur-Clone
yup
This commit is contained in:
benninghoven
commit
a58f851156
6 changed files with 147 additions and 6 deletions
31
frontend/css/login.css
Normal file
31
frontend/css/login.css
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
/* Bordered form */
|
||||
form {
|
||||
border: 3px solid #f1f1f1;
|
||||
}
|
||||
|
||||
input[type=text], input[type=password] {
|
||||
width: 100%;
|
||||
padding: 12px 20px;
|
||||
margin: 8px 0;
|
||||
display: inline-block;
|
||||
border: 1px solid #ccc;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: #04AA6D;
|
||||
color: white;
|
||||
padding: 14px 20px;
|
||||
margin: 8px 0;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 16px;
|
||||
}
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
|
@ -7,6 +8,7 @@
|
|||
<link rel="stylesheet" href="../css/styles.css">
|
||||
<link rel="stylesheet" href="../css/gallery.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Navigation Bar -->
|
||||
<nav>
|
||||
|
|
@ -15,18 +17,23 @@
|
|||
<ul class="nav-menu">
|
||||
<li><a href="../index.html">Home</a></li>
|
||||
<li><a href="gallery.html" class="active">Gallery</a></li>
|
||||
<li><a href="user_gallery.html">Uploads</a></li>
|
||||
<li><a href="../login/login.html">Sign In</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- Gallery Page -->
|
||||
<div class="container">
|
||||
<h2 class="heading-text"><span>Image</span> Gallery</h2> <ul class="image-gallery">
|
||||
<h2 class="heading-text"><span>Image</span> Gallery</h2>
|
||||
<ul class="image-gallery">
|
||||
<li>
|
||||
<img src="https://source.unsplash.com/VWcPlbHglYc" alt="" />
|
||||
<div class="overlay"><span>Image title</span></div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExc3FzdTEyZWJ0aXlicmZvMzlnM28ycWpndHBlNmEydDd3MjdmdXFpeiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/EZICHGrSD5QEFCxMiC/giphy.gif" alt="" />
|
||||
<img
|
||||
src="https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExc3FzdTEyZWJ0aXlicmZvMzlnM28ycWpndHBlNmEydDd3MjdmdXFpeiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/EZICHGrSD5QEFCxMiC/giphy.gif"
|
||||
alt="" />
|
||||
<div class="overlay"><span>Image title</span></div>
|
||||
</li>
|
||||
<li>
|
||||
|
|
@ -71,23 +78,24 @@
|
|||
<div class="overlay"><span>Image title</span></div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://via.placeholder.com/300x300" alt="Placeholder Image">
|
||||
<img src="https://via.placeholder.com/300x300" alt="Placeholder Image">
|
||||
<div class="overlay"><span>Image title</span></div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://via.placeholder.com/300x600" alt="Placeholder Image">
|
||||
<img src="https://via.placeholder.com/300x600" alt="Placeholder Image">
|
||||
<div class="overlay"><span>Image title</span></div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://via.placeholder.com/200x600" alt="Placeholder Image">
|
||||
<img src="https://via.placeholder.com/200x600" alt="Placeholder Image">
|
||||
<div class="overlay"><span>Image title</span></div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://via.placeholder.com/600x200" alt="Placeholder Image">
|
||||
<img src="https://via.placeholder.com/600x200" alt="Placeholder Image">
|
||||
<div class="overlay"><span>Image title</span></div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<script src="gallery.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
56
frontend/gallery/user_gallery.html
Normal file
56
frontend/gallery/user_gallery.html
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>User Image Gallery</title>
|
||||
<link rel="stylesheet" href="../css/styles.css">
|
||||
<link rel="stylesheet" href="../css/gallery.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Navigation Bar -->
|
||||
<nav>
|
||||
<div class="nav-container">
|
||||
<a href="../index.html" class="nav-logo">Image Upload</a>
|
||||
<ul class="nav-menu">
|
||||
<li><a href="../index.html">Home</a></li>
|
||||
<li><a href="gallery.html">Gallery</a></li>
|
||||
<li><a href="user_gallery.html" class="active">Uploads</a></li>
|
||||
<li><a href="../login/login.html">Sign In</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<div>Please <a href="../login/login.html">sign in</a> to view your images.</div>
|
||||
<!-- Display gallery page if signed in -->
|
||||
<!-- <div class="container">
|
||||
<h2 class="heading-text"><span>User</span> Gallery</h2>
|
||||
<ul class="image-gallery">
|
||||
<li>
|
||||
<img src="https://source.unsplash.com/VWcPlbHglYc" alt="" />
|
||||
<div class="overlay"><span>Image title</span></div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExc3FzdTEyZWJ0aXlicmZvMzlnM28ycWpndHBlNmEydDd3MjdmdXFpeiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/EZICHGrSD5QEFCxMiC/giphy.gif"
|
||||
alt="" />
|
||||
<div class="overlay"><span>Image title</span></div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://source.unsplash.com/e6FMMambeO4" alt="" />
|
||||
<div class="overlay"><span>Image title</span></div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://source.unsplash.com/klCiPmzUw0Y" alt="" />
|
||||
<div class="overlay"><span>Image title</span></div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://source.unsplash.com/IdNOTjPeHrE" alt="" />
|
||||
<div class="overlay"><span>Image title</span></div>
|
||||
</li>
|
||||
</ul>
|
||||
</div> -->
|
||||
<script src="user_gallery.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,11 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Drag and Drop Image Upload</title>
|
||||
<link rel="stylesheet" href="css/styles.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Navigation Bar -->
|
||||
<nav>
|
||||
|
|
@ -14,6 +16,8 @@
|
|||
<ul class="nav-menu">
|
||||
<li><a href="index.html" class="active">Home</a></li>
|
||||
<li><a href="gallery/gallery.html">Gallery</a></li>
|
||||
<li><a href="gallery/user_gallery.html">Uploads</a></li>
|
||||
<li><a href="login/login.html">Sign In</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
|
@ -30,4 +34,5 @@
|
|||
|
||||
<script src="js/script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
0
frontend/js/user_gallery.js
Normal file
0
frontend/js/user_gallery.js
Normal file
41
frontend/login/login.html
Normal file
41
frontend/login/login.html
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Login Page</title>
|
||||
<link rel="stylesheet" href="../css/styles.css">
|
||||
<link rel="stylesheet" href="../css/login.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Navigation Bar -->
|
||||
<nav>
|
||||
<div class="nav-container">
|
||||
<a href="../index.html" class="nav-logo">Image Upload</a>
|
||||
<ul class="nav-menu">
|
||||
<li><a href="../index.html">Home</a></li>
|
||||
<li><a href="../gallery/gallery.html">Gallery</a></li>
|
||||
<li><a href="../gallery/user_gallery.html">Uploads</a></li>
|
||||
<li><a href="login.html" class="active">Sign In</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Login Form -->
|
||||
<form action="" method="post">
|
||||
<div class="container">
|
||||
<label for="username"><b>Username</b></label>
|
||||
<input type="text" placeholder="Enter Username" name="username" required>
|
||||
|
||||
<label for="password"><b>Password</b></label>
|
||||
<input type="password" placeholder="Enter Password" name="password" required>
|
||||
|
||||
<button type="submit">Login</button>
|
||||
<label><input type="checkbox" checked="checked" name="remember"> Remember me</label>
|
||||
</div>
|
||||
</form>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in a new issue