UI Code

HTML5, CSS3, JS

Purple Clock App | Soft UI Design To HTML & CSS Using Bootstrap 5
CSS3

Purple Clock App | Soft UI Design To HTML & CSS Using Bootstrap 5

Posted on by UICode

Purple Clock App | Soft UI Design To HTML & CSS Using Bootstrap 5

Let’s convert a Purple Clock App Soft UI Design To HTML & CSS Using Bootstrap 5.

We’ll be using Bootstrap 5: https://v5.getbootstrap.com/

Let’s consider following UI Design: https://dribbble.com/shots/3512751-Purple-Clock

For complete guide, kindly follow the video tutorial below. You can also read along this post for the code explanation.

Let’s split the design into 4 main parts. The cities list on top, the analog clock, current day and finally the bottom menu.

To start with, let’s use bootstrap container and give it a width, height and a background colour:

<div class="container">
</div>

.container {
    width: 350px;
    height: 700px;
    background: #371b59;
    border-radius: 40px;
}

Within the container, let’s add the bootstrap row which would be the list of cities like so, with top and bottom padding of 5:

<div class="d-flex flex-row top-menu pt-5 pb-5">
    <span class="px-4 py-2">Zurich</span>
    <span class="px-4 py-2 active">Plovdiv</span>
    <span class="px-4 py-2">New York</span>
    <span class="px-4 py-2">San Francisco</span>
</div>

Let’s give styling to all the cities by using the class called ‘top-menu’:

.top-menu {
    overflow: hidden;
}

.top-menu>span {
    color: rgb(210, 255, 213, 0.3);
    font-size: 12px;
    letter-spacing: 1px;
    white-space: nowrap;
}

We make use of white-space: nowrap; so that longer city names do not show up in 2 lines.

To show the active / selected city, let’s add ‘active’ class and style it like so:

.top-menu>span.active {
    color: #d2ffd5;
    position: relative;
}

.top-menu>span.active::before {
    content: "";
    width: 2px;
    height: 6px;
    background: #d2ffd5;
    position: absolute;
    left: 43px;
    top: -15px;
}

It basically shows a small tick on top of the city label.

Now, let’s create another bootstrap row and add the clock background:

<div class="mt-5 d-flex flex-row justify-content-center align-items-center">
    <div class="clock-bg"></div>
</div>

Following is the css code:

div.clock-bg {
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: linear-gradient(to bottom right, #180138 20%, #6e39b4);
    box-shadow: 16px 28px 28px 8px #220e3a, -28px -28px 20px 0px #4b257a, inset -5px -5px 5px #6f41a7;
    filter: blur(5px);
}

You can use https://neumorphism.io/ to generate the desired effect, which essentially creates a list of box shadows. We also give a blur filter to make is look little blur as per the UI design.

Let’s now add minute and hour hand to the clock:

<div class="mt-5 d-flex flex-row justify-content-center align-items-center">
    <div class="clock-bg"></div>
    <div class="minute position-absolute"></div>
    <div class="hour position-absolute"></div>
</div>

And make both the divs as ‘position-absolute’ so that they appear at the center of the clock.

Following is the css code:

div.minute {
    width: 60px;
    height: 7px;
    background: #d2ffd5;
    border-radius: 10px;
    box-shadow: 0px 10px 15px 0px black;
    transform: rotate(280deg) translate(50px);
}

If you look at the transform property, we are first rotating the hand by 280 degrees, and then translating or moving the div from center towards the right by 50px. With this, if you update the degree, the minute hand keeps rotating appropriately. Similarly, let’s add the hour hand, like so:


div.hour {
    width: 40px;
    height: 7px;
    background: #d2ffd5;
    border-radius: 10px;
    box-shadow: 0px 10px 15px 0px black;
    transform: rotate(10deg) translate(40px);
}

Next, let’s add the day and center the text, with some margin and padding:

<div class="date text-center mt-5 pt-4">
    Sunday, July 25
</div>

And give it a styling:

div.date {
    font-size: 20px;
    color: #d2ffd5;
}

Finally, let’s add the bottom menu and for this we’ll be using FontAwesome: https://fontawesome.com/. The cdn link is : https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css

<div class="d-flex flex-row bottom-menu justify-content-between py-5 px-4">
    <span><i class="fas fa-list-ul"></i></span>
    <span class="active"><i class="far fa-clock"></i></span>
    <span class=""><i class="fas fa-bullhorn"></i></span>
    <span><i class="far fa-hourglass"></i></span>
</div>

If you look at the code, we are wrapping <i> within <span>, as we make use of pseudo elements, which do not work well with just the <i> tags.

Let’s give a class of ‘bottom-menu’ with font size and colour:

.bottom-menu>span>i {
    color: rgb(210, 255, 213, 0.3);
    font-size: 14px;
}

Now, to show the tick mark on the actively selected menu item, we’ll add ‘active’ class and give it the following css code:

.bottom-menu>span.active>i {
    color: #d2ffd5;
}

.bottom-menu>span.active {
    position: relative;
}

.bottom-menu>span.active::before {
    content: '';
    width: 2px;
    height: 6px;
    background: #d2ffd5;
    position: absolute;
    left: 6px;
    bottom: -20px;
}

And finally, we can add some javascript code to rotate the hand of the clock every second:

<script>
    const minute = document.querySelector(".minute");

    let secondDeg = 0;
    setInterval(function() {
        secondDeg = secondDeg + 6;
        console.log(secondDeg);
        minute.style.transform = `rotate(${secondDeg}deg) translate(50px)`;
    }, 1000);
</script>

Note: The above JS code is just for reference and it’s added only for minute hand. To fully make it work, you need to add code similarly for hour hand and handle few conditions.

For complete guide on this post, kindly follow the video tutorial below:

Thanks for reading and watching. If you found this post and the video helpful, kindly like, share and subscribe by clicking on ‘YouTube’ button below, for more such videos.

Source code: https://github.com/ui-code/shoe_app

For other videos and posts, kindly check https://theuicode.com

UI Code YouTube Channel: https://www.youtube.com/channel/UCzSsYn-Jd8Cj8fz8oCCbyvA

13,056 thoughts on “Purple Clock App | Soft UI Design To HTML & CSS Using Bootstrap 5”

  1. Aw, this was an exceptionally nice post. Finding the time and
    actual effort to make a really good article… but what can I say…
    I put things off a whole lot and don’t manage to get nearly anything done.

    Reply

  11. I’m not sure where you are getting your information, but great
    topic. I needs to spend some time learning more or understanding more.
    Thanks for wonderful information I was looking for this info
    for my mission.

    Have a look at my blog post … Jolly CBD

    Reply

  12. Useful info. Lucky me I discovered your web site unintentionally, and I am stunned why this accident didn’t took place in advance!
    I bookmarked it.

    Reply

  25. I have been exploring for a little for any high-quality
    articles or weblog posts in this kind of area . Exploring in Yahoo I at last stumbled upon this site.
    Studying this info So i’m satisfied to express that I have a very
    excellent uncanny feeling I discovered just what I
    needed. I such a lot without a doubt will make certain to
    do not omit this site and provides it a look regularly.

    Reply

  27. A lot of thanks for your whole efforts on this web page.
    Gloria take interest in conducting research and it’s obvious why.
    I notice all relating to the dynamic way you convey valuable solutions via your web blog
    and increase participation from other individuals about this area of interest and our favorite princess is
    really being taught a great deal. Enjoy the remaining portion of the new year.
    You are performing a wonderful job.[X-N-E-W-L-I-N-S-P-I-N-X]I’m extremely inspired together with your writing skills and also with the layout for your blog.
    Is that this a paid theme or did you modify it your self?
    Either way stay up the nice high quality writing, it’s uncommon to look a nice weblog
    like this one these days.

    Also visit my webpage :: Jolly CBD Reviews

    Reply

  30. Have you ever considered creating an ebook or guest authoring on other blogs?
    I have a blog centered on the same subjects you discuss
    and would really like to have you share some stories/information. I know my audience would appreciate your work.
    If you are even remotely interested, feel free to shoot me an e-mail.

    Reply

  37. Wonderful work! This is the type of information that are supposed to be shared across the web.
    Shame on the seek engines for no longer positioning this
    submit upper! Come on over and discuss with my web site . Thank
    you =)

    Reply

  38. Howdy! I know this is kinda off topic however I’d figured I’d ask.
    Would you be interested in trading links or maybe guest writing a blog post or vice-versa?
    My site covers a lot of the same topics as yours and I think
    we could greatly benefit from each other. If
    you happen to be interested feel free to shoot me an email.

    I look forward to hearing from you! Fantastic blog by
    the way!

    Here is my web page; Testoryze Pills

    Reply

  39. I am not sure where you’re getting your information,
    but great topic. I needs to spend some time learning much more or understanding
    more. Thanks for excellent info I was looking for this information for my mission.

    Reply

  40. Heya this is somewhat of off topic but I was wanting to know if blogs use WYSIWYG editors or if you have
    to manually code with HTML. I’m starting a blog soon but have no coding knowledge so I
    wanted to get guidance from someone with experience. Any help
    would be greatly appreciated!

    my blog post :: Diva Trim Keto

    Reply

  44. The other day, while I was at work, my cousin stole
    my iphone and tested to see if it can survive a twenty five
    foot drop, just so she can be a youtube sensation. My apple ipad is now destroyed and she has 83 views.
    I know this is entirely off topic but I had to share it with someone!

    Reply

  48. Hi there, I discovered your website by the use
    of Google whilst looking for a comparable subject, your website came up, it seems good.
    I have bookmarked it in my google bookmarks.[X-N-E-W-L-I-N-S-P-I-N-X]Hello there,
    simply become alert to your blog through Google, and located that it’s truly
    informative. I am gonna watch out for brussels.
    I will be grateful if you happen to continue this in future.
    Numerous folks will likely be benefited out of your writing.
    Cheers!

    Also visit my web blog – Testoryze Male Performance Matrix

    Reply

  49. Hmm it seems like your website ate my first comment (it was super long) so I guess I’ll
    just sum it up what I wrote and say, I’m thoroughly enjoying your blog.

    I as well am an aspiring blog writer but I’m still new to everything.
    Do you have any helpful hints for first-time blog writers?
    I’d really appreciate it.

    My blog post – Luminas Pain Patch Reviews

    Reply

  57. Hello to all, how is everything, I think every one
    is getting more from this website, and your views are pleasant in support of new people.

    Feel free to visit my web-site – سئو سایت حرفه ای (Otis)

    Reply

  60. Thanks for every other informative site. The place else may I am getting that kind of
    information written in such an ideal manner? I’ve a undertaking
    that I’m simply now operating on, and I’ve been on the look out for
    such info.

    Reply

  70. Wonderful goods from you, man. I’ve understand your stuff previous to and you are just extremely wonderful.
    I actually like what you have acquired here, certainly like what you’re saying and the way in which you say it.
    You make it entertaining and you still care for to keep it smart.
    I cant wait to read far more from you. This is really a terrific web site.

    Reply

  71. wonderful issues altogether, you simply received a brand
    new reader. What could you suggest in regards to your post that you made a
    few days ago? Any positive?

    Reply

  72. When I originally commented I clicked the “Notify me when new comments are added” checkbox and now each
    time a comment is added I get several emails with the same
    comment. Is there any way you can remove people from that service?
    Cheers!

    Reply

  76. I believe that is one of the such a lot vital info for me.
    And i am satisfied reading your article. However want to commentary on some normal things, The website taste is ideal, the
    articles is in point of fact excellent : D. Good job, cheers

    Reply

  81. Unquestionably consider that which you said. Your favorite reason appeared to be on the net the easiest factor to keep
    in mind of. I say to you, I certainly get annoyed even as folks
    think about concerns that they plainly do not realize about.
    You managed to hit the nail upon the highest as neatly as defined out the whole thing with no
    need side-effects , other people can take a signal.
    Will likely be back to get more. Thank you

    Reply

  97. Awesome blog! Do you have any tips and hints for
    aspiring writers? I’m hoping to start my
    own blog soon but I’m a little lost on everything. Would
    you recommend starting with a free platform like WordPress or go for a paid option? There are so
    many options out there that I’m totally confused .. Any suggestions?
    Thanks!

    Reply

  107. We stumbled over here coming from a different web page and thought I
    might check things out. I like what I see so now i’m following you.
    Look forward to exploring your web page yet again.

    my site; Francesco

    Reply

  112. An impressive share! I’ve just forwarded this onto a colleague who was
    doing a little research on this. And he actually bought me lunch simply because I found it for him…
    lol. So allow me to reword this…. Thank YOU for
    the meal!! But yeah, thanx for spending some time to discuss this issue here on your web page.

    Reply

  113. Thank you, I’ve recently been searching for information approximately this topic for a long time and yours is the best I’ve came upon so far.

    However, what concerning the conclusion? Are you positive concerning the supply?

    Reply

  118. Doug, an Australian transplant, has generated a European style backpacker
    lodge by having an open air gathering place that boasts internet access.
    This means how the man does not want or have to go to fall asleep after sex.
    These factors can be a life-changing injury in case your career depends upon your fitness level or being on the
    feet for prolonged periods.

    Reply

  126. Hi! I could have sworn I’ve been to this web site before
    but after browsing through a few of the posts I realized it’s new to me.
    Nonetheless, I’m certainly delighted I stumbled upon it and I’ll be bookmarking
    it and checking back regularly!

    Reply

  135. Just want to say your article is as astounding. The clarity for your put up is just nice and i can think you are a professional on this
    subject. Well together with your permission let me to grab
    your feed to keep up to date with drawing close post.
    Thank you 1,000,000 and please continue the rewarding work.

    My webpage; bookmarketmaven.Com

    Reply

  151. Thanks for a marvelous posting! I really enjoyed reading
    it, you can be a great author. I will ensure that I bookmark your blog and will eventually come back at some
    point. I want to encourage continue your great writing, have a nice holiday weekend!

    Reply

  154. Please let me know if you’re looking for a writer for your
    site. You have some really great posts and I believe I would
    be a good asset. If you ever want to take some of
    the load off, I’d really like to write some articles for your blog in exchange for a link back to
    mine. Please blast me an email if interested. Kudos!

    Reply

  157. Sweet blog! I found it while searching on Yahoo News. Do you have any suggestions on how to get listed in Yahoo News?
    I’ve been trying for a while but I never seem to get there!
    Cheers

    Reply

  170. Betting arbitrage (“miraclebets”, “surebets”,
    sports arbitrage) is an example of arbitrage arising on betting markets due to either bookmakers’
    differing opinions on event outcomes or errors.

    Reply

  174. Pretty section of content. I just stumbled upon your site and in accession capital to assert
    that I get actually enjoyed account your blog posts. Any way I will be subscribing to your feeds and even I achievement you
    access consistently fast.

    my web blog … سئو سایت چیست – Tegan,

    Reply

  180. I have been exploring for a little for any high quality articles or weblog posts on this kind of area
    . Exploring in Yahoo I finally stumbled upon this web site.
    Studying this information So i’m happy to express that I’ve a very excellent uncanny feeling I found out just what I
    needed. I so much surely will make certain to don?t forget this site and provides it a look regularly.

    Reply

  183. This is really interesting, You are a very skilled blogger.
    I have joined your rss feed and look forward to seeking more of your great post.

    Also, I’ve shared your website in my social networks!

    Reply

  187. Its like you read my mind! You seem to know a lot about this, like you wrote the book in it or something.
    I think that you could do with some pics to drive the message home
    a little bit, but other than that, this is excellent
    blog. A fantastic read. I’ll certainly be back.

    Reply

  205. Very nice post. I just stumbled upon your blog and wished to say that I’ve truly enjoyed
    browsing your blog posts. In any case I’ll be subscribing to your rss feed and I hope you write again soon!

    Reply

  207. Thanks for your marvelous posting! I actually enjoyed reading it, you will be a great author.
    I will make sure to bookmark your blog and will come back very soon. I want to encourage you
    to ultimately continue your great job, have a nice holiday weekend!

    Reply

  208. Greate post. Keep posting such kind of information on your
    site. Im really impressed by it.
    Hello there, You have performed a great job.
    I will certainly digg it and personally recommend to my friends.
    I’m sure they will be benefited from this site.

    Reply

  211. What’s up, this weekend is fastidious designed for me, as this occasion i am reading this enormous informative piece of writing here at my home.

    my web page; w88

    Reply

  212. My brother recommended I might like this blog.
    He was entirely right. This post actually made my day.
    You cann’t imagine just how much time I had spent for this information! Thanks!

    Here is my webpage; w88

    Reply

  304. I blog quite often and I really thank you for your information. This great article has really
    peaked my interest. I am going to take a note of your site and keep checking for new information about once per week.
    I subscribed to your RSS feed as well.

    Reply

  431. Thanks for another informative site. The place
    else may I am getting that type of info written in such
    a perfect method? I’ve a project that I’m just now operating on, and I have been on the look out for such info.

    Here is my website card safety

    Reply

  433. When I initially commented I appear to have clicked the -Notify me when new comments are added-
    checkbox and from now on whenever a comment is added I receive four emails with the exact same comment.
    There has to be an easy method you can remove me from that service?
    Many thanks!

    My web site … online marketing

    Reply

  448. A lot of thanks for all of the efforts on this site.
    Ellie takes pleasure in making time for investigation and it’s really obvious why.
    We learn all concerning the lively method you create rewarding ideas through this web site and strongly
    encourage response from some others on the matter and my simple princess is now understanding a whole
    lot. Take advantage of the rest of the new year.
    You have been carrying out a glorious job.

    My web site :: invoice number generator excel

    Reply

  450. Thank you for every other informative site.

    Where else may I get that kind of info written in such an ideal method?

    I have a challenge that I am simply now operating on, and I’ve been on the
    look out for such info.

    Have a look at my web-site; item346052579

    Reply