Line 59: | Line 59: | ||
margin-left: 78px; | margin-left: 78px; | ||
} | } | ||
+ | |||
+ | @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); | ||
+ | |||
+ | body { | ||
+ | margin: 0; | ||
+ | background-color: #E5E5E5 !important; | ||
+ | } | ||
+ | |||
+ | 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; | ||
+ | margin-left: 78px; | ||
+ | } | ||
+ | |||
+ | .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; | ||
+ | } | ||
+ | |||
+ | .Subtitle { | ||
+ | display: -webkit-box; | ||
+ | display: -ms-flexbox; | ||
+ | display: flex; | ||
+ | gap: 28vw; | ||
+ | height: 20vh; | ||
+ | justify-content: center; | ||
+ | margin-left: 78px; | ||
+ | } | ||
+ | |||
+ | .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: 1; | ||
+ | order: 1; | ||
+ | -webkit-box-flex: 2; | ||
+ | -ms-flex-positive: 2; | ||
+ | flex-grow: 0.5; | ||
+ | -ms-flex-negative: 1; | ||
+ | flex-shrink: 1; | ||
+ | width: 100px; | ||
+ | height: 250px; | ||
+ | margin-right: 7px; | ||
+ | margin-left: 25px; | ||
+ | |||
+ | } | ||
+ | |||
+ | .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: 2; | ||
+ | -ms-flex-negative: 0.5; | ||
+ | flex-shrink: 0.5; | ||
+ | margin-right: 50px; | ||
+ | } | ||
+ | |||
+ | .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 !important; | ||
+ | margin-bottom: 35px !important; | ||
+ | border-bottom: 2.5px solid #000000; | ||
+ | } | ||
+ | |||
+ | .text-container .text p { | ||
+ | font-family: Roboto !important; | ||
+ | font-weight: normal; | ||
+ | font-size: 1.3vw !important; | ||
+ | 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> | </style> | ||
</html> | </html> |
Revision as of 21:00, 21 October 2021