fix classes.html info about classes to fit screen size from 950px wid…

…e and down
Myekman · Feb 16, 2023 · 04fc2c9 · 04fc2c9
1 parent 178360f
commit 04fc2c9
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 28 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -143,31 +143,25 @@ 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 {
     border-style: double;
 }
 
 
-
 /*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;
+
+    }
+
+
 }
diff --git a/classes.html b/classes.html
@@ -28,31 +28,32 @@
         <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
                 <br>
                 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
                 <br>
                 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
                 <br>
                 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
@@ -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">