HTML / CSS 

Use our online code editor for free. launch editor >>

Creator Info Form.

HTML CSS/07-2021/Creator-info-form

Here we will create info from like this-





Here I have created a div(creator-block) in which we have our h1 upper text and h1 lower text and in between we have our creator image, creator image is defined as "imgmy", border radius and box-shadow effects is used to make it look quit goodm and still it is simple edit and look way more better than the boxed image. For background we are using linear gradient you can create your own gradient by using online tools.

To make image responsive I have used media control for max width 620px, this is the best width to work with. The whole code is simple enough to recode and edit, you don't have to import anything to make this.

Here is full code-

<!DOCTYPE html>
<html>
<head>
<title>Creator</title>
<style>
.creator-block {
position: relative;
height: auto;
background-image: linear-gradient(315deg, #ee4040 0%, #f59f3c 74%);
}
.imgmy {
border-radius: 50%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}

@media only screen and (max-width: 620px){
.imgmy{
width: 240px;
height: 240px;
}

</style>
</head>
<body>

<div class="creator-block"><br><center>
<font face="arial" color="white"><h3> Who I am?</h3><br>
<img class="imgmy" src="./img/creator2.webp" width="340" height="340"><br><br>
<h3>Hi, I am Atul Kumar Singh<br><br />And you know I am lord ~ Just kidding.</h3></font></center><br>
</div>

</body>
</html>

Atul kumar singh

Web Developer, blogger, chief editor. Telling and discovering the world of tech. Known as like null, and loves tech. 

Atul Kumar Singh

Author / CEO

Browse our featured topics

© Copyright 2022 codelikenull. All Rights Reserved.