Hello friends, how are you guys,
This is a business card made by me for the #Hive community.......
I just read a contest posted by @acidyo a while ago to participate in #Hive Business Card Design Contest, I made this card, in which I used basic HTML and CSS code. and I used Visual Studio to write the code, with the help of which I designed it, first of all I took a container of normal width and height, then I made a beautiful background. and then i got the heave icon from heave.blog and to generate the QR i used this website https://www.qr-code-generator.com it took me about 3-4 hours to design this card Because it was not difficult to make but it was difficult to think for it and I hope you like it too
I will also share with you the code that I wrote to make it
The HTML I wrote to make this card is as follows
As you all know i can't paste html code here so i had to use screenshot
The css I wrote to make this card is as follows
<style>
* {
padding: 0%;
margin: 0px;
box-sizing: border-box;
}
.div-main {
background-color: #FC9E21;
width: 1098px;
height: 648px;
}
.div-in {
box-shadow: 0px 2px 14px 9px;
background: linear-gradient(to bottom, #33ccff 0%, #ff99cc 100%);
width: 460px;
height: 213px;
border: 1px solid;
position: absolute;
top: 45px;
left: 22px;
}
.icon {
position: absolute;
left: 150px;
top: 18px;
}
.scan-1-1 {
width: 80px;
}
.scan-1 {
position: absolute;
}
.p1 {
color: #e31337;
font-size: 34px;
font-family: inherit;
font-weight: bolder;
position: absolute;
left: 221px;
top: 18px;
}
.p3 {
color: aliceblue;
font-size: 31px;
font-family: inherit;
font-weight: bolder;
position: absolute;
left: 221px;
top: 49px;
}
.p2 {
font-size: 42px;
font-family: inherit;
font-weight: bolder;
position: absolute;
left: 40px;
top: 91px;
}
.p4 {
font-size: 42px;
font-family: inherit;
font-weight: bolder;
position: absolute;
left: 131px;
top: 135px;
}
.div-back {
background: linear-gradient(to bottom, #33ccff 0%, #ff99cc 100%);
box-shadow: 0px 2px 14px 9px;
width: 460px;
height: 213px;
border: 1px solid;
position: absolute;
top: 45px;
left: 546px;
}
.scan {
position: absolute;
top: 43px;
left: 26px;
}
.p5 {
font-family: emoji;
font-size: 23px;
font-weight: 600;
position: absolute;
top: 140px;
left: 22px;
}
.p6 {
width: 314px;
background: black;
position: absolute;
color: white;
font-size: 28px;
top: 52px;
left: 144px;
padding-left: 23px;
}
.p7 {
width: 314px;
background: #e31337;
position: absolute;
color: white;
font-size: 28px;
top: 91px;
left: 144px;
padding-left: 32px;
}
.p8 {
background: black;
width: 100%;
color: #e31337;
font-size: 15px;
font-family: inherit;
font-weight: bolder;
position: absolute;
padding-left: 182px;
top: 191px;
}
.face {
position: absolute;
top: 134px;
left: 169px;
}
.tweet {
position: absolute;
top: 178px;
left: 164px;
}
.discord {
position: absolute;
top: 152px;
left: 163px;
}
.p9 {
position: absolute;
top: 134px;
left: 203px;
font-size: 14px;
}
.p10 {
position: absolute;
top: 184px;
left: 203px;
font-size: 14px;
}
.p11 {
position: absolute;
top: 157px;
left: 203px;
font-size: 14px;
}
</style>
And for SVG icons I used this icons8.com website
