Table of Contents

Why choose us section

Share Now :

Title : Why choose us section design html css | W3pupil

Description

Hello W3PUPIL!!! We provide you with a dynamic and attractive Why Choose Us section that displays your information in a clear and concise manner. This Why Choose Us section snippet has been carefully crafted using HTML & CSS.
An Why Choose Us section in HTML & CSS is an excellent way to present information in an orderly and visually appealing way. We are pleased to share our Why Choose Us section with you. You can create a strong impression by placing your profile picture in the centre of the card. You can also add the services that you offer to the card. The card has a fully responsive design that allows you to display the information on a wide range of devices such as desktop, laptop, tablet and smartphone.
So by using this HTML and CSS About me page, you’re not just sharing information – you’re demonstrating your dedication to professionalism and contemporary web design. All in all, use this innovative & creative Why Choose Us section to show off and engage with the world.

Let's know how to create a file..

Creating and managing files and folders efficiently is critical for smooth development. Below is a step-by-step guide.

W3pupil’s suggestion is to download and install Visual Studio Code.

  • After successfully completing the download and installation, open Visual Studio Code.
  • Create a new folder on your desktop.
  • Go to the file and then open the folder you created.
  • Then add a file for HTML with the extension “.html” or “.htm”.
  • Also add another file for CSS with the extension “.css”.
  • Now you have an empty HTML file and a CSS file ready for your code.

Let's know how to open a downloaded file..

  • After you download the snippet file from W3pupil, you will get a zip file.
  • After unzipping, you can open the file in Visual Studio Code.
  • Now you have the HTML file and the CSS file to work with.
  • Take your time to fully understand the functionality of the code before making the changes you want in the Why choose us section snippet.

Let's take a look at a code snippet created by W3pupil team using HTML and CSS.

HTML SOURCE CODE LOGO

HTML Source Code

HTML (Hypertext Markup Language) is a standard markup language for creating web pages, defining their structure and content using a system of tags and elements. (index.html)

  <!--Hello Future Developer Thanks for Using w3pupil.com, Share & Support us-->
<div class="container">
<div class="box">
    <div class="root1">
        <div class="sec1">
            <span class="circle">
                <i class="fa-solid fa-briefcase fa-3x" style="color: #ffffff"></i>
            </span><br>
            <h1>500+ SITES</h1>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi cupiditate ad id tempore fugit expedita.</p>
        </div>
        <div class="sec2">
            <span class="circle">
                <i class="fa-solid fa-code fa-3x" style="color: #ffffff"></i>
            </span><br>
            <h1>DEVELOPMENT</h1>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi cupiditate ad id tempore fugit expedita.</p>
        </div>
    </div>
    <div class="root2">
        <img src="https://cdn.pixabay.com/photo/2020/03/24/03/35/man-4962668_960_720.png" alt="profile picture">
    </div>
    <div class="root3">
        <div class="sec3">
            <span class="circle">
                <i class="fa-solid fa-headset fa-3x" style="color: #ffffff"></i>
            </span><br>
            <h1>SUPPORT</h1>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi cupiditate ad id tempore fugit expedita.</p>
        </div>
        <div class="sec4">
            <span class="circle">
                <i class="fa-solid fa-rocket fa-3x" style="color: #ffffff"></i>
            </span><br>
            <h1>EFFECTIVE</h1>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi cupiditate ad id tempore fugit expedita.</p>
        </div>
    </div>
</div>
</div>
<div class="credit">Made with <span>❤ </span>by <a href="https://www.w3pupil.com/">W3pupil</a></div>
<!--Check our website Regularly For New Snippets Post-->  
CSS SOURCE CODE IMAGE

CSS Source Code

CSS (Cascading Style Sheet) enhances website aesthetics and layout, applying styles and design elements to create a visually appealing and responsive user interface. (style.css)

  /** 
Hello Future Developer Thanks for Using w3pupil.com, 
Check our website Regularly For New Snippets Post.

Share & Support us
**/
*{
    box-sizing: border-box;
}
body{
    font-family: 'Nanum Gothic', sans-serif;
    margin: 0%;
}
.container{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.box{
    width: 90vw;
    height: 90vh;
    display: flex;
    flex-direction: row;
}
.circle{
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-color: hotpink;
    display: flex;
    justify-content: center;
    align-items: center;
}
.root1{
    width: 35%;
    height: 90vh;
    display: flex;
    flex-direction: column;
    text-align: center;
}
.sec1{
    width: 100%;
    height: 45vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 5px;
}
.sec1 h1{
    margin: 0%;
    letter-spacing: 2px;
    color: #42b883;
    font-size: 25px;
}
.sec1 p{
    font-style: italic;
    font-weight: 500;
    margin: 10px;
}
.sec1 .circle{
    background-color: #42b883;
}
.sec2{
    width: 100%;
    height: 45vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 5px;
}
.sec2 h1{
    margin: 0%;
    letter-spacing: 2px;
    color: #347474;
    font-size: 25px;
}
.sec2 p{
    font-style: italic;
    font-weight: 500;
    margin: 10px;
}
.sec2 .circle{
    background-color: #347474;
}
.root2{
    width: 30%;
    height:90vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.root2 img{
    width: 350px;
    height: 350px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}
.root3{
    width: 35%;
    height: 90vh;
    display: flex;
    flex-direction: column;
    text-align: center;
}
.sec3{
    width: 100%;
    height: 45vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 5px;
}
.sec3 h1{
    margin: 0%;
    letter-spacing: 2px;
    color: #35495e;
    font-size: 25px;
}
.sec3 p{
    font-style: italic;
    font-weight: 500;
    margin: 10px;
}
.sec3 .circle{
    background-color: #35495e;
}
.sec4{
    width: 100%;
    height: 45vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 5px;
}
.sec4 h1{
    margin: 0%;
    letter-spacing: 2px;
    color: #ff7e67;
    font-size: 25px;
}
.sec4 p{
    font-style: italic;
    font-weight: 500;
    margin: 10px;
}
.sec4 .circle{
    background-color: #ff7e67;
}
@media screen and (max-width:1024px){
    .container{
        height: fit-content;
    }
    .box{
        flex-direction: column;
        row-gap: 30px;
        height: fit-content;
    }
    .root1{
        width: 100%;
        height: fit-content;
        order: 2;
        row-gap: 30px;
        font-size: 20px;
    }
    .root2{
        width: 100%;
        height: fit-content;
        order: 1;
    }
    .root3{
        width: 100%;
        height: fit-content;
        order: 3;
        row-gap: 30px;
        font-size: 20px;
    }
}
@media screen and (max-width:630px){
    .container{
        padding:20px 0px;
        height: fit-content;
    }
    .box{
        flex-direction: column;
        row-gap: 30px;
        height: fit-content;
    }
    .root1{
        width: 100%;
        height: fit-content;
        order: 2;
        row-gap: 30px;
        font-size: 20px;
    }
    .root2{
        width: 100%;
        height: fit-content;
        order: 1;
    }
    .root3{
        width: 100%;
        height: fit-content;
        order: 3;
        row-gap: 30px;
        font-size: 20px;
    }
}
.credit a{
    text-decoration: none;
    color: #000000;
    font-weight: 800;
}
.credit{
    color: #000000;
    text-align: center;
    margin-top: 10px;
    font-family: Verdana,Geneva,Tahoma,sans-serif;
}
.credit span{
    color:tomato;
    font-size:20px;
}  

Note :

  • We have coded CSS in a separate file and linked to the HTML file for creating Why choose us section snippet.

Download :

Share and Support W3pupil.com

Conclusion :

To change the code, you can download the source code files of the snippet. To improve your HTML and CSS skills, you can try rebuilding other creative HTML and CSS snippets available on W3pupil. If you have any technical questions, feel free to contact W3pupil. As soon as possible, we will do our best to resolve your request.

Like Reaction
Like Reaction
Like Reaction
Like Reaction
Like Reaction

LivePreview :