INIT

style/main.css

@@ -0,0 +1,101 @@
+* {
+    font-family: Arial, serif;
+    color: #002b36;
+}
+
+div {
+    background-color: #eee8d5;
+}
+
+p {
+    padding: 20px 20px;
+}
+
+#main-container h1, h2{
+    text-align: center;
+    margin: auto;
+    padding-top: 12px;
+}
+
+.clearfix::after {
+    content: "";
+    clear: both;
+    display: block;
+}
+
+.content {
+    padding: 0 25px;
+}
+
+ul.menu {
+    padding-inline: 20px;
+    #display: block;
+}
+
+.menu li {
+    list-style-type: none;
+    text-align: center;
+
+    #display: inline-block;
+
+    padding: 8px;
+    margin-bottom: 8px;
+    background-color: #586e75;
+    color: #eee8d5;
+}
+
+.menu li:hover {
+    background-color: #93a1a1;
+
+}
+
+.menu li a {
+    display: block;
+    color: inherit;
+    text-decoration: none;
+    height: 100%;
+    width: 100%;
+}
+
+#main-container {
+    width: 800px;
+    #height: 90%;
+    margin-left: auto;
+    margin-right: auto;
+    #background-color: aqua;
+    clear: both;
+    #box-shadow: 1px 1px 10px 5px #eee8d5;
+
+}
+
+#head-container{
+    background-color: #586e75;
+    width: 100%;
+    height: 100px;
+    clear: both;
+}
+
+#wrapper-container {
+    height: 600px;
+}
+
+#left-container{
+    #background-color: blueviolet;
+    height: 100%;
+    width: 25%;
+    float: left;
+}
+
+#right-container{
+    #background-color: brown;
+    height: 100%;
+    width: 75%;
+    float: right;
+}
+
+#footer-container{
+    background-color: #586e75;
+    padding-top: 20px;
+    height: 50px;
+    width: 100%;
+}