├── img
├── karina.jpg
└── profile.jpg
├── app.js
├── index.html
└── style.css
/img/karina.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/amiryusupov/Unplash/HEAD/img/karina.jpg
--------------------------------------------------------------------------------
/img/profile.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/amiryusupov/Unplash/HEAD/img/profile.jpg
--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
1 | document.addEventListener('DOMContentLoaded', function(){
2 | let tl = gsap.timeline()
3 | tl.to(".right", 2.5, {
4 | width:"50%",
5 | ease:"Expo.easeInOut"
6 | })
7 |
8 | tl.to(".left", 2.5, {
9 | width:"50%",
10 | ease:"Expo.easeInOut"
11 | },"-=2")
12 |
13 | tl.from(".text h1", 2, {
14 | x:"100%",
15 | ease:"Expo.easeInOut"
16 | },"-=1.2")
17 |
18 | tl.from(".text p", 2, {
19 | x:"100%",
20 | stagger:0.1,
21 | ease:"Expo.easeInOut"
22 | },"-=1.2")
23 |
24 | tl.from(".bottom_nav ul li", 2, {
25 | x:"200%",
26 | stagger:0.2,
27 | ease:"Expo.easeInOut"
28 | },"-=1.5")
29 |
30 | tl.from(".info", 2, {
31 | y:"200%",
32 | ease:"Expo.easeInOut"
33 | },"-=1.5")
34 | tl.from(".main__nav", 2, {
35 | y:"-200%",
36 | ease:"Expo.easeInOut"
37 | },"-=1.5")
38 | tl.from(".name", 2, {
39 | x:"-200%",
40 | ease:"Expo.easeInOut"
41 | },"-=1.5")
42 | })
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Document
9 |
10 |
11 |
12 |
13 |
14 |
15 |
27 |
28 |
29 |
32 |
33 |
34 | - Unsplash.com
35 | - @Karinates
36 | - Karinates.com
37 |
39 |
40 |
41 |
Karinates
42 |
Fashion Photographer
43 |
44 |
45 |
Karinates
46 |
47 |
48 |
49 | - Profile
50 | - Portfolio
51 | - Contact
52 |
53 |
54 |
55 |
57 |
Bu sayt telefon uchun moslanmagan
58 |
59 |
64 |
65 |
66 |
67 |
68 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | font-family: "Montserrat", sans-serif;
9 | width: 100%;
10 | height: 100vh;
11 | overflow: hidden;
12 | }
13 |
14 | ul {
15 | list-style: none;
16 | }
17 |
18 | .left,
19 | .right {
20 | position: absolute;
21 | /* width: 50%; */
22 | height: 100%;
23 | z-index: -1;
24 | }
25 |
26 | .left {
27 | background-color: #b3b4af;
28 | left: 0%;
29 | width: 0%;
30 | }
31 |
32 | .right {
33 | background-color: #191921;
34 | right: 0%;
35 | width: 100%;
36 | }
37 |
38 | nav ul {
39 | display: flex;
40 | justify-content: space-around;
41 | height: 80px;
42 | padding: 20px;
43 | }
44 |
45 | nav ul li {
46 | color: #fff;
47 | text-decoration: none;
48 | text-transform: uppercase;
49 | /* font-size: 8px; */
50 | letter-spacing: 3px;
51 | font-weight: 600;
52 | margin: 0;
53 | display: inline-block;
54 | padding: 0 30px;
55 | }
56 |
57 | nav .logo {
58 | flex: 1;
59 | font-size: 22px;
60 | font-weight: bolder;
61 | letter-spacing: 2px;
62 | }
63 |
64 | nav .menu {
65 | flex: 1;
66 | font-size: 18px;
67 | color: #fff;
68 | font-weight: bold;
69 | margin-top: 3px;
70 | }
71 |
72 | nav .collection {
73 | flex: 1;
74 | font-size: 8px;
75 | margin-top: 5px;
76 | }
77 |
78 | nav .explore {
79 | flex: 4;
80 | font-size: 8px;
81 | margin-top: 5px;
82 | }
83 |
84 | nav .search {
85 | flex: 3;
86 | font-size: 8px;
87 | margin-top: 5px;
88 | }
89 |
90 | nav .profile {
91 | flex: 0;
92 | }
93 |
94 | nav .profile .img {
95 | background: url(img/profile.jpg);
96 | background-size: cover;
97 | background-position: 50%;
98 | width: 30px;
99 | height: 30px;
100 | border-radius: 50%;
101 | }
102 |
103 | .img_wrapper {
104 | width: 42%;
105 | position: absolute;
106 | bottom: 0;
107 | left: 180px;
108 | }
109 |
110 | .img_wrapper .img {
111 | background: url(img/karina.jpg);
112 | background-size: cover;
113 | width: 0px;
114 | height: 550px;
115 | }
116 |
117 | .info {
118 | position: absolute;
119 | bottom: 0;
120 | left: 180px;
121 | background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
122 | padding: 0 10px;
123 | }
124 | /*
125 | .info ul{
126 | display: flex;
127 | justify-content: space-around;
128 | } */
129 |
130 | .info ul li {
131 | display: inline-block;
132 | padding: 20px 25px;
133 | color: #fff;
134 | font-size: 8px;
135 | letter-spacing: 3px;
136 | font-weight: 600;
137 | text-transform: uppercase;
138 | }
139 |
140 | .info ul li ion-icon {
141 | font-size: 18px;
142 | }
143 |
144 | .text {
145 | position: absolute;
146 | top: 50%;
147 | right: 0;
148 | transform: translateY(-50%);
149 | overflow: hidden;
150 | }
151 |
152 | .text h1 {
153 | font-size: 90px;
154 | color: #fff;
155 | text-transform: uppercase;
156 | }
157 |
158 | .text p {
159 | font-size: 20px;
160 | color: #fff;
161 | font-family: monospace;
162 | }
163 |
164 | .name {
165 | position: absolute;
166 | left: -270px;
167 | top: 50%;
168 | transform: translateY(-50%);
169 | color: transparent;
170 | font-size: 50px;
171 | text-transform: uppercase;
172 | -webkit-text-stroke: 2px #fff;
173 | }
174 |
175 | .bottom_nav {
176 | position: absolute;
177 | right: 100px;
178 | bottom: 100px;
179 | }
180 |
181 | .bottom_nav li {
182 | color: #fff;
183 | letter-spacing: 15px;
184 | text-transform: uppercase;
185 | margin-top: 20px;
186 | }
187 |
188 | .bottom_nav li:nth-child(2)::before {
189 | content: " ";
190 | width: 65px;
191 | border: 1px solid #fff;
192 | display: inline-block;
193 | margin: 0 10px 0 -78px;
194 | transform: translateY(-3px);
195 | }
196 | .mobile {
197 | display: none;
198 | }
199 | @media (max-width:767px) {
200 | .wrapper {
201 | display: none;
202 | }
203 | .mobile {
204 | width: 100%;
205 | height: 100vh;
206 | display: flex;
207 | justify-content: center;
208 | text-align: center;
209 | align-items: center;
210 | color: #fff;
211 | background-color: black;
212 | }
213 | }
--------------------------------------------------------------------------------