|
|
Line 3: |
Line 3: |
| <html> | | <html> |
| <style> | | <style> |
− | @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;
| + | |
− | }
| + | |
− | | + | |
− | .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: 11%;
| + | |
− | 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 !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;
| + | |
− | }
| + | |
− | }
| + | |
− | | + | |
− | .text-container .big-head {
| + | |
− | -ms-flex-item-align: start !important;
| + | |
− | align-self: flex-start !important;
| + | |
− | font-family: Roboto;
| + | |
− | font-weight: bold;
| + | |
− | font-size: 2.5vw;
| + | |
− | height: 13vw;
| + | |
− | 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;
| + | |
− | line-height: 40px;
| + | |
− | }
| + | |
− | | + | |
− | .accordion {
| + | |
− | max-width: 100%;
| + | |
− | }
| + | |
− | | + | |
− | .toggle {
| + | |
− | display: none;
| + | |
− | }
| + | |
− | | + | |
− | .option {
| + | |
− | position: relative;
| + | |
− | }
| + | |
− | | + | |
− | .title-drop,
| + | |
− | .content {
| + | |
− | -webkit-backface-visibility: hidden;
| + | |
− | backface-visibility: hidden;
| + | |
− | -webkit-transform: translateZ(0);
| + | |
− | transform: translateZ(0);
| + | |
− | -webkit-transition: all 0.2s;
| + | |
− | transition: all 0.6s;
| + | |
− | }
| + | |
− | | + | |
− | .title-drop {
| + | |
− | background: #fff;
| + | |
− | padding: 1vw;
| + | |
− | display: block;
| + | |
− | color: black;
| + | |
− | font-weight: bold;
| + | |
− | font-family: Roboto;
| + | |
− | font-size: 1.5vw;
| + | |
− | }
| + | |
− | | + | |
− | .title-drop:after,
| + | |
− | .title-drop:before {
| + | |
− | content: '';
| + | |
− | right: 1.25em;
| + | |
− | width: 3px;
| + | |
− | height: 16px;
| + | |
− | top: 1em;
| + | |
− | position: absolute;
| + | |
− | background-color: #7A7572;
| + | |
− | -webkit-transition: all 0.2s;
| + | |
− | transition: all 0.2s;
| + | |
− | }
| + | |
− | | + | |
− | .title-drop:after {
| + | |
− | -webkit-transform: rotate(90deg);
| + | |
− | transform: rotate(90deg);
| + | |
− | }
| + | |
− | | + | |
− | .content {
| + | |
− | max-height: 0;
| + | |
− | overflow: hidden;
| + | |
− | background-color: #fff;
| + | |
− | }
| + | |
− | | + | |
− | .content p {
| + | |
− | margin: 0;
| + | |
− | padding: 0.5em 1em 1em;
| + | |
− | font-size: 0.9em;
| + | |
− | line-height: 1.5;
| + | |
− | }
| + | |
− | | + | |
− | .toggle:checked+.title-drop,
| + | |
− | .toggle:checked+.title-drop+.content {
| + | |
− | -webkit-box-shadow: 3px 3px 6px #ddd, -3px 3px 6px #ddd;
| + | |
− | box-shadow: 3px 3px 6px #ddd, -3px 3px 6px #ddd;
| + | |
− | }
| + | |
− | | + | |
− | .toggle:checked+.title-drop+.content {
| + | |
− | max-height: 100%;
| + | |
− | }
| + | |
− | | + | |
− | .toggle:checked+.title-drop:before {
| + | |
− | -webkit-transform: rotate(90deg) !important;
| + | |
− | transform: rotate(90deg) !important;
| + | |
− | }
| + | |
| </style> | | </style> |
| <!-------------------- HTML CONTENT --------------------------------> | | <!-------------------- HTML CONTENT --------------------------------> |