diff --git a/copy of website layout test.html b/copy of website layout test.html
new file mode 100644
index 0000000..ecfe91b
--- /dev/null
+++ b/copy of website layout test.html	
@@ -0,0 +1,225 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: Arial;
+  padding: 10px;
+  background: #f1f1f1;
+}
+
+/* Header/Blog Title */
+.header {
+  padding: 30px;
+  text-align: center;
+  background: lightgrey;
+  font-style: oblique;
+}
+
+.header h1 {
+  font-size: 50px;
+}
+
+/* Style the top navigation bar */
+.topnav {
+  overflow: hidden;
+  background-color: #333;
+  position: sticky;
+  position: -webkit-sticky; /* Chrome */
+}
+
+/* Style the topnav links */
+.topnav a {
+  float: left;
+  display: block;
+  color: #f2f2f2;
+  text-align: center;
+  padding: 14px 16px;
+  text-decoration: none;
+}
+
+/* Change color on hover */
+.topnav a:hover {
+  background-color: #ddd;
+  color: black;
+}
+
+/* Create two unequal columns that floats next to each other */
+/* Left column */
+.leftcolumn {   
+  float: left;
+  width: 75%;
+}
+
+/* Right column */
+.rightcolumn {
+  float: left;
+  width: 25%;
+  background-color: #f1f1f1;
+  padding-left: 20px;
+}
+
+/* Fake image */
+.fakeimg {
+  background-color: #aaa;
+  width: 100%;
+  padding: 20px;
+}
+
+/* Add a card effect for articles */
+.card {
+  background-color: white;
+  padding: 20px;
+  margin-top: 20px;
+}
+
+/* Clear floats after the columns */
+.row:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+/* Footer */
+.footer {
+  padding: 20px;
+  text-align: center;
+  background: #ddd;
+  margin-top: 20px;
+}
+
+/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
+@media screen and (max-width: 800px) {
+  .leftcolumn, .rightcolumn {   
+    width: 100%;
+    padding: 0;
+  }
+}
+
+/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
+@media screen and (max-width: 400px) {
+  .topnav a {
+    float: none;
+    width: 100%;
+  }
+}
+</style>
+</head>
+<body>
+
+<div class="header">
+  <h1>GEOPOLITICO</h1>
+  <p>Political & Economic Simulation</p>
+</div>
+<style>
+    body {
+        font-size: 18px;
+    }
+    
+    ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+        overflow: hidden;
+        position: -webkit-sticky; /* Chrome */
+        position: sticky;
+        top: 0;
+        background-color: black;
+    }
+    
+    li {
+        float: left;
+    }
+    
+    li a, .dropbtn {
+        display: block;
+        color: white;
+        text-align: center;
+        padding: 14px 16px;
+        text-decoration: none;
+        width: fit-content;
+    }
+    
+    li a:hover, .dropbtn:hover .dropbtn {
+        background-color: #111;
+    }
+    
+    .active, li.dropdown {
+        background-color: limegreen;
+    }
+    
+    .dropdown-content {
+        display: none;
+        position: absolute;
+        background-color: lightgreen;
+        min-width: 160px;
+        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+        z-index: 1;
+    }
+    
+    .dropdown-content a:hover {background-color: limegreen;}
+    
+    .dropdown:hover .dropdown-content{
+        display: block;
+    }
+    </style>
+    </head>
+    <body>
+    
+        <ul>
+            <li><a class="active" href="#home">Home</a></li>
+            <li><a class="inactive" href="#Peter Griffin">Peter Griffin</a></li>
+            <li><a href="#Actions">Actions</a></li>
+            <li><a href="#USA">USA</a></li>
+            <li><a href="#Parties">Parties</a></li>
+            <li><a href="#Messages">Messages</a></li>
+            <li><a href="#World Map">World Map</a></li>
+    
+        </ul>
+    </body>
+<div class="row">
+  <div class="leftcolumn">
+    <div class="card">
+      <h2>Game Launch</h2>
+      <h5>Title description, 2 November 2024</h5>
+      <div class="fakeimg" style="height:200px;">Image</div>
+      <p>Game is in development, Estimated time to complete: 5 years</p>
+      <p>Geopolitico will be a unique geopolitical and economical game where players can roleplay as certain historical or non historical politicians making their way through the political sphere of influence and power.</p>
+    </div>
+    <div class="card">
+      <h2>TITLE HEADING</h2>
+      <h5>Title description, Sep 2, 2017</h5>
+      <div class="fakeimg" style="height:200px;">Image</div>
+      <p>Some text..</p>
+      <p>...</p>
+    </div>
+  </div>
+  <div class="rightcolumn">
+    <div class="card">
+      <h2>Ads</h2>
+      <div class="fakeimg" style="height:100px;">Image</div>
+      <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
+    </div>
+    <div class="card">
+      <h3>Trending News</h3>
+      <div class="fakeimg"><p>Image</p></div>
+      <div class="fakeimg"><p>Image</p></div>
+      <div class="fakeimg"><p>Image</p></div>
+    </div>
+    <div class="card">
+      <h3>Follow Me</h3>
+      <p>Some text..</p>
+    </div>
+  </div>
+</div>
+
+<div class="footer">
+  <h2>Footer</h2>
+</div>
+
+</body>
+</html>
\ No newline at end of file
