improved about who am i section

autumn-skylight · Aug 4, 2023 · 23e0345 · 23e0345
1 parent ba25e6f
commit 23e0345
Show file tree

Hide file tree

Showing 4 changed files with 155 additions and 183 deletions.
diff --git a/about/about.html b/about/about.html
@@ -38,17 +38,18 @@
 <h1 class="about_h1"> About Me</h1>
 <section class="about_about_section">
   <h1 class="about_about_h1"> Who am I</h1>
-<div class="about_container">
-    <div class="about_image">
-      <img src="../assets/images/home_pics/IMG_7063.JPG">
-    </div>
-    <div class="about_about_text">
-      <p>Hello welcome, my name is Hannah, I am a 22 year old transgender female from andover.
+<div class="holder">
+  <div class="box-set">
+    <div class="box-set__knight"><img class="box-set__knight-image" src="https://dev.hannahcodes.co.uk/assets/images/home_pics/IMG_7063.JPG" alt="knight icon" /></div>
+    <div class="box-set__header">
+        <span>Hello welcome, my name is Hannah, I am a 22 year old transgender female from andover.
         I am a carer who's been caring for a few years now,
    also I am a web developer who's been learning to code for over 2 year now, 
-   and I am an ex Youtuber who used to run a channel about gaming </p>
+   and I am an ex Youtuber who used to run a channel about gaming</span>
+      </h1>
     </div>
   </div>
+</div>
 </section>
 <br>
 <section class="about_hobbies_section">

diff --git a/assets/css/main.css b/assets/css/main.css
@@ -657,126 +657,108 @@ nav .project_active {
   }
 }
 
-.about_container {
+.holder {
+  width: 900px;
   display: flex;
-  justify-content: center;
-  margin: auto;
-  text-align: center;
-  max-width: 90%;
+  margin: 0 auto;
 }
-@media screen and (min-width: 1300px) {
-  .about_container {
-    margin-right: 10em;
-    margin-left: 10em;
-    max-width: 100%;
-  }
+
+.box-set__knight {
+  width: 250px;
+  display: flex;
+  padding: 0 20px 0 0;
+  float: left;
 }
-@media screen and (max-width: 800px) {
-  .about_container {
+@media screen and (max-width: 850px) {
+  .box-set__knight {
     display: block;
+    float: none;
+    margin-left: auto;
+    margin-right: auto;
+    margin-left: 13%;
   }
 }
-.about_container img {
-  max-width: 100%;
-}
-@media screen and (min-width: 1300px) {
-  .about_container img {
-    margin-left: 5em;
-    width: 100%;
+@media screen and (max-width: 550px) {
+  .box-set__knight {
+    display: block;
+    float: none;
+    margin-left: auto;
+    margin-right: auto;
+    margin-left: 13%;
   }
 }
-@media screen and (min-width: 800px) {
-  .about_container img {
-    margin-left: 3em;
+
+.box-set__knight-image {
+  width: 100%;
+  padding-bottom: 1em;
+}
+@media screen and (max-width: 850px) {
+  .box-set__knight-image {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    width: 70%;
   }
 }
-@media screen and (max-width: 800px) {
-  .about_container img {
+@media screen and (max-width: 550px) {
+  .box-set__knight-image {
     display: block;
-    width: 50%;
     margin-left: auto;
     margin-right: auto;
-    margin: auto;
-    align-items: center;
+    width: 70%;
   }
 }
-.about_container .about_image {
-  flex-basis: 60%;
-  padding-top: 1.5em;
-  padding-left: 1.8em;
-  margin-left: 10em;
-  padding-bottom: 1em;
+
+.box-set__header {
+  display: flex;
+  color: var(--light-nav-text-colour);
+  padding: 12px 0 0;
 }
-@media screen and (min-width: 1300px) {
-  .about_container .about_image {
-    margin-left: 0em;
-    max-width: 60%;
-    max-height: 50%;
-    flex-basis: 40%;
+@media screen and (max-width: 850px) {
+  .box-set__header {
+    display: block;
+    float: left;
+    margin-left: 5%;
+    margin-right: 30%;
+    font-size: 0.95em;
   }
 }
-@media screen and (min-width: 800px) {
-  .about_container .about_image {
-    margin-left: 3em;
-    margin-right: 2.5em;
+@media screen and (max-width: 550px) {
+  .box-set__header {
+    display: block;
+    float: left;
+    margin-left: 3%;
+    margin-right: 50%;
+    font-size: 0.95em;
   }
 }
-@media screen and (max-width: 800px) {
-  .about_container .about_image {
-    padding-left: 2em;
-    padding-right: 2em;
-    margin: auto;
-    align-items: center;
+@media (prefers-color-scheme: dark) {
+  .box-set__header {
+    color: var(--nav-text-colour);
   }
 }
 
-.about_about_text {
+.box-set__header h1 span {
   font-size: 1.2em;
-  padding-left: 40px;
-  padding-right: 20em;
-  padding-top: 3em;
-  margin-bottom: 4em;
-  margin-right: 40em;
-  text-align: center;
-  padding-bottom: 5em;
-  color: var(--light-nav-text-colour);
-}
-@media screen and (min-width: 1300px) {
-  .about_about_text {
-    font-size: 0.95em;
-    padding-top: 0.8em;
-    margin: auto;
-    padding-left: 1.5em;
-    padding-right: 1.5em;
-    margin-right: 5em;
-    color: var(--light-nav-text-colour);
-  }
+  display: flex;
+  font-weight: normal;
 }
-@media screen and (min-width: 800px) {
-  .about_about_text {
+@media screen and (max-width: 850px) {
+  .box-set__header h1 span {
     font-size: 0.95em;
+    display: block;
+    max-width: 40%;
+    margin-right: 10%;
     padding-top: 0.8em;
-    margin: auto;
-    padding-left: 1.5em;
-    margin-left: 1.5em;
-    padding-right: 1.5em;
-    margin-right: 2em;
-    color: var(--light-nav-text-colour);
   }
 }
-@media screen and (max-width: 800px) {
-  .about_about_text {
+@media screen and (max-width: 550px) {
+  .box-set__header h1 span {
     font-size: 0.95em;
+    display: block;
+    max-width: 10%;
+    margin-right: 10%;
     padding-top: 0.8em;
-    margin: auto;
-    padding-left: 1.5em;
-    padding-right: 1.5em;
-    color: var(--light-nav-text-colour);
-  }
-}
-@media (prefers-color-scheme: dark) {
-  .about_about_text {
-    color: var(--nav-text-colour);
   }
 }