|
@@ -0,0 +1,921 @@
|
|
|
+body {
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
+
|
|
|
+html {
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+*,
|
|
|
+*:before,
|
|
|
+*:after {
|
|
|
+ box-sizing: inherit;
|
|
|
+}
|
|
|
+
|
|
|
+.App {
|
|
|
+ min-height: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ font-family: 'Roboto';
|
|
|
+ font-style: normal;
|
|
|
+ color: #FFFFFF;
|
|
|
+}
|
|
|
+
|
|
|
+img {
|
|
|
+ max-width: 100%;
|
|
|
+ height: auto;
|
|
|
+ vertical-align: top;
|
|
|
+}
|
|
|
+
|
|
|
+._container {
|
|
|
+ max-width: 1180px;
|
|
|
+ margin: 0px auto;
|
|
|
+ padding: 0 15px;
|
|
|
+}
|
|
|
+
|
|
|
+/* Header----------------------------------------------------------------------------------------- */
|
|
|
+.header_container {
|
|
|
+ max-width: 1180px;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 0 15px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+
|
|
|
+.header {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ background: #EEEFF1;
|
|
|
+ padding-top: 57px;
|
|
|
+ transition: 0.3s;
|
|
|
+}
|
|
|
+
|
|
|
+.logo {
|
|
|
+ width: 96px;
|
|
|
+ height: 60px;
|
|
|
+}
|
|
|
+
|
|
|
+.logo a {
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+.logo a img {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.navigation {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-left: 369px;
|
|
|
+}
|
|
|
+
|
|
|
+.menu {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: row;
|
|
|
+ z-index: 1;
|
|
|
+ transition: .5s;
|
|
|
+}
|
|
|
+
|
|
|
+.menu li {
|
|
|
+ list-style-type: none;
|
|
|
+}
|
|
|
+
|
|
|
+.menu li a {
|
|
|
+ color: #000;
|
|
|
+ text-decoration: none;
|
|
|
+ display: block;
|
|
|
+ padding: 24px 21px;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 18px;
|
|
|
+ line-height: 1;
|
|
|
+ transition: .3s;
|
|
|
+ text-transform: uppercase;
|
|
|
+}
|
|
|
+
|
|
|
+.menu li a:hover {
|
|
|
+ font-weight: 500;
|
|
|
+ color: #34547A;
|
|
|
+}
|
|
|
+
|
|
|
+.hamburger {
|
|
|
+ position: relative;
|
|
|
+ width: 30px;
|
|
|
+ height: 4px;
|
|
|
+ background: #000;
|
|
|
+ border-radius: 10px;
|
|
|
+ cursor: pointer;
|
|
|
+ z-index: 2;
|
|
|
+ transition: .3s;
|
|
|
+}
|
|
|
+
|
|
|
+.hamburger:before,
|
|
|
+.hamburger:after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ height: 4px;
|
|
|
+ right: 0;
|
|
|
+ background: #000;
|
|
|
+ border-radius: 10px;
|
|
|
+ transition: .3s;
|
|
|
+}
|
|
|
+
|
|
|
+.hamburger:before {
|
|
|
+ top: -10px;
|
|
|
+ width: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.hamburger:after {
|
|
|
+ top: 10px;
|
|
|
+ width: 25px;
|
|
|
+}
|
|
|
+
|
|
|
+.toggle-menu {
|
|
|
+ position: absolute;
|
|
|
+ width: 30px;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 3;
|
|
|
+ cursor: pointer;
|
|
|
+ opacity: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.hamburger,
|
|
|
+.toggle-menu {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+
|
|
|
+.navigation input:checked~.hamburger {
|
|
|
+ background: transparent;
|
|
|
+}
|
|
|
+
|
|
|
+.navigation input:checked~.hamburger:before {
|
|
|
+ top: 0;
|
|
|
+ transform: rotate(-45deg);
|
|
|
+ width: 30px;
|
|
|
+}
|
|
|
+
|
|
|
+.navigation input:checked~.hamburger:after {
|
|
|
+ top: 0;
|
|
|
+ transform: rotate(45deg);
|
|
|
+ width: 30px;
|
|
|
+}
|
|
|
+
|
|
|
+.navigation input:checked~.menu {
|
|
|
+ right: 0;
|
|
|
+}
|
|
|
+
|
|
|
+@media screen and (max-width: 1180px) {
|
|
|
+
|
|
|
+ .hamburger,
|
|
|
+ .toggle-menu {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+
|
|
|
+ .menu {
|
|
|
+ justify-content: start;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ right: -300px;
|
|
|
+ background: #a5b6b8;
|
|
|
+ width: 300px;
|
|
|
+ height: 100vh;
|
|
|
+ padding-top: 100px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .menu li {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ menu li a,
|
|
|
+ menu li a:hover {
|
|
|
+ padding: 30px;
|
|
|
+ font-size: 24px;
|
|
|
+ box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 767px) {
|
|
|
+ .navigation {
|
|
|
+ margin-left: 180px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 560px) {
|
|
|
+ .navigation {
|
|
|
+ margin-left: 90px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+/* Mainpage------------------------------------------------------------------------------------------------------ */
|
|
|
+
|
|
|
+#mainpage {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ background: #EEEFF1;
|
|
|
+ padding-top: 257px;
|
|
|
+ padding-bottom: 146px;
|
|
|
+}
|
|
|
+
|
|
|
+.mainpage_container {
|
|
|
+ min-height: 297px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ margin-left: auto;
|
|
|
+ margin-right: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.mainpage_container__notelogo {
|
|
|
+ min-height: 235px;
|
|
|
+}
|
|
|
+
|
|
|
+.mainpage_container__information {
|
|
|
+ min-height: 297px;
|
|
|
+ max-width: 540px;
|
|
|
+ margin-left: calc(30px + (130 - 30) * ((100vw - 320px) / (1920 - 320)));
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+
|
|
|
+.mainpage_container__title {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 48px;
|
|
|
+ line-height: 1.1;
|
|
|
+ color: #000000;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.mainpage_container__description {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 1.1;
|
|
|
+ color: #727272;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.link_btn {
|
|
|
+ display: inline-block;
|
|
|
+ width: fit-content;
|
|
|
+ background-color: #34547A;
|
|
|
+ padding: 23px 38px;
|
|
|
+ text-decoration: none;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 16px;
|
|
|
+ letter-spacing: 0.1em;
|
|
|
+ color: #FFFFFF;
|
|
|
+ text-transform: uppercase;
|
|
|
+}
|
|
|
+
|
|
|
+.link_btn:hover {
|
|
|
+ transition: all .5s ease-in-out;
|
|
|
+ background-color: #7b65ec;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 992px) {
|
|
|
+ .mainpage_container {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .mainpage_container__notelogo {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .link_btn {
|
|
|
+ font-size: 12px;
|
|
|
+ letter-spacing: 0.1em;
|
|
|
+ color: #FFFFFF;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .mainpage_container__information {
|
|
|
+ max-width: 540px;
|
|
|
+ margin-left: 0;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mainpage_container__description {
|
|
|
+ text-align: center;
|
|
|
+ padding: 0px 5px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 569px) {
|
|
|
+ .mainpage_container__description {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mainpage_container__title {
|
|
|
+ font-size: 32px;
|
|
|
+ padding-left: 5px;
|
|
|
+ padding-right: 5px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* Aboutme--------------------------------------------------------------------------------- */
|
|
|
+
|
|
|
+#aboutme {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ padding: 120px 0 100px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.aboutme_description {
|
|
|
+ width: 540px;
|
|
|
+}
|
|
|
+
|
|
|
+.description__title {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 32px;
|
|
|
+ line-height: calc(38 / 32 * 100%);
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 50px;
|
|
|
+ color: #000000;
|
|
|
+}
|
|
|
+
|
|
|
+.description__text {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: calc(26 / 16 * 100%);
|
|
|
+ text-align: center;
|
|
|
+ color: #727272;
|
|
|
+}
|
|
|
+
|
|
|
+/* Projects --------------------------------------------------------------------------------------------*/
|
|
|
+.projects {
|
|
|
+ max-width: 100vw;
|
|
|
+ background: #34547A;
|
|
|
+ min-height: 250px;
|
|
|
+}
|
|
|
+
|
|
|
+.projects_row {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ padding-top: 100px;
|
|
|
+ padding-bottom: 100px;
|
|
|
+ margin-right: auto;
|
|
|
+ margin-left: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.projects_description:not(:first-child) {
|
|
|
+ margin: 0 0 0 50px;
|
|
|
+}
|
|
|
+
|
|
|
+.projects_description {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 50px;
|
|
|
+ width: 141px;
|
|
|
+}
|
|
|
+
|
|
|
+.projects_description__pict {
|
|
|
+ height: 50px;
|
|
|
+ width: 45%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+}
|
|
|
+
|
|
|
+.projects_description__about {
|
|
|
+ max-height: 50px;
|
|
|
+ width: 50%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ margin-left: 10px;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.projects_description__title {
|
|
|
+ font-family: 'Roboto';
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 21px;
|
|
|
+ line-height: calc(24, 61 / 21 * 100%);
|
|
|
+ color: #FFFFFF;
|
|
|
+ margin: 0 0;
|
|
|
+
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.projects_description__text {
|
|
|
+ margin: 0 0;
|
|
|
+ font-family: 'Roboto';
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: calc(26, 25 / 21 * 100%);
|
|
|
+ color: #FFFFFF;
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 1124px) {
|
|
|
+ .projects_description:not(:first-child) {
|
|
|
+ margin: 0 0 0 25px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 992px) {
|
|
|
+ .projects_row {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ padding-top: 25px;
|
|
|
+ padding-bottom: 25px;
|
|
|
+ margin-right: auto;
|
|
|
+ margin-left: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .projects_description:not(:first-child) {
|
|
|
+ margin: 10px 0 0 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* Skills---------------------------------------------------------------------------------------------------- */
|
|
|
+.container {
|
|
|
+ max-width: 1180px;
|
|
|
+ padding: 0 15px;
|
|
|
+ margin: 0 auto;
|
|
|
+}
|
|
|
+
|
|
|
+.section-skill {
|
|
|
+ padding: 100px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.skill-row {
|
|
|
+ display: flex;
|
|
|
+ margin: 0 -75px;
|
|
|
+ max-width: 1150px;
|
|
|
+ max-height: 450px;
|
|
|
+}
|
|
|
+
|
|
|
+.skill-coll {
|
|
|
+ width: 50%;
|
|
|
+ padding: 0 125px;
|
|
|
+}
|
|
|
+
|
|
|
+.skill-text {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.skill-bg {
|
|
|
+ background-size: cover;
|
|
|
+ background-position: center;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ padding-top: 48%;
|
|
|
+ max-height: 450px;
|
|
|
+ width: 45%;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.section-header {
|
|
|
+ padding-bottom: 25px;
|
|
|
+}
|
|
|
+
|
|
|
+.section-header .title {
|
|
|
+ line-height: 1.18;
|
|
|
+ margin: 0 0 25px;
|
|
|
+ font-family: 'Roboto';
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 32px;
|
|
|
+ color: #000000;
|
|
|
+}
|
|
|
+
|
|
|
+.skill-title {
|
|
|
+ line-height: 1.6;
|
|
|
+ display: block;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ margin-top: 10px;
|
|
|
+
|
|
|
+ font-family: 'Roboto';
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #727272;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.skill-item:not(:last-child) {
|
|
|
+ margin-bottom: 30px;
|
|
|
+}
|
|
|
+
|
|
|
+.skill-wrap {
|
|
|
+ position: relative;
|
|
|
+ height: 4px;
|
|
|
+ background: #c4c4c4;
|
|
|
+ z-index: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.skill {
|
|
|
+ background-color: #34547A;
|
|
|
+ position: relative;
|
|
|
+ z-index: 2;
|
|
|
+ height: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+/* How i work ----------------------------------------------------------------------------------------------------*/
|
|
|
+
|
|
|
+#howiwork {
|
|
|
+ width: 100%;
|
|
|
+ background: #EEEFF1;
|
|
|
+}
|
|
|
+
|
|
|
+.howiwork_container {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ padding-top: 100px;
|
|
|
+}
|
|
|
+
|
|
|
+.howiwork_description {
|
|
|
+ max-width: 540px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.howiwork_title {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 32px;
|
|
|
+ line-height: calc(37.5 / 32 * 100%);
|
|
|
+ text-align: center;
|
|
|
+ color: #000000;
|
|
|
+ margin-bottom: 60px;
|
|
|
+}
|
|
|
+
|
|
|
+.howiwork_information {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: calc(26.25 / 16 * 100%);
|
|
|
+ text-align: center;
|
|
|
+ color: #727272;
|
|
|
+}
|
|
|
+
|
|
|
+.howiwork_video {
|
|
|
+ min-height: 600px;
|
|
|
+ max-width: 1180px;
|
|
|
+ width: 96.2%;
|
|
|
+ margin: 57px 15px 100px 15px;
|
|
|
+ background: linear-gradient(0deg, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), url(code.png);
|
|
|
+ background-size: cover;
|
|
|
+ background-position: center;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.howiwork_button {
|
|
|
+ height: 100px;
|
|
|
+ width: 100px;
|
|
|
+ opacity: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.howiwork_button:hover {
|
|
|
+ transition: opacity .7s ease-in-out;
|
|
|
+ opacity: 1;
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 767px) {
|
|
|
+ .howiwork_title {
|
|
|
+ font-size: 24px;
|
|
|
+ margin-bottom: 50px;
|
|
|
+ line-height: calc(37.5 / 24 * 100%);
|
|
|
+ }
|
|
|
+
|
|
|
+ .howiwork_information {
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: calc(26.25 / 14 * 100%);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* Section photo -------------------------------------------------------------------------------------------------------*/
|
|
|
+.photo {
|
|
|
+ padding-top: 30px;
|
|
|
+}
|
|
|
+
|
|
|
+.photo_container {
|
|
|
+ height: 100%;
|
|
|
+ max-width: 1920px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.photo_row1 {
|
|
|
+ max-width: 1920px;
|
|
|
+ max-height: 480px;
|
|
|
+ min-height: 80px;
|
|
|
+ height: 25vw;
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+
|
|
|
+.photo_row2 {
|
|
|
+ max-width: 1920px;
|
|
|
+ max-height: 480px;
|
|
|
+ min-height: 80px;
|
|
|
+ height: 25vw;
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+
|
|
|
+.photo_row__straight {
|
|
|
+ background-size: cover;
|
|
|
+ background-position: center;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ max-height: 480px;
|
|
|
+ width: 25%;
|
|
|
+ min-width: 80px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.notebooks__eye {
|
|
|
+ background: url(notebooks.png);
|
|
|
+}
|
|
|
+
|
|
|
+.notebooks__eye:hover {
|
|
|
+ transition: all .5s linear;
|
|
|
+ background: linear-gradient(0deg, rgba(52, 84, 122, 0.8), rgba(52, 84, 122, 0.8)), url(notebooks.png);
|
|
|
+}
|
|
|
+
|
|
|
+.notes__eye {
|
|
|
+ background: url(notes.png);
|
|
|
+}
|
|
|
+
|
|
|
+.notes__eye:hover {
|
|
|
+ background: linear-gradient(0deg, rgba(52, 84, 122, 0.8), rgba(52, 84, 122, 0.8)), url(notes.png);
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.eye {
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ background-image: url(view.png);
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ opacity: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.eye:hover {
|
|
|
+ transition: all .6s ease-in;
|
|
|
+ opacity: 1;
|
|
|
+}
|
|
|
+
|
|
|
+/* Microsoft Logo ------------------------------------------------------------------------------------------------*/
|
|
|
+.microsoft_logo {
|
|
|
+ width: 100%;
|
|
|
+ min-height: 292px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.microsoft_logocontainer {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+
|
|
|
+.microsoftlogo {
|
|
|
+ width: 255px;
|
|
|
+ height: 120px;
|
|
|
+}
|
|
|
+
|
|
|
+.microsoftlogo:not(:first-child) {
|
|
|
+ margin: 0 0 0 30px;
|
|
|
+}
|
|
|
+
|
|
|
+@media screen and (max-width: 1124px) {
|
|
|
+ .microsoft_logo {
|
|
|
+ min-height: 540px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .microsoft_logocontainer {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ .microsoftlogo:not(:first-child) {
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* Form----------------------------------------------------------------------------------------------------- */
|
|
|
+.form {
|
|
|
+ width: 100%;
|
|
|
+ background-color: #EEEFF1;
|
|
|
+}
|
|
|
+
|
|
|
+.formcontainer {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ padding-top: 100px;
|
|
|
+ padding-bottom: 100px;
|
|
|
+}
|
|
|
+
|
|
|
+.form_description {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 65px;
|
|
|
+ max-width: 540px;
|
|
|
+}
|
|
|
+
|
|
|
+.form_description__title {
|
|
|
+ margin-bottom: 50px;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 32px;
|
|
|
+ line-height: calc(38 / 32 * 100%);
|
|
|
+ text-align: center;
|
|
|
+ color: #000000;
|
|
|
+}
|
|
|
+
|
|
|
+.form_description__text {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: calc(26.25 / 16 * 100%);
|
|
|
+ text-align: center;
|
|
|
+ color: #727272;
|
|
|
+}
|
|
|
+
|
|
|
+.forminput_container {
|
|
|
+ width: 30vw;
|
|
|
+ min-width: 290px;
|
|
|
+ max-width: 540px;
|
|
|
+}
|
|
|
+
|
|
|
+.form_input {
|
|
|
+ max-width: 540px;
|
|
|
+ min-height: 350px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+
|
|
|
+.form_input__nameemail {
|
|
|
+ max-width: 540px;
|
|
|
+ min-height: 50px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+
|
|
|
+.form_input__name,
|
|
|
+.form_input__email,
|
|
|
+.name,
|
|
|
+.email {
|
|
|
+ width: 98%;
|
|
|
+ height: 50px;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: calc(22.97 / 14 * 100%);
|
|
|
+ color: #5F5D5D;
|
|
|
+ border-style: none;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.form_input__email {
|
|
|
+ margin-left: 30px;
|
|
|
+}
|
|
|
+
|
|
|
+.message {
|
|
|
+ resize: none;
|
|
|
+ padding-left: 20px;
|
|
|
+ padding-top: 17px;
|
|
|
+}
|
|
|
+
|
|
|
+.form_input__message,
|
|
|
+.message {
|
|
|
+ width: 100%;
|
|
|
+ max-height: 175px;
|
|
|
+ min-height: 120px;
|
|
|
+ height: 10vw;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: calc(23 / 14 * 100%);
|
|
|
+ color: #5F5D5D;
|
|
|
+ border-style: none;
|
|
|
+}
|
|
|
+
|
|
|
+.name,
|
|
|
+.email {
|
|
|
+ display: inline-block;
|
|
|
+ padding-left: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.btn {
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: calc(23 / 14 * 100%);
|
|
|
+ letter-spacing: 0.15em;
|
|
|
+ margin: 0 auto;
|
|
|
+ display: inline-block;
|
|
|
+ background-color: #34547A;
|
|
|
+ padding: 14.4px 40.5px;
|
|
|
+ text-decoration: none;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ text-transform: uppercase;
|
|
|
+ border-style: none;
|
|
|
+}
|
|
|
+
|
|
|
+.btn:hover {
|
|
|
+ transition: all .5s ease-in-out;
|
|
|
+ background-color: #7b65ec;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+/* Footer----------------------------------------------------------------------------------------------------------------------- */
|
|
|
+#footer {
|
|
|
+ width: 100%;
|
|
|
+ min-height: 151px;
|
|
|
+ background: #34547A;
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+
|
|
|
+.footer_container {
|
|
|
+ display: flex;
|
|
|
+ align-content: center;
|
|
|
+ margin: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.footer_about {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.footer_name {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 21px;
|
|
|
+ line-height: calc(24.61 / 21 * 100%);
|
|
|
+ color: #FFFFFF;
|
|
|
+ margin-bottom: 20px;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.footer_year {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 13px;
|
|
|
+ line-height: calc(21.33 / 13 * 100%);
|
|
|
+ color: #FFFFFF;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.footer_logo {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-left: 757px;
|
|
|
+ flex-shrink: 0;
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 1180px) {
|
|
|
+ .footer_logo {
|
|
|
+ margin-left: 500px;
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 890px) {
|
|
|
+ .footer_logo {
|
|
|
+ margin-left: 300px;
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 683px) {
|
|
|
+ .footer_logo {
|
|
|
+ margin-left: 150px;
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 533px) {
|
|
|
+ .footer_logo {
|
|
|
+ margin-left: 50px;
|
|
|
+
|
|
|
+ }
|
|
|
+}
|