Table of Contents

Personal portfolio Html Template

Share Now :

Title : Personal portfolio Html Template | W3pupil

Description

Hello W3PUPIL!!! We offer you a dynamic and visually appealing Personal portfolio Html Template using only HTML & CSS that presents your information at a glance. This Personal portfolio Html Template was created with precision using HTML and CSS.
The snippet is a user-friendly Personal portfolio Html Template that combines the power of HTML and CSS in order to provide a seamless authentication experience to the user. An HTML/CSS portfolio is a versatile web design framework that provides a structured foundation for creating engaging and informative pages on websites. You can combine HTML for content structure and CSS for styling, to easily customize the page’s layout, fonts, colours, and more. You can simplify the process of presenting company or personal information, fostering a visually appealing and user-friendly experience using this snippet. Your portfolio will always be presented in an organized way whether it’s a desktop, a laptop, a tablet, or a smartphone.
So by using this HTML and CSS portfolio snippet, you’re not just sharing information – you’re demonstrating your dedication to professionalism and contemporary web design. Overall, show off and interact with the world with this innovative and creative Personal portfolio Html Template.

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 Personal portfolio Html Template 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="subcontainer">
    <div class="top-subcontainer">
        <h1>ABOUT<span> ME</span></h1>
        <p>A web developer designs and creates websites and web applications, ensuring functionality, user experience, and responsiveness.</p>
    </div>
    <div class="bottom-subcontainer">
        <div class="left">
            <img src="https://cdn.pixabay.com/photo/2017/10/20/14/10/beautiful-girl-2871280_1280.jpg">
        </div>
        <div class="right">
            <h2>Hello!! I am<span> Laurel Fisher</span></h2>
            <p>A web developer is a professional responsible for creating and maintaining websites. They possess a strong command of programming languages such as HTML, CSS, and JavaScript, using these tools to design and build user-friendly and visually appealing websites</p>
            <table>
                <tr>
                    <th>Name :</th>
                    <td>Laurel Fisher</td>
                </tr>
                <tr>
                    <th>Age :</th>
                    <td>35</td>
                </tr>
                <tr>
                    <th>Mobile :</th>
                    <td>+91 XXXXXXXXXX</td>
                </tr>
                <tr>
                    <th>Email :</th>
                    <td>laurel@example.com</td>
                </tr>
                <tr>
                    <th>Address :</th>
                    <td>42 Main St, City, USA</td>
                </tr>
            </table>
            <button>Download CV</button>
        </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=Yantramanav&display=swap');
*{
    box-sizing: border-box;
}
body{
    background-image:linear-gradient(0deg, #1DD2CD 0%, #E98462 100%);
    font-family:'Mukta', sans-serif;
    margin:0%;
}
.container{
    height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    width:100%;
}
.subcontainer{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    border-radius:10px;
    width:900px;
    height:680px;
    max-height:fit-content;
    background-color:#e2e3e3;
    padding:10px;
    box-shadow:rgba(128,128,128,0.6) 0px 7px 19px 0px;
}
.top-subcontainer{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    width:80%;
    height:150px;
}
.bottom-subcontainer{
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
    padding:10px;
    width:100%;
    height:calc((700px - 150px) - 40px);
}
.left{
    display:flex;
    justify-content:center;
    align-items:center;
    width:50%;
    height:fit-content;
}
.left img{
    height:calc((700px - 150px) - 120px);
    width:370px;
    border:5px solid transparent;
    outline:5px solid #E98462;
    object-fit:cover;
    object-position:60% 0%;
    border-radius:10px;
}
.right{
    display:flex;
    flex-direction:column;
    justify-content:left;
    align-items:left;
    width:50%;
    height:fit-content;
}
.right table{
    display:flex;
    flex-direction:column;
    justify-content:left;
    align-items:left;
    width:100%;
    border-collapse:collapse;
}
.right table th{
    padding:5px;
    border:none;
    text-align:left;
}
.right table td{
    padding:5px;
    border:none;
}
.right button{
    width:130px;
    margin-top:10px;
}
.right button{
    background-color:#E98462;
    border:2px solid #000;
    color:#fff;
    padding:12px 20px;
    border-radius:5px;
}
.right button:hover{
    cursor:pointer;
    background-color:#d1dae0;
    transition:.5s;
    color:#000;
    border:2px solid #E98462;
}
.right h2{
    margin:0px;
}
span{
    color:#E98462;
}
@media only screen and (max-width: 1024px){
    .container{
        height:fit-content; 
    }
    .subcontainer{
        margin:10px 0px 0px;
        width:85%;
        height:fit-content;
    }
    .top-subcontainer{
        width:100%;
        padding:20px;
        height:fit-content;
    }
    .bottom-subcontainer{
        display: flex;
        flex-direction:column;
        padding:0px;
        height:fit-content;
    }
    .right{
        width:100%;
        height:fit-content;
        padding:40px;
    }
}
@media only screen and (max-width: 630px){
    .container{
        height:fit-content; 
    }
    .subcontainer{
        margin:20px 0px;
        width:95%;
        height:fit-content;
    }
    .top-subcontainer{
        width:100%;
        height:fit-content;
    }
    .bottom-subcontainer{
        display:flex;
        flex-direction:column;
        height:fit-content;
    }
    .left img{
        height:300px;
        width:300px;
    }
    .right{
        width:100%;
        padding:20px;
    }
}
.credit a{
    text-decoration: none;
    color: #000;
    font-weight: 800;
}
.credit{
    color: #000;
    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 Personal portfolio Html Template.

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 :