Skip to content

Commit acf35c1

Browse files
fullstackNRJfullstackNRJ
committed
day 10
1 parent 688f470 commit acf35c1

File tree

4 files changed

+182
-0
lines changed

4 files changed

+182
-0
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,4 +26,5 @@ Motivate yourself to code daily till 60 days, and see the magic!
2626
| [Day 7](./each%20day%20build%20day!/Day%207/) | [Ajax search bar](./each%20day%20build%20day!/Day%207/) | [demo](https://powerofflex.z22.web.core.windows.net/) | [Takeaways](./each%20day%20build%20day!/Day%207/README.md/) |
2727
| [Day 8](./each%20day%20build%20day!/Day%208/) | [Whack covid-19](./each%20day%20build%20day!/Day%208/) | [demo](https://whackcovid19.z22.web.core.windows.net/) | [Takeaways](./each%20day%20build%20day!/Day%208/README.md/) |
2828
| [Day 9](./each%20day%20build%20day!/Day%209/) | [Sketchpad](./each%20day%20build%20day!/Day%209/) | [demo](https://codepen.io/neeraj-mukta/pen/RwWWBNw) | [Takeaways](./each%20day%20build%20day!/Day%209/README.md/) |
29+
| [Day 10](./each%20day%20build%20day!/Day%2010/) | [Infinite scrolling ComicBook](./each%20day%20build%20day!/Day%2010/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2010/README.md/) |
2930

‎each day build day!/Day 10/README.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# Infinite scrolling Comic book
2+
3+
A html & css approach with vanilla JS to mimick the infinite scrolling effect.
4+
5+
6+

‎each day build day!/Day 10/index.html

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Comic book Template 📚 </title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<h1>Template for a comicbook 🤓 </h1>
12+
13+
<article class="comic">
14+
15+
<div class="panel">
16+
<p class="text top-left">Suddenly...</p>
17+
<p class="text bottom-right">...something amazing happened</p>
18+
</div>
19+
<div class="panel">
20+
<p class="text top-left">Try resizing...</p>
21+
<p class="text bottom-right">...it's responsive</p>
22+
</div>
23+
<div class="panel">
24+
<p class="speech">A speech bubble</p>
25+
</div>
26+
<div class="panel"></div>
27+
<div class="panel"></div>
28+
<div class="panel"></div>
29+
<div class="panel"></div>
30+
<div class="panel"></div>
31+
<div class="panel">
32+
<p class="text bottom-right">THE END</p>
33+
</div>
34+
</article>
35+
36+
37+
</div>
38+
</body>
39+
</html>

‎each day build day!/Day 10/style.css

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
html,body{
2+
margin:0;
3+
padding:0;
4+
}
5+
6+
.container{
7+
min-height: 800px;
8+
display: flex;
9+
flex-direction: column;
10+
justify-content: start;
11+
12+
}
13+
14+
.comic{
15+
margin-top:50px;
16+
display: flex;
17+
flex-flow: row wrap;
18+
font-family:'Comic Sans', cursive;
19+
padding:1vmin;
20+
}
21+
22+
.panel{
23+
background-color: #fff;
24+
border: solid 2px rgb(13, 14, 14);
25+
box-shadow:0 6px 6px -6px #000;
26+
display:inline-block;
27+
flex: 1 1;
28+
height: 200px;
29+
margin:1vmin;
30+
overflow: hidden;
31+
position: relative;
32+
}
33+
34+
.text {
35+
background-color:#fff;
36+
border:solid 2px #000;
37+
margin:0;
38+
padding:3px 10px;
39+
}
40+
41+
.top-left {
42+
left:-6px;
43+
position:absolute;
44+
top:-2px;
45+
transform:skew(-15deg);
46+
}
47+
48+
.bottom-right {
49+
bottom:-2px;
50+
position:absolute;
51+
right:-6px;
52+
transform:skew(-15deg);
53+
}
54+
55+
.speech {
56+
background-color:#fff;
57+
border:solid 2px #000;
58+
border-radius:12px;
59+
display:inline-block;
60+
margin:.5em;
61+
padding:.5em 1em;
62+
position:relative;
63+
}
64+
65+
.speech:before {
66+
border:solid 12px transparent;
67+
border-left:solid 12px #000;
68+
border-top:solid 12px #000;
69+
bottom:-24px;
70+
content:"";
71+
height:0;
72+
left:24px;
73+
position:absolute;
74+
transform:skew(-15deg);
75+
width:0;
76+
}
77+
78+
.speech:after {
79+
border:solid 10px transparent;
80+
border-left:solid 10px #fff;
81+
border-top:solid 10px #fff;
82+
bottom:-19px;
83+
content:"";
84+
height:0;
85+
left:27px;
86+
position:absolute;
87+
transform:skew(-15deg);
88+
width:0;
89+
}
90+
91+
92+
.panel:nth-child(1) {
93+
flex-basis: 400px;
94+
}
95+
.panel:nth-child(2) {
96+
flex-basis: 200px;
97+
}
98+
.panel:nth-child(3) {
99+
flex-basis: 200px;
100+
}
101+
.panel:nth-child(4) {
102+
flex-basis: 200px;
103+
}
104+
.panel:nth-child(5) {
105+
flex-basis: 200px;
106+
}
107+
.panel:nth-child(6) {
108+
flex-basis: 200px;
109+
}
110+
.panel:nth-child(7) {
111+
flex-basis: 400px;
112+
}
113+
.panel:nth-child(8) {
114+
flex-basis: 200px;
115+
}
116+
.panel:nth-child(9) {
117+
flex-basis: 200px;
118+
}
119+
120+
/* background colours */
121+
122+
.panel:nth-child(4n+1) {
123+
background-image:radial-gradient(circle, yellow, orange);
124+
}
125+
126+
.panel:nth-child(4n+2) {
127+
background-image:radial-gradient(circle, lightblue, deepskyblue);
128+
}
129+
130+
.panel:nth-child(4n+3) {
131+
background-image:radial-gradient(circle, palegreen, yellowgreen);
132+
}
133+
134+
.panel:nth-child(4n+4) {
135+
background-image:radial-gradient(circle, lightcoral, tomato);
136+
}

0 commit comments

Comments
 (0)