assembler-institute · joejoyjoy · Dec 22, 2022 · Dec 22, 2022 · Dec 23, 2022 · Dec 23, 2022
diff --git a/README.md b/README.md
@@ -21,6 +21,14 @@
 - Learn how to use the $_SERVER
 - Understand what a server-side language is and what it is used for
 
+## Preview
+
+This is a screenshot of the Log In page of the project.
+
+<p>
+  <img alt="Log In page" src="php_server_environment/images/logIn.png" />
+</p>
+
 ## Repository
 
 First of all you must fork this project into your GitHub account.

diff --git a/php_server_environment/close_session.php b/php_server_environment/close_session.php
@@ -0,0 +1,24 @@
+<?php
+session_start();
+if (!isset($_SESSION["email"]))
+?>
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>PHP Server Environment | Joe Alt</title>
+</head>
+
+<body>
+    <?php
+session_unset();
+session_destroy();
+header("location: index.php?succeed=logout");
+    ?>
+</body>
+
+</html>
diff --git a/php_server_environment/css/index.css b/php_server_environment/css/index.css
@@ -0,0 +1,156 @@
+html {
+    background-color: #f6f7fc;
+}
+
+* {
+    font-family: 'Roboto', sans-serif;
+    font-weight: 300;
+    color: #212529;
+}
+
+h1 {
+    font-size: 28px;
+    margin: 0;
+}
+
+p {
+    color: #b3b3b3;
+    margin-bottom: 40px;
+}
+
+body {
+    display: grid;
+    grid-template-columns: auto 350px;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
+
+.logInFlex {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    max-height: 100vh;
+}
+
+.logInContainer {
+    margin: 0 auto;
+    max-width: 500px;
+}
+
+.background-image {
+    height: auto;
+    width: auto;
+    overflow: hidden;
+}
+
+.background-image img {
+    margin: 0px 0px 0px -740px;
+}
+
+.logInLabel {
+    display: block;
+    font-size: 16px;
+    font-weight: 400;
+    margin-bottom: 8px;
+}
+
+input {
+    padding: 15px 12px;
+    border: none !important;
+    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
+    border-radius: 4px;
+    font-size: 19px;
+    margin-bottom: 20px;
+    width: 100%;
+}
+
+input:focus {
+    outline: none;
+}
+
+input[type=submit] {
+    display: inline-block;
+    font-weight: 400;
+    text-align: center;
+    vertical-align: middle;
+    padding: 0.375rem 0.75rem;
+    font-size: 1rem;
+    line-height: 1.5;
+    border-radius: 0.25rem;
+    height: 54px;
+    padding-left: 30px;
+    padding-right: 30px;
+    color: #fff;
+    background-color: #fb771a;
+    width: auto;
+}
+
+.hide {
+    display: none;
+}
+
+.show {
+    display: flex;
+    padding: 15px 12px;
+    border: none !important;
+    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
+    border-radius: 4px;
+    margin-bottom: 20px;
+    width: 100%;
+    background-color: #fb771a;
+}
+
+.show span {
+    color: #fff;
+}
+
+
+/***** Responsive Media Query *****/
+@media screen and (max-width: 780px) {
+    .logInContainer {
+        padding: 15px;
+        margin: 15px;
+    }
+
+    input {
+        margin-right: 50px;
+    }
+}
+
+@media screen and (max-width: 950px) {
+    body {
+        overflow: auto;
+        overflow-x: hidden;
+        grid-template-columns: auto;
+        grid-template-areas:
+            "BGimg"
+            "logIn";
+    }
+
+    .logInFlex {
+        grid-area: logIn;
+        margin-top: 60px;
+    }
+
+    .background-image {
+        grid-area: BGimg;
+        height: 230px;
+        width: 110%;
+    }
+
+    .background-image img {
+        margin: -150px 0px 0px -460px;
+    }
+}
+
+@media screen and (min-width: 1400px) {
+    body {
+        grid-template-columns: 2fr 1fr;
+    }
+
+    .background-image img {
+        margin: 0px 0px 0px -600px;
+    }
+}