Advertisement
Shpindlier

Untitled

May 13th, 2021
123
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 4.57 KB | None | 0 0
  1. .contact-content {
  2.   display: block;
  3.   padding-left: 16.7%;
  4.   margin: 40px;
  5. }
  6.  
  7. .contact-details {
  8.   margin-top: 40px;
  9.   display: flex;
  10.   justify-content: space-between;
  11. }
  12.  
  13. .contact-details__item {
  14.   padding: 1.5rem;
  15.   box-sizing: border-box;
  16.   background: #f8f9fa;
  17.   display: inline-block;
  18.   flex-basis: 25%;
  19.   max-height: 140px;
  20. }
  21.  
  22. .contact-details__item:not(:last-child) {
  23.   margin-right: 30px;
  24. }
  25.  
  26. .send-data {
  27.   padding-left: 16.7%;
  28.   margin-left: 40px;
  29.   background: #f8f9fa;
  30.   display: flex;
  31.   justify-content: space-between;
  32. }
  33.  
  34. .send-data-left-content {
  35.   width: 100%;
  36.   position: relative;
  37. }
  38.  
  39. .send-form {
  40.   margin: auto;
  41. }
  42.  
  43. .form-item {
  44.   display: block;
  45.   padding: 10px;
  46.   box-shadow: none;
  47.   margin-bottom: 1rem;
  48.   width: 300px;
  49.   font-size: 15px;
  50.   line-height: 1.8;
  51.   font-weight: 500;
  52.   color: #999;
  53.   border: none;
  54. }
  55.  
  56. .form-item:focus {
  57.   outline: none;
  58. }
  59.  
  60. .message-form {
  61.   width: 300px;
  62.   height: 160px;
  63. }
  64.  
  65. .form-button {
  66.   padding: 1rem;
  67.   border-radius: 40px;
  68.   background: #cbb78f;
  69.   text-align: center;
  70.   cursor: pointer;
  71.   color: #fff;
  72.   font-size: 15px;
  73.   line-height: 1.8;
  74.   font-weight: 500;
  75. }
  76.  
  77. @media (min-width: 1200px) {
  78. .col-sm-3 {
  79.     -ms-flex: 0 0 25%;
  80.     flex: 0 0 25%;
  81.     max-width: 60%;
  82. }
  83.  
  84. .footer-menu li a span {
  85.     color: rgba(255, 255, 255, 0.8);
  86.     position: absolute;
  87.     right: -34px;
  88.     top: 6px;
  89. }
  90.  
  91.  
  92. }
  93.  
  94. @media (min-width: 992px) and (max-width: 1199px) {
  95. .col-sm-3 {
  96.     -ms-flex: 0 0 25%;
  97.     flex: 0 0 25%;
  98.     max-width: 68%;
  99. }
  100.  
  101. .profile {
  102.     padding-top: 1em;
  103.     padding-left: 3em;
  104.     position: fixed;
  105.     top: 0;
  106.     left: 0;
  107.     bottom: 0;
  108.     right: 0;
  109.     width: 18%;
  110.     background: #f5f5f5;
  111. }
  112.  
  113.  
  114. }
  115.  
  116. @media (min-width: 768px) and (max-width: 991px) {
  117. .fa {
  118.     display: inline-block;
  119.     font: normal normal normal 14px/1 FontAwesome;
  120.     font-size: inherit;
  121.     text-rendering: auto;
  122.     -webkit-font-smoothing: antialiased;
  123.     -moz-osx-font-smoothing: grayscale;
  124. }
  125.  
  126. .header {
  127.     background: #ccb78f;
  128.     display: block;
  129.     margin-left: 0;
  130.     width: 100%;
  131.     padding: 1.8em;
  132. }
  133.  
  134. .contact-content {
  135.     display: block;
  136.     padding-left: 0;
  137.     margin: 40px;
  138. }
  139.  
  140. .send-data {
  141.     /* padding-left: 16.7%; */
  142.     /* margin-left: 40px; */
  143.     background: #f8f9fa;
  144.     display: flex;
  145.     justify-content: space-between;
  146. }
  147.  
  148. .col-sm-3 {
  149.     -ms-flex: 0 0 25%;
  150.     flex: 0 0 25%;
  151.     max-width: 88%;
  152. }
  153.  
  154. .footer-menu li a span {
  155.     color: rgba(255, 255, 255, 0.8);
  156.     position: absolute;
  157.     right: -61px;
  158.     top: 12px;
  159. }
  160.  
  161. .send-data {
  162.     padding-left: 56px;
  163.     margin-left: 0px;
  164.     background: #f8f9fa;
  165.     display: flex;
  166.     justify-content: space-between;
  167.     padding-top: 50px;
  168. }
  169.  
  170. }
  171.  
  172. @media (max-width: 767px) {
  173. .fa {
  174.     display: inline-block;
  175.     font: normal normal normal 14px/1 FontAwesome;
  176.     font-size: inherit;
  177.     text-rendering: auto;
  178.     -webkit-font-smoothing: antialiased;
  179.     -moz-osx-font-smoothing: grayscale;
  180. }
  181.  
  182. .header {
  183.     background: #ccb78f;
  184.     display: block;
  185.     margin-left: 0;
  186.     width: 100%;
  187.     padding: 1.8em;
  188. }
  189.  
  190. .contact-content {
  191.     display: block;
  192.     padding-left: 0;
  193.     margin: 40px;
  194. }
  195.  
  196. .send-data {
  197.     /* padding-left: 16.7%; */
  198.     /* margin-left: 40px; */
  199.     background: #f8f9fa;
  200.     display: flex;
  201.     justify-content: space-between;
  202. }
  203.  
  204. .col-sm-3 {
  205.     -ms-flex: 0 0 25%;
  206.     flex: 0 0 25%;
  207.     max-width: 88%;
  208. }
  209.  
  210. .footer-menu li a span {
  211.     color: rgba(255, 255, 255, 0.8);
  212.     position: absolute;
  213.     right: -61px;
  214.     top: 12px;
  215. }
  216.  
  217. .send-data {
  218.     padding-left: 56px;
  219.     margin-left: 0px;
  220.     background: #f8f9fa;
  221.     display: flex;
  222.     justify-content: space-between;
  223.     padding-top: 50px;
  224. }
  225.  
  226. .photos-wrap {
  227.     display: flex;
  228.     flex-wrap: wrap;
  229.     width: 20%;
  230. }
  231.  
  232. }
  233.  
  234. @media (max-width: 480px) {
  235. .contact-details {
  236.     margin-top: 40px;
  237.     display: flow-root;
  238.     justify-content: space-between;
  239. }
  240.  
  241. .send-data {
  242.     padding-left: 0px;
  243.     margin-left: 0px;
  244.     background: #f8f9fa;
  245.     display: flex;
  246.     justify-content: space-between;
  247.     padding-top: 50px;
  248. }
  249.  
  250. .form-item {
  251.     display: block;
  252.     padding: 10px;
  253.     box-shadow: none;
  254.     margin-bottom: 1rem;
  255.     width: 200px;
  256.     font-size: 15px;
  257.     line-height: 1.8;
  258.     font-weight: 500;
  259.     color: #999;
  260.     border: none;
  261. }
  262.  
  263.     iframe {
  264.         visibility: hidden;
  265.         height: 3%;
  266.         width: 3%;
  267.     }
  268.  
  269.     .header {
  270.     background: #ccb78f;
  271.     display: block;
  272.     margin-left: 0;
  273.     width: 105%;
  274.     padding: 1.8em;
  275. }
  276. }
  277.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement