|
|
@@ -0,0 +1,665 @@
|
|
|
+* {
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
+
|
|
|
+input[type=text]::-ms-clear { display: none; width : 0; height: 0; }
|
|
|
+input[type=text]::-ms-reveal { display: none; width : 0; height: 0; }
|
|
|
+
|
|
|
+input::-webkit-search-decoration,
|
|
|
+input::-webkit-search-cancel-button,
|
|
|
+input::-webkit-search-results-button,
|
|
|
+input::-webkit-search-results-decoration { display: none; }
|
|
|
+
|
|
|
+hr {
|
|
|
+ border: none;
|
|
|
+ background-color: #707070;
|
|
|
+ height: 1px;
|
|
|
+ width: auto;
|
|
|
+ margin: 0 auto;
|
|
|
+}
|
|
|
+
|
|
|
+@font-face {
|
|
|
+ font-family: 'monsterrat_regular';
|
|
|
+ src: url('fonts/monsterrat/Montserrat-Regular.ttf');
|
|
|
+}
|
|
|
+
|
|
|
+@font-face {
|
|
|
+ font-family: 'monsterrat_bold';
|
|
|
+ src: url('fonts/monsterrat/Montserrat-Bold.ttf');
|
|
|
+}
|
|
|
+
|
|
|
+.wrapper {
|
|
|
+ max-width: 1200px;
|
|
|
+ margin: 0 auto;
|
|
|
+ background: linear-gradient(#ffffff, #d1e3ff, #a5c8ff);
|
|
|
+ box-shadow: 0 0 60px #b5d2ff;
|
|
|
+ padding: 0 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.header {
|
|
|
+ display: flex;
|
|
|
+ max-width: 1042px;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 29px !important;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 20px 0 0 0;
|
|
|
+}
|
|
|
+
|
|
|
+.logo_name {
|
|
|
+ display: flex;
|
|
|
+ width: 340px;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.logo_name > p {
|
|
|
+ width: 218px;
|
|
|
+ font-size: 20px;
|
|
|
+ font-family: 'monsterrat_regular';
|
|
|
+}
|
|
|
+
|
|
|
+.header_buttons {
|
|
|
+ width: 630px;
|
|
|
+ margin-top: 20px;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.top_header {
|
|
|
+ width: 630px;
|
|
|
+}
|
|
|
+
|
|
|
+.top_header > h1 {
|
|
|
+ font-family: 'monsterrat_bold';
|
|
|
+ text-shadow: 0 5px 6px #00000063;
|
|
|
+ font-size: 35px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.top_buttons {
|
|
|
+ width: 330px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ position: absolute;
|
|
|
+ right: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.top_buttons > button {
|
|
|
+ font-family: 'monsterrat_regular';
|
|
|
+ background-color: #ffffff;
|
|
|
+ border: 1px solid #707070;
|
|
|
+ box-shadow: 0 3px 6px #00000063;
|
|
|
+ padding: 5px 25px;
|
|
|
+ border-radius: 17px;
|
|
|
+ font-size: 20px;
|
|
|
+ height: 45px;
|
|
|
+}
|
|
|
+
|
|
|
+.top_buttons > button:hover {
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+#hr_between {
|
|
|
+ margin: 0 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.quick_links_search {
|
|
|
+ display: flex;
|
|
|
+ max-width: 1200px;
|
|
|
+ height: 100px;
|
|
|
+ margin: 0 auto;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.quick_links_search > .link_buttons {
|
|
|
+ width: 390px !important;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-right: 0px;
|
|
|
+}
|
|
|
+
|
|
|
+.hide_first_top_menu {
|
|
|
+ position: absolute;
|
|
|
+ top: 118.5px;
|
|
|
+ width: 360px;
|
|
|
+ height: 150px;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border: 1px solid #707070;
|
|
|
+ border-radius: 35px;
|
|
|
+ box-shadow: 0 3px 6px #707070;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+
|
|
|
+.hide_first_top_menu > ul {
|
|
|
+ padding: 0;
|
|
|
+ list-style-type: none;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 2.5;
|
|
|
+ font-family: 'monsterrat_regular';
|
|
|
+ font-size: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.hide_first_top_menu > ul > li > a {
|
|
|
+ text-decoration: none;
|
|
|
+ color: #000000;
|
|
|
+}
|
|
|
+
|
|
|
+.hide_second_top_menu {
|
|
|
+ position: absolute;
|
|
|
+ top: 118.5px;
|
|
|
+ width: 360px;
|
|
|
+ height: 350px;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border: 1px solid #707070;
|
|
|
+ border-radius: 35px;
|
|
|
+ box-shadow: 0 3px 6px #707070;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ display: none;
|
|
|
+ z-index: 9 !important;
|
|
|
+}
|
|
|
+
|
|
|
+.hide_second_top_menu > ul {
|
|
|
+ padding: 0;
|
|
|
+ list-style-type: none;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 2.5;
|
|
|
+ font-family: 'monsterrat_regular';
|
|
|
+ font-size: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.hide_second_top_menu > ul > li > a {
|
|
|
+ text-decoration: none;
|
|
|
+ color: #000000;
|
|
|
+}
|
|
|
+
|
|
|
+.link_buttons > button {
|
|
|
+ font-family: 'monsterrat_regular';
|
|
|
+ background-color: #ffffff;
|
|
|
+ border: 1px solid #707070;
|
|
|
+ box-shadow: 0 3px 6px #00000063;
|
|
|
+ padding: 5px 25px;
|
|
|
+ border-radius: 17px;
|
|
|
+ font-size: 20px;
|
|
|
+ height: 45px;
|
|
|
+}
|
|
|
+
|
|
|
+.link_buttons > button:hover {
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.link_buttons > button[id='top_btn_2'] {
|
|
|
+ padding: 5px 27px;
|
|
|
+ width: 200px;
|
|
|
+}
|
|
|
+
|
|
|
+.quick_links_search > hr {
|
|
|
+ border: none;
|
|
|
+ width: 1px;
|
|
|
+ background-color: #707070;
|
|
|
+ height: 100px;
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.quick_links_search > .search_field {
|
|
|
+ width: 780px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.search_field > form {
|
|
|
+ width: 727px;
|
|
|
+ height: 45px;
|
|
|
+ display: flex;
|
|
|
+ position: relative;
|
|
|
+ border-radius: 17px;
|
|
|
+}
|
|
|
+
|
|
|
+.search_field > form > input[id="search_input_top"] {
|
|
|
+ width: 727px;
|
|
|
+ border-radius: 17px;
|
|
|
+ border: 1px solid #707070;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 20px;
|
|
|
+ font-family: 'monsterrat_regular';
|
|
|
+}
|
|
|
+
|
|
|
+.search_field > form > button[id="send_btn_1"] {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ border: none;
|
|
|
+ background: none;
|
|
|
+ height: 45px;
|
|
|
+ width: 45px;
|
|
|
+}
|
|
|
+
|
|
|
+.search_field > form > button[id="send_btn_1"]:hover {
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.search_field > form > button[id="send_btn_2"] {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ border: none;
|
|
|
+ background: none;
|
|
|
+ height: 45px;
|
|
|
+ width: 45px;
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+
|
|
|
+.search_field > form > button[id="send_btn_2"]:hover {
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.page_header {
|
|
|
+ max-width: 1200px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-top: 20px;
|
|
|
+ font-family: 'monsterrat_regular';
|
|
|
+}
|
|
|
+
|
|
|
+.page_header h1 {
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+main {
|
|
|
+ height: 1200px;
|
|
|
+ max-width: 1000px;
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-top: 20px;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ padding-top: 30px;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 10px;
|
|
|
+ flex-direction: column;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+main .this_course {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-evenly;
|
|
|
+ max-width: 900px;
|
|
|
+ margin: 0 auto;
|
|
|
+ height: 980px;
|
|
|
+ flex-direction: column;
|
|
|
+ font-family: 'monsterrat_regular';
|
|
|
+}
|
|
|
+
|
|
|
+.teacher_first {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row !important;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-evenly;
|
|
|
+}
|
|
|
+
|
|
|
+main .this_course #btn_order {
|
|
|
+ width: 210px;
|
|
|
+ height: 40px;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border: 2px solid #707070;
|
|
|
+ border-radius: 17px;
|
|
|
+ font-family: 'monsterrat_regular';
|
|
|
+ font-size: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+main #btn_back {
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ margin-left: 100px;
|
|
|
+}
|
|
|
+
|
|
|
+#img2 {
|
|
|
+ transform: scale(0.7);
|
|
|
+ margin-left: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+main #btn_back, #btn_back button {
|
|
|
+ width: 70px;
|
|
|
+ height: 50px;
|
|
|
+ border-radius: 17px;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 30px;
|
|
|
+}
|
|
|
+
|
|
|
+#btn_back button {
|
|
|
+ background-color: #a5c8ff;
|
|
|
+}
|
|
|
+
|
|
|
+#btn_back button:hover {
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+main .this_course p strong {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 18px;
|
|
|
+}
|
|
|
+
|
|
|
+#left{
|
|
|
+ float: left;
|
|
|
+}
|
|
|
+
|
|
|
+#right{
|
|
|
+ margin-top: 20px;
|
|
|
+ float: right;
|
|
|
+}
|
|
|
+
|
|
|
+footer {
|
|
|
+ max-width: 1121px !important;
|
|
|
+ margin: 0 auto;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 20px;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ border-top: 1px solid #707070;
|
|
|
+ padding: 20px 0;
|
|
|
+}
|
|
|
+
|
|
|
+#right > p, #left > p {
|
|
|
+ font-family: 'monsterrat_regular';
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+#left {
|
|
|
+ display: inline-flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ width: 460px;
|
|
|
+}
|
|
|
+
|
|
|
+#left img {
|
|
|
+ float: left;
|
|
|
+}
|
|
|
+
|
|
|
+.fa-map {
|
|
|
+ color: #00923e;
|
|
|
+}
|
|
|
+
|
|
|
+.fa-phone {
|
|
|
+ color: #00923e;
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 1121px) {
|
|
|
+ .wrapper {
|
|
|
+ max-width: 1000px;
|
|
|
+ }
|
|
|
+ .top_header > h1 {
|
|
|
+ font-size: 30px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .top_buttons > button {
|
|
|
+ height: 35px;
|
|
|
+ }
|
|
|
+ .quick_links_search {
|
|
|
+ max-width: 1000px;
|
|
|
+ height: 75px;
|
|
|
+ }
|
|
|
+ #hr_between {
|
|
|
+ height: 75px;
|
|
|
+ }
|
|
|
+ .link_buttons > button {
|
|
|
+ font-size: 16px;
|
|
|
+ height: 35px;
|
|
|
+ }
|
|
|
+ .search_field {
|
|
|
+ width: 500px;
|
|
|
+ }
|
|
|
+ .search_field > form {
|
|
|
+ width: 650px;
|
|
|
+ height: 35px;
|
|
|
+ }
|
|
|
+ #send_btn_1 {
|
|
|
+ height: 35px;
|
|
|
+ width: 35px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ .hide_first_top_menu {
|
|
|
+ top: 90px;
|
|
|
+ width: 330px;
|
|
|
+ height: 120px;
|
|
|
+ }
|
|
|
+ .hide_first_top_menu > ul {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ .hide_second_top_menu {
|
|
|
+ top: 90px;
|
|
|
+ width: 330px;
|
|
|
+ height: 280px;
|
|
|
+ }
|
|
|
+ .hide_second_top_menu > ul {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 1000px) {
|
|
|
+ .wrapper {
|
|
|
+ max-width: 850px;
|
|
|
+ }
|
|
|
+ .logo_name > p {
|
|
|
+ font-size: 16px;
|
|
|
+ width: 180px;
|
|
|
+ }
|
|
|
+ .top_header {
|
|
|
+ width: 500px;
|
|
|
+ }
|
|
|
+ .top_header > h1 {
|
|
|
+ font-size: 25px;
|
|
|
+ }
|
|
|
+ .top_buttons {
|
|
|
+ width: 270px;
|
|
|
+ }
|
|
|
+ .top_buttons > button {
|
|
|
+ height: 28px;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ .quick_links_search {
|
|
|
+ max-width: 850px;
|
|
|
+ height: 75px;
|
|
|
+ }
|
|
|
+ #hr_between {
|
|
|
+ height: 75px;
|
|
|
+ }
|
|
|
+ .link_buttons {
|
|
|
+ width: 260px !important;
|
|
|
+ }
|
|
|
+ .link_buttons > button {
|
|
|
+ font-size: 16px;
|
|
|
+ height: 28px;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .search_field {
|
|
|
+ width: 530px !important;
|
|
|
+ }
|
|
|
+ .search_field > form {
|
|
|
+ width: 530px;
|
|
|
+ height: 28px;
|
|
|
+ }
|
|
|
+ #send_btn_1 {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ #send_btn_2 {
|
|
|
+ display: block;
|
|
|
+ width: 28px;
|
|
|
+ height: 28px;
|
|
|
+ }
|
|
|
+ .link_buttons > button[id='top_btn_2'] {
|
|
|
+ padding: 5px 20px;
|
|
|
+ }
|
|
|
+ .search_field > form > input[id="search_input_top"] {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ .hide_first_top_menu {
|
|
|
+ top: 90px;
|
|
|
+ width: 280px;
|
|
|
+ height: 105px;
|
|
|
+ }
|
|
|
+ .hide_first_top_menu > ul {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .hide_second_top_menu {
|
|
|
+ top: 90px;
|
|
|
+ width: 280px;
|
|
|
+ height: 245px;
|
|
|
+ }
|
|
|
+ .hide_second_top_menu > ul {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 850px) {
|
|
|
+ .wrapper {
|
|
|
+ max-width: 650px;
|
|
|
+ }
|
|
|
+ .logo_name > img {
|
|
|
+ transform: scale(0.8);
|
|
|
+ }
|
|
|
+ .header {
|
|
|
+ max-width: 650px !important;
|
|
|
+ margin-bottom: 10px !important;
|
|
|
+ }
|
|
|
+ .logo_name > p {
|
|
|
+ font-size: 14px;
|
|
|
+ width: 150px;
|
|
|
+ }
|
|
|
+ .header_buttons {
|
|
|
+ width: 500px;
|
|
|
+ }
|
|
|
+ .header_buttons > .top_header {
|
|
|
+ width: 400px;
|
|
|
+ }
|
|
|
+ .top_header > h1 {
|
|
|
+ font-size: 22px;
|
|
|
+ }
|
|
|
+ .search_field {
|
|
|
+ width: 350px !important;
|
|
|
+ }
|
|
|
+ .search_field > form {
|
|
|
+ width: 350px;
|
|
|
+ }
|
|
|
+ main {
|
|
|
+ margin-top: 10px;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ .this_course {
|
|
|
+ padding: 0 10px;
|
|
|
+ }
|
|
|
+ #btn_back {
|
|
|
+ margin-bottom: 0px;
|
|
|
+ margin-left: 20px !important;
|
|
|
+ }
|
|
|
+ #right {
|
|
|
+ margin-top: 20px;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 690px) {
|
|
|
+ .header {
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: center;
|
|
|
+ margin-bottom: 15px !important;
|
|
|
+ }
|
|
|
+ .top_buttons {
|
|
|
+ position: static;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ .logo_name {
|
|
|
+ width: 270px;
|
|
|
+ }
|
|
|
+ .logo_name > p {
|
|
|
+ font-size: 21px;
|
|
|
+ width: 170px;
|
|
|
+ }
|
|
|
+ .header_buttons {
|
|
|
+ margin-top: 10px !important;
|
|
|
+ }
|
|
|
+ .top_header {
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ .quick_links_search {
|
|
|
+ flex-wrap: wrap;
|
|
|
+ max-width: 500px;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 15px 0;
|
|
|
+ }
|
|
|
+ #hr_between {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .search_field {
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ .hide_first_top_menu, .hide_second_top_menu {
|
|
|
+ top: 60px;
|
|
|
+ z-index: 1;
|
|
|
+ width: 350px;
|
|
|
+ border-radius: 10px;
|
|
|
+ }
|
|
|
+ #left {
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 520px) {
|
|
|
+ .this_course {
|
|
|
+ height: 1400px !important;
|
|
|
+ }
|
|
|
+ main {
|
|
|
+ height: 1600px !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 490px) {
|
|
|
+ #left > p {
|
|
|
+ width: 150px;
|
|
|
+ }
|
|
|
+ #left {
|
|
|
+ width: 300px;
|
|
|
+ justify-content: space-around;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ #right {
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ .teacher_first {
|
|
|
+ flex-wrap: wrap-reverse;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 420px) {
|
|
|
+ .top_header {
|
|
|
+ width: 250px !important;
|
|
|
+ }
|
|
|
+ .top_header > h1 {
|
|
|
+ font-size: 23px;
|
|
|
+ }
|
|
|
+ .search_field, form {
|
|
|
+ width: 250px !important;
|
|
|
+ }
|
|
|
+ .hide_first_top_menu, .hide_second_top_menu {
|
|
|
+ width: 250px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 400px) {
|
|
|
+ .this_course {
|
|
|
+ max-width: 300px !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 350px) {
|
|
|
+ #right {
|
|
|
+ width: 250px !important;
|
|
|
+ }
|
|
|
+ .fa-map {
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+}
|
Makhanov
