From 86768804e6e5f6a098e17142b6240cd6ef5cffaf Mon Sep 17 00:00:00 2001 From: sergi1307 Date: Wed, 31 Jan 2024 13:00:59 +0100 Subject: [PATCH] CAMBIOS IMPORTANTES EN INDEX (TERMINADO) --- index.html | 33 ++++++++------ styles/index.css | 112 ++++++++++++++++++++++++++++++++++++++++++----- styles/style.css | 9 ++-- 3 files changed, 126 insertions(+), 28 deletions(-) diff --git a/index.html b/index.html index 6521e89..5c5003c 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - + @@ -36,7 +36,7 @@ JOIN OUR NEWSSELLER NOW! -
+

Who are we?

Florida is an educational centre that, @@ -53,18 +53,23 @@

Who are we?

-
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.

-
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.

-
+
+

Subjects

+

In this section, we can see the subjects that're taught in 1st and in
2nd TSMR. To know more, click the next button:

+ +
+
+

Facilities

+

In this other section we can know more about facilities of Florida
Universitaria. To know more, click the next button:

+ +
+
+

Education Offers

+

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!

+ +
+
+
diff --git a/styles/index.css b/styles/index.css index d011742..8bf4151 100644 --- 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); + } \ No newline at end of file diff --git a/styles/style.css b/styles/style.css index 6563ff5..a41d395 100644 --- 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;