diff --git a/static/landingpage.html b/static/landingpage.html
index c91743899013c95405a401465c373d13e5e3233f..4d2c8d9a191475feb1e746f6a64f610fb4ac9c90 100644
--- a/static/landingpage.html
+++ b/static/landingpage.html
@@ -1,11 +1,54 @@
-<html>
-<head><link rel="stylesheet" href="landingstyle.css"></head>
-<header>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
+ <div class="container-fluid">
+ <ul class="navbar-nav">
+ <li class="nav-item">
+ <a class="nav-link" href="locations.html">Coworking locations</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="Manage_Coworking_Spaces.html">Manage locations</a>
+ </li>
+ </ul>
+ </div>
+ </nav>
<title>Tramshed Tech</title>
- <img src="logo.jpg"/><br><br><br><br>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
+ <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
+ <link rel="preconnect" href="https://fonts.googleapis.com">
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Sora:wght@800&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="landingstyle.css">
+</head>
+<header class="masthead bg-dark text-white text-left">
+ <div class="container-fluid">
+ <img id="logo" src="logo.png"/>
+ <h1 id="header">Tramshed Tech</h1>
+ </div>
</header>
<body>
- <img src="title.png"/>
- <button id= "ViewLocations" type="ViewLocations" href="locations.html">View Locations</button>
+ <img id="tramshed" src="tramshed.jpg">
+ <div class="bg-dark p-3">
+ <div id="buttons" class="flex-container">
+ <button onclick="window.location.href='locations.html';" type="button" class="btn btn-light">
+ <span class="spinner-grow spinner-grow-sm"></span>
+ View Locations
+ </button>
+ <br>
+ <div class="dropdown">
+ <button class="btn btn-light dropdown-toggle" type="button" id="dropdownMenubutton" data-bs-toggle="dropdown">Socials</button>
+ <ul class="dropdown-menu" id="dropdownmenu" aria-labelledby="dropdownMenubutton">
+ <li><button class="dropdown-item" type="button" onclick="window.location.href='https://www.linkedin.com/company/tramshed-tech';" target="_blank" rel="noopener" class="footer-social-media-icon"> <img class="no-border-radius" src="https://cdn.tramshedtech.co.uk/static/img/home/Linkedin%20Logo.svg" alt="LinkedIn"> LinkedIn</button></li>
+ <li><button class="dropdown-item" type="button" onclick="window.location.href='https://www.facebook.com/tramshedtech';" target="_blank" rel="noopener" class="footer-social-media-icon"> <img class="no-border-radius" src="https://cdn.tramshedtech.co.uk/static/img/home/Facebook%20Logo.svg" alt="Facebook"> Facebook</button></li>
+ <li><button class="dropdown-item" type="button" onclick="window.location.href='https://twitter.com/TramshedTech';" target="_blank" rel="noopener" class="footer-social-media-icon"> <img class="no-border-radius" src="https://cdn.tramshedtech.co.uk/static/img/home/Twitter%20Logo.svg" alt="Twitter"> Twitter</button></li>
+ <li><button class="dropdown-item" type="button" onclick="window.location.href='https://www.instagram.com/tramshedtech/?hl=en';" target="_blank" rel="noopener" class="footer-social-media-icon"> <img class="no-border-radius" src="https://cdn.tramshedtech.co.uk/static/img/home/Instagram%20Logo.svg" alt="Instagram"> Instagram</button></li>
+ </ul>
+ </div>
+ </div>
+ </div>
</body>
</html>
diff --git a/static/landingstyle.css b/static/landingstyle.css
index 496bb079cca6cccfe95dfac79cc0822052fca366..a63b29d5a4cab5686387807774ac244875f7baa7 100644
--- a/static/landingstyle.css
+++ b/static/landingstyle.css
@@ -8,26 +8,52 @@ header{
height: 75%;
}
-button{
- background-color: white;
- color: black;
- text-align: center;
- position: absolute;
- margin: inherit;
- display: inline-block;
- line-height: 20px;
+
+#logo{
width: 10%;
- height: 15%;
- font-size: 16px;
- border-radius: 12px;
- padding: 1px 10px;
- transform: translate(350%, 50%);
- font-family: monospace;
- font-style: oblique;
- font-weight: bolder;
+}
+
+
+button{
+ font-family: 'Sora', sans-serif;
cursor: pointer;
}
body{
- display: block;
+ background-color: #212529;
+ font-family: 'Sora', sans-serif;
+}
+
+.container-fluid{
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+ align-items: center;
+}
+#tramshed{
+ width: 45%;
+ height: 45%;
+ display: inline-block;
+ transform: translate(60%, 0%);
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ padding: 5px;
+}
+
+#buttons{
+ width: 25%;
+ height: 25%;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ margin-left: auto;
+ margin-right: auto;
+ transform: translate(-10%, 0%);
+}
+
+#dropdownmenu{
+ background-color: grey;
+ color: #212529;
+ text-align: end;
}
diff --git a/static/title.png b/static/title.png
deleted file mode 100644
index ecd6448502b63a65b44067ae8bb7b05b64cacc43..0000000000000000000000000000000000000000
Binary files a/static/title.png and /dev/null differ
diff --git a/static/tramshed.jpg b/static/tramshed.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..1924701c2bbdc9e71753db086605e4b2149a918b
Binary files /dev/null and b/static/tramshed.jpg differ