Skip to content

Commit b25d888

Browse files
julianengeljulianengel
committed
Added doodlify
1 parent 4c66d0d commit b25d888

2 files changed

Lines changed: 39 additions & 18 deletions

File tree

‎index.html‎

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<!DOCTYPE html>
22
<!--
33
👋 Hello curious friend!
4-
4+
55
Thanks for taking a peek under the hood. We love that you're interested in how things work.
66
This site was crafted with simplicity in mind - just pure HTML, CSS, and a dash of JavaScript.
77
No frameworks, no bloat, just the essentials.
8-
8+
99
We hope you find something interesting here that inspires your own work.
1010
Have a wonderful day! ✨
1111
-->
@@ -37,7 +37,6 @@
3737
content="A collection of simple bytes creating tiny, easy to use tools for better productivity and focus.">
3838
<meta property="twitter:image" content="https://simplebytes.comimg/og-image.png">
3939
<!-- Favicon -->
40-
<!-- Favicon -->
4140
<link rel="stylesheet" href="styles.css">
4241
<link rel="icon" type="image/png" href="img/favicon-96x96.png" sizes="96x96" />
4342
<link rel="icon" type="image/svg+xml" href="img/favicon.svg" />
@@ -82,30 +81,40 @@ <h1>a collection of simple bytes creating tiny, easy to use tools.</h1>
8281
</a>
8382
</li>
8483
<li class="product-item">
85-
<a href="https://backonair.app/?ref=simplebytes" target="_blank" class="product-link">
84+
<a href="https://doodlify.io/?ref=simplebytes" target="_blank" class="product-link">
8685
<div class="product-number">02</div>
86+
<div class="product-name">
87+
Doodlify
88+
<span class="badge new">Just Launched</span>
89+
</div>
90+
<div class="product-description">Turn your photos into cute, 2D flat & colorful doodles!</div>
91+
</a>
92+
</li>
93+
<li class="product-item">
94+
<a href="https://backonair.app/?ref=simplebytes" target="_blank" class="product-link">
95+
<div class="product-number">03</div>
8796
<div class="product-name">Back On Air</div>
8897
<div class="product-description">Track Your Favorite Shows Renewal Status & Date.</div>
8998
</a>
9099
</li>
91100
<li class="product-item">
92101
<a href="https://igplanner.netlify.app/?ref=simplebytes" target="_blank" class="product-link">
93-
<div class="product-number">03</div>
102+
<div class="product-number">04</div>
94103
<div class="product-name">IG Grid Planner</div>
95104
<div class="product-description">Quickly plan, organize and share IG Grids.</div>
96105
</a>
97106
</li>
98107
<li class="product-item">
99108
<a href="https://recommended.by/?ref=simplebytes" target="_blank" class="product-link">
100-
<div class="product-number">04</div>
109+
<div class="product-number">05</div>
101110
<div class="product-name">recommended.by</div>
102111
<div class="product-description">Easily share the things you love as simple recommendation lists.</div>
103112
</a>
104113
</li>
105114
</ul>
106115
<footer>
107-
<span>© 2024 <a href="https://simplebytes.com">Simple Bytes</a>, a <a href="https://meome.com/?ref=simplebytes"
108-
target="_blank">Meome</a> company</span>
116+
<span>© 2024 <a href="https://simplebytes.com">Simple Bytes</a>, a
117+
<a href="https://meome.com/?ref=simplebytes" target="_blank">Meome</a> company</span>
109118
</footer>
110119
<script src="script.js"></script>
111120
</body>

‎styles.css‎

Lines changed: 22 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,19 @@
44
--text-color: #333;
55
--logo-color: #010101;
66
--card-bg: white;
7-
--grid-color: rgba(0,0,0,0.03);
8-
--shadow-color: rgba(0,0,0,0.05);
9-
--hover-shadow: rgba(0,0,0,0.1);
7+
--grid-color: rgba(0, 0, 0, 0.03);
8+
--shadow-color: rgba(0, 0, 0, 0.05);
9+
--hover-shadow: rgba(0, 0, 0, 0.1);
1010
}
1111

1212
[data-theme="dark"] {
1313
--bg-color: #1a1a1a;
1414
--text-color: #e1e1e1;
1515
--logo-color: #ffffff;
1616
--card-bg: #2a2a2a;
17-
--grid-color: rgba(255,255,255,0.03);
18-
--shadow-color: rgba(0,0,0,0.2);
19-
--hover-shadow: rgba(0,0,0,0.3);
17+
--grid-color: rgba(255, 255, 255, 0.03);
18+
--shadow-color: rgba(0, 0, 0, 0.2);
19+
--hover-shadow: rgba(0, 0, 0, 0.3);
2020
}
2121

2222
/* Reset and base styles */
@@ -77,7 +77,7 @@ h1 {
7777
cursor: pointer;
7878
border: none;
7979
outline: none;
80-
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
80+
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
8181
overflow: hidden;
8282
}
8383

@@ -90,8 +90,8 @@ h1 {
9090
height: 24px;
9191
border-radius: 50%;
9292
background: white;
93-
transition: all 0.3s cubic-bezier(.4,0,.2,1);
94-
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
93+
transition: all 0.3s cubic-bezier(.4, 0, .2, 1);
94+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
9595
display: flex;
9696
align-items: center;
9797
justify-content: center;
@@ -174,14 +174,26 @@ footer a {
174174
border-bottom: 1px dotted #666;
175175
}
176176

177+
.badge.new {
178+
display: inline-block;
179+
margin-left: 8px;
180+
padding: 2px 6px;
181+
font-size: 0.7rem;
182+
font-weight: bold;
183+
color: white;
184+
background-color: #e94e77;
185+
border-radius: 8px;
186+
text-transform: uppercase;
187+
}
188+
177189
/* Grid background */
178190
.grid-background {
179191
position: fixed;
180192
top: 0;
181193
left: 0;
182194
right: 0;
183195
bottom: 0;
184-
background-image:
196+
background-image:
185197
linear-gradient(to right, var(--grid-color) 1px, transparent 1px),
186198
linear-gradient(to bottom, var(--grid-color) 1px, transparent 1px);
187199
background-size: 24px 24px;

0 commit comments

Comments
 (0)