start new version of website

2023-05-18 16:38:40 +02:00
parent 951853b105
commit ccf1c67837
36 changed files with 365 additions and 0 deletions
--- a/oldVersion/css/style.css
+++ b/oldVersion/css/style.css
@@ -0,0 +1,176 @@
+html, body {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    font-family: sans-serif;
+    background-color: rgb(122, 188, 255);
+    font-size: calc(15pt + 0.4vw);
+}
+
+/* 
+    Centered box with slight padding & centering the content
+*/
+.centered {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    width: 90%;
+    margin: 3%;
+    margin-top: 0%;
+    padding: 2%;
+    background-color: rgba(223, 223, 223, 0.8);
+    border-radius: 50px;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+}
+
+/* 
+    Title background & title
+*/
+
+.heading-wrapper {
+    width: 90%;
+    margin: 3%;
+    margin-bottom: 0%;
+    padding: 2%;
+    background-color: rgba(0, 0, 149, 1);
+    border-top-left-radius: 50px;
+    border-top-right-radius: 50px;
+    color: white;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.heading {
+    font-size: 3rem;
+}
+
+
+/* 
+    Centered text
+*/
+
+.text-centered {
+    text-align: center;
+}
+
+
+/* 
+    Buttons
+*/
+
+.button {
+    cursor: pointer;
+    display: block;
+    text-decoration: none;
+    padding: 2%;
+    background-color: rgba(0, 0, 149, 1);
+    width: fit-content;
+    color: white;
+    font-weight: bold;
+    border-radius: 50px;
+    transition: 1.5s;
+}
+
+.button:hover {
+    border-radius: 5px;
+    background-color: rgb(0, 0, 31);
+    transition: 0.2s;
+}
+
+
+.code-background {
+    background-image: url( /assets/pageStyle.png );
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+    border-radius: 20px;
+}
+
+.half-height {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    height: 50vh;
+    width: 100%;
+}
+
+.light-color {
+    background-color: rgba(34, 34, 34, 0.9);
+    color: white;
+    padding: 3%;
+    width: 70%;
+}
+
+.wrap-image-right, .wrap-image-left {
+    border-radius: 20px;
+    margin-top: 3%;
+    width: 100%;
+    height: auto;
+}
+
+.wrap-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+}
+
+.lightly-written {
+    font-size: 0.7rem;
+    color: rgb(97, 97, 97);
+    margin-top: 7%;
+    font-style: italic;
+}
+
+/*
+    Set properties for footer & nav menu
+*/
+#nav {
+    height: 15vh;
+    position: relative;
+    z-index: 1;
+}
+
+#footer {
+    height: 80vh;
+}
+
+
+/* 
+    Media queries to optimise for mobile
+*/
+@media only screen and (min-width: 999px) {
+    .heading-wrapper, .centered {
+        width: 70%;
+        padding: 5%;
+        padding-top: 2%;
+        padding-bottom: 2%;
+        margin-left: 10%;
+    }
+
+    .wrap-image-right {
+        float: right;
+        width: 40%;
+        margin: 2%;
+    }
+
+    .wrap-image-left {
+        float: left;
+        width: 30%;
+        margin: 2%;
+    }
+
+    .wrap-container {
+        display: block;
+    }
+    #footer {
+        height: 40vh;
+        width: 100%;
+    }
+}