Clément

@Bookie0 (7027)
Aspiring front-end dev! 👉 https://bookie0.repl.co/ (in construction)
Bookie0
Bookie0 shared a Repl
6 days ago
71
Neumorphic Spotify
Neumorphic SpotifyA recreation of Spotify...but with neumorphism! Neumorphism is a way to design where all the elements have a soft, protruding look, as if everything is 3D. I recreated many different Spotify components like the tabs, buttons, cards, songs, and even the whole media controls! While recreating it, I tried to be as faithful as possible to the original version, like using the same icons, fonts, and (when possible) colors.
Share
HTML, CSS, JS
Neumorphic Spotify (part II)
Style 🎨 Font family Spotify uses a variation of the Gotham Medium font; the most visible difference being a round dot on the i. It is called Spotify Circular. I managed to download the fonts from ondesblog.com, and used a regular font for most of the text and a bolder font for the headers. Neumorphism How does neumorphism work? Neumorphism makes everything look softer and more 3D like. Most of the elements have the same color as the background color of the page. You only see them because of the shadows. To look protruding, elements have a dark shadow on 2 sides (typically the bottom and right) and a light shadow on the others. Then, when you click on them, the shadows reverse. This makes it look like you're actually clicking a real button. I made a CSS class called .shadow, and applied it to all elements (so I didn't have to copy the shadow code for every single property). By default, elements have this shadow: box-shadow: 3px 3px 5px #1b1a1a, -3px -3px 5px #323232, inset 0 0 0px #1b1a1a, inset 0 0 0px #323232; As you can see, I have the usual 2 first shadows: a dark one (#1b1a1a) on the bottom and right side and a lighter shadow (#323232) on the top and left side. You can see that I also have inset shadows with no shadow offset. These 2 last shadows technically exist, but you can't see them because there's no shadow offset and no blur. This is to ensure a smooth transition with the second shadow, when the user clicks. And when the user clicks on an element, this is the new shadow: box-shadow: 0 0 0px #1b1a1a, 0 0 0px #323232, inset 3px 3px 5px #1b1a1a, inset -3px -3px 5px #323232; The previous first 2 shadows are now 'hidden', and the last 2 shadows have an inset, with the dark shadow switching places with the lighter one. Like I said before, this makes it look like you're really clicking the button. I think it's a very cool effect! Since neumorphism requires an element's color to be the same as the background color of the page, most of the buttons, cards, songs, etc. couldn't be styled to the original color. However, I used Spotify green (#1DB954) as the accent color for the CTA buttons such as the play button or the like buttons. While neumorphism looks pretty nice (at least, I think so), it's also kind of hard to use in design, mostly because you can't use many colors, but also because of accessibility issues. Only the shadows help an element show or protrude, and those shadows can be hard to see. This leads to some contrast issues, making it difficult for some people to distinguish clickable content. It's a fun way to design, but not always that user-friendly. Icons The icons are all SVGs taken from Spotify's source code. Read full post
RECENT REPLIES
Bookie0
Bookie0 6 days ago
@MrVoo Lmao okay
tangert
tangert 4 days ago
@Bookie0 sick!
Bookie0
Bookie0 4 days ago
@tangert Thank you! glad u read the post xD
Bookie0
Bookie0 shared a Post
2 months ago
174
Dashboard
Share
Dashboard 📈 Hey!! 👋 Hope you you're doing well! I made the front-end of a dashboard, in HTML, CSS, and a tiny bit of JS! It's completely respons
Dashboard
HTML, CSS, JS
Read full post
RECENT REPLIES
saion
saion 1 week ago
cool. Wanna build the apple site clone with me?
RehmaUwU
RehmaUwU 2 weeks ago
Impressive!! I'm learning Html,css in school right now. I know Python pretty well since it was my first language. :)
InformatiQs
InformatiQs 3 weeks ago
Damn, this is very impressive!
Bookie0
Bookie0 shared a Post
2 months ago
40
Easy.css 🔵
Share
Haii!! 👋 Hope you you're doing well! Do you wish you had a simple stylesheet to use for your websites? Does that stylesheet have to be beautiful, r
easycss
HTML, CSS, JS
Read full post
RECENT REPLIES
Subscribe2
Subscribe2 2 months ago
Bro, thanks so much for the dark mode. But can you make a file called style.css and keep it in light mode. Cause otherwise we have to update it. Thx m8
Elias33506
Elias33506 2 months ago
Can you add darkmode?
C3TMLive
C3TMLive 2 months ago
Havent went through it yet just one question how hard it is to overwrite certian elements compared to bootstrap
Bookie0
Bookie0 shared a Post
3 months ago
56
CSS iPhone 📱
Share
CSS iPhone 📱 Hello there! 👋 Hope you you're going well! This is a black iPhone 12 made in HTML, CSS, and some JS! Here's how it looks like: how
iPhone 12
HTML, CSS, JS
Read full post
RECENT REPLIES
sonub
sonub 2 months ago
very coooollll
Baconman321
Baconman321 2 months ago
sadness I barely know CSS :( Great tho!
Th3Coder
Th3Coder 3 months ago
ABSOLUTELY AMAZING!!!
Bookie0
Bookie0 shared a Post
3 months ago
41
Weekly 7 – Clock ⏰
Share
Weekly 7 – Clock ⏰ Hey! 👋 This is my weekly 7 submission, a clock! Here's how it looks like: howItLooksLIke And it's not just any ordinary clock
Weekly 7 — Clock
HTML, CSS, JS
Read full post
RECENT REPLIES
DecentCoder1
DecentCoder1 3 months ago
really well done. I love it.
MosesTYLi
MosesTYLi 3 months ago
does anyone know what the bracketed numbers beside our usernames mean?
nooby-xviii
nooby-xviii 3 months ago
is it just me or are html projects keep saying 404 on ipad
Bookie0
Bookie0 shared a Post
1 month ago
14
App Product Page 🖥
Share
App Product Page 🖥 Hiii! 👋 Hope you you're doing well! I made the product page of an app, in HTML, CSS, and a bit of JS. It's sort of a template;
App Product Page
HTML, CSS, JS
Read full post
RECENT REPLIES
tussiez
tussiez 4 weeks ago
These websites are so well-done, you could sell them!
KaiPereira2021
KaiPereira2021 1 month ago
So cool like incredible, I was looking at it responsively and at the footer the instagram icon is overflowing out the side of the website on the galaxy fold or 280px width and I just wanted to let you know.
replitpiero
replitpiero 1 month ago
Bookie why are some of the images in the megabytes...how did you even get them that large???
Bookie0
Bookie0 shared a Post
3 months ago
23
Good Pizza Great Pizza – A pizza site! 🍕
Share
Good Pizza Great Pizza – A pizza site! 🍕 Hi!! 👋 Hope everyone is doing well! :) Do you want pizza? Hot, fresh, delicious, fast pizza? In that ca
Good Pizza Great Pizza
HTML, CSS, JS
Read full post
RECENT REPLIES
Froggo-School
Froggo-School 2 months ago
making me hungry....
JoshuaZieber
JoshuaZieber 2 months ago
This is amazing!
AkshitRai
AkshitRai 3 months ago
this pizza site is amazing, just i can't order my pizza xD
Bookie0
Bookie0 shared a Post
1 year ago
195
[1] Python Made EZ! 🐍
Tutorials
Hîïíīįì everyone! Hope y'all are doing great! School is starting real soon, so I hope you have been studying to get ready you are enjoying the last o
Python tutorial
Python
Read full post
RECENT REPLIES
P0GCHAMPB0i
P0GCHAMPB0i 7 months ago
POOP! WHO CARES WE CAN JUST GO TO STACKOVER FLOW JK BUT THIS IS REALLY GOOD BUT YOU FORGOT TO ADD MOST OF THE ONES THAT YOU FORGOT
mylifeiscrap
mylifeiscrap 7 months ago
Cool!
Bookie0
Bookie0 shared a Post
4 months ago
25
Weekly 6 — Chat App 💬
Share
Weekly 6 — Chat App 💬 Hello there! 👋 This is my weekly 6 submission, the design of a chat app. Here's how it looks like: howItLooksLike It's al
Weekly 6 — Chat App
HTML, CSS, JS
Read full post
RECENT REPLIES
Whippingdot
Whippingdot 3 months ago
you do love apple (you hacked the system and made messages from windows blue :OOOOO)
sojs
sojs 3 months ago
Amazing as always, @Bookie0
PixiGem
PixiGem 3 months ago
just asking, if you don't mind... I want to use the code for the social media I'm creating because I'm bad at the front end. can I :) I will give you credits for some css and js :)
Bookie0
Bookie0 shared a Post
9 months ago
73
✊🏾 Black History Month ~ Celebrating African Americans
Share
👋 Hello!! Hope everyone is doing safe and well! It's February, and the whole month of February is Black History Month! Screen Shot 2021-02-23 at 5.
Black History Month (BHM) Website
HTML, CSS, JS
Read full post
RECENT REPLIES
Wilke000
Wilke000 9 months ago
#BlackLivesMatter (I believe that even though I am not one) We wish you a happy afterlife every one who was black!!!!!!
firefish
firefish 9 months ago
haha é
PikaChew1337
PikaChew1337 9 months ago
ayeee nice
Bookie0
Bookie0 shared a Post
10 months ago
79
📝 How to Make a Todo List! [Tutorial + Template]
Tutorials
Hi!!! Welcome to a tutorial/template on how to make a Todo List Organizer in Python! Originally for @Vandesm14's Jam (sorry for ping lol), I've modif
Todo list tutorial/template
Python
Read full post
RECENT REPLIES
mylifeiscrap
mylifeiscrap 7 months ago
Cool!
JWZ6
JWZ6 7 months ago
pogger
Bookie0
Bookie0 shared a Post
4 months ago
23
Style Gallery 🎨 🖼
Share
Style Gallery 🎨 🖼 Hello! Welcome to a ✨ Style Gallery! ✨ > What is it? Basically, it's a website with many different styles for different types o
Style Gallery
HTML, CSS, JS
Read full post
RECENT REPLIES
mollthecoder
mollthecoder 3 months ago
`Post ==> replit.com/talk/share/Style-Gallery/143466` Why would you post the post on the post?
ruiwenge2
ruiwenge2 3 months ago
wow this is so cool!
firefish
firefish 4 months ago
i see what you did there... image
Bookie0
Bookie0 shared a Post
12 months ago
66
[p5.js] 🎄 Christmas Tree Decorator!!! 🎄
Share
'Tis the season to be jolly, Fa la la la la, la la la la! 🎶 🎶 It's the jolly time of the year! Christmas holiday is here, and it's soon the actual
P5js Christmas Tree Decorator!
HTML, CSS, JS
Read full post
RECENT REPLIES
mylifeiscrap
mylifeiscrap 7 months ago
Cool!
YuvanVighnesh
YuvanVighnesh 11 months ago
image image >CONGRATS with 5000 upvotes (I was ur 5000th upvote)
DynamicSquid
DynamicSquid 11 months ago
You're my bestie for this year, even though we only shared 1 repl lol
Bookie0
Bookie0 shared a Post
6 months ago
33
How to Make a Responsive Clicker Game in HTML CSS JS 🖱
Tutorials
Hello everyone! Hope you are doing well and staying safe! Welcome to a tutorial that will teach you how create your own responsive clicker game in HT
iClick
HTML, CSS, JS
Read full post
RECENT REPLIES
BostonDadBod
BostonDadBod 5 months ago
@Bookie0 Awesome tutorial! I had a blast putting it all together. I'm still very new to programming so it was cool to see how HTML, JS, and CSS all tie together.
QuickV
QuickV 5 months ago
Shouldst I credit thee if't be true i useth this? (Should I credit you if I used this?) I probably will anyways lol.
Bookie0
Bookie0 shared a Post
1 year ago
95
Fibonacci! 🌀
Tutorials
Hope everyone is doing well and staying safe! :D Welcome to a tutorial on The Fibonacci Sequence! I will be covering who Leonardo Pisano Bigollo is,
Fibonacci Tutorial
Python
Read full post
RECENT REPLIES
AidanLe3
AidanLe3 2 months ago
this is sick
FranklinStopar
FranklinStopar 10 months ago
How old is this mans...im 16 and i never could have done this in a million years that fs
FranklinStopar
FranklinStopar 10 months ago
when asked how many "Fibonaci"(its Fibonacci btw) terms i instantly regretted putting 10000 lol
Bookie0
Bookie0 shared a Post
3 months ago
18
Weekly 8 – Pricing Page
Share
Weekly 8 – Pricing Page Hello! 👋 This is my weekly 8 submission, a pricing page! (Also yes it's posted kind of late because for some reason the + a
Weekly 8 – Pricing Page
HTML, CSS, JS
Read full post
RECENT REPLIES
CodingElf66
CodingElf66 3 months ago
I think you should change Mb to MB, that's real data. But nice job though!
leafkn
leafkn 3 months ago
Nice responsiveness :)
Yoplayer1py
Yoplayer1py 3 months ago
Dark mode or I'll be blind Bookie0. Also nice page hope the next jam will be of making this working lol.
Bookie0
Bookie0 shared a Post
1 year ago
72
🦃 Turkey Translator!!! 🦃
Share
Gobble Gobble Gobble! 🦃 🦃 🦃 Gobble Gobble, Gobble Gobble Gob-- Sorry, forgot that I'm on repl.it, not turkey-it! xD Welcome to the ultima
Turkey Translator -- Gobble Gobble
Python
Read full post
RECENT REPLIES
mylifeiscrap
mylifeiscrap 7 months ago
Cool!
IOP3
IOP3 9 months ago
I don't here the audio 🤨
BeaverBeg
BeaverBeg 12 months ago
colored text you got from "from replit"? good work btw
Bookie0
Bookie0 shared a Post
1 year ago
72
[2] C++ Made EZ!!!
Tutorials
Howdy y'all! Welcome to a C++ Tutorial, made by *drumroll please... @DynamicSquid and @Bookie0! After the Python Tutorial I made here, we decided toRead full post
RECENT REPLIES
Yoplayer1py
Yoplayer1py 3 months ago
Better than the Codeacademy course still.
FlaminHotValdez
FlaminHotValdez 11 months ago
awesome c++ tuto finally python is so cliche lol. Also you missed c++ vectors(me practicing for USACO getting pissed off) and sets and maps and...let's not go down that road.
Baconman321
Baconman321 12 months ago
HOW DARE YOU SIMPLIFY THE COMPLEXITY OF C++!!! LOL XD
Bookie0
Bookie0 shared a Post
11 months ago
47
Pythagorean Theorem! 📐
Tutorials
Hey! How are y'all doing? Hope everyone is chilling and doing well! Welcome to a tutorial on the Pythagorean Theorem!!! 🎉 You've probably already
Pythagorean Theorem Tutorial
Python
Read full post
RECENT REPLIES
mylifeiscrap
mylifeiscrap 7 months ago
Cool!
CyberHacker101
CyberHacker101 9 months ago
Ahhh it used to be 6 cycles now it is 44 cycles i still get pings from this bro @Bookie0
LegendaryWolf
LegendaryWolf 9 months ago
I'd do algebra, but there is a problm
Bookie0
Bookie0 shared a Post
1 year ago
48
[3] LOLCODE MADE EZZZZZ 🙀 😻 😹
Tutorials
Y HALO THAR EVRYONE!!! HOPE EVRYONEZ DOIN NICE AN CHILLIN! WELCOM 2 LOLCODE TUTORIAL!!! I SET ON TEH PATH 2 LERN LOLCODE. WELL. IT WUZ CERTAINLY RE
LOLCODE Tutorial
LOLCODE
Read full post
RECENT REPLIES
R2_D2_1
R2_D2_1 3 months ago
Functions can be declared using HOW DUZ I, and called using just the function name (Specifically in Replit)
Yoplayer1py
Yoplayer1py 3 months ago
I can't work out the translator. Make a lolcat course first lol (or an translator)
Bookie0
Bookie0 shared a Post
2 years ago
86
OBLIVION
Share
Hello everyone who stumbles on this post! I was digging through my repls organizing everything into files, when I cam upon a project @DamienKilduff a
oblivion
Python
Read full post
RECENT REPLIES
G0RG3
G0RG3 9 months ago
Umm, for the frst question: image
G0RG3
G0RG3 10 months ago
Nice!
GalaxyWolfX
GalaxyWolfX 10 months ago
i am definitely not satisfied but okay Screenshot (12)
Bookie0
Bookie0 shared a Post
6 months ago
19
Father's Day Card 👨 💖 ✉️
Share
Father's Day Card Hello! 👋 Happy Father's Day!!! 👨 💯 🥇 You might have remember that I've made a Mother's Day CSS Card here. Well it's Father's
Father's Day Card
HTML, CSS, JS
Read full post
RECENT REPLIES
lizasss
lizasss 6 months ago
i wish we weren't out of milk on that one day...
Whippingdot
Whippingdot 6 months ago
I wish I could give this to my father but it is one day late, and I would hate saying I made this myself. He knows I code, and would ask me that question and I would either say no, or lie, and both options are depressing for me.
cuber1515
cuber1515 6 months ago
Cool! I made one 2 but it was last minute so not great, I didn't even have time to make it responsive so it's really small for a phone. here
Bookie0
Bookie0 shared a Post
5 months ago
19
Frontend Blog 🖋️
Share
Hey there! 👋 Hope everyone is doing well and staying safe! After a few weeks of hard work, this is the frontend of a blog, a sort of template and pr
Frontend Blog
HTML, CSS, JS
Read full post
RECENT REPLIES
Whippingdot
Whippingdot 5 months ago
Man @Bookie0, it is a surprise that you didn't get nominated for any of the awards... smoart cookie bookie
RayhanADev
RayhanADev 5 months ago
@HelperFurret giphy good job clapping
ruiwenge2
ruiwenge2 5 months ago
Did you get the name John Doe from W3Schools? Lol
Bookie0
Bookie0 shared a Post
1 year ago
54
4 Chances 🍀 🤞
Share
Hola everyone!!! Welcome to a collaboration between * @ChezCoder * and * @Bookie0 * !!! what is it? This is a hard game of a chance. How to play is
4 chances
Python
Read full post
RECENT REPLIES
SilvermoonCat
SilvermoonCat 8 months ago
yay 5th place thsi post is old lol just flipping through bookie0’sposts
Wilke000
Wilke000 8 months ago
Ohh yay! I am in the top 3 AND 10 (#IndyCarter (My old account) and Wilke000)
ChezCoder
ChezCoder 10 months ago
@Bookie0 hello darkness my old friend! I was strolling through memory lane, and I found this. Ahh... im tearing up, it’s been so long! Also, I fixed the bug in the program, it works now :)
Bookie0
Bookie0 shared a Post
1 year ago
43
Bram Jam Submission -- Creepy Scary Music 'n' Story!
Share
BOOOO!!! 👻 Did I scare you? Did I? Did I?!?!?! Ok fine I probably didn't :( Hope y'all are having a great month of October and preparing for HaLoW
Bram Jam #2
Python
Read full post
RECENT REPLIES
RohilPatel
RohilPatel 1 year ago
Hi
TalinSharma
TalinSharma 1 year ago
Cool + Fun! Wish there was a way to embed python projects/games into websites. (Just a side note. Nothing for you @Bookie0)
ZePanda9711
ZePanda9711 1 year ago
It was a cool game, it would be cool if you put one word and then the story put the rest, and then it continued like that, just saying.
Bookie0
Bookie0 shared a Post
4 months ago
12
Weekly 5 – Product Page
Share
Weekly 5 – Product Page Hi! 👋 This is my first weekly challenge, a product page. > Well, what's the product? The product is Apple's new iMac 24"!
Weekly 5 – Product Page
HTML, CSS, JS
Read full post
RECENT REPLIES
fuzzyastrocat
fuzzyastrocat 4 months ago
Nice page and themeing, but the borders are pretty atrocious on my system ("say hello" is at the very top, with no breathing room, and the final "discover the all-new iMac" has no horizontal space) — my resolution's 1366 x 768 if you want to try it yourself I know you put a lot of work into this, just hoping to make it better :)
Whippingdot
Whippingdot 4 months ago
Lol doesn't this picture look off... image
Bookie0
Bookie0 shared a Post
8 months ago
25
🧮 Calculator!
Share
Hey! 👋 Hope everyone is doing well! :) Do you need a simple calculator to calculate your, well, calculations? Why calculate your calculations by he
Web Calculator
HTML, CSS, JS
Read full post
RECENT REPLIES
mylifeiscrap
mylifeiscrap 7 months ago
Cool!
Jakman
Jakman 8 months ago
I'm proud of you bookie. You have ascended.
LeoXu2
LeoXu2 8 months ago
ERROR FOUND 1 / 0 IS NOT INFINITY image image
Bookie0
Bookie0 shared a Post
7 months ago
22
CSS Mother's Day Card 🤱 💖
Share
Hi! Hope everyone is doing well and staying safe! Happy Mother's Day! (I'm a tad late lol). Here is a site for Mother's Day, programmed only in HTML
Mother's Day Card
HTML, CSS, JS
Read full post
RECENT REPLIES
P0GCHAMPB0i
P0GCHAMPB0i 7 months ago
HAPPY LATE FATHERS DAYYYYYYYYYYYYYY DIBS ON MAKING FATERS DAY THING!!!
Whippingdot
Whippingdot 7 months ago
Three things: First of all, I ain't upvoting even though it looks very nice cause Mother's day was the day before yesterday for me. Second, spotlight pages are automatic when we open the link of your repo - adding a #README.md will not work on spotlight pages, and you do not need the ?v=1 at the end of your link to open the spotlight page for us as it is spotlight automatically. For you you need it but for us, we don't need it. Finally, coolors.co is awesome 🥳 I have been using it for like 6 or
EpicGamer007
EpicGamer007 7 months ago
wow, i had a youtube video playing in the background and when i opened this, my youtube video stopped playing. when i closed it, it started again. almost like magic lol. (edge btw)
Bookie0
Bookie0 shared a Post
2 years ago
62
Cool Rocket Animation!
Share
Hellogloriouspeopleofrepl! Thisisaveryshortanimationofacountdownanda_rocket. Yethat’sall. Asusual,comments,suggestionstipsetc.feelfreetotellme! Beca
Rocket
Python
Read full post
RECENT REPLIES
techgeek680
techgeek680 1 year ago
cooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooool!
Bookie0
Bookie0 2 years ago
@Zuhdi28 old repl I found https://repl.it/talk/share/I-really-enjoy-games-like-these/37512/167242?from=notifications
chippycoder08
chippycoder08 2 years ago
Cool! I like how you made everything out of parentheses, backslashes, etc...
Bookie0
Bookie0 shared a Post
9 months ago
25
Title: 💪 You Can Do This!! ~ Exam Motivation (And a bonus below! ⬇️)
Share
👋 Hi!! Hope ya'll are doing great -- I just had part 1 of my mock exams in school. Speaking of school, isn't it hard to keep concentrated while stu
Exams Motivation
HTML, CSS, JS
Read full post
RECENT REPLIES
mylifeiscrap
mylifeiscrap 7 months ago
Cool!
ch1ck3n
ch1ck3n 9 months ago
More like the distractor 2000
CyberHacker101
CyberHacker101 9 months ago
Bro everything you post or comment makes me updoot you wat happening Oꓤꓭ ꓭOᒋ ƎꟽOSƎϺ∀