Almironeto (Talk | contribs) (Created page with "<style> body { margin: 0; background-color: #E5E5E5; } html { scroll-behavior: smooth; } .container { height: auto; display: -webkit-box; display: -ms-flexbox;...") |
Almironeto (Talk | contribs) |
||
Line 1: | Line 1: | ||
<style> | <style> | ||
+ | @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); | ||
body { | body { | ||
margin: 0; | margin: 0; |
Latest revision as of 19:20, 20 October 2021
<style> @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); body {
margin: 0; background-color: #E5E5E5;
}
html {
scroll-behavior: smooth;
}
.container {
height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-pack: distribute; justify-content: space-around; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-column-gap: 18px; column-gap: 18px;
}
.top-banner {
height: 220px; top: 16px; background: #FF8552;
}
.Title {
font-family: Roboto; text-transform: uppercase; font-weight: bold; font-size: 2.5vw; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; top: 48.5%; left: 50%; position: absolute;
}
.Subtitle {
display: -webkit-box; display: -ms-flexbox; display: flex; gap: 28vw; height: 20vh;
}
.Subtitle .mini-subtitle {
display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 50px; margin-left: 20px;
}
.Subtitle .mini-subtitle .main-subtitle {
font-family: Roboto; font-style: normal; font-weight: bold; font-size: 1.3vw;
}
.Subtitle .mini-subtitle .line {
width: 2px; height: 26px; background: #000000;
}
.Subtitle .mini-subtitle .subtopic {
font-family: Roboto; font-style: normal; font-weight: bold; font-size: 1vw;
}
.subsite-container {
display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-family: Roboto; font-weight: bold; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; -webkit-box-flex: 2; -ms-flex-positive: 2; flex-grow: 2; width: 100px; height: 250px; -ms-flex-negative: 1; flex-shrink: 1; margin-left: 7px;
}
.subsite-container .submenu-title {
font-size: 1.3vw; margin-bottom: 7px;
}
.subsite-container .index-box {
display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; height: 100%; font-size: 1.1vw; background: #F8F8F8; border-radius: 15px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly; border-radius: 15px;
}
.subsite-container .index-box a {
text-decoration: none; text-transform: uppercase; color: black; width: 80%; border-bottom: 0.5px solid #DCDCDC; text-align: center;
}
.nav-menu {
display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; font-family: Roboto; font-weight: bold; -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; -webkit-box-flex: 2; -ms-flex-positive: 2; flex-grow: 2; -ms-flex-negative: 1; flex-shrink: 1; width: 100px; height: 250px; margin-right: 7px;
}
.nav-menu .submenu-title {
font-size: 1.3vw; text-align: center; text-transform: uppercase; margin-bottom: 7px;
}
.nav-menu .submenu-content {
display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; height: 100%; background: #F8F8F8; border-radius: 15px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly; border-radius: 15px;
}
.nav-menu .submenu-content a {
text-decoration: none; color: black; font-family: Roboto; font-size: 1.1vw; font-weight: bold; width: 80%; border-bottom: 0.5px solid #DCDCDC; text-align: center; text-transform: uppercase;
}
.text-container {
display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 400px; height: auto; padding-bottom: 2%; padding-top: 2%; background: #F9F9F9; border-radius: 38px; -webkit-box-shadow: 0px 11px 15px 1px rgba(0, 0, 0, 0.65); box-shadow: 0px 11px 15px 1px rgba(0, 0, 0, 0.65); -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; overflow: hidden; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; -webkit-box-flex: 4; -ms-flex-positive: 4; flex-grow: 4; -ms-flex-negative: 0.5; flex-shrink: 0.5;
}
.text-container h2 {
-ms-flex-item-align: start !important; align-self: flex-start !important; font-family: Roboto; font-weight: bold; font-size: 2.5vw; height: 5vw; width: 39vw; letter-spacing: 0.01em; text-decoration: none !important; color: #000000; margin-left: 40px; margin-top: 35px; margin-bottom: 35px; border-bottom: 2.5px solid #000000;
}
.text-container .text {
font-family: Roboto; font-weight: normal; font-size: 1.3vw; letter-spacing: 0.01em; color: #000000; text-align: justify; margin-right: 40px; margin-left: 40px;
}
footer {
height: 300px; width: 100vw; bottom: 0; background: #1E2833; -ms-flex-item-align: end; align-self: flex-end; -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; padding-top: 2%; margin-top: 5%;
}
@media screen and (max-width: 900px) {
.Title { font-size: 3vw; } .Subtitle .mini-subtitle .main-subtitle { font-size: 2.5vw; } .Subtitle .mini-subtitle .subtopic { font-size: 2vw; } .nav-menu { display: none; } .subsite-container { display: none; } .text-container { margin-left: 20px; margin-right: 20px; } .text-container .text { font-size: 2vw; } h2 { font-size: 4vw; }
}
@media screen and (max-width: 600px) {
.Title { font-size: 4vw; } .Subtitle .mini-subtitle .main-subtitle { font-size: 2.5vw; } .Subtitle .mini-subtitle .subtopic { font-size: 2vw; } .nav-menu { display: none; } .subsite-container { display: none; } .text-container { margin-left: 20px; margin-right: 20px; } .text-container .text { font-size: 3vw; } h2 { font-size: 6vw; }
} </style>