Table of Contents

How to create Simple About us page

Share Now :

Title : How to create Simple About us page | W3pupil

Description

Hello W3PUPIL!!

W3pupil provides a dynamic and visually appealing profile card snippet that showcases your information in a single glance. This profile card snippet is created with precision using HTML and CSS.

In the top container of profile card snippet, you will find your profile picture, name and email address. On the right-hand side, you will find three buttons for contact me, download resume and share to connect with the people who are interested in your profile. In the bottom container, you will find a space for a short description of your profile, which includes your interests, experience and more. The profile card snippet is fully responsive, so you can view the information on your desktop computer, laptop, tablet or smartphone.

With this HTML and CSS-powered profile card snippet, you’re not just sharing information – you’re making a statement about your commitment to professionalism and modern web design. Impress, engage, and connect with the world through this creative and informative profile card snippet.

Let's know how to create a file..

Creating and managing files and folders efficiently is crucial for a seamless development experience. A step-by-step tutorial is provided below:

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

  • After the successful completion of downloading and installing, open Visual Studio Code.
  • Create a new folder in your desktop.
  • Go to file and then open the folder created.
  • Then add a file for html with “.html” or “.htm” extension.
  • Also add another file for css with “.css” extension.
  • Now, you have a blank HTML file and CSS file ready for your code.

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

  • After downloading the snippet file from W3pupil, you will receive a zip file.
  • Extract the file and open it in Visual Studio Code.
  • Now you have the HTML file and CSS file to work with.
  • Take time to fully understand the code’s functionality before making any desired changes.

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="section1">
<div class="card">
    <div class="cardin1">
        <div class="cardin1-sec1">
            <div class="imagesec">
                <img src="https://cdn.pixabay.com/photo/2018/11/08/23/52/man-3803551_1280.jpg" alt="Profile Image">
            </div>
            <div class="cardin1-sec1-1">
                <div class="detailssec">
                    <h2>Jack Roban Devid</h2>
                    <h6>jack@example.com</h6>
                    <p>a passionate individual driven by curiosity and creativity.....</p>
                </div>
                <div class="btnsec">
                    <button>Contact me</button>
                    <button>Downolad Resume</button>
                    <button>Share</button>
                </div>
            </div>
        </div>
    </div>
    <div class="cardin2">
        <div class="cardin2-sec1">
            <h5>About me</h5>
            <p>Hello! I'm [Your Name], a passionate individual driven by curiosity and creativity. I find joy in exploring the world and sharing my experiences through words and art. With a background in [Your Field], I've honed my skills in [Specific Skills or Expertise] over the years.</p>
            <p>My journey has led me to [Notable Achievements or Experiences], where I've had the privilege of [Highlighting Key Accomplishments]. I believe in the power of continuous learning, always seeking new challenges to broaden my horizons.</p>
        </div>    
    </div>
</div>
<div class="credit">Made with <span>❤ </span>by <a href="https://www.w3pupil.com/"> W3pupil</a></div>
</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
**/
@import url('https://fonts.googleapis.com/css2?family=Play&display=swap');
*{
    box-sizing: border-box;
}
body{
    font-family: Arial, sans-serif;
    margin:0%;
}
.section1{
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content:center;
    align-items: center;
    background-image: linear-gradient(to top, #c7b2f7 0%, #ffcaee 100%);  }
.card{
    display: flex;
    flex-direction:column;
    justify-content:center;
    border-radius: 10px;
    width:1024px;
    height:700px;
    background-color:#fff;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}
.cardin1{
    padding:0px;
    display: flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border-radius: 10px;
    height:350px;
    width:100%;
}
.cardin1-sec1{
    padding:10px 10px;
    display: flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    border-radius: 10px;
    height:350px;
    width:100%;
}
.cardin1-sec1 .imagesec{
    display: flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:30%;
    height:330px;
}
.cardin1 .imagesec img{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin:0px;
    object-fit:cover;
    border:3px solid transparent;
    outline:4px solid #ddd;
}
.cardin1-sec1-1{
    display: flex;
    align-items:center;
    justify-content:center;
    width:70%;
    background-color:#dddddd7b;
    height:330px;
    border-radius:10px;
}
.cardin1-sec1 .detailssec{
    display: flex;
    flex-direction:column;
    align-items:start;
    justify-content:center;
    width:70%;
    height:330px;
    padding:30px;
}
.cardin1 .detailssec h2{
    margin:5px 0px;
    font-family: 'Play', sans-serif;
    font-size: 35px;
}
.cardin1 .detailssec h6{
    margin:0px 0px 20px 0px;
    font-size:12px;
}
.cardin1 .detailssec p{
    margin:0px 0px 20px 0px;
    font-size:16px;
}
.cardin1-sec1 .btnsec{
    display: flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:30%;
    height:330px;
    row-gap:10px;
}
.cardin1-sec1 .btnsec button{ 
    width:90%;
    border:none;
    border-radius:30px;
    padding:15px 20px;
    background-color: #fff;
    font-size:16px; 
}
.cardin1-sec1 .btnsec button:hover{ 
    cursor: pointer;
    background-image: linear-gradient(120deg, #c7b2f7 0%, #ffcaee 100%);
    box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px; 
}
.cardin2{
    display: flex;
    flex-direction:column;
    align-items:center;
    text-align:left;
    justify-content:end;
    height:350px;
    background-color: #e6e6e6;
    border-radius: 0px 0px 10px 10px;
}
.cardin2-sec1{
    margin:0px 30px;
    padding:10px 30px;
    display: flex;
    flex-direction:column;
    align-items:start;
    text-align:left;
    justify-content:center;
    border-radius: 10px 10px 0px 0px;
    height:300px;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.15) 0px -7px 15px;
}
.cardin2 p{
    font-size: 16px;
} 
.cardin2 h5{
    font-size: 30px;
    margin:10px 0px;
    font-family: 'Play', sans-serif;
}
@media only screen and (max-width: 1024px){
    .card{
        width:95%;
    }
    .cardin1-sec1-1{
        flex-direction: column;
    }
    .cardin1-sec1 .imagesec img{
        width:96%;
        height:100%;
        border-radius:5px;
        outline:none;
        border:none;
    }
    .cardin1-sec1 .detailssec{
        width:100%;
        padding-bottom:20px;
        align-items:start;
        height:165px;
    }
    .cardin1-sec1 .btnsec{
        width:100%;
        padding:0px 0px 20px 20px;
        align-items:start;
        height:165px;
    }
    .cardin1-sec1 .btnsec button{
        width:50%;
    }
}
@media only screen and (max-width: 630px){
    .section1{
        height: fit-content;
        padding:10px 0px;
    }
    .card{
        width:96%;
        height:fit-content;
    }
    .cardin1{
        height:50%;
        width:100%;
    }
    .cardin2{
        height:50%;
        width:100%;
    }
    .cardin1-sec1{
        flex-direction: column;
        height:100%;
        width:100%;
    }
    .cardin1-sec1 .imagesec{
        height:30%;
        width:100%;
        align-items: start;
        justify-content: start;
    } 
    .cardin1-sec1-1{
        flex-direction: column;
        height:70%;
        width:100%;
    }
    .cardin1-sec1 .imagesec img{
        width:90px;
        height:90px;
        border-radius:5px;
        outline:none;
        border:none;
    }
    .cardin1-sec1 .detailssec{
        width:100%;
        align-items:start;
        justify-content: start;
        height:50%;
        row-gap:2px;
    }
    .cardin1-sec1 .btnsec{
        width:100%;
        padding:0px 0px 0px 10px;
        row-gap:2px;
        align-items:start;
        justify-content:center;
    }
    .cardin1-sec1 .btnsec button{
        width:60%;
        padding:10px;
    }
    .cardin1 .detailssec h2{
        margin:0px;
        font-family: 'Play', sans-serif;
        font-size:15px;
    }
    .cardin1 .detailssec h6{
        margin:0px;
        font-size:12px;
    }
    .cardin1 .detailssec p{
        margin:0px;
        font-size:12px;
    }
    .cardin2{
        height:50%;
    }
    .cardin2 p{
        font-size: 12px;
    }
    .cardin2 h5{
        font-size: 20px;
        margin:5px 0px;
        font-family: 'Play', sans-serif;
    }
    .cardin2-sec1{
        margin:3px 5px;
        height:90%;
    }
}
.credit a{
    text-decoration: none;
    color: #fff;
    font-weight: 800;
}
.credit{
    color: #fff;
    text-align: center;
    margin-top: 10px;
    font-family: Verdana,Geneva,Tahoma,sans-serif;
}  

Note :

  • The CSS is coded in a separate file and linked to the HTML file.

Download :

Share and Support W3pupil.com

Conclusion :

To modify the code, you can download the snippet’s source code files. To enhance your skills in HTML and CSS, you can try to recreate other creative HTML and CSS snippets available on W3pupil. In case you experience any technical related doubts, you are welcome to contact W3pupil. We’ll try to solve your request at the earliest.

Like Reaction
Like Reaction
Like Reaction
Like Reaction
Like Reaction

LivePreview :