Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit e934a2a

Browse files
day 3
1 parent 797cd83 commit e934a2a

File tree

7 files changed

+323
-1
lines changed

7 files changed

+323
-1
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,5 +19,6 @@ Motivate yourself to code daily till 60 days, and see the magic!
1919
| ---------- | ----- | ------------ | ---------: |
2020
| [Day 1](./each%20day%20build%20day!/Day%201/) | [Simple Clock](./each%20day%20build%20day!/Day%201/) | [codepen.io]() | [Takeaways](./each%20day%20build%20day!/Day%201/README.md) |
2121
| [Day 2](./each%20day%20build%20day!/Day%202/) | [Flex image gallery](./each%20day%20build%20day!/Day%202/) | [demo](https://powerofflex.z22.web.core.windows.net/) | [Takeaways](./each%20day%20build%20day!/Day%202/README.md/) |
22+
| [Day 3](./each%20day%20build%20day!/Day%203/) | [css variables](./each%20day%20build%20day!/Day%203/) | [demo](https://powerofflex.z22.web.core.windows.net/) | [Takeaways](./each%20day%20build%20day!/Day%202/README.md/) |
2223

2324

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,6 @@ transition effects. It has a nested flex box, all three text block are flex item
1515

1616
# Demo
1717

18-
![](demo.gif)
18+
![](demo.gif){:class="img-responsive"}
1919

2020

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# Day 3: CSS Variables
2+
3+
4+
<p>
5+
A simple template for reading online with `night mode` created using css variables, also has option to zoom the text. Div layouts using clip-path property and text gradient using background-clip:text;
6+
</p>
7+
8+
# Challenges
9+
- css variables
10+
- div layout
11+
- image layout
12+
- css3 transitions
13+
14+
15+
16+
# Demo
17+
18+
![](demo.gif){:class="img-responsive"}
19+
20+

‎each day build day!/Day 3/demo.gif

1.56 MB
Loading[フレーム]

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

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>My Recipe 🧁 </title>
8+
9+
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
10+
11+
<link rel="stylesheet" href="style.css" />
12+
13+
<script defer src="main.js"></script>
14+
</head>
15+
16+
<body class="light">
17+
18+
<!--nav bar-->
19+
<nav class="navbar">
20+
<ul class="navbar-nav">
21+
<li class="nav-item">Home</li>
22+
<li class="nav-item">About</li>
23+
24+
<!-- Dropdown -->
25+
26+
<li class="nav-item has-dropdown">
27+
<a href="#">Download</a>
28+
<ul class="dropdown">
29+
<li class="dropdown-item">
30+
<a id="pdf" href="#">pdf</a>
31+
</li>
32+
<li class="dropdown-item">
33+
<a id="docx" href="#">docx</a>
34+
</li>
35+
<li class="dropdown-item">
36+
<a id="html" href="#">html</a>
37+
</li>
38+
</ul>
39+
</li>
40+
41+
<li class="nav-item" id="night">Night Mode 🌑 </li>
42+
</ul>
43+
</nav>
44+
45+
<header>
46+
47+
<h1>Chocolate Idlis<br />Quick Recipe</h1>
48+
49+
<h3>No flour, no cocoa, no syrup, only OREOs 🍪 </h3>
50+
</header>
51+
52+
<main>
53+
<section class="image"></section>
54+
<section class="receipe">
55+
<h2>Ingredients</h2>
56+
<p>
57+
<pre>
58+
- Oreo biscuits chocolate flavour - 2 packs
59+
- Milk 100ml approx
60+
- Baking powder - 1/2tbsp
61+
- Dairy milk or similar chocolate
62+
- Optional :
63+
- Sweet/salt Biscuits
64+
- M&Ms or gems
65+
- Some dry nuts that you like
66+
- chocochips
67+
</pre>
68+
</p>
69+
<h2>Preparation</h2>
70+
71+
<p> <b>Prepare batter</b> :Crush the biscuits and add them into a mixing jar,
72+
add about 50ml milk and start the mixer for 3-5 mins.
73+
Stop and check the consistency, if too thick then add some more milk.
74+
<p>
75+
<b>Mix batter</b> : Now, transfer the batter into a big bowl and add half tbsp baking powder
76+
to it, you can also add plain eno if you cannot find baking powder.
77+
Add some milk(10-20ml) and whisk the batter properly in order to mix the baking powder.
78+
</p>
79+
80+
<p>
81+
<b>Greasing</b> : While you’re making the batter,
82+
fill the idli container with water and preheat it on medium flame
83+
for 10 mins. Now, take the idli stand and grease it with oil a little to prevent the batter from sticking and then start filling it with the batter partially.
84+
</p>
85+
86+
<p>
87+
<b>Melting chocolate</b> :quickly take a glass lid and keep it on top of a container filled with water
88+
and boil it. Keep the dairy milk on top the lid and let it melt.
89+
</p>
90+
<p>
91+
<b>Baking</b> : Now, add some melted chocolate in between the already filled batter and
92+
top it with some more batter. Shake the stand a bit and keep it in the container for baking for 20 mins.
93+
</p>
94+
That’s it you’re delicious cakes are ready.. You can also add M&Ms, dry fruits in the batter if you like.
95+
<p>
96+
<b>Tip :</b>
97+
If you’re not sure about consistency, start with less milk, and keep adding up slowly.
98+
</p>
99+
100+
</section>
101+
</main>
102+
103+
</body>
104+
105+
</html>

‎each day build day!/Day 3/main.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
const nightMode = document.getElementById('night');
2+
const body = document.body;
3+
4+
// Apply the cached theme on reload
5+
6+
7+
8+
//button event handler
9+
let count = 0;
10+
nightMode.addEventListener('click', () => {
11+
count++;
12+
if (count % 2 == 0) {
13+
body.classList.replace('dark', 'light');
14+
nightMode.innerText = `Night Mode 🌑`;
15+
16+
} else {
17+
body.classList.replace('light', 'dark');
18+
nightMode.innerText = `Normal Mode 🌞`;
19+
}
20+
21+
22+
23+
24+
});

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

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
/* theme variables */
2+
3+
:root{
4+
5+
--gray0: #fcf9f9;
6+
--gray1: #dbe1e8;
7+
--gray2: #b2becd;
8+
--gray3: #6c7983;
9+
--gray4: #454e56;
10+
--gray5: #2a2e35;
11+
--gray6: #12181b;
12+
--brown1: #57250d;
13+
--brown2 : #2c1409;
14+
}
15+
16+
.light {
17+
--bg: var(--gray0);
18+
--bg-nav: linear-gradient(to right, var(--gray1), var(--gray3));
19+
--bg-dropdown: var(--gray0);
20+
--text: var(--gray6);
21+
--border-color: var(--brown1);
22+
23+
}
24+
25+
.dark{
26+
--bg: var(--gray5);
27+
--bg-nav: linear-gradient(to right, var(--gray5), var(--gray6));
28+
--bg-dropdown: var(--gray6);
29+
--text: var(--gray0);
30+
--border-color: var(--brown2);
31+
}
32+
33+
#dark::before {
34+
background: #2a2e35;
35+
}
36+
37+
#light::before {
38+
background: #ffffff;
39+
}
40+
41+
42+
/* page css*/
43+
44+
body {
45+
margin: 0;
46+
padding: 0;
47+
font-family: 'Montserrat', sans-serif;
48+
color: var(--text);
49+
background: var(--bg);
50+
transition: background 500ms ease-in-out, color 1000ms ease-in-out;
51+
}
52+
53+
ul {
54+
list-style-type: none;
55+
margin: 0;
56+
padding: 0;
57+
}
58+
59+
a {
60+
color: currentColor;
61+
text-decoration: none;
62+
}
63+
64+
header {
65+
padding: 1em;
66+
clip-path: polygon(50% 0%, 100% 0, 100% 65%, 50% 100%, 0 65%, 0 0);
67+
background: var(--bg-nav);
68+
margin-bottom: 1em;
69+
padding-bottom: 3.5em;
70+
text-align: center;
71+
}
72+
73+
/* gradient - text */
74+
h1 {
75+
font-size: 50px;
76+
background: linear-gradient(147deg, rgb(97, 53, 18) 0%, rgb(88, 34, 20) 26%, rgba(252,28,28,1) 50%, rgb(80, 50, 16) 75%, rgb(59, 38, 9) 100%);
77+
background-size: cover;
78+
background-clip: text;
79+
-webkit-background-clip: text;
80+
color: transparent;
81+
82+
}
83+
84+
h3 {
85+
font-size: 30px;
86+
background: linear-gradient(147deg, rgb(97, 53, 18) 0%, rgb(128, 53, 35) 26%, rgba(252,28,28,1) 50%, rgb(92, 34, 12) 75%, rgb(59, 38, 9) 100%);
87+
background-size: cover;
88+
background-clip: text;
89+
-webkit-background-clip: text;
90+
color: transparent;
91+
}
92+
93+
94+
/* Navbar */
95+
96+
.navbar {
97+
height: 70px;
98+
width: 100%;
99+
background: var(--bg-nav);
100+
color: var(--text);
101+
}
102+
103+
.navbar-nav {
104+
display: flex;
105+
align-items: center;
106+
justify-content: space-evenly;
107+
height: 100%;
108+
cursor: pointer;
109+
}
110+
111+
112+
.dropdown {
113+
position: absolute;
114+
width: 200px;
115+
opacity: 0;
116+
z-index: 2;
117+
background: var(--bg-dropdown);
118+
border-top: 2px solid var(--border-color);
119+
120+
border-bottom-right-radius: 8px;
121+
border-bottom-left-radius: 8px;
122+
123+
display: flex;
124+
align-items: center;
125+
justify-content: space-around;
126+
height: 1rem;
127+
margin-top: 2rem;
128+
padding: .5rem;
129+
130+
box-shadow: rgba(2, 8, 20, 0.1) 0px 0.175em 0.5em;
131+
transform: translateX(-40%);
132+
133+
transition: opacity .15s ease-out;
134+
}
135+
136+
137+
.has-dropdown:focus-within .dropdown {
138+
opacity: 1;
139+
pointer-events: auto;
140+
}
141+
142+
143+
.dropdown-item a {
144+
width: 100%;
145+
height: 100%;
146+
size: 0.7rem;
147+
padding-left: 10px;
148+
font-weight: bold;
149+
cursor: pointer;
150+
}
151+
152+
.dropdown-item:hover {
153+
background-color: var(--gray4);
154+
}
155+
156+
.dropdown-item a::before {
157+
width: 1rem;
158+
height: 1rem;
159+
display: inline-block;
160+
vertical-align: middle;
161+
margin-right: 10px;
162+
}
163+
164+
165+
.image{
166+
content: '';
167+
background: linear-gradient();
168+
}
169+
.receipe p{
170+
padding: 1rem;
171+
172+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /