CSS PROFILE CARD
In this Blog, we will see how to make an attractive as well as responsive Profile-Card in a very simple way by using CSS.
But before starting making the profile card, it must be clear that a profile card must provide a brief knowledge about your profession and also something with which any person viewing your Profile-Card can easily contact you if they wants to.
#Lets Start:
In this Profile-Card , I will provide a picture , my website name along with some of the link of my social media platforms.
#HTML CODE:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Page Title</title> | |
| </head> | |
| <body> | |
| <div id="all"> | |
| <div class="pic"></div> | |
| <p class="name">ADITYA RAJ</p> | |
| <p style="left:15px"><tt>Web developer & Programmer</tt></p> | |
| <p style="left:30px"><a href="https://coding-greed.blogspot.com/" style="text-decoration:none;color:gray;"><tt>website: Coding Greed</tt></a></p> | |
| <div class="social"></div> | |
| <div class="btm"><center><tt>CONTACT</tt></center></div> | |
| </div><br> | |
| <button class="b1" onclick="myFunction()">ABOUT</button> | |
| </body> | |
| </html><!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Page Title</title> | |
| </head> | |
| <body> | |
| <div id="all"> | |
| <div class="pic"></div> | |
| <p class="name">ADITYA RAJ</p> | |
| <p style="left:15px"><tt>Web developer & Programmer</tt></p> | |
| <p style="left:30px"><a href="https://coding-greed.blogspot.com/" style="text-decoration:none;color:gray;"><tt>website: Coding Greed</tt></a></p> | |
| <div class="social"> | |
| <a href="https:www.coding-greed.blogspot.com"> | |
| <img width="100%" src="https://i.ibb.co/vZ7CZ7T/IMG-20190816-111753.png" alt="IMG-20190816-111753" border="0"></a> | |
| </div> | |
| <div class="btm"><center><tt>CONTACT</tt></center></div> | |
| </div><br> | |
| <button class="b1" onclick="myFunction()">ABOUT</button> | |
| </body> | |
| </html> |
#CSS CODE:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| background-color:#C3073F; | |
| } | |
| p{ | |
| position:relative; | |
| top:-30px; | |
| } | |
| #all{ | |
| width:15em; | |
| height:21em; | |
| background-color:white; | |
| box-shadow:3px 3px 5px 1px gray; | |
| margin-left:30px; | |
| margin-top:50px; | |
| overflow:hidden; | |
| display:none; | |
| } | |
| .name{ | |
| font-weight:bolder; | |
| font-size:1.7em; | |
| position:relative ; | |
| left:40px; | |
| body { | |
| } | |
| p{ | |
| position:relative; | |
| top:-30px; | |
| } | |
| #all{ | |
| width:15em; | |
| height:21em; | |
| background-color:white; | |
| box-shadow:3px 3px 5px 1px gray; | |
| margin-left:30px; | |
| margin-top:50px; | |
| overflow:hidden; | |
| display:none; | |
| } | |
| .name{ | |
| font-weight:bolder; | |
| font-size:1.7em; | |
| position:relative ; | |
| left:40px; | |
| font-family:cursive; | |
| } | |
| .pic{ | |
| width:100%; | |
| height:40%; | |
| background-image:url("https://i.ibb.co/526PLkc/batman-arkham-origins-joker-red-cap-warner-bros-interactive-entertainment-devil-gotham-gotemsky-ripper-mr-jay-96368-1920x1080.jpg"); | |
| background-size:100%; | |
| } | |
| .social{ | |
| width:70%; | |
| height:30ppx; | |
| overflow:hidden; | |
| background-color:red; | |
| position:relative ; | |
| top:-2em; | |
| left:35px; | |
| } | |
| .btm{ | |
| background-color:black; | |
| width:100%; | |
| height:10%; | |
| position:relative ; | |
| bottom:25px; | |
| color:white; | |
| font-weight:bolder; | |
| } | |
| .b1{ | |
| width:8em; | |
| height:2em; | |
| font-weight:bolder; | |
| background-color:#F5564E; | |
| border:none; | |
| font-size:20px; | |
| color:white; | |
| position:relative ; | |
| left:70px; | |
| box-shadow:3px 3px 2px 3px lightgrey; | |
| } | |
| font-family:cursive; | |
| } | |
| .pic{ | |
| width:100%; | |
| height:40%; | |
| background-image:url("https://i.ibb.co/526PLkc/batman-arkham-origins-joker-red-cap-warner-bros-interactive-entertainment-devil-gotham-gotemsky-ripper-mr-jay-96368-1920x1080.jpg"); | |
| background-size:100%; | |
| } | |
| .social{ | |
| width:30%; | |
| height:35px; | |
| background-image:url("https://i.ibb.co/KjcxLQG/kisspng-social-media-computer-icons-blog-social-media-icon-vector-5b4cfc0548a000-1274045215317719092975.png"); | |
| background-size:100%; | |
| position:absolute ; | |
| top:18.5em; | |
| left:100px; | |
| } | |
| .btm{ | |
| background-color:black; | |
| width:100%; | |
| height:10%; | |
| position:relative ; | |
| top:11px; | |
| color:white; | |
| font-weight:bolder; | |
| } | |
| .b1{ | |
| width:8em; | |
| height:2em; | |
| font-weight:bolder; | |
| background-color:#F5564E; | |
| border:none; | |
| font-size:20px; | |
| color:white; | |
| position:relative ; | |
| left:70px; | |
| box-shadow:3px 3px 2px 3px lightgrey; | |
| } | |
#JAVA-SCRIPT CODE:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function myFunction() { | |
| var x = document.getElementById("all"); | |
| if (x.style.display === "none") { | |
| x.style.display = "block"; | |
| } else { | |
| x.style.display = "none"; | |
| } | |
| } | |
| alert("first time double click on about button"); | |
| alert("click on about to hide or show profile card"); | |
| alert("click on website") |
#OUTPUT:
{ First time double click on the"ABOUT" ↓ button. }
{ First time double click on the
ReplyDeleteIf you are a beginner in programming world and want to learn programming fast. So I suggest you a website which have projects with source code and you can use those projects and practice those projects Projects With Source Code