Merge pull request #1 from HerRA17/SPA

Spa implementation

CNAME

@@ -0,0 +1 @@
+hermann-rasch.com

Css/styles.css

@@ -9,7 +9,6 @@ body {
     font-weight: bold;
     font-size: 20px;
     line-height:30px;
-    margin-left: 15px;
 }
 
 h1 {
@@ -117,6 +116,7 @@ footer > p {
 
 .social-media {
     padding:10px 15px;
+    margin-bottom: 20px;
 }
 
 /* Index page */
@@ -127,8 +127,6 @@ footer > p {
     grid-template-columns: auto auto;
     grid-template-rows: auto;
     text-align: center;
-    background-color: #FFFFDE;
-    color: black !important;
 }
 
 .profile-text {
@@ -154,39 +152,39 @@ footer > p {
     flex-flow: row wrap;
     align-content: center;
     justify-content: center;
-    color: #007e77;
+    color: lightgrey;
     text-decoration: none;
     margin-bottom: 5px;
 }
 
 /* About Page */
 
-.table {
-margin: auto;
+#container-about-me{
+    background-color: white;
+    color: #007e77;
+    padding: 5px 50px;
 }
 
- thead , tbody , th , td  {
-    border: 3px dotted white;
-    padding: 8px;
-    width: 40%;
-}
 
-.about-me-info {
+.about-me-info, .more-about-me {
     text-align: center;
     margin: 20px 12px;
     padding: 16px;
+    width: 80vw;
+    height: auto;
 
 }
 
 .about-me_pic {
-    border-radius: 30%;
-    width: 250px;
-    height: auto;
+    border-radius: 20%;
+    width: 70vw;
+    height: 75vw;
 }
 
 .my-skills {
     text-align: center;
 }
+
 .container-skills {
     display: grid;
     grid-template-columns: auto ;
@@ -211,113 +209,59 @@ margin: auto;
     grid-template-rows: auto auto auto auto;
     align-items: center;
     justify-content: center;
+    margin: 20px 0px;
 }
 
 .techstack {
 margin: 10px 0px;
 }
 
- #img-Mexico {
-    display: flex;
-    margin: 20px auto;
-    width: 60%;
-    height: auto;
-    position: relative;
-}
-
-.img-Mexico {
-   min-width: 90%;
-   place-content: center;
-   animation: mexico 6s infinite ;
-   margin: 0 auto;
-}
 
 /* Contact Page */
-#form{
-    display: grid;
-    grid-template-columns: auto;
-    grid-template-rows: auto auto auto auto auto auto;
-    justify-content: center;
-}
-
-.email-form {
-    margin: 10px 0px;
-}
-
-#visitors-message, #visitors-email , #visitors-name {
-    background-color: transparent;
-    color:white;
-    font-weight: bold;
-    border: 2px solid white;
+.contact-info{
     display: flex;
+    flex-direction: row;
     align-items: center;
     justify-content: center;
-    flex-flow: row wrap;
-}
-
-#visitors-message-button {
-    margin: 10px 0px;
-    background-color: whitesmoke;
-    color: #007e77;
-    border: 2px solid;
-    font-weight: bold;
-    border-radius: 5px;
-    padding: 5px;
-}
-
-#visitors-message-button:hover, #visitors-message-button:focus {
-    opacity: .7;
-    color:lightgray;
-    border-color: lightgray;
-    cursor:pointer;
-}
-
-::placeholder {
-    color: white;
-}
-
-.mail-to {
-    text-decoration: none;
-}
-
-.contact-info{
-    display: flex;
-    flex: auto;
-}
-
-.contact-details{
-    margin: 0px 10px;
+    margin: 30px 0px;
 }
 
 #email-icon{
     width: 50px;
     height: 50px;
+    margin: 0px 20px;
 }
 
 #phone-icon {
     color: lightgray;
     width: 50px;
     height: 50px;
+    margin: 0px 20px;
 }
 
 /* Work Page */
  .section-header {
     text-align:center;
+    font-size: 3rem;
+    font-weight: bold;
+    margin-top: 10%;
+    margin-bottom: 10%;
  }
 
  .grid-container {
-    width: 90vw;
+    width: 95vw;
     gap: 2em;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: 1fr 1fr;
-    margin-right: 25px;
-    margin-left: 25px;
+    display:flex;
+    flex-flow: row wrap;
+    justify-content: center;
+    align-content: center;
+    margin:5px;
     justify-content:center ;
 }
 
  .grid-item {
     border: white radius 10px;
+    border-radius: 2.5%;
     border-style: dashed;
     border-width: 1px;
     color:white;
@@ -333,9 +277,11 @@ margin: 10px 0px;
 
 .project-p{
     align-self: center;
+    width: 80vw;
 }
  #work-img{
     width: 350px;
+    border-radius: 2%;
     height: auto;
     align-self: center;
  }
@@ -470,7 +416,7 @@ body{
 .check-code {
     display:inline-block;
     align-content: center;
-    color: #007e77;
+    color: lightgray;
 }
 
 /* About me*/
@@ -481,15 +427,16 @@ body{
     position: relative;
 }
 .about-me-info{
-    width: 80%;
+    width: 100%;
     align-items: center;
     text-align: center;
     justify-content: center;
 }
 .about-me_pic {
-    border-radius: 50%;
+    border-radius: 20%;
     width: 250px;
     height: auto;
+    padding: 5px 20px;
 }
 .container-skills{
     display: grid;
@@ -508,6 +455,18 @@ body{
     justify-content: center;
 }   
 
+/* Contact */
+.contact-info {
+    display: flex;
+    flex: auto;
+    flex-direction: column;
+}
+#email-icon {
+    margin: 10px 0px;
+}
+.contact-details{
+    margin: 10px 0px;
+}
 
 /* Work page*/
 .grid-container {
@@ -525,18 +484,6 @@ body{
     align-content: center;
     justify-content: center;
 }
-/* Contact */
-.contact-info {
-    display: flex;
-    flex: auto;
-    flex-direction: column;
-}
-#email-icon {
-    margin: 10px 0px;
-}
-.contact-details{
-    margin: 10px 0px;
-}
 
 }
 
@@ -633,27 +580,27 @@ font-size: 30px;
 .check-code {
     display:inline-block;
     align-content: center;
-    color: #007e77;
+    color: lightgray;
 }
 
 /* About me*/
-.table {
-    margin: auto;
-    position: center;
-}
 
-#img-Mexico {
-    display: flex;
-    margin: 0px auto;
-    min-width: 50%;
-    position: relative;
+.container-skills{
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+    margin: 8px;
+    padding: 12px;
 }
- .img-Mexico {
-    min-width: 100%;
-    min-height: auto;
-    display:grid;
-    place-content: center;
-} 
+
+.table-grid{
+    display: grid;
+    gap: 20px 20px;
+    grid-template-columns: auto auto auto;
+    grid-template-rows: auto auto auto auto auto auto auto auto auto auto;
+    align-items: center;
+    justify-content: center;
+}   
 
 /* Work page*/
 .grid-container {
@@ -672,16 +619,4 @@ font-size: 30px;
     justify-content: center;
 }
 
-}
-
-
-/* @media screen and (max-width: 2000px) {
-    body {
-        font-size: 30px;
-        line-height: 25px;
-    }
-    .navigation-list li {
-        font-size: 2rem;
-    } */
-/* About me */
-/* Work */
+}

case-studies/case-study_meet.html

@@ -27,7 +27,7 @@ <h2>Contact:</h2>
         <p class="p-CS">[email protected]</p> 
         <p class="p-CS">+49 1520 9504022 </p>
         <p class="p-CS">https://github.com/HerRA17</p>
-        <a href="../html-pages/work.html" class="a-CS">Return</a>
+        <a href="../index.html" class="a-CS">Return</a>
     </div>
 </body>
 </html>