11* {
2- box-sizing : border-box;
3- }
4-
5- body {
6- font-family : Georgia, 'Times New Roman' , Times, serif;
7- margin : 0 ;
8- padding : 20px ;
9- background-color : # fffafa ;
10- display : flex;
11- flex-direction : column;
12- align-items : center;
13- overflow-x : hidden;
14- }
15- .heading {
16- display : flex;
17- justify-content : center;
18- }
19-
20- .content {
21- display : flex;
22- flex-direction : column;
23- align-items : center;
24- width : 400px ;
25- height : 200px ;
26- border-radius : 10px ;
27- background : rgb (84 , 84 , 248 );
28- color : # fffafa ;
29- font-size : 32px ;
30- justify-content : center;
31- margin : 20px ;
32- box-shadow : 2px 4px 5px rgba (0 , 0 , 0 , 0.3 );
33- transform : translateX (400% );
34- transition : transform 0.5s ease;
35- }
36- .content : nth-of-type (even ){
37- transform : translateX (-400% );
38- }
39- .content .show {
40- transform : translateX (0 );
41- }
2+ box-sizing : border-box;
3+ }
4+
5+ body {
6+ font-family : Georgia, 'Times New Roman' , Times, serif;
7+ margin : 0 ;
8+ padding : 20px ;
9+ background-color : # fffafa ;
10+ display : flex;
11+ flex-direction : column;
12+ align-items : center;
13+ overflow-x : hidden;
14+ }
15+
16+ .heading {
17+ display : flex;
18+ justify-content : center;
19+ }
20+
21+ .content {
22+ display : flex;
23+ flex-direction : column;
24+ align-items : center;
25+ width : 400px ;
26+ height : 200px ;
27+ border-radius : 10px ;
28+ background : rgb (84 , 84 , 248 );
29+ color : # fffafa ;
30+ font-size : 32px ;
31+ justify-content : center;
32+ margin : 20px ;
33+ box-shadow : 2px 4px 5px rgba (0 , 0 , 0 , 0.3 );
34+ transform : translateX (400% );
35+ transition : transform 0.5s ease;
36+ }
37+
38+ .content : nth-of-type (even ) {
39+ transform : translateX (-400% );
40+ }
41+
42+ .content .show {
43+ transform : translateX (0 );
44+ }
0 commit comments