Untitled

z Funky Duck, 4 miesiące temu, napisane w CSS, wyświetlone 26 razy.
URL https://codetab.e3x.pl/view/3b43db86 Udostępnij
Pobierz wklejkę lub Pokaż surowy tekst
  1.  
  2. .header .header__logo-img {
  3.     margin-top: 6rem;
  4. }
  5.  
  6. .header-main__logo {
  7.     margin-top: 0rem;
  8. }
  9.  
  10.  
  11.                         img.subheader_up {
  12.     display: block;
  13.     margin: 0 auto;
  14.     max-width: 280px;
  15.     margin-bottom: -264px;
  16. }
  17.  
  18. .subheader {
  19.     margin-top: -134px;
  20. }
  21.  
  22. .header .header__nav.header__nav--main {
  23.     margin-top: 7rem;
  24. }
  25.  
  26. @media(max-width: 1200px) {
  27.        
  28.     .gallery__img {
  29.         height: auto;
  30.         object-fit: unset;
  31.     }
  32.    
  33.     .header .header__logo {
  34.         top: 2.33rem;
  35.         left: 0;
  36.         width: 100px;
  37.     }
  38.  
  39.     .header .header__nav.header__nav--main {
  40.         margin-top: 10rem;
  41.     }
  42.  
  43.     img.subheader_up {
  44.         max-width: 200px;
  45.                           max-height: 42vh;
  46.                           margin-bottom: -182px;
  47.     }
  48.  
  49. }
  50.  
  51.  
  52. @media(max-width: 700px) {
  53.     .subheader__triangle--3 {
  54.         top: 40%;
  55.         transform: translateY(-25%);
  56.         left: auto;
  57.         right: 10%;
  58.         width: 43%;
  59.     }
  60.  
  61.     .subheader__triangle--1 {
  62.         transform: translateY(-124%);
  63.         top: 60%;
  64.         width: 47%;
  65.         /* left: 16%; */
  66.         height: 30vh;
  67.     }
  68.  
  69.     .subheader__triangle--2 {
  70.         top: 23%;
  71.         left: 50%;
  72.         max-height: 20vw;
  73.     }
  74.  
  75.     .header .header__nav-item.header__nav-item--main:first-of-type {
  76.         margin-right: 0rem;
  77.         right: -10px;
  78.     }
  79.  
  80.     .header-main__logo {
  81.         transform: scale(1);
  82.         width: 90px;
  83.         margin-left: 30px;
  84.         margin-bottom: 10px;
  85.     }
  86. }
  87.  
  88. @media(max-width: 600px) {
  89.     .subheader__triangle--3 {
  90.         top: 67%;
  91.         /* left: 5%; */
  92.         transform: translateY(-120%);
  93.     }
  94.  
  95.     .subheader__triangle--1 {
  96.         transform: translateY(-86%);
  97.     }
  98.  
  99.     .subheader__triangle--2 {
  100.         top: 29%;
  101.         left: 50%;
  102.         max-height: 32vw;
  103.         width: 68%;
  104.     }
  105.  
  106. }
  107.  
  108.  
  109. @media(max-width: 400px) {
  110.     .header-main__logo {
  111.         transform: scale(1);
  112.         width: 70px;
  113.         margin-left: 30px;
  114.         margin-bottom: 10px;
  115.     }
  116.    
  117.  
  118.     .header .header__logo {
  119.         top: 4.5rem;
  120.         left: 0;
  121.         width: 70px;
  122.     }
  123. }
  124.  
  125.  
  126. /* +900px */
  127. @media(max-width: 1200px) {
  128.     .subheader__triangle {width: auto;max-height: 23vw;height: auto;}
  129. }
  130.  
  131. /* +900px */
  132. @media(min-width: 900px) {
  133.     .subheader__triangle {width: auto;}
  134. }
  135.  
  136. @media(min-width: 1600px) {
  137.     .subheader__triangle {max-height: 19vw;}
  138. }
  139.  
  140.  
  141. @media(max-width: 1200px) {
  142.     .subheader__container a.subheader__btn.btn.btn--no-icons {top: 80%;}
  143. }
  144.  
  145.  
  146. @media(min-width: 1201px) {
  147.     .subheader__container a.subheader__btn.btn.btn--no-icons {top: 80%;}
  148. }
  149.  
  150.  
  151. @media(max-width: 300px) {
  152.     .header .header__nav-item.header__nav-item--main:first-of-type {
  153.         right: -30px;
  154.     }
  155. }
  156.  
  157. /* -900px  */
  158. @media(max-width: 900px) {
  159.     .subheader__triangle {width: auto;max-height: 24vw;height: auto;}
  160.         .subheader__triangle--1 {height: 30vw;}
  161.         .subheader__triangle--2 {height: 36vw; margin-bottom: 30px;}
  162.         .subheader__triangle--3 {height: 26vw;}
  163. }
  164.  
  165. @media(max-width: 700px) {
  166.     .subheader__triangle--1 {top: 68%;}
  167.     .subheader__triangle {width: auto;max-height: 24vw;height: auto;}
  168.  
  169.     .subheader__container a.subheader__btn.btn.btn--no-icons {
  170.       left: 50%;
  171.       transform: translateX(-100%);
  172.       top: 70%;
  173.     }
  174. }
  175.  
  176. @media(max-width: 600px) {
  177.     .subheader__triangle--1 {top: 59%;left: 10%;}
  178.     .subheader__triangle {height: auto;}
  179. }
  180.  
  181. @media(max-width: 400px) {
  182.     .subheader__triangle--1 {top: 50%;left: 6%;}
  183.     .subheader__triangle--3 {top: 57%;right: 7%;}
  184.         .subheader__triangle--2 {height: 30vw;}
  185.     .subheader__triangle {max-height: 25vw;height: 26vw !important;min-height: auto;}
  186.  
  187.     .subheader__container a.subheader__btn.btn.btn--no-icons {
  188.       left: 0%;
  189.       transform: unset;
  190.       width: 100%;
  191.       margin-bottom: 6px;
  192.       top: 60%;
  193.     }
  194. }
  195.  
  196. img.subheader__triangle.subheader__triangle--3 {}

odpowiedź "Untitled"

Tutaj możesz odpowiedzieć na wklejkę z góry

captcha