parallaxProject/styles.css at main · Rinalm/parallaxProject · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}

#wrapper{
    height:100vh;
    overflow-x:hidden;
    /* stopping scroll in x-axis( overflow-x:hidden;) */
    /*overflow-y:auto;*/
     /* if this not written then scrolling still continnues  */

    perspective:10px;
    /* for z-axis req. to define perspective(perspective:10px;) */
}

.container{
    position:relative;
    display: flex;
    justify-content:center;
    align-items:center;
    height:100%;

    transform-style: preserve-3d;
    /* for starting 3D (transform-style: preserve-3d;) */

    z-index: -1;
    /* mdn this and also  serch for its requ. or not ? */
}

.background{
    transform:translateZ(-40px) scale(5);
    /* 1)ctransform:translateZ(-40px) it put img in z-axis goes far from me
       2) scale(5) for increase the size of backgrd img */
}

.foreground{
    transform:translateZ(-20px) scale(3);
}

.background, .foreground{
    position:absolute;
    height:100%;
    width:100%;

    object-fit: cover;
   /* mdn kr iska TASK  */
   /*  a css property used to specify how img or video req. to resize to fit its container*/
   /* for fitting(overlapping) both imgs according to the size of screen +`  */
    z-index:-1;
    /* mdn this z-index for giving  text above 2nd img */
}
h1{
    position: absolute;
    top: 9rem;
    font-size: 5rem;
    color: whitesmoke;
    text-shadow: 0 0 10px rgb(116, 115, 113);
}

section{
    background-color:rgb(45, 45, 45);
    color: white;
    padding:5rem 0;
}


.bg{
    position: relative;
    width:100%;
    height: 500px;
    background-attachment: fixed;
    /* if this not done then img scroll with scrollling */

    background-size: cover;
    background-position: center;
     /* for placing or overlapping (img size) acc. to {screen size the size ( height & width) we give to it } */

}

.bg1{
    background-image: url(sport-1.jpg);
}
.bg2{
    background-image: url(sport-2.jpg);
}
.bg3{
    background-image: url(sport-3.jpg);
}
.adv{
    font-size: 5rem;
    padding: 0 10rem;
}
 .text{
    font-size: 1.5rem;
    padding: 0 10rem;
    margin: 5rem 0;
}

.doco{
    position: absolute;
    background-color: whitesmoke;
    padding: 0.5rem 2.5rem;
    top:50%;
    left:50%;

    transform: translateX(-50%) translateX(-50%);
    /* for shifting subtopics positon alinged */
    color: black;
    font-size: 3.5rem;
    font-weight: 600;
}