1- @import url (https://fonts.googleapis.com/css2?family=Cairo:wght@300;400 ;500 ;600 ;700 & dis play= swap);* {margin : 0 ;padding : 0 ;-webkit-box-sizing : border-box;box-sizing : border-box}body {font-family : Cairo, sans-serif}html {scroll-behavior : smooth}::-moz-selection {background-color : # e5b80b!important }::selection {background-color : # e5b80b!important }a {text-decoration : none!important ;color : # 000!important }.github {background-color : # 181a18 ;height : 30px ;color : # fff }.github a {color : # efd81d!important }.github a : hover {text-decoration : underline!important }nav {background-color : # efd81d ;height : 60px ;-webkit-box-shadow : 0 5px 40px rgba (0 , 0 , 0 , .2 );box-shadow : 0 5px 40px rgba (0 , 0 , 0 , .2 )}nav .container {display : -webkit-box;display : -ms-flexbox;display : flex;-webkit-box-align : center;-ms-flex-align : center;align-items : center;-webkit-box-pack : justify;-ms-flex-pack : justify;justify-content : space-between;height : -webkit-fit-content;height : -moz-fit-content;height : fit-content}nav .container .logo {width : 30px ;font-weight : 700 ;cursor : pointer;color : # 000 }nav .container i {display : none!important ;font-size : 25px ;cursor : pointer}nav .container ul {display : -webkit-box;display : -ms-flexbox;display : flex;-webkit-box-pack : center;-ms-flex-pack : center;justify-content : center;list-style-type : none;height : 100% ;position : relative}nav .container ul li {margin : 10px 15px 0 ;text-transform : capitalize;cursor : pointer}nav .container ul li : hover {color : # fff }nav .container ul li : hover a {height : 100% ;width : 100% ;color : # fff!important }@media (max-width : 768px ){nav .container i {display : block!important }nav .container ul {display : none!important }}.screen {position : fixed;top : 0 ;left : 0 ;right : 0 ;bottom : 0 ;background : # efd81d ;display : -webkit-box;display : -ms-flexbox;display : flex;-webkit-box-align : center;-ms-flex-align : center;align-items : center;z-index : 999 }.loader {width : 100% ;height : 15px ;text-align : center;position : absolute;top : 50% ;left : 50% ;-webkit-transform : translate (-50% , -50% );transform : translate (-50% , -50% );z-index : 1000 }.dot {position : relative;width : 15px ;height : 15px ;margin : 0 2px ;display : inline-block}.dot : first-child : after , .dot : first-child : before {-webkit-animation-delay : 0s ;animation-delay : 0s }.dot : last-child : after , .dot : last-child : before {-webkit-animation-delay : .2s ;animation-delay : .2s }.dot : before {content : "" ;position : absolute;left : 0 ;width : 15px ;height : 15px ;background-color : # 00f ;-webkit-animation-name : dotHover;animation-name : dotHover;-webkit-animation-duration : .9s ;animation-duration : .9s ;-webkit-animation-timing-function : cubic-bezier (.82 , 0 , .26 , 1 );animation-timing-function : cubic-bezier (.82 , 0 , .26 , 1 );-webkit-animation-iteration-count : infinite;animation-iteration-count : infinite;-webkit-animation-delay : .1s ;animation-delay : .1s ;background : # fff ;border-radius : 100% }.dot : after {content : "" ;position : absolute;z-index : -1 ;background : # 000 ;-webkit-box-shadow : 0 0 1px # 000 ;box-shadow : 0 0 1px # 000 ;opacity : .2 ;width : 100% ;height : 3px ;left : 0 ;bottom : -2px ;border-radius : 100% ;-webkit-animation-name : dotShadow;animation-name : dotShadow;-webkit-animation-duration : .9s ;animation-duration : .9s ;-webkit-animation-timing-function : cubic-bezier (.82 , 0 , .26 , 1 );animation-timing-function : cubic-bezier (.82 , 0 , .26 , 1 );-webkit-animation-iteration-count : infinite;animation-iteration-count : infinite;-webkit-animation-delay : .1s ;animation-delay : .1s }@-webkit-keyframes dotShadow{0% {-webkit-transform : scaleX (1 );transform : scaleX (1 )}50% {opacity : 0 ;-webkit-transform : scaleX (.6 );transform : scaleX (.6 )}100% {-webkit-transform : scaleX (1 );transform : scaleX (1 )}}@keyframes dotShadow{0% {-webkit-transform : scaleX (1 );transform : scaleX (1 )}50% {opacity : 0 ;-webkit-transform : scaleX (.6 );transform : scaleX (.6 )}100% {-webkit-transform : scaleX (1 );transform : scaleX (1 )}}@-webkit-keyframes dotHover{0% {top : 0 }50% {top : -50px ;-webkit-transform : scale (1.1 );transform : scale (1.1 )}100% {top : 0 }}@keyframes dotHover{0% {top : 0 }50% {top : -50px ;-webkit-transform : scale (1.1 );transform : scale (1.1 )}100% {top : 0 }}.landing {background-color : # eee ;height : calc (100vh - 90px )}.landing .coontainer {height : 100% ;width : 100% }.landing .coontainer img {border-radius : 50% }@media (max-width : 768px ){.landing .container {-webkit-box-orient : vertical;-webkit-box-direction : normal;-ms-flex-direction : column;flex-direction : column}.landing .container img {margin-bottom : 15px ;width : 50px }}
1+ @import url (https://fonts.googleapis.com/css2?family=Cairo:wght@300;400 ;500 ;600 ;700 & dis play= swap);
2+ * {
3+ margin : 0 ;
4+ padding : 0 ;
5+ -webkit-box-sizing : border-box;
6+ box-sizing : border-box;
7+ }
8+ body {
9+ font-family : Cairo, sans-serif;
10+ }
11+ html {
12+ scroll-behavior : smooth;
13+ }
14+ ::-moz-selection {
15+ background-color : # e5b80b !important ;
16+ }
17+ ::selection {
18+ background-color : # e5b80b !important ;
19+ }
20+ a {
21+ text-decoration : none !important ;
22+ color : # 000 !important ;
23+ }
24+ .github {
25+ background-color : # 181a18 ;
26+ height : 30px ;
27+ color : # fff ;
28+ }
29+ .github a {
30+ color : # efd81d !important ;
31+ }
32+ .github a : hover {
33+ text-decoration : underline !important ;
34+ }
35+ nav {
36+ background-color : # efd81d ;
37+ height : 60px ;
38+ -webkit-box-shadow : 0 5px 40px rgba (0 , 0 , 0 , 0.2 );
39+ box-shadow : 0 5px 40px rgba (0 , 0 , 0 , 0.2 );
40+ }
41+ nav .container {
42+ display : -webkit-box;
43+ display : -ms-flexbox;
44+ display : flex;
45+ -webkit-box-align : center;
46+ -ms-flex-align : center;
47+ align-items : center;
48+ -webkit-box-pack : justify;
49+ -ms-flex-pack : justify;
50+ justify-content : space-between;
51+ height : -webkit-fit-content;
52+ height : -moz-fit-content;
53+ height : fit-content;
54+ }
55+ nav .container .logo {
56+ width : 30px ;
57+ font-weight : 700 ;
58+ cursor : pointer;
59+ color : # 000 ;
60+ }
61+ nav .container i {
62+ display : none !important ;
63+ font-size : 25px ;
64+ cursor : pointer;
65+ }
66+ nav .container ul {
67+ display : -webkit-box;
68+ display : -ms-flexbox;
69+ display : flex;
70+ -webkit-box-pack : center;
71+ -ms-flex-pack : center;
72+ justify-content : center;
73+ list-style-type : none;
74+ height : 100% ;
75+ position : relative;
76+ }
77+ nav .container ul li {
78+ margin : 10px 15px 0 ;
79+ text-transform : capitalize;
80+ cursor : pointer;
81+ }
82+ nav .container ul li : hover {
83+ color : # fff ;
84+ }
85+ nav .container ul li : hover a {
86+ height : 100% ;
87+ width : 100% ;
88+ color : # fff !important ;
89+ }
90+ @media (max-width : 768px ) {
91+ nav .container i {
92+ display : block !important ;
93+ }
94+ nav .container ul {
95+ display : none !important ;
96+ }
97+ }
98+ .screen {
99+ position : fixed;
100+ top : 0 ;
101+ left : 0 ;
102+ right : 0 ;
103+ bottom : 0 ;
104+ background : # efd81d ;
105+ display : -webkit-box;
106+ display : -ms-flexbox;
107+ display : flex;
108+ -webkit-box-align : center;
109+ -ms-flex-align : center;
110+ align-items : center;
111+ z-index : 999 ;
112+ }
113+ .loader {
114+ width : 100% ;
115+ height : 15px ;
116+ text-align : center;
117+ position : absolute;
118+ top : 50% ;
119+ left : 50% ;
120+ -webkit-transform : translate (-50% , -50% );
121+ transform : translate (-50% , -50% );
122+ z-index : 1000 ;
123+ }
124+ .dot {
125+ position : relative;
126+ width : 15px ;
127+ height : 15px ;
128+ margin : 0 2px ;
129+ display : inline-block;
130+ }
131+ .dot : first-child : after ,
132+ .dot : first-child : before {
133+ -webkit-animation-delay : 0s ;
134+ animation-delay : 0s ;
135+ }
136+ .dot : last-child : after ,
137+ .dot : last-child : before {
138+ -webkit-animation-delay : 0.2s ;
139+ animation-delay : 0.2s ;
140+ }
141+ .dot : before {
142+ content : "" ;
143+ position : absolute;
144+ left : 0 ;
145+ width : 15px ;
146+ height : 15px ;
147+ background-color : # 00f ;
148+ -webkit-animation-name : dotHover;
149+ animation-name : dotHover;
150+ -webkit-animation-duration : 0.9s ;
151+ animation-duration : 0.9s ;
152+ -webkit-animation-timing-function : cubic-bezier (0.82 , 0 , 0.26 , 1 );
153+ animation-timing-function : cubic-bezier (0.82 , 0 , 0.26 , 1 );
154+ -webkit-animation-iteration-count : infinite;
155+ animation-iteration-count : infinite;
156+ -webkit-animation-delay : 0.1s ;
157+ animation-delay : 0.1s ;
158+ background : # fff ;
159+ border-radius : 100% ;
160+ }
161+ .dot : after {
162+ content : "" ;
163+ position : absolute;
164+ z-index : -1 ;
165+ background : # 000 ;
166+ -webkit-box-shadow : 0 0 1px # 000 ;
167+ box-shadow : 0 0 1px # 000 ;
168+ opacity : 0.2 ;
169+ width : 100% ;
170+ height : 3px ;
171+ left : 0 ;
172+ bottom : -2px ;
173+ border-radius : 100% ;
174+ -webkit-animation-name : dotShadow;
175+ animation-name : dotShadow;
176+ -webkit-animation-duration : 0.9s ;
177+ animation-duration : 0.9s ;
178+ -webkit-animation-timing-function : cubic-bezier (0.82 , 0 , 0.26 , 1 );
179+ animation-timing-function : cubic-bezier (0.82 , 0 , 0.26 , 1 );
180+ -webkit-animation-iteration-count : infinite;
181+ animation-iteration-count : infinite;
182+ -webkit-animation-delay : 0.1s ;
183+ animation-delay : 0.1s ;
184+ }
185+ @-webkit-keyframes dotShadow {
186+ 0% {
187+ -webkit-transform : scaleX (1 );
188+ transform : scaleX (1 );
189+ }
190+ 50% {
191+ opacity : 0 ;
192+ -webkit-transform : scaleX (0.6 );
193+ transform : scaleX (0.6 );
194+ }
195+ 100% {
196+ -webkit-transform : scaleX (1 );
197+ transform : scaleX (1 );
198+ }
199+ }
200+ @keyframes dotShadow {
201+ 0% {
202+ -webkit-transform : scaleX (1 );
203+ transform : scaleX (1 );
204+ }
205+ 50% {
206+ opacity : 0 ;
207+ -webkit-transform : scaleX (0.6 );
208+ transform : scaleX (0.6 );
209+ }
210+ 100% {
211+ -webkit-transform : scaleX (1 );
212+ transform : scaleX (1 );
213+ }
214+ }
215+ @-webkit-keyframes dotHover {
216+ 0% {
217+ top : 0 ;
218+ }
219+ 50% {
220+ top : -50px ;
221+ -webkit-transform : scale (1.1 );
222+ transform : scale (1.1 );
223+ }
224+ 100% {
225+ top : 0 ;
226+ }
227+ }
228+ @keyframes dotHover {
229+ 0% {
230+ top : 0 ;
231+ }
232+ 50% {
233+ top : -50px ;
234+ -webkit-transform : scale (1.1 );
235+ transform : scale (1.1 );
236+ }
237+ 100% {
238+ top : 0 ;
239+ }
240+ }
241+ .landing {
242+ background-color : # eee ;
243+ height : calc (100vh - 90px );
244+ }
245+ .landing .coontainer {
246+ height : 100% ;
247+ width : 100% ;
248+ }
249+ .landing .coontainer img {
250+ border-radius : 50% ;
251+ }
252+ @media (max-width : 768px ) {
253+ .landing .container {
254+ -webkit-box-orient : vertical;
255+ -webkit-box-direction : normal;
256+ -ms-flex-direction : column;
257+ flex-direction : column;
258+ }
259+ .landing .container img {
260+ margin-bottom : 15px ;
261+ width : 50px ;
262+ }
263+ }
0 commit comments