CAMBIOS IMPORTANTES EN INDEX (TERMINADO)

Edoardo-B-Leiva · Jan 31, 2024 · 8676880 · 8676880
1 parent a25368e
commit 8676880
Show file tree

Hide file tree

Showing 3 changed files with 126 additions and 28 deletions.
diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
   <head>
     <title></title>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link href="styles/style.css" rel="stylesheet" />
     <link rel="stylesheet" href="styles/index.css">
     <link rel="icon" href="assets/favicon.ico" />
@@ -36,7 +36,7 @@
       <a href="forms.html" target="_blank"
         ><marquee direction="right" behavior="alternate">JOIN OUR NEWSSELLER <u>NOW!</u></marquee></a>
     </nav>
-    <div id="content-body">
+    <div class="content-body">
       <h1 id="titulo-sobre-nosotros">Who are we?</h1>
       <div id="sobre-nosotros">
         <p><b>Florida is an educational centre that, 
@@ -53,18 +53,23 @@ <h1 id="titulo-sobre-nosotros">Who are we?</h1>
         <img src="styles/Edificios.jpg" id="florida-foto">
         </div>
         <div id="container-sobre-nosotros">
-          <div id="sobre-nosotros-amarillo"> Lorem ipsum dolor sit amet consectetur 
-            adipisicing elit. Distinctio id deserunt 
-            tenetur beatae. Asperiores, tempore! Vero possimus
-            eius accusantium unde aliquid veniam. Numquam
-            expedita dignissimos 
-            deserunt iste inventore doloremque minima.</p></div>
-          <div id="sobre-nosotros-rojo">Lorem ipsum dolor sit amet consectetur adipisicing 
-            elit. Expedita sequi nesciunt ad aut officia sint 
-            illum molestiae labore! Quidem voluptatem accusamus 
-            commodi voluptatibus. Accusamus perferendis at 
-            delectus quia eveniet amet.</p></div>
-    </div>
+          <div id="sobre-nosotros-amarillo">
+            <h2 class="titulo-cuadrados">Subjects</h2>
+            <p class="parrafos-cuadrados">In this section, we can see the subjects that're taught in 1st and in <br> 2nd TSMR. To know more, click the next button:</p>
+            <a href="subjects.html"><button>SUBJECTS</button></a>
+          </div>
+          <div id="sobre-nosotros-rojo">
+            <h2 class="titulo-cuadrados">Facilities</h2>
+            <p class="parrafos-cuadrados">In this other section we can know more about facilities of Florida <br> Universitaria. To know more, click the next button:</p>
+            <a href="facilities.html"><button>FACILITIES</button></a>
+          </div>
+          <div id="education_offers">
+            <h2 class="titulo-cuadrados">Education Offers</h2>
+            <p class="parrafos-cuadrados">You want study with us? If your answer is: Yes! Click in the next button to see a lot of courses that may interest you!</p>
+            <a href="facilities.html"><button>FACILITIES</button></a>
+        </div>
+      </div>
+
 
     </div>
     <div class="footer">

diff --git a/styles/index.css b/styles/index.css
@@ -1,25 +1,30 @@
 body {
-    height: 100%;
     margin: 0;
 }
 
-#content-body {
-    display: grid;
-    margin: 0;
+.content-body {
+    display: flex;
+    justify-content: center;
     grid-column: 1/5;
+    grid-row: 2/3;
     color: #1c1c1c;
-    height: 100%;
-    box-sizing: border-box;
     flex-wrap: wrap;
+    height: auto;
+}
+
+@media onlyscreen and (max-width: 600px) {
+    .content-body {
+        font-size: 5px;
+        padding-top: 50vh;
+    }
 }
 
+
 #titulo-sobre-nosotros {
     display: flex;
-    position: static;
     justify-content: center;
     align-items: center;
     text-decoration: underline;
-    padding: 12% 0% 0% 0%;
     flex-wrap: wrap;
 }
 
@@ -31,6 +36,7 @@ body {
     margin: 0% 3% 0% 3%;
     padding: 1%;
     flex-wrap: wrap;
+    font-size: 1em;
 }
 
 .container-foto {
@@ -44,26 +50,110 @@ body {
 #florida-foto {
     display: flex;
     flex-wrap: wrap;
-    border-radius: 10%;
+    border-radius: 10px;
     border: 2px solid #E22636;
     flex-wrap: wrap;
 }
 
 #sobre-nosotros-amarillo {
+    display: flex;
+    flex-direction: column;
     background-color: #fcb900;
     width: 50%;
+    justify-content: center;
+    align-items: center;
+    height: 330px;
 }
 
 #sobre-nosotros-rojo {
+    display: flex;
+    flex-direction: column;
     background-color: #E22636;
     width: 50%;
-    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    height: 330px;
 }
 
 #container-sobre-nosotros {
     display: flex;
-    justify-content: flex-start;
+    justify-content: center;
     flex-wrap: wrap;
     padding: 2% 0% 2% 0%;
     flex-wrap: wrap;
+    height: auto;
+    width: 100%;
+}
+
+.titulo-cuadrados {
+    color: white;
+    margin-top: 1%;
+    display: flex;
+    justify-content: center;
+    text-decoration: underline;
+    font-weight: bold;
+
+}
+
+#education_offers {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: 330px;
+    text-align: center;
+    justify-content: center;
+    background-color: rgb(43, 41, 41);
+    margin-top: 0;
+    width: 100%;
 }
+
+.parrafos-cuadrados {
+    text-align: center;
+    display: flex;
+    color: white;
+    justify-content: center;
+}
+
+a button {
+    color: white;
+    width: auto;
+}
+
+
+button {
+    text-align: center;
+    width: 50%;
+    background-color: transparent;
+    border: 0.125em solid white;
+    border-radius: 0.9375em;
+    box-sizing: border-box;
+    cursor: pointer;
+    display: inline-block;
+    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: normal;
+    margin: 0;
+    min-height: 3.75em;
+    min-width: 0;
+    outline: none;
+    padding: 1em 2.3em;
+    text-align: center;
+    will-change: transform;
+   }
+
+   button:disabled {
+    pointer-events: none;
+   }
+
+   button:hover {
+    color: #e98c09;
+    font-weight: 900;
+    background-color: wheat;
+    transform: translateY(-2px);
+   }
+
+   button:active {
+    box-shadow: none;
+    transform: translateY(0);
+   }
diff --git a/styles/style.css b/styles/style.css
@@ -11,6 +11,7 @@ body{
   background-image: url(https://static.vecteezy.com/system/resources/previews/002/534/933/non_2x/light-blue-gradient-blur-backdrop-vector.jpg);
   background-size: cover;
   color: #fafafa;
+  font-size: 20px;
   font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
 }
 
@@ -20,21 +21,22 @@ nav{
   background-color: #E22636;
   display: flex;
   flex-direction: column;
-  position: fixed;
+  height: 100%;
   width: 100%;
+  margin: 0;
 }
 nav *{overflow: hidden;}
 .nv-cnt{
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  height: 40%;
+  height: 70%;
 }
 .nv-btn{
   display: block;
   width: 100%;
   text-align: center;
-  padding: .5rem;
+  padding: .8rem;
 }
 
 .nv-btn:hover{
@@ -87,6 +89,7 @@ nav a marquee{
   align-items: center;
 }
 .footer-cnt{
+  grid-row: 3/4;
   display: flex;
   flex-direction: row;
   margin: 1rem;