Skip to content
Sign upLog in
Profile icon

Clément hahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahaha overflow go brrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr

@Bookie0
15 y/o designer & developer! Design Intern @Replit  👉 https://bookie0.repl.co/
twitter
website
  • Source

    Cover page
    Made with HTML, CSS, JSSource is a website showcasing software for sales and services. This responsive site contains many pages and sections like landing, product, pricing, testimonials, features, contact, sign up, footer, and much more! Media includes dashboard-like UI components which showcase how the software looks like.
    Recent comments (16)
    UltimatePython
    UltimatePython
    2 months ago
    Love it!
    ruiwenge2
    ruiwenge2
    2 months ago
    Wow!
    Abdulla-JassimJ
    Abdulla-JassimJ
    2 months ago
    Hello @Bookie0 ! Some random guy made a video named "If Apple Sold Water" :lol: ![image](https://storage.googleapis.com/replit/images/1654707076646_c784452a8e2ed550947aae62978d4729.png) That video was made in Feb 18, 2022
    AcademicCat
    AcademicCat
    3 months ago
    Hi @Bookie0 ! I hope you're doing well! I have some recommendations: Maybe you could add some animations with (aos.css)[https://michalsnik.github.io/aos/]. This could increase interest by making the page look more interactive. Also maybe make `overflow-x: hidden;`? It doesn't look so nice on mobile. Another possibility is to make the animations on the navbar smoother, maybe with `scaleX`? I hope this helped!
  • iPhone 12

    Cover page
    Made with HTML, CSS, JSAn iPhone 12 made in HTML, CSS, and some JS! Includes a lock screen, passcode, camera app, and home screen. Is as realistic and looks virtually the same as the actual iPhone! Open in new tab for best experience! :)
    Recent comments (131)
    MadhavPATKAR
    MadhavPATKAR
    2 months ago
    brillant biphone
    cutiepai2
    cutiepai2
    2 months ago
    Just a thought- Maybe you could try giving the option of customizing the phone's home screen/ app backgrounds? Like you can keep clicking until you find the best background that suits you? Ty for reading this!:)))))
    cutiepai2
    cutiepai2
    2 months ago
    This is rlly cool! I am trying to learn HTML, CSS, and JS but I am having a little trouble with it. Could you give me some tips?(I want to create my own website) Thanks! Otherwise, rlly rlly rlly cool!:)
    HrudhyaDivyesh
    HrudhyaDivyesh
    2 months ago
    woah .....
    JulietaSturges
    JulietaSturges
    2 months ago
    ist so cool i just wish it would let you on the phone tabs...
    qirtaiba
    qirtaiba
    2 months ago
    Love this!
  • iWater

    Cover page
    Made with HTML, CSS, JSIntroducing iWater. Clean. Simple. And most of all, wet. A wonderful built-in display. A secure Touch ID. Up to 15 magnificent colors and 5 unique sizes. Supercharged by the revolutionary Apple W1 chip. Pairs beautifully with Apple Cup. All for the fantastic price of... $999! A parody of Apple's product pages: exaggerated, lots of big text, and of course overpriced! 🙃
    Recent comments (1043)
    ruichengrao
    ruichengrao
    1 day ago
    wwwww
    ChloeJohnson11
    ChloeJohnson11
    4 days ago
    i need it pleaseeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
    REPLIT466
    REPLIT466
    8 days ago
    this is so dumb
    Gray-Ghost
    Gray-Ghost
    12 days ago
    i give all my money for this
    Sachinmyname
    Sachinmyname
    14 days ago
    What if any CEO of apple watches this!
    2539901
    2539901
    16 days ago
    Lol this is great! Amazing that this is the top repl now!
  • Zen

    Cover page
    Made with HTML, CSS, JSA (fake) wellness site called “Zen”, for obvious reasons. With natural decorations and beautiful illustrations, this website shows all the cool features of a product. Has a landing page, about page, multiple feature pages, pricing page, testimonials page, footer, and so much more!
    Recent comments (6)
    DragonsDontCode
    DragonsDontCode
    3 months ago
    I like the random latin filler text.
    soren
    soren
    5 months ago
    hai
    Bookie0
    Bookie0
    5 months ago
    test
    Bookie0
    Bookie0
    6 months ago
    A (fake) wellness site called “Zen”, for obvious reasons. With natural decorations and beautiful illustrations, this website shows all the cool features of a product. Has a landing page, about page, multiple feature pages, pricing page, testimonials page, footer, and so much more! ![Case Study (2)](https://storage.googleapis.com/replit/images/1644375642777_c27101938a90335b9d19a8f36126aea6.png) **Links** - [Website](https://zen.bookie0.repl.co/) - [Replit source code](https://replit.com/@Bookie0/Zen) - [Figma file](https://www.figma.com/file/ckWvXwqLtpyaBuEfnbP2mm/?node-id=0%3A1) - [Behance case study](https://www.behance.net/gallery/136974935/Zen) - [Dribbble shot (landing page)](https://dribbble.com/shots/17347847-Zen-landing-page) - [Dribbble shot (pages)](https://dribbble.com/shots/17416148-Zen-pages) - [Dribbble shot (mobile)](https://dribbble.com/shots/17443444-Zen-mobile) - [Dribbble shot (phones)](https://dribbble.com/shots/17460377-Zen-phones)
  • Urban

    Cover page
    Made with HTML, CSS, JSA website for a (fake) placeholder company, Urban! Urban would be a business company offering a great variety of tools and services for marketing. This site contains lots of sections like a landing, trusted by, services, testimonials, about, pricing, contact, footer, and many, many more! It's also completely responsive and has cool images and transitional elements.
    Recent comments (35)
    PokeGirl1024
    PokeGirl1024
    26 days ago
    Wow! it's so smooth!
    Whippingdot
    Whippingdot
    1 month ago
    I don't remember seeing this post. Nice design and love the fluidity.
    DynamicSquid
    DynamicSquid
    2 months ago
    Amazing design!
    PabloJuan
    PabloJuan
    3 months ago
    someone needs to make a tryhackme from this, its perfect.
    PyNon
    PyNon
    4 months ago
    Best ever!
    Bookie0
    Bookie0
    6 months ago
    A website for a (fake) placeholder company, Urban! Urban would be a business company offering a great variety of tools and services for marketing. This site contains lots of sections like a landing, trusted by, services, testimonials, about, pricing, contact, footer, and many, many more! It's also completely responsive and has cool images and transitional elements. ![case-study](https://storage.googleapis.com/replit/images/1644272991196_b3b31b9d2cea8eaf57e1fe3e86052001.png) **Links:** [Website](https://urban.bookie0.repl.co/) [Behance](https://www.behance.net/gallery/134790531/Urban) [Dribbble (mobile)](https://dribbble.com/shots/17243868-Urban-mobile) [Dribbble (full)](https://dribbble.com/shots/17243898-Urban)
Repls
Community
Bookie0
Bookie0
published a Repl
•1 day ago
5
Bookie0 WIP
Bookie0 WIPMy personal website! It's about, well, me, and showcases a few of my best works! It also displays some of my social media and shows some ways to contact me. This is version 9, in less than a year (my current website is https://bookie0.repl.co/). I've been experimenting with different portfolio websites to try and get a nice and simple site that still gives enough information. One thing I like about this version is the animation when you load the page, as well as the links in the footer. Let me know what you think about this! :)
#personalwebsite
#html
#Css
+2
AcademicCat
AcademicCat
@Bookie0 Hi there! I really like the new simplicity here, and especially the colours on dark mode! I just wanted to say, maybe you could make dark mode more direct, maybe a `position: fixed` type of thing at the bottom right of the page? Also, did you know you could add a media query to make sure your theme matches the user's native theme? 1 month ago
VulcanWM
VulcanWM
Love the links!1 day ago
Bookie0
Bookie0
published an Update
•25 days ago
8
Bookie0
Bookie0My new personal website! It's about, well, me, and showcases a few of my best works! It also displays some of my social media and shows some ways to contact me. Currently version 8. Yep, 8. In less than a year..
This is a test
Header 1 Header 2 bold
Bookie0
Bookie0
published a Repl
•25 days ago
0
this is a test pls ignore
this is a test pls ignorejust a test ignore pls
MrVoo
MrVoo
no, no i dont think i will25 days ago
Bookie0
Bookie0
published a Repl
•1 month ago
8
Bookie0
Bookie0My new personal website! It's about, well, me, and showcases a few of my best works! It also displays some of my social media and shows some ways to contact me. Currently version 8. Yep, 8. In less than a year..
RamChinamalli
RamChinamalli
Is there anything else about iWater?1 month ago
PYer
PYer
Ayyyy I'm both a piano and ping pong fan myself1 month ago
Bookie0
Bookie0
published a Repl
•2 months ago
3
Source
SourceSource is a website showcasing software for sales and services. This responsive site contains many pages and sections like landing, product, pricing, testimonials, features, contact, sign up, footer, and much more! Media includes dashboard-like UI components which showcase how the software looks like.
Abdulla-JassimJ
Abdulla-JassimJ
Hello @Bookie0 ! Some random guy made a video named "If Apple Sold Water" :lol: ![image](https://storage.googleapis.com/replit/images/1654707076646_c784452a8e2ed550947aae62978d4729.png) That video was made in Feb 18, 20222 months ago
ruiwenge2
ruiwenge2
Wow!2 months ago
Bookie0
Bookie0
published a Repl
•3 months ago
806
iWater
iWaterIntroducing iWater. Clean. Simple. And most of all, wet. A wonderful built-in display. A secure Touch ID. Up to 15 magnificent colors and 5 unique sizes. Supercharged by the revolutionary Apple W1 chip. Pairs beautifully with Apple Cup. All for the fantastic price of... $999! A parody of Apple's product pages: exaggerated, lots of big text, and of course overpriced! 🙃
REPLIT466
REPLIT466
this is so dumb8 days ago
ChloeJohnson11
ChloeJohnson11
i need it pleaseeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee4 days ago
Bookie0
Bookie0
published a Repl
•3 months ago
4
App Website Template
App Website TemplateThe product page of an app! A sort of template that you can use to showcase and present your app. Is completely responsive, and includes media such as device wireframes or icons. Has a navbar that automatically hides and shows, landing page, feature page, demo page, about us page, plans page, contact page, footer, and even a sign up/sign in page!
Bookie0
Bookie0
published a Repl
•3 months ago
4
Business Website Template
Business Website TemplateA business company website template for a (fake) placeholder company, Urban! Urban would be a business company offering a great variety of tools and services for marketing. This site contains lots of sections like a landing, trusted by, services, testimonials, about, pricing, contact, footer, and many, many more! It's also completely responsive and has relevant images and transitional elements.
lajbel
lajbel
It is very cool! It would be nice to change the href, instead of the url of the template site as such, use #.3 months ago
CandySuperCool
CandySuperCool
@Bookie0 I can't see my own submission for the template jam for some reason. Is that a glitch or something?2 months ago
Bookie0
Bookie0
published a Repl
•3 months ago
3
Wellness Website Template
Wellness Website TemplateA (fake) wellness site called “Zen”, for obvious reasons. With natural decorations and beautiful illustrations, this website shows all the cool features of a product. Has a landing page, about page, multiple feature pages, pricing page, testimonials page, footer, and so much more!
Bookie0
Bookie0
published an Update
•4 months ago
2
test
this isa tets you see im trying smth out o ye
Bookie0
Bookie0
published an Update
•6 months ago
13
Zen
ZenA (fake) wellness site called “Zen”, for obvious reasons. With natural decorations and beautiful illustrations, this website shows all the cool features of a product. Has a landing page, about page, multiple feature pages, pricing page, testimonials page, footer, and so much more!
Zen
A (fake) wellness site called “Zen”, for obvious reasons. With natural decorations and beautiful illustrations, this website shows all the cool features of a product. Has a landing page, about page, multiple feature pages, pricing page, testimonials page, footer, and so much more! Case Study (2) Links Website Replit source code Figma file Behance case study Dribbble shot (landing page) Dribbble shot (pages) Dribbble shot (mobile) Dribbble shot (phones)
Bookie0
Bookie0
published a Repl
•6 months ago
2
iMac
arnavpatel2021
arnavpatel2021
Da symbols do not work...7 months ago
KEVINLEAK
KEVINLEAK
This is great up it needs to be updated a lot3 months ago
Bookie0
Bookie0
published a Repl
•6 months ago
1
Bookie0
Bookie0
this was a test sorry6 months ago
Bookie0
Bookie0
disregard this thanks :)6 months ago
Bookie0
Bookie0
published an Update
•6 months ago
20
Urban
UrbanA website for a (fake) placeholder company, Urban! Urban would be a business company offering a great variety of tools and services for marketing. This site contains lots of sections like a landing, trusted by, services, testimonials, about, pricing, contact, footer, and many, many more! It's also completely responsive and has cool images and transitional elements.
Urban ~ Modern business company landing page
A website for a (fake) placeholder company, Urban! Urban would be a business company offering a great variety of tools and services for marketing. This site contains lots of sections like a landing, trusted by, services, testimonials, about, pricing, contact, footer, and many, many more! It's also completely responsive and has cool images and transitional elements. case-study Links: Website Behance Dribbble (mobile) Dribbble (full)
Bookie0
Bookie0
published a Repl
•7 months ago
20
Urban
UrbanA website for a (fake) placeholder company, Urban! Urban would be a business company offering a great variety of tools and services for marketing. This site contains lots of sections like a landing, trusted by, services, testimonials, about, pricing, contact, footer, and many, many more! It's also completely responsive and has cool images and transitional elements.
DynamicSquid
DynamicSquid
Amazing design!2 months ago
Whippingdot
Whippingdot
I don't remember seeing this post. Nice design and love the fluidity.1 month ago
Bookie0
Bookie0
published a Repl
•7 months ago
3
Bookie0 Version 7
Bookie0 Version 7My portfolio site! I finally think, with over 6 iterations, that I am done (there might still be some bugs though..)! Who knew that creating a simple site about you was that difficult? This portfolio site is about, well, me, and showcases a few of my best works! It also displays some of my social media and shows some ways to contact me. It also has a dark/light theme that saves the user's preferences with local storage.
Bookie0
Bookie0
Note: not fully responsive, and none of the links work. *Yet*. Edit: should be working great now!7 months ago
AcademicCat
AcademicCat
Really nice! Some people don't choose to go with the simple color palette, but it's actually really good when used properly. Also your cross is looking a little suspicious: ![image](https://storage.googleapis.com/replit/images/1644083883795_a9c868cc23d81c2e4445697d0e342b70.png)6 months ago
Bookie0
Bookie0
published a Repl
•7 months ago
3
Bookie0 Version 7
Bookie0 Version 7My portfolio site! I finally think, with over 6 iterations, that I am done (there might still be some bugs though..)! Who knew that creating a simple site about you was that difficult? This portfolio site is about, well, me, and showcases a few of my best works! It also displays some of my social media and shows some ways to contact me. It also has a dark/light theme that saves the user's preferences with local storage.
Bookie0
Bookie0
Note: not fully responsive, and none of the links work. *Yet*. Edit: should be working great now!7 months ago
AcademicCat
AcademicCat
Really nice! Some people don't choose to go with the simple color palette, but it's actually really good when used properly. Also your cross is looking a little suspicious: ![image](https://storage.googleapis.com/replit/images/1644083883795_a9c868cc23d81c2e4445697d0e342b70.png)6 months ago
Bookie0
Bookie0
published a Repl
•9 months ago
134
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.
MauricioMarlon
MauricioMarlon
looks really nice!3 months ago
Kandyland
Kandyland
Will you make this responsive someday @Bookie0 ?3 months ago
Bookie0
Bookie0
published an Update
•9 months ago
134
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.
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.
Yoplayer1py
Yoplayer1py
@Bookie0 ok so I can't open talk? and how do I become one of the "some users"?8 months ago
Bookie0
Bookie0
@Yoplayer1py You have the old version of talk. Maybe you have to be an explorer..8 months ago
Yoplayer1py
Yoplayer1py
@Bookie0 I am an explorer ?8 months ago
Bookie0
Bookie0
published an Update
•9 months ago
134
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.
Neumorphic Spotify
Hi there!! 👋 Hope you you're doing well! I made a neumorphic version of Spotify, with HTML, CSS, and some JS! Well...kind of! Basically, I just remade some of the components of spotify (cards, buttons, controls, etc.), but also made it neumorphic. Here's how a bit how looks it like: d521ffe742ad42519747e446e4b35574 Links 🔗 Site 🌐 Code ⚙️ Dribbble 🏀 Post 📝 Features ✨ Here are the different types of components I recreated. Tabs tabs Icon of tab Title of tab Buttons buttons Icon of button Nav elements nav Navbar, also with tabs Active tab is pressed Buttons with left/right arrows Cards cards Picture of playlist Title of playlist Description of playlist Play button that shows up on hover Songs songs Number of song Album cover image Title of song, artists, explicit Number of plays, date added Like button, duration of song Play button and ellipsis that show up on hover Media control mediaControl Album cover image Title of song, artist Like button Top controls: shuffle, previous, play, next, repeat Progress slider Queue, devices, volume, volume slider
StellaWilson1
StellaWilson1
@Bookie0 Very interesting blog. A lot of blogs I see these days don't really provide anything that I'm interested in, but I'm most definitely interested in this one. Please Visit Once <a href="https://sattaking01.in/">Satta King</a> Online Game Result on Our Website. It’s Very Profitable for us Please Share this kind of Article. Please Visit Once <a href="https://sattaking01.in/">Satta Matka</a> Online Game Result on Our Website. We just increasing our visibility on Internet. Get Instant and Accurate Result <a href="https://sattaking01.in/">Satta King Live Result</a> <a href="https://sattaking01.in/">SattaKing</a> <a href="https://sattaking01.in/">Satta</a> <a href="https://sattaking01.in/">Gali Satta</a> <a href="https://sattaking01.in/">Satta bajar</a> <a href="https://sattaking01.in/">Satta Game</a> <a href="https://sattaking01.in/">Satta Result</a> <a href="https://sattakingm.in/">Satta King</a> <a href="https://sattaking01.in/">Delhi Satta King</a> <a href="https://sattaking01.in/">Satta King Desawar</a> <a href="https://sattaking01.in/">Gali Satta Result</a> <a href="https://sattaking01.in/">Satta king bajar</a> <a href="https://sattaking01.in/">Satta king Online Game</a> <a href="https://sattaking01.in/">Satta King Online Result</a> <a href="https://sattaking01.in/">Satta King Online</a> <a href="https://sattaking01.in/">Satta King Result</a> <a href="https://sattakingg.in/">Satta King </a> <a href="https://sattaking01.in/">Satta King up</a> <a href="https://sattaking01.in/">Satta King Game</a> <a href="https://sattaking01.in/">Satta Matka Result</a> 9 months ago
sn236
sn236
@StellaWilson1 Nice way of advertising 😂😂😂. Just one question do you really mean it, or you just want to advertise.9 months ago