├── 01.png
├── app.js
├── style.css
└── index.html


/01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/amiryusupov/collection/HEAD/01.png


--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
 1 |     let tl = gsap.timeline()
 2 |     tl.to('.refresh-item1', 1.5,{
 3 |         y:"-100vh",
 4 |         ease:Expo.easeOut
 5 |     })
 6 |     tl.to('.refresh-item2', 1.5,{
 7 |         y:"-100vh",
 8 |         ease:Expo.easeOut
 9 |     },"-=1.2")
10 |     tl.to('.refresh-item3', 1.5,{
11 |         y:"-100vh",
12 |         ease:Expo.easeOut
13 |     },"-=1.2")
14 |     tl.from('.text-item1', .5, {
15 |         y:40,
16 |         opacity:0
17 |     },"-=1.2")
18 |     tl.from('.text-item3', .5, {
19 |         y:40,
20 |         opacity:0
21 |     },"-=1.1")
22 |     tl.from('.text-item4', .5, {
23 |         y:40,
24 |         opacity:0
25 |     },"-=1")
26 |     tl.from('.right__text-items', .5, {
27 |         y:20,
28 |         opacity:0
29 |     },"-=0.9")
30 |     tl.from('.down__text', .5, {
31 |         y:40,
32 |         opacity:0
33 |     },"-=0.8")
34 |     tl.from('.navbar div', .5, {
35 |         y:40,
36 |         stagger:0.3,
37 |         opacity:0
38 |     },"-=0.7")
39 |     tl.from('.left__text-item1, .left__text-item2, .left__text-item3', .5, {
40 |         x:-20,
41 |         stagger:0.3,
42 |         opacity:0
43 |     },"-=0.7")
44 |     tl.from('.text-item2', .7, {
45 |         x:-1000,
46 |     },"-=0.6")
47 |     tl.from('.img', 1, {
48 |         y:40,
49 |         opacity:0,
50 |     },"-=0.6")
51 | 


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500;700;900&display=swap');
  2 | * {
  3 |     margin: 0;
  4 |     padding: 0;
  5 |     box-sizing: border-box;
  6 | }
  7 | body {
  8 |     overflow-y: hidden;
  9 |     background-color: rgb(229 225 221);
 10 | }
 11 | span {
 12 |     font-family: 'Montserrat', sans-serif;
 13 | }
 14 | .wrapper {
 15 |     width: 100%;
 16 |     height: 100vh;
 17 |     position: relative;
 18 | }
 19 | .refresh {
 20 |     position: absolute;
 21 |     display: flex;
 22 |     width: 100%;
 23 |     height: 100vh;
 24 |     z-index: 5;
 25 | }
 26 | .refresh-item1, .refresh-item2, .refresh-item3 {
 27 |     width: 33.3%;
 28 |     height: 100vh;
 29 |     background-color: orange;
 30 | }
 31 | .max-width {
 32 |     width: 100%;
 33 |     height: 100vh;
 34 |     position: relative;
 35 |     max-width: 1500px;
 36 |     padding: 0 15px;
 37 |     margin: 0 auto;
 38 | }
 39 | .navbar {
 40 |     width: 100%;
 41 |     height: 50px;
 42 |     display: flex;
 43 |     justify-content: space-between;
 44 |     align-items: center;
 45 | }
 46 | .navbar__text span{
 47 |     margin-right: 50px;
 48 | }
 49 | .left__text-item2 {
 50 |     margin: 0 30px;
 51 | }
 52 | .left__text {
 53 |     position: absolute;
 54 |     left: -114px;
 55 |     bottom: 160px;
 56 |     display: flex;
 57 |     width: 273px;
 58 |     transform: rotate(-90deg);
 59 |     letter-spacing: 2px;
 60 | }
 61 | .text__box{
 62 |     text-transform: uppercase;
 63 |     position: absolute;
 64 |     left: 0;
 65 |     width: 100%;
 66 |     transform: rotate(-90deg);
 67 |     margin-top: -21%;
 68 |     margin-left: -23%;
 69 | }
 70 | .text-item1 {
 71 |     font-size: 100px;
 72 |     font-weight: 800;
 73 |     margin-bottom: 30px;
 74 |     opacity: 1;
 75 | }
 76 | .text-item2 {
 77 |     position: absolute;
 78 |     font-size: 136px;
 79 |     font-weight: 600;
 80 |     color: rgb(255, 196, 0);
 81 |     margin-top: -100px;
 82 |     z-index: -1;
 83 |     margin-left: -40px;
 84 | }
 85 | .text-item3 {
 86 |     font-size: 40px;
 87 |     font-weight: 600;
 88 |     width: 500px;
 89 |     opacity: 1;
 90 | }
 91 | .text-item4 {
 92 |     width: 300px;
 93 |     margin-top: 15px;
 94 |     opacity: 1;
 95 | }
 96 | .right__text {
 97 |     position: absolute;
 98 |     bottom: 10%;
 99 |     right: 0;
100 | }
101 | .right__text-items {
102 |     font-size: 35px;
103 |     font-weight: 900;
104 |     margin-left: 10pc;
105 |     transform: rotate(-90deg);
106 | }
107 | .down__text {
108 |     font-weight: 900;
109 |     margin-top: 20px;
110 |     transform: rotate(180deg);
111 | }
112 | .img {
113 |     height: 100%;
114 |     margin-left: 47%;
115 | }
116 | .img img {
117 |     width: 70%;
118 |     height: 93%;
119 |     object-fit: contain;
120 | }
121 | .mobile {
122 |     display: none;
123 | }
124 | @media (max-width:767px) {
125 |     .wrapper {
126 |         display: none;
127 |     }
128 |     .mobile {
129 |         width: 100%;
130 |         height: 100vh;
131 |         display: flex;
132 |         justify-content: center;
133 |         text-align: center;
134 |         align-items: center;
135 |         color: #fff;
136 |         background-color: black;
137 |         font-family: sans-serif;  
138 |     }
139 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 8 |     <link rel="stylesheet" href="style.css">
 9 |     <title>Document</title>
10 | </head>
11 | <body>
12 | 
13 |     <div class="wrapper">
14 | 
15 |         <div class="refresh">
16 |             <div class="refresh-item1"></div>
17 |             <div class="refresh-item2"></div>
18 |             <div class="refresh-item3"></div>
19 |         </div>
20 | 
21 |         <div class="max-width">
22 |             <div class="header">
23 |                 <div class="navbar">
24 |                     <div class="navbar__icon">
25 |                         <i class="fa fa-bars" aria-hidden="true"></i>
26 |                     </div>
27 |                     <div class="navbar__text">
28 |                         <span>ENG</span>
29 |                         <i class="fa fa-search" aria-hidden="true"></i>
30 |                     </div>
31 |                 </div>
32 |             </div>
33 |     
34 |             <div class="left__text">
35 |                 <div class="left__text-item1">
36 |                     <span>facebook</span>
37 |                 </div>
38 |                 <div class="left__text-item2">
39 |                     <span>instagram</span>
40 |                 </div>
41 |                 <div class="left__text-item3">
42 |                     <span>twitter</span>
43 |                 </div>
44 |             </div>
45 |     
46 |             <div class="text__box">
47 |                 <div class="text-item1">
48 |                     <span>Toni&Guy</span>
49 |                 </div>
50 |                 <div class="text-item2">
51 |                     <span>Duality</span>
52 |                 </div>
53 |                 <div class="text-item3">
54 |                     <span>Collection 2017 Duality</span>
55 |                 </div>
56 |                 <div class="text-item4">
57 |                     <span>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempora distinctio architecto eum tenetur sed soluta esse a velit amet. Labore.</span>
58 |                 </div>
59 |             </div>
60 |             <div class="right__text">
61 |                 <div class="right__text-items">
62 |                     <div class="right__text-item1">
63 |                         <span>London</span>
64 |                     </div>
65 |                     <div class="right__text-item2">
66 |                         <span>Fashion</span>
67 |                     </div>
68 |                     <div class="right__text-item3">
69 |                         <span>Week</span>
70 |                     </div>
71 |                 </div>
72 |                 <div class="down__text">
73 |                     <span>Official sponsor</span>
74 |                 </div>
75 |             </div>
76 |             <div class="img">
77 |                 <img src="./01.png" alt="">
78 |             </div>
79 |         </div>
80 |     </div>
81 |     <div class="mobile">
82 |         <h1>Bu sayt telefon uchun moslanmagan</h1>
83 |     </div>
84 | 
85 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js" integrity="sha512-eP6ippJojIKXKO8EPLtsUMS+/sAGHGo1UN/38swqZa1ypfcD4I0V/ac5G3VzaHfDaklFmQLEs51lhkkVaqg60Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
86 |     <script src="./app.js"></script>
87 | </body>
88 | </html>


--------------------------------------------------------------------------------