From 04fc2c9ede614bae58131728e804d8ace2105e6e Mon Sep 17 00:00:00 2001
From: Myekman <my@traningstemplet.se>
Date: Thu, 16 Feb 2023 13:54:30 +0000
Subject: [PATCH] fix classes.html info about classes to fit screen size from
 950px wide and down

---
 assets/css/style.css | 83 ++++++++++++++++++++++++++++++++------------
 classes.html         |  9 ++---
 index.html           |  4 ++-
 3 files changed, 68 insertions(+), 28 deletions(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index 003712d..4447b92 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -143,23 +143,18 @@ body {
     background-position: center;
 }
 
-
-.read-more h2 {
-    float: left;
-    font-size: 400%;
-    line-height: 80px;
+.read-more {
+    justify-content: center;
+    align-items: flex-end;
     background-color: rgba(60, 60, 60, 0.6);
     width: 100%;
-    
+    font-size: 200%;
+    line-height: 80px;
 }
 
-
 .read-more a {
-    float: right;
-    margin-right: 10px;
-    color: white;
-    font-size: 200%;
-
+    color: lightgray;
+    text-transform: uppercase;
 }
 
 .read-more a:hover {
@@ -167,7 +162,6 @@ body {
 }
 
 
-
 /*style form here */
 
 #form-section {
@@ -192,7 +186,6 @@ h2 {
     color:#f5b09f;
 }
 
-
 .text-input {
     height: 30px;
     width: 50%;
@@ -208,33 +201,42 @@ label {
 
 #read-about {
 height: 600px;
+margin: 0 40px;
+
 }
 
 #mens-gymnastic {
-    padding-top: 40px;
-    width: 33%;
+    padding: 40px;
     float: left;
-    
+    width: 20%;
+    height: 400px;
+    float: left;
+    background-color: rgba(60, 60, 60, 0.9);
+       
 }
 
 #womans-gymnastic {
-    padding-top: 40px;
-    width: 33%;
+    padding: 40px;
+    width: 20%;
+    height: 400px;
     float: right;
+    background-color: rgba(60, 60, 60, 0.9);
     
 }
 
 #kids-gymnastic {
-    padding-top: 40px;
-    width: 33%;
+    padding: 40px;
+    width: 20%;
     margin: 0 auto;
+    height: 400px;
+    background-color: rgba(60, 60, 60, 0.9);
     
 }
 
 #read-about h2 {
     color: #f5b09f;
     font-family: "Bebas neue", "sans-serif";
-    font-size: 300%;
+    font-size: 200%;
     font-weight:100;
 }
 
@@ -345,6 +347,7 @@ footer h3 {
 
 #header-image {
     background-position: left;
+    height: 1000px;
 
 }
 
@@ -357,11 +360,45 @@ footer h3 {
     
 }
 
-/* navigation links */
+/* navigation links header */
 
 #menu {
 float: left;
 
 }
 
+/* classes.html */
+
+#read-about {
+    height: 600px;
+    margin: 0 auto;
+    
+    }
+    
+    #mens-gymnastic {
+        padding: 10px 20px;
+        float: left;
+        width: 100%;
+        height: 200px;
+        
+           
+    }
+    
+    #womans-gymnastic {
+        padding: 10px 20px;
+        width: 100%;
+        height: 200px;
+        float: left;
+    
+    }
+    
+    #kids-gymnastic {
+        padding: 10px 20px;
+        width: 100%;
+        float: left;
+        height: 200px;
+        
+    }
+    
+
 }
\ No newline at end of file
diff --git a/classes.html b/classes.html
index e58fe51..7b735b7 100644
--- a/classes.html
+++ b/classes.html
@@ -28,7 +28,7 @@
         <h1 id="logo">Strong Gymnastic Studios</h1>
     </a>
     <div id="read-about">
-        <div id="mens-gymnasic">
+        <div id="mens-gymnastic">
             <h2>Mens Gymnastic</h2>
             <p>
                 add some text here add some tact here add some text here add some text here
@@ -36,7 +36,7 @@ <h2>Mens Gymnastic</h2>
                 add some text here add some tact here add some text here add some text here
             </p>
         </div>
-        <div id="womans-gymnasic">
+        <div id="womans-gymnastic">
             <h2>Womans Gymnastic</h2>
             <p>
                 add some text here add some tact here add some text here add some text here
@@ -44,7 +44,7 @@ <h2>Womans Gymnastic</h2>
                 add some text here add some tact here add some text here add some text here
             </p>
         </div>
-        <div id="kids-gymnasic">
+        <div id="kids-gymnastic">
             <h2>Kids Gymnastic</h2>
             <p>
                 add some text here add some tact here add some text here add some text here
@@ -52,7 +52,8 @@ <h2>Kids Gymnastic</h2>
                 add some text here add some tact here add some text here add some text here
             </p>
         </div>
-    </div>
+    </div>    
+</section>
 
 <section id="form-section">
     <form class="join-us-form" method="POST" action="?">
diff --git a/index.html b/index.html
index 9eb2e2a..bc3fa79 100644
--- a/index.html
+++ b/index.html
@@ -37,9 +37,11 @@ <h2>Become a Strong Gymnast</h2>
         <div class="Gymnastic-groups-heading">
              <h2>Our Strong Gymnastic Groups</h2>
         </div>
-        <div id="Men-image"  class="read-more">
+        <div id="Men-image">
+            <div class="read-more">
                  <h2>Male</h2>
                  <a href="classes.html">Read More</a>
+            </div>
         </div>
         <div id="Women-image">
             <div class="read-more">