How to Create Profile Page in HTML,CSS,Bootstrap

 इस Article में हम Profile Page को Create करना सीखेंगे। ये profile Showing Page है।  जैसे Instagram Facebook या other Social Network में होता है। यहाँ पे मै उतना Professional तो नहीं Create करुगा। लेकिन कुछ आपको Idea दूंगा। जिससे आप उसको edit करके जैसा चाहे वैसा Page Create कर सकते है। 



How to Create Profile Page in HTML,CSS, Bootstrap

इस Page को HTML CSS Bootstrap की मदद से Create किया है।  कुछ Jquery का Use किया है। अगर आप Img Upload चाहते है। तो Jquery का use कर सकते है। 

यहाँ पे पूरा HTML File का Code दे रहा हूँ। जिसमे HTML CSS Bootstrap सारा Include है। 




<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Profile Page </title>
	<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<style type="text/css">
	
@import url('https://fonts.googleapis.com/css2?family=Roboto+Serif:opsz,wght@8..144,200&display=swap');
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,600i,700,700i|Playfair+Display:400,400i,700,700i&display=swap");	
/* -----------------
User Profile
----------------*/
.profile-pic img {
    border-radius: 50%;
    box-shadow: 0px 0px 5px 0px #c1c1c1;
    cursor: pointer;
    width: 150px;
    height: 150px;
}
.profile-data {
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    height: 100%;
    left: 0;
    position: relative;
    top: -32px;
    width: 110%;
   
    background-color: rgb(45, 56, 70);
}
.sign-head {
    padding-bottom: 25px;
}
.userdata-row {
    max-width: 800px;
        padding-bottom: 50px;
    padding-top: 50px;
}
.profile-txt p {
        font-size: 26px;
    font-weight: 600;
    line-height: 120%;
    margin-right: 24px;
}
.profile-username {
        font-size: 15px !important;
    margin: 0;
}
.profile-username span {
      padding-right: 20px;
}
.user-dsc {
    font-size: 12px !important;
    margin-top: 20px;
        font-weight: 400 !important;
}
.hidden {
	display: none;
}

</style>
</head>
<body>
	<div class="profile-data">
   <div class="row mx-auto userdata-row">
          <div class="col-md-3  col-sm-6 col-xs-12 profile-badge">
                <!-- <img src="https://dummyimage.com/600x400/000/"> -->
                
                <div class="profile-pic">
                 
                        <img alt="User Pic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4nVip6SmeFSiLweOeL0EJO-iBWQnO-lLlCSX8fKg51zSDyZW9h6IolfjWp7yp_8uQnroGFN8GRnx5h4MNrmAY80dzDOOypY9Tt3hv_qZta84o1CuJ28NN-XSGtBfIjKCKrUGCQTvvbfVdo3mpRgISuyJ-TaUY5TSKeK_kIy7uRs_8332CtZx8xoOa/s320/76.jpg" id="profile-image1" height="170">
                        <input id="profile-image-upload" class="hidden" type="file" onchange="previewFile()" >
                        <div style="color:#999;" >  </div>
                      </div>
                    </div>
                    <div class=" text-center col-6 profile-txt">
                      <p class="text-white">Vishalss</p>
                      <div class="profile-username"> <span class=" text-white">Vishal Rathaur</span></div>
                      <p class="user-dsc text-white">My name is Vishal Rathaur. I have best Knowledge in Coding, Business, Finance, Trading, Web development, Analysis etc. </p>
                      <div style="width: 95%;">
                      <a href="www.codeofweb.com">www.codeofweb.com</a>
                      </div>
                    </div>
        </div></div>
</body>
</html>

Comments

Post a Comment

Popular posts from this blog

Mazda Pickups Playing It Up In The Us Market

Headquartered and based in Hiroshima, Japan, the Mazda Motor Corporation, or more commonly known as Mazda, is one of the leading manufacturers and producers of vehicles. It was able to enter the United States market for automobiles in the year 1970. By entering the US market, an automobile company should have a number of vehicles in tow so as to introduce to the public. What Mazda brought was one single car which was the Mazda RX 2. However, come the following year, 1971, Mazda now had five cars tagging along with it. These five cars were comprised of the compact cars that were based on the Mazda Familia – the Mazda 1200 and the Mazda R100, the larger vehicles based this time on the Mazda Capella – the Mazda 616 and the Mazda RX 2, and lastly, the larger Mazda 1800. And after that, the Mazda vehicle line for the US auto market welcomed in the Mazda RX 3 and the Mazda B1600. Also joining the family were the Mazda 808 as well as the Mazda 618. Quickly rising in popularity and prominence,...
Read more

Types of Computer Based on Size in Hindi (आकर के आधार पर Computer के प्रकार )

Image
 इस Article में Types of Computer Based on Size in Hindi (आकर के आधार पर Computer के प्रकार ) पढ़ेंगे और जानेगे।  Types of Computer Based on Size जब से Computer का अविष्कार हुआ है। तब से लेकर आज तक Computer के आकार, तेजी, Designs में परिवर्तन होता रहा है। इसी के आधार पर Computers को तीन भागो में विभाजित किया गया है। Based on Size Based on Purpose Based on Types ये Computer के तीन आधार है। जिनमे Computers को विभाजित किया गया है। इस Article में हम Types of Computer Based on Size के बारे में जानेगे। बाकि के बाद में जानेगे। आकार के आधार पर Computers को चार भागो में बनता है। गया जिनके बारे में नीचे पूरी तरह से जानकारी दी गयी है। Mini Computers Micro Computers Mainframe Computers Super Computers 1. Mini Computer Mini Computer Micro Computer और Mainframe Computer के बीच का Computer है | ये एक Small Type का Computer है | इस Computer का Size Small होता है| लेकिन इसमें Features सभी Large Computers के ही होते है | Mini Computer Multi User Operating System को Support करता है। जिसकी वजह स...
Read more

Finding A College Scholarship For A Single Mother

Women dream of having a happy and fulfilled family life. But sometimes reality can really hurt, and the fairy tale world ends with a snap of a finger. And very soon, you’ll find yourself raising your kids alone without the help of your husband. Supporting a family with kids is tough, especially if you’re a single mom. And the best way to be able to give your kids a decent life is to finish college, and land a good job. Being a single mother can be very hard. You would have to do everything yourself; work hard, attend to your kids needs, and attend college classes. Oftentimes, you will have difficulty in handling your finances. And attending college requires a certain sum of money. Here is where a college scholarship will come in handy. Different universities offer college scholarships for single moms; all you have to do is to find the right university which could help you in that aspect. The internet is also a good source of universities and institutions which offer such scholarships. ...
Read more