diff --git a/fonts/Premier Sans.otf b/fonts/Premier Sans.otf new file mode 100644 index 0000000000000000000000000000000000000000..49456bcb5ad6f49e24347fb217052bde383cb206 Binary files /dev/null and b/fonts/Premier Sans.otf differ diff --git a/fonts/Premier Sans.ttf b/fonts/Premier Sans.ttf new file mode 100644 index 0000000000000000000000000000000000000000..803b30b17fcf32c1461410835d3f7c1699cdf928 Binary files /dev/null and b/fonts/Premier Sans.ttf differ diff --git a/practica.css b/practica.css index 8a65dc985e5bb046b4a111436a4dd26daff906ed..d6ef2621fded074fa9190b57fa66249ed0857869 100644 --- a/practica.css +++ b/practica.css @@ -1,7 +1,9 @@ body { margin: 0; padding: 0; - font-family: "Bebas Neue", serif;; + height: 100vh; + display: flex; + flex-direction: column; } .bebas-neue-regular { @@ -10,12 +12,20 @@ body { font-style: normal; } + @font-face { + font-family: 'PremierSans'; + src: url('fonts/Premier Sans.otf') format('opentype'), + url('fonts/Premier Sans.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + .header{ font-family: "Bebas Neue"; text-align: center; background-color: #38003C; margin-bottom: 0px; - height: 220px; + height: 20%; } h1 { @@ -34,6 +44,7 @@ h4 { } h3 { + font-family: "Bebas Neue"; color: #00FF85; font-size: 50px; margin-top: 20px; @@ -50,8 +61,7 @@ h3 { padding-top: 30px; padding-bottom: 30px; width: 300px; - height: 93%; - + height: 100%; } .navButton { @@ -69,10 +79,11 @@ h3 { .navButton:hover { background-color: #00FF85; + color: black; } .content { display: flex; - height: 900px; + height: 100%; margin-top: 0; } @@ -81,3 +92,54 @@ h3 { height: 100%; } +.table { + width: 100%; + height: 100%; + border-collapse: collapse; + margin-top: 20px; +} + +.headerTable { + background-color: #38003C; + color: white; + font-size: 40px; + text-align: justify; + display: flex; + justify-content: space-between; + margin-top: 40px; + margin-left: 100px; + margin-right: 100px; + margin-bottom: 20px; + border-radius: 30px; +} + + +#tableTitle{ + margin-left: 100px; + padding-top: 10px; + font-family: "Bebas Neue"; + font-size: 50px; +} + +#season { + margin-right: 50px; + margin-top: 50px; + font-family: "PremierSans", Arial, Helvetica Neue, Helvetica, sans-serif; + font-size: 60px; +} + +#seasonNumber { + margin-top: 40px; + margin-right: 100px; + font-size: 80px; + font-family: "PremierSans", Arial, Helvetica Neue, Helvetica, sans-serif; +} + +.seasonInfo{ + display: flex; +} + +.graph { + width: 100%; + height: 100%; +} \ No newline at end of file diff --git a/practica.html b/practica.html index d1f1c43fd99f9897243823691ad9c52253810cce..779a42a62bf348e0dc077810ddd7560dc04d7f56 100644 --- a/practica.html +++ b/practica.html @@ -27,7 +27,18 @@ <button class="navButton">Equipo</button> </div> <div class="mainContent"> - <!-- contenido --> + <div class="table"> + <div class="headerTable"> + <h2 id="tableTitle">Tabla</h2> + <div class="seasonInfo"> + <label id="season">temporada</label> + <label id="seasonNumber"">2023/24</label> + </div> + </div> + <div class="graph"> + <!-- graf --> + </div> + </div> </div> </div>