| create a profile card scratch |
Hello Developer, In this article, we’re teach you . how to create a
profile card scratch from in which a user can test out the primary info
of other customers and hook up with them via exceptional handles in addition
to can message the consumer.
Method:
- First of all, we create a html document wherein we do following things:
- Create a field which contains all the statistics.
- Upload profile image of the person.
- Add links of various social media handles.
- Add a button for messaging.
-
Then, we create a css record in which we apply distinct forms of styling
assets for our html tags. -
In the end, we hyperlink our css document to the html document using the
hyperlink tag within the head section of the html.
START CODING :-
- First, we create an html file(index.html).
-
After growing the html record, we’re going to supply name to our webpage
using <title> tag. it have to be - Located between the <head> tag.
-
Then we hyperlink the css record that provide all of the animations impact
to our html. that is additionally located in between <head> tag. -
Now we upload a link from google fonts to apply one of a kind type of font
family in our challenge. - Coming to the frame segment of our html code.
-
Create a div in which we can keep all of the photos, links,Buttons,
headings and paragraphs. - Then we create a div wherein we add the picture of the consumer.
-
Any other div is created, in this div we ought to upload the subsequent
tags: - Heading tag is added to keep the name of the user.
- A paragraph tag is delivered to shop the username of the consumer.
-
Then we introduced some social media hyperlinks in order that you could
connect with this detailed consumer. -
At last we have created a link for connecting the other the use of
messaging service.
HTML CODE HERE
<!-- Insidecode.org -->
<article class="profile">
<div class="profile-image">
<img src="https://blogger.googleusercontent.com/img/a/AVvXsEgC9sXLgJmi_2zA-Foak_v87dg2gNuQ80HIKHFXCUkdSEyJ3eW3SW6QppLj5m5kUH6dHMQjUss3vD_zZFTpZrQhkcDlLEgEQehX4S6mUyepawAmd28MtJItjFmlFI9E7q4AMpYGr1jnOZR2KlRt04o_jlXOUkR3zYyDvQcv3aa2XLwzVxf8-StRFQ34=s2048" />
</div>
<h2 class="profile-username">InsideCode</h2>
<small class="profile-user-handle"> wwww.insidecode.org</small>
<div class="profile-actions">
<button class="btn btn--primary">Follow</button>
<button class="btn btn--icon">
<i class="ph-export"></i>
</button>
<button class="btn btn--icon">
<i class="ph-dots-three-outline-fill"></i>
</button>
</div>
<div class="profile-links">
<a href="https://twitter.com/PrajapatiIcon/" class="link link--icon">
<i class="ph-twitter-logo"></i>
</a>
<a href="https://www.facebook.com/prajapatiicon/" class="link link--icon">
<i class="ph-facebook-logo"></i>
</a>
<a href="https://instagram.com/prajapatiicon/" class="link link--icon">
<i class="ph-instagram-logo"></i>
</a>
</div>
Css code: css is used to offer distinct kinds of animations and effect to
our html profile card in order that it looks interactive to all users
our html profile card in order that it looks interactive to all users
In css, we have to remind the subsequent points-
Repair all of the browser outcomes.
Use instructions and ids to give consequences to html factors.
CSS CODE HERE
@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
*,
*:before,
*:after {
box-sizing: border-box;
}
/* Some basic CSS overrides */
body {
line-height: 1.5;
min-height: 100vh;
font-family: "Be Vietnam Pro", sans-serif;
display: flex;
align-items: center;
justify-content: center;
background-color: #060606;
}
button,
input,
select,
textarea {
font: inherit;
}
a {
color: inherit;
}
/* End basic CSS override */
.profile {
display: flex;
align-items: center;
flex-direction: column;
padding: 3rem;
width: 90%;
max-width: 300px;
background-color: #1b2028;
border-radius: 16px;
position: relative;
border: 3px solid transparent;
background-clip: padding-box;
text-align: center;
color: #f1f3f3;
background-image: linear-gradient(135deg, rgba(117, 46, 124, 0.35), rgba(115, 74, 88, 0.1) 15%, #1b2028 20%, #1b2028 100%);
}
.profile:after {
content: "";
display: block;
top: -3px;
left: -3px;
bottom: -3px;
right: -3px;
z-index: -1;
position: absolute;
border-radius: 16px;
background-image: linear-gradient(135deg, #f047ff, #734a58 20%, #08090a 30%, #63f5ffa8 100%);
}
.profile-image {
border-radius: 50%;
overflow: hidden;
width: 175px;
height: 175px;
position: relative;
}
.profile-image img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
.profile-username {
font-size: 1.5rem;
font-weight: 600;
margin-top: 1.5rem;
}
.profile-user-handle {
color: #7d8396;
}
.profile-actions {
margin-top: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
}
.profile-actions > * {
margin: 0 0.25rem;
}
.btn {
border: 0;
background-color: transparent;
padding: 0;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
line-height: 1;
transition: 0.15s ease;
}
.btn--primary {
border-radius: 99em;
background-color: #ff0000;
background-image: linear-gradient(135deg, #dde1e7, #7e7d7d);
color: #000;
font-weight: 600;
padding: 0 1.375em;
}
.btn--primary:hover, .btn--primary:focus {
background-size: 150%;
}
.btn--icon {
height: 46px;
width: 46px;
border-radius: 50%;
border: 3px solid #343945;
color: #7d8396;
}
.btn--icon i {
font-size: 1.25em;
}
.btn--icon:hover, .btn--icon:focus {
border-color: #7d8396;
}
.profile-links {
margin-top: 3.5rem;
}
.link {
text-decoration: none;
color: #7d8396;
margin-left: 0.375rem;
margin-right: 0.375rem;
}
.link i {
font-size: 1.25em;
}
.link:hover {
color: rgb(238, 235, 235);
}
Notes:
To get the password to download the code on Telegram
join
Download Codes
InsideCode:
Join our Telegram Channel and Discussion Group to get Daily Update’s and Idea’s