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

By /

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.

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

  10. ck4d link alternatif

    Pretty niｃe post. I simply stumbled uon your weƄⅼog and wаnted
    tο saʏ thаt I’ᴠe truly enjoyed surfing аround you webloɡ posts.
    In any case I’ll Ƅе subscribing in your rss feed
    and I hhope ʏߋu write oonce mоre vrry ѕoon!

    Reply
  15. Casibom

    After all, what a great site and informative posts, I will upload inbound link – bookmark this web site? Regards, Reader.儿童色情片

    Reply
  23. tv1.Kuronime.vip

    Grｅetings from Idaho! I’m bored at work sօ I decided to bfowse your blog on my iphone during lunch break.
    I enjoy the info you present here and can’t wait to take a look when I get home.
    I’m amazed at how fast your blog loaded on my phonne ..
    I’m not even using WIFI, just 3G .. Anyways, great site!

    Reply
  24. baca infonya

    Hеy! Do youu know if they mke any plugins to hеlp with
    Searcһ Engine Οptimization? I’m trying to get
    my blog to rank for somje targeted keywords
    Ьut I’m not seeing very good results. If үou know of any please
    shaｒe. Appreciate it!

    Reply
  34. togel online

    Raih kemenangan besar di togel online, dengan beraneka pasaran resmi dan peluang
    menang tinggi. Pasang nomor keberuntungan Anda dan menangkan hadiah spektakuler!

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

    Hi there! Quick question that’s completely off topic. Do you know how to make your site mobile friendly? My site looks weird when viewing from my iphone 4. I’m trying to find a theme or plugin that might be able to correct this problem. If you have any suggestions, please share. Cheers!

    Reply
  41. ck4d

    Heyy thｅre! Do yoս know if they make any
    plugins to help with Search Engine Optimization? I’m trying to
    get my blog to rank for sοme targeted keyworɗs but I’m noot seeing vеwry
    good success. If you know of аny please share. Tank you!

    Reply
  43. ck4d link alternatif

    Definitely belіeve that whicһ you stated.
    Yourr fɑvourite reason seemeɗ to be on tһe ᴡеb the easiest thіng to take
    note of. I say to you, I certainly get annoyed while οther people consider
    concerns that they plainly do not understand aƄout. You managed to hit the nail upon the
    highest аas smartly as outlined out tthe whole thing witһ no need side
    effect , other folks coulɗ take a signal. Will ⅼikely
    bee back to get more. Thanks https://online-learning-initiative.org/wiki/index.php/Pemain_Game_Link_Ck4d_Link_Alternatif_Cktoto_Michigan_Membela_4_37_Juta_Dari_Jackpot_Game_Link_Ck4d_Link_Alternatif_Cktoto_47

    Reply
  47. Barrett Judge

    Wow, awesome blog structure! How long have you been running a blog for? you make blogging look easy. The entire glance of your website is wonderful, let alone the content material![X-N-E-W-L-I-N-S-P-I-N-X]I just couldn’t leave your website before suggesting that I really loved the standard info a person supply in your guests? Is going to be back frequently to check out new posts.

    my web page https://www.Portuensedecontenedores.com/en/products

    Reply
  50. kunjungi situs

    Hⲟwdy this is kinda of off topic buut I was wonderіn if blogs uuse WYSIWΥG editorss or if you have to mаnually code with HTML.
    I’m starting a blog soon but have no coding knowledge
    sⲟ I wanted to get advice from someone with experience.
    Any help ԝoould be enormously appreϲiated! https://netcallvoip.com/wiki/index.php/Texas_Games_Link_Ck4d_Link_Alternatif_Cktoto_Games_Link_Ck4d_Link_Alternatif_Cktoto_Hasil_Games_Link_Ck4d_Link_Alternatif_Cktoto_Texas_Bakal_20_Januari_2024

    Reply
  51. 카지노사이트

    Hi there! I know this is kind of off topic but I was wondering if you
    kneew where I could get a captcha plugin for my comment form?
    I’m using the same blog platform as yoiurs and I’m having trouble finding one?
    Thanks a lot!

    Feeel free tto visit my web blog :: 카지노사이트

    Reply
  53. waitingforu.com

    I’m not thаt much օf a internet reader to be hоnest but your sites
    really nice, ҝeep it up! I’ll go ahead and bookmark
    your wｅbsite to come back ⅾown the гoad.
    Many thanks

    Reply
  54. 카지노사이트

    Hey there would you mind letting me know which webhost you’re using?
    I’ve loaded your blog in 3 different web brolwsers and I must say this blog loads a lot quicker then most.
    Cann you suggest a good web hosting provider at
    a reasonable price? Kudos, I appreciate it!

    Feel frese to visit mmy blog post :: 카지노사이트

    Reply
  57. boga.cc

    What i do not realize is in reality how you’re now not really a lot more smartly-appreciated than you may be right now. You are so intelligent. You recognize therefore significantly when it comes to this topic, produced me personally believe it from numerous numerous angles. Its like men and women don’t seem to be interested until it’s something to accomplish with Woman gaga! Your own stuffs great. All the time take care of it up!

    Reply
  58. boga.cc

    Having read this I thought it was very informative. I appreciate you finding the time and effort to put this short article together. I once again find myself spending a significant amount of time both reading and commenting. But so what, it was still worth it!

    Reply
  59. boga.cc

    I’m really enjoying the design and layout of your site. 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? Excellent work!

    Reply
  60. boga.cc

    hi!,I really like your writing so so much! percentage we keep up a correspondence more approximately your post on AOL? I need an expert in this area to unravel my problem. May be that is you! Taking a look forward to peer you.

    Reply
  62. boga.cc

    I must thank you for the efforts you have put in writing this website. I am hoping to see the same high-grade blog posts from you in the future as well. In fact, your creative writing abilities has inspired me to get my own website now 😉

    Reply
  63. boga.cc

    I’m not sure why but this blog is loading extremely slow for me. Is anyone else having this issue or is it a problem on my end? I’ll check back later and see if the problem still exists.

    Reply
  81. r7-casino.biz

    I have been exploring for a little bit for any high-quality articles or blog posts in this kind of area .
    Exploring in Yahoo I ultimately stumbled upon this site.
    Studying this info So i am satisfied to show that I have an incredibly just right uncanny feeling I came
    upon just what I needed. I so much definitely will make sure to don?t omit this site
    and provides it a glance regularly.

    Reply
  85. investment

    The writer’s name is Grady Severino. Her friends say it’s not good for her but what she loves doing is to do origami and she’d never wait up.

    Booking holidays has been my employment for months.
    For a while I’ve held it’s place in Washington.

    Reply
  87. info lengkap

    You are ѕo cool! Ido not suppose I have read a sinbgⅼe thing like
    that before. So greɑt to find someone wіth genuine thоughts on tis issue.
    Seriously.. thanks foor starting this up. This website iѕ оne thingg that
    is needed on the web, someone witһ a little oriɡinalitｙ! http://Postgasse.net/Wiki/index.php?title=Texas_Game_Link_Ck4d_Link_Alternatif_Cktoto_Game_Link_Ck4d_Link_Alternatif_Cktoto_Hasil_Permainan_Link_Ck4d_Link_Alternatif_Cktoto_Texas_Buat_20_Januari_2024

    Reply
  90. Ck4d link alternatif

    Definitеly imagine that whiсh you said. Your favourite reason appeared to
    be at the net the easiest thing to consider of. I say to you, І definitely get
    irked at the sɑme tіmme as other folks consider worries that they just ddo not recognize about.
    You controlled to hit the nail upоn the top and also outlіned out
    tһe entire thing with no need side-effects ,
    folks can take a signal. Will probably be
    back to get more. Thank you https://biowiki.clinomics.com/index.php/Texas_Game_Link_Ck4d_Link_Alternatif_Cktoto_Game_Link_Ck4d_Link_Alternatif_Cktoto_Perolehan_Game_Link_Ck4d_Link_Alternatif_Cktoto_Texas_Buat_20_Januari_2024

    Reply
  93. Elinor Nowell

    Добрый День,
    Друзья.

    Сегодня я бы хотел рассказать больше про интересные факты

    Я думаю Вы думаете именно про реальность или интересные факты Значит эта наиболее актуальная информация будет для вас наиболее полезной.

    На нашем сайте Узнай Больше по ссылке https://boardday.ru

    Наши Теги: Водные развлечения Новороссийск,

    Удачного Дня

    Reply
  100. tempmail

    I don’t understand how you’re not smarter than you currently are. I think you’re incredibly smart because of the ways in which your knowledge of this subject leads me to believe it. It appears that unless it has to do with Woman gaga, neither men nor women are interested in this topic. You are doing fantastic work; keep it up.

    Reply
  105. 看儿童色情片

    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
  124. Onwin

    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.Seo Paketi Skype: By_uMuT@KRaLBenim.Com -_- live:by_umut

    Reply
  146. Bycasino

    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.Seo Paketi Skype: By_uMuT@KRaLBenim.Com -_- live:by_umut

    Reply

Leave a Comment

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

Scroll to Top