Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- html {
- height: 100%;
- box-sizing: border-box;
- }
- *,
- *:before,
- *:after {
- box-sizing: inherit;
- }
- body {
- position: relative;
- margin: 0;
- padding-bottom: 16rem;
- min-height: 100%;
- background: #f1f1f1;
- }
- button {
- cursor: pointer;
- text-transform: uppercase;
- transition: all 0.3s ease-in;
- }
- input, textarea, button {
- -webkit-appearance: none;
- }
- .menu {
- height: 75px;
- }
- .search-input {
- position: relative;
- padding: 1rem 0 0.5rem 0;
- height: 4.3rem;
- width: 75%;
- }
- .ct-form {
- margin-top: 50px;
- height: 600px;
- width: 100%;
- }
- .ct-form button {
- margin-top: 80px;
- padding: 0.4rem 0 0.5rem 0;
- height: 2.2rem;
- width: 20%;
- margin-left: 2%;
- background: transparent;
- border: 1px solid black;
- color: black;
- font-size: 1.1em;
- font-weight: 100;
- }
- .main-block {
- height: auto;
- }
- .search-input input {
- border: none;
- border-bottom: 1px solid white;
- display: block;
- font-size: 1rem;
- line-height: 1rem;
- margin: 0;
- padding: 0.5rem 0;
- width: 100%;
- text-align: left;
- background-color: transparent;
- color: white;
- }
- .search-input input:focus {
- outline: none;
- }
- .search-input label {
- position: absolute;
- left: 0;
- top: 1.625rem;
- width: 100%;
- color: rgba(255, 255, 255, 0.3);
- font-size: 1rem;
- line-height: 1rem;
- font-weight: normal;
- pointer-events: none;
- transition: 0.2s ease all;
- -moz-transition: 0.2s ease all;
- -webkit-transition: 0.2s ease all;
- left: 20px;
- text-transform: uppercase;
- }
- .search-input input:focus ~ label {
- top: 0;
- font-size: 0.75rem;
- color: white;
- left: 0;
- }
- .search-input label.not-empty {
- top: 0;
- font-size: 0.75rem;
- }
- .search-input span:nth-of-type(3) {
- position: absolute;
- color: white;
- left: 100%;
- top: 1.625rem;
- font-size: 1rem;
- transition: 0.2s ease all;
- -moz-transition: 0.2s ease all;
- -webkit-transition: 0.2s ease all;
- }
- .search-input input:focus ~ span:nth-of-type(3) {
- left: -1.625rem;
- top: 1.625rem;
- color: white;
- }
- .search-input span:nth-of-type(3).not-empty {
- left: -1.625rem !important;
- top: 1.625rem !important;
- }
- .search-input span:nth-of-type(4) {
- position: absolute;
- color: white;
- right: 0;
- top: 1.625rem;
- font-size: 1rem;
- opacity: 0;
- transition: 0.2s ease all;
- -moz-transition: 0.2s ease all;
- -webkit-transition: 0.2s ease all;
- }
- .search-input input:focus ~ span:nth-of-type(4) {
- color: white;
- opacity: 1;
- cursor: pointer;
- }
- .search-input span:nth-of-type(4).not-empty {
- opacity: 1 !important;
- }
- .search-input .bar {
- display: block;
- width: 0;
- margin-left: 50%;
- height: 1px;
- background: white;
- opacity: 0;
- transition: 0.2s ease all;
- -moz-transition: 0.2s ease all;
- -webkit-transition: 0.2s ease all;
- }
- .search-input input:focus ~ .bar {
- opacity: 1;
- width: 100%;
- margin-left: 0;
- }
- /* End first search input */
- .search-input2 {
- position: relative;
- padding: 1rem 1em 0.5rem 1em;
- height: 4.5rem;
- width: 100%;
- }
- .search-input2 input {
- border: none;
- border-bottom: 1px solid black;
- display: block;
- font-size: 1rem;
- line-height: 1rem;
- margin: 0;
- padding: 0.6rem 0.2em;
- width: 100%;
- text-align: left;
- background-color: transparent;
- color: black;
- }
- .search-input2 input:focus {
- outline: none;
- }
- .search-input2 label {
- position: absolute;
- left: 40px;
- top: 1.625rem;
- width: 100%;
- color: rgba(0, 0, 0, 0.3);
- font-size: 1rem;
- line-height: 1rem;
- font-weight: normal;
- pointer-events: none;
- transition: 0.2s ease all;
- -moz-transition: 0.2s ease all;
- -webkit-transition: 0.2s ease all;
- }
- .search-input2 input:focus ~ label {
- top: 0;
- font-size: 0.75rem;
- color: black;
- left: 20px;
- }
- .search-input2 label.not-empty {
- top: 0;
- font-size: 0.75rem;
- }
- .search-input2 span:nth-of-type(3) {
- position: absolute;
- color: black;
- left: 100%;
- top: 1.625rem;
- font-size: 1rem;
- transition: 0.2s ease all;
- -moz-transition: 0.2s ease all;
- -webkit-transition: 0.2s ease all;
- }
- .search-input2 input:focus ~ span:nth-of-type(3) {
- left: -1.625rem;
- top: 1.625rem;
- color: black;
- }
- .search-input2 span:nth-of-type(3).not-empty {
- left: -1.625rem !important;
- top: 1.625rem !important;
- }
- .search-input2 span:nth-of-type(4) {
- position: absolute;
- color: black;
- right: 0;
- top: 1.625rem;
- font-size: 1rem;
- opacity: 0;
- transition: 0.2s ease all;
- -moz-transition: 0.2s ease all;
- -webkit-transition: 0.2s ease all;
- }
- .search-input2 input:focus ~ span:nth-of-type(4) {
- color: black;
- opacity: 1;
- cursor: pointer;
- }
- .search-input2 span:nth-of-type(4).not-empty {
- opacity: 1 !important;
- }
- .search-input2 .bar {
- display: block;
- width: 0;
- margin-left: 50%;
- height: 1px;
- background: black;
- opacity: 0;
- transition: 0.2s ease all;
- -moz-transition: 0.2s ease all;
- -webkit-transition: 0.2s ease all;
- }
- .search-input2 input:focus ~ .bar {
- opacity: 1;
- width: 100%;
- margin-left: 0;
- }
- /* textarea block */
- .search-input2 textarea {
- border: none;
- border-bottom: 1px solid black;
- display: block;
- font-size: 1rem;
- line-height: 1rem;
- margin: 0;
- padding: 0.5rem 1em 0.5em 1em;
- width: 100%;
- text-align: left;
- background-color: transparent;
- color: black;
- resize: none;
- height: 100px;
- }
- .search-input2 textarea:focus {
- outline: none;
- }
- .search-input2 textarea:focus ~ label {
- top: 0;
- font-size: 0.75rem;
- color: black;
- left: 20px;
- }
- .search-input2 label.not-empty {
- top: 0;
- font-size: 0.75rem;
- }
- .search-input2 textarea:focus ~ span:nth-of-type(3) {
- left: -1.625rem;
- top: 1.625rem;
- color: black;
- }
- .search-input2 textarea:focus ~ span:nth-of-type(4) {
- color: black;
- opacity: 1;
- cursor: pointer;
- }
- .search-input2 textarea:focus ~ .bar {
- opacity: 1;
- width: 100%;
- margin-left: 0;
- }
- /* End second first input */
- .main-container {
- width: 911px;
- margin: 0 auto;
- font-family: 'Open Sans', sans-serif;
- }
- .menu ul {
- display: flex;
- flex-direction: row;
- justify-content: center;
- align-items: center;
- align-content: center;
- height: 55px;
- width: 100%;
- background: black;
- color: white;
- padding: 0;
- list-style: none;
- margin-top: 0;
- }
- .menu ul li {
- padding-left: 10px;
- padding-right: 10px;
- text-transform: uppercase;
- font-family: 'Open Sans', sans-serif;
- font-size: 0.938em;
- font-weight: 400;
- }
- .main-container {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- align-content: center;
- }
- .first-block {
- background: url('/images/fb-bg.png') 50% 2%/cover no-repeat;
- margin-top: -20px;
- }
- .first-block .main-container {
- height: 400px;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: left;
- align-content: center;
- color: white;
- }
- .first-block .main-container .text {
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- position: relative;
- top: -40px;
- margin-left:40px;
- }
- .first-block .main-container .text div {
- width: 470px;
- }
- .first-block .main-container .text div:nth-child(1) {
- text-transform: uppercase;
- font-size: 2.5em
- }
- .first-block .main-container .text div:nth-child(2) {
- font-size: 1.563em;
- font-weight: 300;
- }
- .first-block .main-container .search {
- width: 100%;
- }
- .first-block .main-container .search-form {
- padding-left: 20px;
- padding-right: 20px;
- width: 100%;
- display: flex;
- position: relative;
- flex-direction: row;
- justify-content: center;
- align-items: center;
- bottom: -60px;
- }
- .first-block .main-container .search button {
- padding: 0.4rem 0 0.5rem 0;
- height: 2.2rem;
- width: 20%;
- margin-left: 3.2%;
- background: transparent;
- border: 1px solid white;
- color: white;
- font-size: 1.1em;
- font-weight: 100;
- }
- .main-block .banner {
- height: 100px;
- width: 750px;
- margin: 10px;
- border: 1px solid rgba(0,0,0,0.3);
- }
- .main-block .header {
- font-size: 2.5em;
- font-weight: 100;
- margin: 3%;
- text-transform: uppercase;
- }
- .main-block .category {
- width: 100%;
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- justify-content: center;
- align-content: center;
- align-items: center;
- }
- .main-block .category a {
- width: 30%;
- padding-left: 10px;
- padding-right: 10px;
- text-align: center;
- margin-bottom: 20px;
- height: 80px;
- border: 1px solid rgba(0,0,0,0.2);
- align-items: center;
- align-content: center;
- display: flex;
- justify-content: center;
- text-decoration: underline;
- text-transform: uppercase;
- font-size: 0.938em;
- background: white;
- }
- .main-block .category a div {
- width: 100%;
- height: 100%;
- align-items: center;
- align-content: center;
- display: flex;
- justify-content: center;
- text-decoration: underline;
- text-transform: uppercase;
- color: black;
- }
- .main-block .category.category-content {
- background: transparent;
- }
- .main-block .category.category-content div {
- width: 19%;
- height: 200px;
- margin-left: 0.4%;
- margin-right: 0.4%;
- background: transparent;
- border: none;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-content: center;
- text-align: center;
- align-items: center;
- }
- .main-block .category.category-content div .frans-logo {
- width: 100%;
- height: 100px;
- }
- .main-block .category.category-content div .text {
- width: 100%;
- height: 50px;
- padding: 0;
- text-decoration: underline;
- font-weight: 700;
- }
- .main-block .category.category-content div:nth-child(3n+2) {
- margin-left: 0.4%;
- margin-right: 0.4%;
- }
- .main-block .category a:nth-child(3n+2) {
- margin-left: 5%;
- margin-right: 5%;
- }
- .footer {
- position: absolute;
- right: 0;
- bottom: 0;
- left: 0;
- padding: 1rem;
- background-color: #000;
- }
- .footer .main-container {
- justify-content: space-between;
- flex-direction: row;
- }
- .footer .copy {
- width: 150px;
- height: 200px;
- display: flex;
- flex-direction: column;
- align-content: center;
- justify-content: center;
- align-items: center;
- text-align: center;
- }
- .footer .copy .logo {
- height: 100px;
- width: 100%;
- }
- .footer .text {
- color: #555;
- font-size: 0.938em;
- }
- .footer .metr .text {
- margin-top: 20px;
- }
- .footer .metr {
- width: 250px;
- height: 100px;
- display: flex;
- flex-direction: column;
- align-content: center;
- justify-content: center;
- align-items: flex-end;
- text-align: center;
- }
- .hamburger, .cross {
- display: none;
- width: 0;
- height: 0;
- }
- .menu ul a {
- color: white;
- text-decoration: none;
- }
- .box-card {
- width: 100%;
- height: auto;
- padding: 25px;
- background: white;
- display: flex;
- flex-direction: row;
- align-content: center;
- align-items: center;
- justify-content: space-between;
- flex-wrap: wrap;
- }
- .box-card a {
- color: black;
- }
- .box-card .left-block {
- display: flex;
- width: 48%;
- justify-content: flex-start;
- align-items: flex-start;
- flex-direction: column;
- height: 400px;
- position: relative;
- }
- .box-card .left-block .info {
- display: flex;
- justify-content: flex-start;
- flex-direction: column;
- font-size: 0.938em;
- width: 100%;
- }
- .box-card .right-block {
- display: flex;
- width: 48%;
- justify-content: flex-start;
- align-items: flex-start;
- flex-direction: column;
- height: 400px;
- position: relative;
- }
- .box-card .left-block .info .info-left {
- width: 65%;
- text-align: left;
- }
- .box-card .left-block .info .info-right {
- width: 30%;
- text-align: left;
- }
- .box-card .left-block .info>div {
- display: flex;
- justify-content: space-between;
- align-items: center;
- align-content: center;
- magin-top: 10px;
- margin-bottom: 10px;
- }
- .box-card .left-block .description {
- width: 100%;
- text-align: left;
- height: 200px;
- margin-top: 20px;
- }
- .box-card button {
- padding: 0.4rem 0 0.5rem 0;
- height: 2.2rem;
- width: 250px;
- margin-left: 3.2%;
- background: transparent;
- border: 1px solid black;
- color: black;
- font-size: 1.1em;
- font-weight: 100;
- }
- .box-card .right-block .main-logo {
- width: 100%;
- height: 250px;
- }
- .box-card .right-block .give-edit {
- margin-top: 25px;
- }
- .box-card .right-block .frans-info {
- position: absolute;
- bottom: 0;
- }
- .box-card .left-block .send {
- bottom: 0;
- position: absolute;
- }
- .feedback {
- margin-top: 30px;
- margin-bottom: 50px;
- width: 100%;
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- justify-content: center;
- }
- .feedback .row-1, .feedback .row-2 {
- height: auto;
- width: 70%;
- display: flex;
- flex-direction: column;
- background: white;
- padding: 15px;
- }
- .feedback .row-1:after {
- content: '';
- position: relative;
- width: 20px;
- border: 20px solid transparent;
- border-top: 20px solid white;
- bottom: -53px;
- left: 18px;
- }
- .feedback .row-2:after {
- content: '';
- position: relative;
- width: 20px;
- border: 20px solid transparent;
- border-top: 20px solid white;
- bottom: -53px;
- left: calc(100% - 58px);
- }
- .feedback .row-2 {
- margin-left: auto;
- margin-top: 50px;
- }
- .feedback .row-1 {
- margin-top: 50px;
- }
- .feedback .top-block {
- display: flex;
- flex-direction: row;
- justify-content: flex-start;
- align-items: center;
- }
- .feedback .top-block>div {
- margin-right: 20px;
- }
- .feedback .feedback-text {
- padding: 20px;
- }
- button:not(.burger):hover, button:not(.cross):hover {
- cursor: pointer;
- text-transform: uppercase;
- transition: all 0.3s ease-in;
- color: white !important;
- background: #7ac142 !important;
- }
- .first-block .main-container .search button:hover {
- color: black !important;
- }
- @media screen and (max-width: 911px) {
- body {
- padding-bottom: 29em;
- font-size: 0.9em;
- }
- .first-block .main-container .text {
- font-size: 0.8em;
- }
- .main-container {
- width: 100%;
- }
- .footer {
- height: 400px;
- }
- .footer .metr {
- align-items: center;
- margin-top: 60px;
- }
- .footer .main-container {
- flex-direction: column-reverse;
- justify-content: space-around;
- }
- .main-block .category a {
- width: 40%;
- margin-left: 5%;
- margin-right: 5%;
- }
- .main-block .banner {
- width: 80%;
- }
- .hamburger{
- display: block;
- background:none;
- position:fixed;
- top:0;
- right:0;
- line-height:45px;
- padding: 0px 15px 0px 15px;
- color:#bbb;
- border:0;
- font-size: 3em;
- font-weight:bold;
- cursor:pointer;
- outline:none;
- margin-top: 15px;
- margin-right: 45px;
- z-index:10000000000000;
- width: 50px;
- height: 50px;
- }
- .cross{
- display: block;
- background:none;
- position:fixed;
- top:0px;
- right:0;
- padding:0px 15px 0px 15px;
- color:#bbb;
- border:0;
- margin-top: 15px;
- margin-right: 45px;
- font-size: 3em;
- line-height:65px;
- font-weight:bold;
- cursor:pointer;
- outline:none;
- z-index:10000000000000;
- width: 50px;
- height: 50px;
- }
- .menu{ z-index:1000000; font-weight:bold; font-size:0.8em; width:100%; background:black; position:fixed; text-align:center; font-size:12px; height: auto;}
- .menu ul {display: block; height: auto; background: black; position: relative; top: 15px; margin: 0; padding: 0; list-style-type: none; list-style-image: none;}
- .menu li {display: block; padding:35px 0 35px 0; border-bottom:#dddddd 1px solid;}
- .menu li:hover{display: block; background:#ffffff; padding:35px 0 35px 0; border-bottom:#dddddd 1px solid;}
- .menu ul li a { text-decoration:none; margin: 0px; color:#fff;}
- .menu ul li a:hover { color: #000; text-decoration:none;}
- .menu ul a{text-decoration:none; color:#fff;}
- .menu ul a:hover{text-decoration:none; color:#000;}
- .first-block .main-container .text {
- margin-left: 40px;
- }
- .main-block .category.category-content div {
- width: 48%;
- height: 200px;
- margin-left: 0.4%;
- margin-right: 0.4%;
- background: transparent;
- border: none;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-content: center;
- text-align: center;
- align-items: center;
- }
- .box-card {
- flex-direction: column;
- }
- .box-card .left-block , .box-card .right-block {
- width: 100%;
- margin-bottom: 40px;
- }
- .box-card .left-block .description {
- height: auto;
- }
- .box-card .left-block {
- padding-bottom: 100px;
- height: auto;
- }
- .feedback {
- align-items: center;
- }
- .feedback .row-1, .feedback .row-2 {
- width: 94%;
- margin-left: 3%;
- margin-right: 3%;
- }
- .box-card .left-block, .box-card .right-block {
- align-items: center;
- justify-content: center;
- }
- }
- @media screen and (max-width: 711px) {
- .main-block .category a {
- width: 90%;
- margin-left: 5%;
- margin-right: 5%;
- }
- .main-block .category.category-content div {
- width: 100%;
- height: 200px;
- margin-left: 0.4%;
- margin-right: 0.4%;
- background: transparent;
- border: none;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-content: center;
- text-align: center;
- align-items: center;
- }
- .main-block .category.category-content div .frans-logo {
- width: 400px;
- height: 100px;
- }
- .first-block .main-container .search button {
- width: 50%;
- }
- .search-form .search-input {
- width: 100%;
- }
- .first-block .main-container .search-form {
- flex-direction: column;
- }
- .ct-form button {
- width: 50%;
- left: 0;
- right: 0;
- position: relative;
- }
- .ct-form form {
- display: flex;
- flex-direction: column;
- align-items: center;
- align-content: center;
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement