Single page responsive website using Bootstrap 5, which is multipurpose, responsive

Let’s create a single page responsive website using Bootstrap 5, by converting a UI Design into HTML and CSS.

This is the 3rd and final part of this series.

For the 1st part, kindly refer to : https://theuicode.com/one-page-website-convert-ui-design-to-html-css-using-bootstrap-5-responsive-multipurpose-1/

For the 2nd part, kindly refer to : https://theuicode.com/one-page-responsive-website-convert-ui-design-to-html-css-using-bootstrap-5-multipurpose-2/

We’ll make use of Bootstrap 5 to make it quick and responsive: https://v5.getbootstrap.com/docs/5.0/getting-started/introduction/

Following is the UI Design, from this we shall be creating the ‘Services’ section:

Single page responsive website
One page website – UI Design

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

Let’s create a bootstrap row with some padding, margin and make it at the center, with a grey background by using a contact-bg class:

<div id="contact" class="row mx-0 py-5 justify-content-center contact-bg"> 

</div>

Give it a heading which would be pink in colour, centered text and a bolder font:

            <div class="col-md-12 pb-5 mt-5">
                <h3 class="text-center pink-color bolder">Contact</h3>
            </div>

Create another div which would be 8 columns width, so that the description can display in 2 lines:

            <div class="col-md-8 mb-5 px-3">
                <h4 class="text-center purple-color">If you have an idea to be transformed and made functional, we need to talk. Just say 'hi' to us by emailing, calling or by filling up the form below.</h4>
            </div>

Next, we create a row with 2 sections on the left and on the right:

<div class="row justify-content-center">
   <div class="col-md-4 d-flex flex-column contact-left p-5"></div>
   <div class="col-md-4 d-flex flex-column contact-right p-5">
</div>

The left portion will have a background of purple and the right one will have a background of white:

div.contact-left {
    background: #4B04A0;
}

div.contact-right {
    background: white;
}

We will make both the divs as flex columns, so that the elements inside it stack one below the other. Each of it’s width will be 4 columns wide for medium and up and it will take up full width of the screen for small and below sizes.

On the left contact section, we place the heading, address and the contact details.

                    <h3 class="white-color contact-heading">Something incredible is waiting for you</h3>
                    <div class="d-flex flex-row align-items-center px-2 py-4">
                        <i class="fas fa-map-marker contact-icon white-color"></i>
                        <p class="white-color ml-4">59 West 46th Street, New York City, NY 10036.</p>
                    </div>

The heading will use a white colour with a bigger font and spacing between the letters.

.contact-heading {
    letter-spacing: 3px;
    line-height: 50px;
}

Next, we create a div row, so that elements are place side by side. First element will be an icon and the second one will be the description within <p> element.

Similarly, create the contact number, email and the website section on the left side of the contact:

                    <div class="d-flex flex-row align-items-center px-2 py-4">
                        <i class="fas fa-phone-alt contact-icon white-color"></i>
                        <a class="ml-4 white-color" href="tel:14123815500">+1 (412) 381-5500</a>
                    </div>
                    <div class="d-flex flex-row align-items-center px-2 py-4">
                        <i class="fas fa-envelope contact-icon white-color"></i>
                        <a class="ml-4 white-color" href="mailto:hi@theuicode.com">hi@theuicode.com</a>
                    </div>
                    <div class="d-flex flex-row align-items-center px-2 py-4">
                        <i class="fas fa-globe contact-icon white-color"></i>
                        <a class="ml-4 white-color" href="http://theuicode.com">theuicode.com</a>
                    </div>

For the right portion of the contact, add the input fields to capture the name, email, subject and message. Give it a padding and margin, so that it looks spacious, like so:

<div class="col-md-4 d-flex flex-column contact-right p-5">
                    <input type="text" placeholder="Name" class="mb-4 mt-4 py-3">
                    <input type="text" placeholder="Email" class="mb-4 py-3">
                    <input type="text" placeholder="Subject" class="mb-4 py-3">
                    <textarea placeholder="Your message" class="py-3" cols="30" rows="5"></textarea>
                    <div class="mt-5 text-right">
                        <a href="#" class="action py-3 px-5 d-inline-block">
                            Send
                        </a>
                    </div>
                </div>

Add an anchor button, with a class of ‘action’ and padding on all sides, like so:

a.action {
    background: #e625a4;
    color: white;
    letter-spacing: 2px;
    border-radius: 2rem;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0px 0px 50px 0px rgba(230, 37, 164, 0.65);
    transition: all 0.5s ease-in-out;
}

a.action:hover {
    transform: scale(1.1);
    box-shadow: 0px 0px 50px 0px rgba(230, 37, 164, 1);
}

We also give a transition on hovering of the anchor. On hovering, the anchor zooms in with a glow effect by using box-shadow. We also need to note that the zoom effect on anchors work only if the anchor is given a display of inline-block. Hence, we give it a bootstrap class of ‘d-inline-block’, so that zoom works on hovering.

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.

93 thoughts on “Single Page Responsive Website | Convert UI Design to HTML, CSS Using Bootstrap 5 | Multipurpose – #3

  1. Nice blog! Is your theme custom made or did you download it from somewhere?

    A theme like yours with a few simple adjustements would really make my
    blog jump out. Please let me know where you got your theme.
    Thanks

  2. hello there and thank you for your information – I’ve certainly
    picked up anything new from right here. I did however expertise some technical issues using this web site, as I
    experienced to reload the website a lot of times previous to I could get it to load properly.
    I had been wondering if your web host is OK?
    Not that I’m complaining, but sluggish loading instances times
    will very frequently affect your placement in google and
    could damage your quality score if ads and marketing with Adwords.
    Well I’m adding this RSS to my e-mail and can look out for much more of your respective intriguing content.
    Ensure that you update this again soon.

  3. Howdy! Someone in my Myspace group shared this site with
    us so I came to take a look. I’m definitely enjoying the information. I’m book-marking and will
    be tweeting this to my followers! Fantastic blog and
    brilliant design.

  4. Attractive component of content. I simply stumbled upon your
    weblog and in accession capital to say that I acquire in fact enjoyed account your weblog posts.

    Any way I will be subscribing on your feeds and even I achievement
    you get admission to persistently rapidly.

  5. My brother recommended I may like this web site. He was totally right.
    This put up actually made my day. You can not believe simply how so much time I had spent for
    this information! Thanks!

    my web page; pusy888

  6. Admiring the dedication you put into your blog and
    detailed information you offer. It’s great to come across a
    blog every once in a while that isn’t the same out of date rehashed information. Great read!
    I’ve saved your site and I’m adding your RSS feeds to my Google account.

    Here is my homepage – 918kaya online

  7. Excellent items from you, man. I’ve bear in mind your stuff
    previous to and you’re just extremely excellent. I actually like what you’ve received right here,
    certainly like what you are stating and the way in which you assert it.
    You make it enjoyable and you still care for to stay it smart.
    I can not wait to learn far more from you.
    This is actually a terrific website.

  8. Hola! I’ve been following your web site for a while now and finally got the bravery to go ahead and give
    you a shout out from Kingwood Texas! Just wanted to mention keep up the fantastic job!

    Also visit my web page :: pussy888 slot

  9. I absolutely love your website.. Great colors & theme.
    Did you develop this website yourself? Please reply back as I’m looking to create my own personal website and would like to learn where you got this from or what the theme is called.
    Appreciate it!

    My website … 918kaya pc download

  10. Howdy would you mind letting me know which hosting company you’re utilizing?
    I’ve loaded your blog in 3 completely different web
    browsers and I must say this blog loads a lot quicker then most.

    Can you suggest a good internet hosting provider at a fair price?
    Many thanks, I appreciate it! 0mniartist asmr

  11. Hello, this weekend is nice in favor of me, for the reason that this point in time i am reading
    this fantastic educational piece of writing here at my residence.
    asmr 0mniartist

  12. great post, very informative. I’m wondering why the other specialists of
    this sector don’t notice this. You must proceed your writing.
    I am sure, you have a huge readers’ base already! asmr 0mniartist

  13. Therefore, it aren’t going to be a tricky task to positively get their hands on these solutions.|Make sure ALL your players obtain the proper coaching. If you do not get the loading phase ofegypt premier league a corner arm correct, it’s challenging for your swing or throw to extract. There are thousands of online autographs sites.|Move the ball down area 10 yards at a time full. eat within the clock. Finally, no football bedroom would be complete without real footballs. At one end of record will be most probable home is awarded.|The American odds will also called as money lines. In 1935 the Heisman Trophy, was manufactured to be awarded to the most outstanding football player. Late Olayinka John (Ayogi) was the then coach of eleven brothers.

  14. Good post. I learn something new and challenging on websites I stumbleupon everyday.

    It will always be interesting to read content from other writers and
    use something from their sites.

  15. Nice post. I was checking constantly this blog and I’m impressed!

    Very useful information specially the last part 🙂 I care
    for such information much. I was seeking this particular
    info for a very long time. Thank you and good luck.

  16. I’m really enjoying the theme/design of your site. Do you ever run into any
    web browser compatibility problems? A number of my
    blog visitors have complained about my website not working correctly in Explorer but looks great
    in Firefox. Do you have any ideas to help fix this problem?

  17. We’re a bunch of volunteers and opening a brand new scheme
    in our community. Your web site provided us with valuable information to work on.
    You’ve done a formidable task and our entire group shall be grateful to you.

  18. This is really fascinating, You’re a very skilled blogger.
    I have joined your rss feed and look forward to searching for more of
    your fantastic post. Also, I’ve shared your site in my social networks

  19. Thanks a lot for sharing this with all folks you actually recognise what you are speaking approximately!
    Bookmarked. Please additionally talk over with my web site =).
    We can have a hyperlink change arrangement between us

  20. scoliosis
    I’m not that much of a internet reader to be honest but your
    sites really nice, keep it up! I’ll go ahead and bookmark your website to come back in the future.
    Many thanks scoliosis

  21. scoliosis
    Hi there! I could have sworn I’ve been to this website before but after browsing through some of the post I realized it’s new to me.
    Anyways, I’m definitely glad I found it and I’ll be bookmarking and checking
    back often! scoliosis

  22. scoliosis
    whoah this blog is great i love reading your articles.

    Keep up the good work! You realize, lots of individuals are looking round for this information, you can help them greatly.
    scoliosis

  23. Hi there! I know this is kind of off topic but I was wondering which
    blog platform are you using for this site? I’m getting tired of WordPress because I’ve
    had issues with hackers and I’m looking at alternatives for another platform.
    I would be fantastic if you could point me in the direction of a good platform.

  24. I was recommended this blog by my cousin. I am not sure whether
    this post is written by him as nobody else know such detailed about
    my difficulty. You are wonderful! Thanks!

  25. Its like you read my mind! You seem to understand so much approximately this, like you wrote the e book in it or something.
    I feel that you just can do with a few p.c. to power the message
    home a bit, but other than that, this is great blog. An excellent read.

    I will certainly be back.

  26. I’m really enjoying the design and layout of your
    website. It’s a very easy on the eyes which makes it much more enjoyable for me
    to come here and visit more often. Did you hire out a designer to
    create your theme? Superb work!

  27. Greetings! I’ve been reading your weblog for a while now and finally got the bravery to go ahead and give you a shout out from Austin Tx! Just wanted to tell you keep up the fantastic job!

Leave a Reply

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