File tree Expand file tree Collapse file tree 24 files changed +106
-81
lines changed
026-double vertical slider
038-mobile tab navigation
047-testimonial box switcher
056-image comparison slider
078-speak number guessing game
079-creative agency website Expand file tree Collapse file tree 24 files changed +106
-81
lines changed Original file line number Diff line number Diff line change @@ -43,7 +43,7 @@ <h1>Amazing Article</h1>
43
43
</ p >
44
44
< h2 > My Subtitle</ h2 >
45
45
< img
46
- src ="https://images.unsplash.com/photo-1610308354580-0108c064a578?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1& auto=format&fit=crop&w=2100&q=80 "
46
+ src ="https://images.unsplash.com/photo-1610308354580-0108c064a578?auto=format&fit=crop&w=2100&q=80 "
47
47
/>
48
48
< p >
49
49
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corrupti
Original file line number Diff line number Diff line change 15
15
}
16
16
17
17
.bg {
18
- background : url ("https://images.unsplash.com/photo-1610217053402-b187336e9443?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1& auto=format&fit=crop&w=2100&q=80" )
18
+ background : url ("https://images.unsplash.com/photo-1610217053402-b187336e9443?auto=format&fit=crop&w=2100&q=80" )
19
19
no-repeat center center / cover;
20
20
position : absolute;
21
21
top : -30px ;
Original file line number Diff line number Diff line change 75
75
76
76
.split .left {
77
77
left : 0 ;
78
- background : url ("https://images.unsplash.com/photo-1606144042614-b2417e99c4e3?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1& auto=format&fit=crop&w=1350&q=80" )
78
+ background : url ("https://images.unsplash.com/photo-1606144042614-b2417e99c4e3?auto=format&fit=crop&w=1350&q=80" )
79
79
no-repeat center / cover;
80
80
}
81
81
89
89
90
90
.split .right {
91
91
right : 0 ;
92
- background : url ("https://images.unsplash.com/photo-1607853827120-6847830b38b0?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D& auto=format&fit=crop&w=1762&q=80" )
92
+ background : url ("https://images.unsplash.com/photo-1607853827120-6847830b38b0?auto=format&fit=crop&w=1762&q=80" )
93
93
no-repeat center / cover;
94
94
}
95
95
Original file line number Diff line number Diff line change 17
17
< div
18
18
class ="slide active "
19
19
style ="
20
- background-image: url('https://images.unsplash.com/photo-1610620746460-de78cf3d1705?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1& auto=format&fit=crop&w=2100&q=80');
20
+ background-image: url('https://images.unsplash.com/photo-1610620746460-de78cf3d1705?auto=format&fit=crop&w=2100&q=80');
21
21
"
22
22
> </ div >
23
23
< div
24
24
class ="slide "
25
25
style ="
26
- background-image: url('https://images.unsplash.com/photo-1609589079958-8192b9cdab91?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D& auto=format&fit=crop&w=2100&q=80');
26
+ background-image: url('https://images.unsplash.com/photo-1609589079958-8192b9cdab91?auto=format&fit=crop&w=2100&q=80');
27
27
"
28
28
> </ div >
29
29
< div
30
30
class ="slide "
31
31
style ="
32
- background-image: url('https://images.unsplash.com/photo-1605718665998-85fbd49c5eff?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D& auto=format&fit=crop&w=2100&q=80');
32
+ background-image: url('https://images.unsplash.com/photo-1605718665998-85fbd49c5eff?auto=format&fit=crop&w=2100&q=80');
33
33
"
34
34
> </ div >
35
35
< div
36
36
class ="slide "
37
37
style ="
38
- background-image: url('https://images.unsplash.com/photo-1609589079852-0b1c745a71ec?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1& auto=format&fit=crop&w=2100&q=80');
38
+ background-image: url('https://images.unsplash.com/photo-1609589079852-0b1c745a71ec?auto=format&fit=crop&w=2100&q=80');
39
39
"
40
40
> </ div >
41
41
< div
42
42
class ="slide "
43
43
style ="
44
- background-image: url('https://images.unsplash.com/photo-1604916010805-18ea15fa6d32?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1& auto=format&fit=crop&w=2100&q=80');
44
+ background-image: url('https://images.unsplash.com/photo-1604916010805-18ea15fa6d32?auto=format&fit=crop&w=2100&q=80');
45
45
"
46
46
> </ div >
47
47
< button class ="arrow left-arrow " id ="left ">
Original file line number Diff line number Diff line change @@ -25,7 +25,7 @@ const animated_bg_texts = document.querySelectorAll(".animated-bg-text");
25
25
26
26
const getData = ( ) => {
27
27
header . innerHTML =
28
- '<img src="https://images.unsplash.com/photo-1610751399547-46ad575447cf?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1& auto=format&fit=crop&w=750&q=80" alt="" />' ;
28
+ '<img src="https://images.unsplash.com/photo-1610751399547-46ad575447cf?auto=format&fit=crop&w=750&q=80" alt="" />' ;
29
29
title . innerHTML = "Lorem ipsum dolor sit amet" ;
30
30
excerpt . innerHTML =
31
31
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore perferendis" ;
Original file line number Diff line number Diff line change 68
68
}
69
69
70
70
.hero {
71
- background-image : url ("https://images.unsplash.com/photo-1554744512-d6c603f27c54?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1& auto=format&fit=crop&w=1200&q=80" );
71
+ background-image : url ("https://images.unsplash.com/photo-1554744512-d6c603f27c54?auto=format&fit=crop&w=1200&q=80" );
72
72
background-repeat : no-repeat;
73
73
background-size : cover;
74
74
background-position : bottom center;
Original file line number Diff line number Diff line change @@ -35,22 +35,22 @@ <h1>Accessories</h1>
35
35
< div class ="right-slide ">
36
36
< div
37
37
style ="
38
- background-image: url('https://images.unsplash.com/photo-1567640157569-f93dc2275420?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1& auto=format&fit=crop&w=1350&q=80');
38
+ background-image: url('https://images.unsplash.com/photo-1567640157569-f93dc2275420?auto=format&fit=crop&w=1350&q=80');
39
39
"
40
40
> </ div >
41
41
< div
42
42
style ="
43
- background-image: url('https://images.unsplash.com/photo-1552996923-5063f7db50ee?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1& auto=format&fit=crop&w=1050&q=80');
43
+ background-image: url('https://images.unsplash.com/photo-1552996923-5063f7db50ee?auto=format&fit=crop&w=1050&q=80');
44
44
"
45
45
> </ div >
46
46
< div
47
47
style ="
48
- background-image: url('https://images.unsplash.com/photo-1559992490-51463933f67e?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D& auto=format&fit=crop&w=1350&q=80');
48
+ background-image: url('https://images.unsplash.com/photo-1559992490-51463933f67e?auto=format&fit=crop&w=1350&q=80');
49
49
"
50
50
> </ div >
51
51
< div
52
52
style ="
53
- background-image: url('https://images.unsplash.com/photo-1561076722-85adfb3195cb?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D& auto=format&fit=crop&w=1350&q=80');
53
+ background-image: url('https://images.unsplash.com/photo-1561076722-85adfb3195cb?auto=format&fit=crop&w=1350&q=80');
54
54
"
55
55
> </ div >
56
56
</ div >
Original file line number Diff line number Diff line change @@ -29,7 +29,7 @@ small {
29
29
.loveMe {
30
30
height : 440px ;
31
31
width : 300px ;
32
- background : url ("https://images.unsplash.com/photo-1597540103960-2a6528f09ae9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1& auto=format&fit=crop&w=321&q=80" )
32
+ background : url ("https://images.unsplash.com/photo-1597540103960-2a6528f09ae9?auto=format&fit=crop&w=321&q=80" )
33
33
no-repeat center center/cover;
34
34
margin : auto;
35
35
cursor : pointer;
Original file line number Diff line number Diff line change 10
10
< div class ="carousel ">
11
11
< div class ="image-container " id ="images ">
12
12
< img
13
- src ="https://images.unsplash.com/photo-1611072566310-7b7bfeca4582?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1& auto=format&fit=crop&w=752&q=80 "
13
+ src ="https://images.unsplash.com/photo-1611072566310-7b7bfeca4582?auto=format&fit=crop&w=752&q=80 "
14
14
alt ="first-image "
15
15
/>
16
16
< img
17
- src ="https://images.unsplash.com/photo-1611072488486-0cae417b73e4?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1& auto=format&fit=crop&w=752&q=80 "
17
+ src ="https://images.unsplash.com/photo-1611072488486-0cae417b73e4?auto=format&fit=crop&w=752&q=80 "
18
18
alt ="second-image "
19
19
/>
20
20
< img
21
- src ="https://images.unsplash.com/photo-1611072652569-bffa64d83763?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1& auto=format&fit=crop&w=752&q=80 "
21
+ src ="https://images.unsplash.com/photo-1611072652569-bffa64d83763?auto=format&fit=crop&w=752&q=80 "
22
22
alt ="third-image "
23
23
/>
24
24
< img
25
- src ="https://images.unsplash.com/photo-1611072652955-5705ec8f91eb?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1& auto=format&fit=crop&w=752&q=80 "
25
+ src ="https://images.unsplash.com/photo-1611072652955-5705ec8f91eb?auto=format&fit=crop&w=752&q=80 "
26
26
alt ="fourth-image "
27
27
/>
28
28
</ div >
Original file line number Diff line number Diff line change 15
15
< body >
16
16
< div class ="phone ">
17
17
< img
18
- src ="https://images.unsplash.com/photo-1610652492500-ded49ceeb378?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1& auto=format&fit=crop&w=634&q=80 "
18
+ src ="https://images.unsplash.com/photo-1610652492500-ded49ceeb378?auto=format&fit=crop&w=634&q=80 "
19
19
alt ="home "
20
20
class ="content show "
21
21
/>
22
22
< img
23
- src ="https://images.unsplash.com/photo-1611038917003-9227e16e0d9f?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1& auto=format&fit=crop&w=634&q=80 "
23
+ src ="https://images.unsplash.com/photo-1611038917003-9227e16e0d9f?auto=format&fit=crop&w=634&q=80 "
24
24
alt ="work "
25
25
class ="content "
26
26
/>
27
27
< img
28
- src ="https://images.unsplash.com/photo-1611038916975-f6b3ded00212?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1& auto=format&fit=crop&w=554&q=80 "
28
+ src ="https://images.unsplash.com/photo-1611038916975-f6b3ded00212?auto=format&fit=crop&w=554&q=80 "
29
29
alt ="blog "
30
30
class ="content "
31
31
/>
32
32
< img
33
- src ="https://images.unsplash.com/photo-1611038917094-02aea0f65649?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1& auto=format&fit=crop&w=634&q=80 "
33
+ src ="https://images.unsplash.com/photo-1611038917094-02aea0f65649?auto=format&fit=crop&w=634&q=80 "
34
34
alt ="about "
35
35
class ="content "
36
36
/>
You can’t perform that action at this time.
0 commit comments