You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
left: -284px; // brings back the left side boxes to the center line
11
+
}
12
+
}
13
+
}
14
+
}
15
+
}
16
+
17
+
// For mobile phones we want the boxes to be one below the other (no more left and right) and so do the line from center to the left
18
+
19
+
@media(max-width: 600px) {
20
+
#timeline {
21
+
ul {
22
+
li {
23
+
margin-left: 20px;
24
+
// Initially, the margin was auto which made to have equal margin width on left and right for the center line. Now, the left is set to 20px, so it will be 20px from the left of the screen. If made zero, it will be at the edge which we don't want.
25
+
26
+
// Now, we will set the width of the boxes to be dynamic bases on the screen size.
27
+
28
+
div {
29
+
width: calc(100vw-90px); // sets the width of the box to 90px less than the complete width of the view port (100vw)
30
+
}
31
+
32
+
&:nth-child(even) div {
33
+
left: 40px; // brings back the left side boxes to the center line. But the arrows to be brought to the other side. That is done below
overflow-x: hidden; // to avoid horizontal scroll bars
17
+
padding-bottom: 50px;
18
+
}
19
+
20
+
#main-header {
21
+
background: $secondary-color;
22
+
padding: 4rem0;
23
+
24
+
.container {
25
+
max-width: $max-width;
26
+
margin: 0auto;
27
+
text-align: center;
28
+
29
+
h1 {
30
+
font-size: 2.3rem;
31
+
}
32
+
}
33
+
}
34
+
35
+
#timeline {
36
+
ul {
37
+
// background: $primary-color;
38
+
padding: 50px0;
39
+
40
+
// Creating the white line using li
41
+
li {
42
+
list-style: none;
43
+
position: relative; // some elements inside it will be absolute
44
+
width: 6px; // width of the line
45
+
background: #fff; // color of the line
46
+
margin: 0auto; // bringing line to center
47
+
padding-top: 50px; // for each list item
48
+
49
+
// Line is created using li. Now, the boxes will be created using the div inside the li
50
+
51
+
div {
52
+
position: relative;
53
+
bottom: 0;
54
+
width: 400px;
55
+
padding: 1rem;
56
+
background: $secondary-color;
57
+
transition: all0.5sease-in-out; // for future animations
58
+
visibility: hidden;
59
+
opacity: 0;
60
+
// the last two properties are to hide the boxes unless they are in the viewport and the 'show' class is added using JS.
61
+
}
62
+
63
+
// The odd children will be on the right and even on the left
64
+
// Right side
65
+
&:nth-child(odd) div {
66
+
left: 40px; // all the odd boxes are moved 40px from the left (to the right) from the center line
67
+
transform: translateX(200px); // to keep the boxes initially away so that they will come to the line once they are in viewport and the 'show' class is added using JS.
68
+
}
69
+
70
+
// Left side
71
+
&:nth-child(even) div {
72
+
left: -434px; // all the even boxes are moved 434px from the right (to the left) from the center line
73
+
transform: translateX(-200px); // to keep the boxes initially away so that they will come to the line once they are in viewport and the 'show' class is added using JS.
74
+
}
75
+
76
+
// Create dots
77
+
&::after {
78
+
content: '';
79
+
position: absolute;
80
+
left: 50%; // edge will be 50% from the left of the left edge of 6px width white line
81
+
bottom: 0; // keeps the bottom of the dot same as that of the box.
82
+
width: 25px;
83
+
height: 25px;
84
+
background: inherit; // gives white color that inherits from its parent. It will be turned to secondary color once a box comes and attaches to it using 'show' class.
85
+
transform: translateX(-50%); // brigns the dot exactly to the center of the line
86
+
border-radius: 50%; // converts the dot from a square to a circle
87
+
transition: background0.5sease-in-out; // for background animation
88
+
}
89
+
90
+
// Now let's create the arrow joining the box to the dot. This is done by border manipulation. First add the similar properties for both left and right arrows. Then we will make the specific changes for the each side arrow
91
+
92
+
// Common properties
93
+
div::before {
94
+
content: '';
95
+
position: absolute;
96
+
bottom: 5px; // to position it a bit higher from the bottom of the box so that it matches with the center of the dot
97
+
width: 0;
98
+
height: 0; // width and height are made zero as the arrow is created from the border
99
+
border-style: solid; // width and color of the border are not mentioned here as they depend on the side of the arrow (left or right)
100
+
101
+
// The above crates a small square (due to border) at the the bottom left corner of each box (left and right). Now we have to change them in a way that they will become arrows to the corresponding side of the box connecting the dot.
102
+
}
103
+
104
+
// Right Side arrows
105
+
&:nth-child(odd) div::before {
106
+
left: -15px; // pulls the created square outside the box 15px to the left of the box towards the white line
107
+
108
+
// Now this square must be converted to a pointer by manipulating the border
109
+
border-width: 8px16px8px0px;
110
+
111
+
// The above creates the square at the left of the box attaching it. Now, to convert this square to a pointing arrow from the box to the dot, the corrsponding borders are colored accordingly
right: -15px; // pulls the created square outside the box 15px to the left of the box towards the white line
120
+
121
+
// Now this square must be converted to a pointer by manipulating the border
122
+
border-width: 8px0px8px16px;
123
+
124
+
// The above creates the square at the left of the box attaching it. Now, to convert this square to a pointing arrow from the box to the dot, the corrsponding borders are colored accordingly
// Now we have all the arrows ready. Note that the arrow creation is advanced CSS and it takes time to create such CSS.
130
+
131
+
// Next, let's write media queries to make it responsive.
132
+
}
133
+
134
+
// Show Boxes
135
+
136
+
// Once the 'show' class is added using JS for the lis which are in the viewport, they are made visible and brought to the center line
137
+
&.showdiv {
138
+
transform: none; // brings the boxes from 200px and -200px to the dot.
139
+
visibility: visible; // makes the boxes visible
140
+
opacity: 1; // makes the boxes visible
141
+
}
142
+
143
+
// Now almost everything is ready. Last thing is to change the color of the dot from white to secondary color once a box comes and attaches to it with the addition of 'show' class
144
+
&.show::after {
145
+
background: $secondary-color;
146
+
}
147
+
148
+
}
149
+
}
150
+
}
151
+
152
+
153
+
// Importing Media Queries
154
+
@import'media';
155
+
156
+
// Srcoll animation using JS
157
+
// Now, everything is done but the scrolling animation. We want the boxes to slide in as soon as there are in the view port. This is done with JS. A class called "show" is created which does this. The code will be in "main.js" file.
0 commit comments