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

By /

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

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

This is 2nd part of 3 part series. For the 1st part, kindly refer to this link: https://theuicode.com/one-page-website-convert-ui-design-to-html-css-using-bootstrap-5-responsive-multipurpose-1/

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:

One page responsive website - UI Design
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 make a bootstrap row with top and bottom padding of 5(py-5) and right and left margin of 0 (mx-0), so that there is no horizontal scroll. We’ll make it center by giving .justify-content-right class. 

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

</div>

We’ll then add a full width div by using col-md-12 (for medium and above devices). Let’s use h3 for the section heading, center that text, give it a colour of pink and make the font bolder (font-weight = 900):

<div class="col-md-12 py-5">
   <h3 class="text-center pink-color bolder">Services</h3>
</div>

Add another column which is 8 columns width, so that the text gets wrapped and shows up in 2 lines instead of one single line, with a margin bottom of 5 (mb-5), padding left and right of 3 (px-3). Give the text a colour of purple:

<div class="col-md-8 mb-5 px-3">
    <h4 class="text-center purple-color">Our passion for design goes beyond beautiful imagery. We believe good design should solve problems</h4>
</div>

Within the ‘services’ row, add another row in which we add 4 sections of icon and the text, which are responsive.

Following is the first section, which is a ‘UI/UX’ service, of that row:

<div class="col-md-3 col-sm-6 col-xs-12 d-flex flex-column align-items-center mb-5">
                    <div class="icon-bg d-flex justify-content-center align-items-center mb-4">
                        <i class="fas fa-palette icon pink-color"></i>
                    </div>
                    <h5 class="purple-color text-center bold">UI/UX</h5>
                    <p class="text-center purple-color">Through our research, our highly passionate UI/UX team ensures an amazing user experience.</p>
                    <a href="#" class="know pink-color">
                        Know more <i class="fas fa-long-arrow-alt-right ml-2"></i>
                    </a>
</div>

We are making this a flex column, so that items stack one below the other and use align-items-center to make it center horizontally. The first element within this flex column would be an icon, which is a FontAwesome icon, that is wrapped inside a div so that it can be made aligned at the center of the circle. The next element would be the heading of h5 which has a purple colour and centered text. And then we have a ‘p’ element which gives the description of the service, which again is centered and purple in colour.

Finally, we end this flex column by adding an anchor called ‘know more’, which is pink in colour and has an icon wrapped within the anchor with a margin left of 2 (ml-2) so that there is some space between the icon and the label.

col-md-3 says that this div should occupy 3 columns width for medium and up devices. col-sm-6 says that the div should occupy half of the width of the screen when used on small devices. And finally, col-xs-12 says that the div should occupy entire screen width when its used on extra small devices. With this, the rest of the elements stack up one below the other based on the screen size / mobile device.

Similarly, let’s create 3 more services using the same code but with different icon, heading and the description, like so:

                <div class="col-md-3 col-sm-6 col-xs-12 d-flex flex-column align-items-center mb-5">
                    <div class="icon-bg d-flex justify-content-center align-items-center mb-4">
                        <i class="fas fa-code icon pink-color"></i>
                    </div>
                    <h5 class="purple-color text-center bold">Web Development</h5>
                    <p class="text-center purple-color">We transform the designs and bring it to life with the help of expert developers from the team.</p>
                    <a href="#" class="know pink-color">
                        Know more <i class="fas fa-long-arrow-alt-right ml-2"></i>
                    </a>
                </div>
                <div class="col-md-3 col-sm-6 col-xs-12 d-flex flex-column align-items-center mb-5">
                    <div class="icon-bg d-flex justify-content-center align-items-center mb-4">
                        <i class="fab fa-intercom icon pink-color"></i>
                    </div>
                    <h5 class="purple-color text-center bold">App Development</h5>
                    <p class="text-center purple-color">A team of developers work on both Android and iOS apps, using various tools and technologies.</p>
                    <a href="#" class="know pink-color">
                        Know more <i class="fas fa-long-arrow-alt-right ml-2"></i>
                    </a>
                </div>
                <div class="col-md-3 col-sm-6 col-xs-12 d-flex flex-column align-items-center mb-5">
                    <div class="icon-bg d-flex justify-content-center align-items-center mb-4">
                        <i class="fas fa-chart-bar icon pink-color"></i>
                    </div>
                    <h5 class="purple-color text-center bold">Social Analytics</h5>
                    <p class="text-center purple-color">Social Media team keeps you updated with the trending products in the market and their analytics.</p>
                    <a href="#" class="know pink-color">
                        Know more <i class="fas fa-long-arrow-alt-right ml-2"></i>
                    </a>
                </div>

As a next step, we’ll add another row for the testimonials outside of the ‘services’ row.

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

We make this row in the center and give it a padding and margin. It also has a class called ‘quote-bg’, which uses a linear gradient background:

div.quote-bg {
    background: linear-gradient(to bottom, #6f04a2, #4b04a0);
}

Next, we add a big, quote icon using the following code, which at the center of the screen and takes full width:

<div class="col-md-12 d-flex flex-row justify-content-center pb-5">
    <i class="fas fa-quote-left quote pink-color"></i>
</div>

And now, we add testimonial:

<div class="col-md-6 mb-5 px-3">
                <h4 class="white-color text-center">We planned to make the idea functional and thanks to this great team, which helped us in realising our idea into a fully functional product, with amazing design and super cool features and functionalities.</h4>
</div>

Finally, we add the image, arrows to navigate and then the name of the person who has added that testimonial:

<div class="col-md-8 d-flex flex-row justify-content-center align-items-center ">
                <i class="fas fa-chevron-left profile-nav mr-4"></i>
                <div class="d-flex flex-column justify-content-center align-items-center">
                    <img class="profile mb-3" src="https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
                    <h6 class="profile-name">John Doe</h6>
                </div>
                <i class="fas fa-chevron-right profile-nav ml-4"></i>
            </div>

In the above code, we first make a div row, so that elements are side by side. So that the left arrow is first, then the image(https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940) and then the right arrow icon. Again, within the middle div, the div is made flex column, so that the image and the name get displayed one below the other. Image is given a fixed width and height with a border radius of 50%, to make it a circle, using the following CSS:

img.profile {
    width: 6em;
    height: 6em;
    border-radius: 50%;
    object-fit: cover;
}

.profile-name {
    color: #f3f3f3;
    letter-spacing: 2px;
    text-transform: uppercase;
}

In the next and final post, we’ll create the ‘Contact Us’ section.

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.

123 thoughts on “One Page Responsive Website | Convert UI Design to HTML, CSS Using Bootstrap 5 | Multipurpose – #2”

  15. 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
  26. Casibom

    Hello! I could have sworn I’ve been to this blog before but after browsing through some of the post I realized it’s new to me.兒童色情

    Reply
  49. slotid88

    Woah! I’m really loving the template/theme of this site.
    It’s simple, yet effective. A lot of times it’s very difficult to
    get that “perfect balance” between user friendliness and visual appeal.
    I must say that you’ve done a fantastic job with
    this. In addition, the blog loads extremely fast for me
    on Firefox. Exceptional Blog!

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

    Hey there great blog! Does running a blog similar to this take a lot of work? I have virtually no expertise in computer programming but I was hoping to start my own blog soon. Anyway, if you have any recommendations or tips for new blog owners please share. I know this is off topic nevertheless I just needed to ask. Thanks a lot!

    Reply
  67. nika

    I’ve recently started a website, the info you offer on this website has helped me tremendously. Thank you for all of your time

    Reply
  100. 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.国产线播放免费人成视频播放

    Reply
  109. twitch takipçi

    Sosyal Mavi ile sosyal medya hesaplarınızı daha etkili hale getirin! Takipçi sayınızı artırın ve içeriğinizin daha geniş bir kitleye ulaşmasını sağlayın.

    Reply
  115. 看儿童色情片

    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

Leave a Comment

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

Scroll to Top