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

By /

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

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

  1. exness

    Hmm is anyone else encountering problems with the pictures on this blog loading?
    I’m trying to find out if its a problem on my end or if it’s the blog.

    Any feed-back would be greatly appreciated.

    Reply
  2. Sugar Defender Review

    You’re welcome! I appreciate your willingness to engage further. If you have any specific questions or topics you’d like to delve into, feel free to share them. Whether it’s about recent developments in technology, intriguing scientific discoveries, captivating literature, or anything else on your mind, I’m here to provide insights and assistance. Simply let me know how I can help, and I’ll be happy to assist you further!

    Reply
  3. Mitchell Jones

    Fantastic read! I was especially impressed by the depth provided on the topic, offering a perspective I hadn’t considered. Your insight adds significant value to the conversation. For future articles, it would be fascinating to explore more to dive deeper into this subject. Could you also clarify more about the topic? It caught my interest, and I’d love to understand more about it. Keep up the excellent work!

    Reply
  4. Sugar Defender Review

    You’re welcome! I appreciate your willingness to engage further. If you have any specific questions or topics you’d like to delve into, feel free to share them. Whether it’s about recent developments in technology, intriguing scientific discoveries, captivating literature, or anything else on your mind, I’m here to provide insights and assistance. Simply let me know how I can help, and I’ll be happy to assist you further!

    Reply
  7. Sugar Defender

    Thank you for your openness to explore various topics! If you have any specific questions or areas of interest you’d like to discuss, feel free to share them. Whether it’s about the latest advancements in technology, recent scientific breakthroughs, thought-provoking literature, or any other subject, I’m here to offer insights and assistance. Just let me know how I can be of help, and I’ll do my best to provide valuable information and engage in meaningful discussions!

    Reply
  10. ZenCortex Healthy Hearing

    I’ve been visiting this site for years, and it never fails to impress me with its fresh perspectives and wealth of knowledge. The attention to detail and commitment to quality is evident. This is a true asset for anyone seeking to learn and grow.

    Reply
  12. aeroslim

    Thank you for your response! I’m grateful for your willingness to engage in discussions. If there’s anything specific you’d like to explore or if you have any questions, please feel free to share them. Whether it’s about emerging trends in technology, recent breakthroughs in science, intriguing literary analyses, or any other topic, I’m here to assist you. Just let me know how I can be of help, and I’ll do my best to provide valuable insights and information!

    Reply
  17. Casibom

    Hi, just required you to know I he added your site to my Google bookmarks due to your layout. But seriously, I believe your internet site has 1 in the freshest theme I??ve came across.国产线播放免费人成视频播放

    Reply
  18. глаз бога телеграмм бесплатно

    Have you ever considered about including a little bit more than just your articles? I mean, what you say is valuable and all. However just imagine if you added some great graphics or video clips to give your posts more, “pop”! Your content is excellent but with images and clips, this site could undeniably be one of the very best in its niche. Good blog!

    Reply
  19. exness

    Just want to say your article is as amazing. The clearness in your post is simply excellent and i could assume you’re an expert on this subject.
    Fine with your permission allow me to grab your feed to keep
    updated with forthcoming post. Thanks a million and please keep up the rewarding
    work.

    Reply
  21. exness

    Hi there, i read your blog occasionally and
    i own a similar one and i was just wondering if you get a lot
    of spam responses? If so how do you protect against it, any plugin or anything you can advise?
    I get so much lately it’s driving me crazy so any assistance
    is very much appreciated.

    Reply
  24. exness

    Simply wish to say your article is as astounding. The clearness in your post
    is just nice and i can assume you’re an expert on this subject.
    Well with your permission let me to grab your
    RSS feed to keep up to date with forthcoming post. Thanks a
    million and please keep up the enjoyable work.

    Reply
  27. глаз бога тг

    Heya are using WordPress for your blog platform? I’m new to the blog world but I’m trying to get started and create my own. Do you need any coding knowledge to make your own blog? Any help would be greatly appreciated!

    Reply
  32. глаз бога телеграмм

    I believe what you postedtypedthink what you postedtypedbelieve what you postedtypedthink what you postedtypedsaidWhat you postedwrote was very logicala lot of sense. But, what about this?consider this, what if you were to write a killer headlinetitle?content?wrote a catchier title? I ain’t saying your content isn’t good.ain’t saying your content isn’t gooddon’t want to tell you how to run your blog, but what if you added a titleheadlinetitle that grabbed people’s attention?maybe get people’s attention?want more? I mean %BLOG_TITLE% is a little plain. You might look at Yahoo’s home page and see how they createwrite post headlines to get viewers interested. You might add a related video or a related pic or two to get readers interested about what you’ve written. Just my opinion, it could bring your postsblog a little livelier.

    Reply
  33. exness

    Does your site have a contact page? I’m having trouble locating
    it but, I’d like to shoot you an e-mail. I’ve got some creative ideas for your blog you might be interested
    in hearing. Either way, great blog and I look
    forward to seeing it improve over time.

    Reply
  38. Nitelikli Kahve

    Nitelikli kahve, kahve severler için benzersiz bir tat ve aroma dünyasının kapılarını aralar. Her biri özenle seçilmiş, yüksek kalitede çekirdeklerden üretilen nitelikli kahvelerimiz, sıradan bir kahve deneyiminin ötesine geçmek isteyenler için idealdir. Türkiye’nin önde gelen nitelikli kahveci sitesi olarak, zengin aroma profillerine ve üstün tat kalitesine sahip kahveleri sizlerle buluşturuyoruz. Nitelikli kahve çeşitlerimiz, dünyanın en iyi kahve üretim bölgelerinden gelen çekirdeklerle hazırlanır ve her bir yudumda farklı bir hikaye anlatır. Bu eşsiz kahve deneyimi için, tedarik ettiğimiz her çekirdeği titizlikle seçiyor ve kahve severlerin beklentilerini en iyi şekilde karşılayacak nitelikli kahve çeşitlerini sunuyoruz. İster evde ister ofiste, nitelikli kahve çeşitlerimizle kendinize özel anlar yaratabilirsiniz. E-ticaret sitemiz üzerinden kolayca sipariş verebilir ve Türkiye’nin her yerine güvenli bir şekilde ulaştırılan nitelikli kahvelerimizin keyfini çıkarabilirsiniz!

    Reply
  40. en güçlü motorlu tırpan

    Kes – Mak Bahçe Aksesuarları ve Yedek Parça | Malatya kesmak, kes-mak malatya, malatya kes-mak, motorlu testere yedek parça, Malatya Stihl Bayi, benzinli testere yedek parça, testere zinciri, ağaç kesme pala, klavuz, elektronik bobin, hava filtresi, stihl malatya bayi, stihlmalatya,malatyastihl, stihl servisi, malatya stihl servis, malatya testere,malatyastihlbayi, stihl malatya, malatya stihl, stihl bayisi malatya, Hekimhan stihl bayi, malatya testere bayisi, malatya stihl servis, stihl malatya servis,

    Reply
  41. Proton Keto Gummies Review

    You’re very welcome! I’m glad to hear that you’re open to exploring various topics. If you have any specific questions or areas of interest you’d like to delve into, please feel free to share them. Whether it’s about the latest advancements in technology, recent scientific discoveries, thought-provoking literary works, or any other subject, I’m here to offer insights and assistance. Just let me know how I can help, and I’ll do my best to provide valuable information and engage in meaningful discussions!

    Reply

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top