Interactive Business Card
How do I make an interactive business card?
The end product of the "Web Bootcamp" classes at the adult learning center. CSS and HTML only due to time restrictions and experience. . What is a interactive business card? How do you make a interactive business card? This script and codes were developed by Mark Santiago on 02 November 2022, Wednesday.
Interactive Business Card - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Interactive Business Card </title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>https://codepen.io/msantiago1256/pen/bpPNGe</h1> <p>Make sure you go to this address and FORK it.</p>
<hr />
<div class="parent"> <div class="circle"></div> <div class="content"> <div class="inner-content"> <div class="left"> <div class="heading"> <h1>Mark Santiago</h1> <h3>508-555-5555</h3> </div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p> </div> <div class="right"> <h2>My qualities</h3> <ul> <li>BALJALDFSJA;SLDFJA;SL</li> <li> BALJALDFSJA;SLDFJA;SL</li> <li> BALJALDFSJA;SLDFJA;SL 3</li> </ul> <h2>My favorite colors</h3> <ul> <li>BALJALDFSJA;SLDFJA;SL</li> <li> BALJALDFSJA;SLDFJA;SL</li> <li> iteBALJALDFSJA;SLDFJA;SLm </li> </ul> </div> </div> </div>
</div>
</body>
</html>
Interactive Business Card - Script Codes CSS Codes
body{ padding:40px;
}
.parent{ width:400px; height:700px; margin:auto auto; position:relative; margin-top:150px;
}
.heading{ width:400px;
}
.circle{ position:absolute; top:-120px; left:50px; z-index:2;
}
.content{ color:white; position:absolute; width:400px; height:700px; top:0px; border:5px solid #27ae60; border-radius:10px; transition:width .75s ease; overflow:hidden; background:#2ecc71;
}
.circle:hover + .content{ width:820px;
/* border:2px solid orange; */ box-shadow:inset 1px 1px 3px 1px #333;
}
.inner-content{ position:absolute; width:800px; height:700px;
/* border:1px solid red; */
}
/* */
h1{ font-size:50px; text-shadow:1px 1px 3px gray; margin-bottom:0px; padding-bottom:0px; text-align:center;
}
h1+p{ text-align:center;
}
h3{ font-size:30px; padding:0px; margin:0px; margin-bottom:40px; text-shadow:1px 1px 3px gray; text-align:center;
}
p{ padding:0 30px;
}
.left p{ font-size:21px; text-align:justify;
}
.content{
/* border:1px solid red; */
}
.left{
width:400px; float:left; text-align:left;
/* border:1px solid red; */ height:900px; position:absolute; top:-350px; padding-top:500px;
/* background:white; */
/* color:red; */
}
.right{ width:300px; text-align:left;
/* border: 3px solid green; */ position:absolute; right:40px; top:180px;
}
li{ font-size:20px;
}
div.circle{ background:url(https://unsplash.it/300/300/?random) no-repeat center center; background-size:cover;
/* opacity:.6; */ width:300px; height:300px; border-sizing:border-box; border-radius:300px; text-align:CENTER; transition:all 300ms ease-out; box-shadow: 1px 1px 10px;
}
div.circle:hover{
opacity:1; box-shadow: 1px 11px 10px #aaa;
}
Developer | Mark Santiago |
Username | msantiago1256 |
Uploaded | November 02, 2022 |
Rating | 3 |
Size | 2,585 Kb |
Views | 10,120 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Cute Wolverine CSS | 5,080 Kb |
Adult Learning, quick intro to JS math... | 1,560 Kb |
Variation on first rotating frames | 2,235 Kb |
Showing the class some basics | 1,807 Kb |
Work in progress... | 2,190 Kb |
Bootcamp Day 1 | 1,861 Kb |
Playing with user.me user generator | 4,530 Kb |
Working out an idea for a site design... | 3,873 Kb |
Playing with pseudo and animate | 2,525 Kb |
CSS Nav ideas to show team | 3,179 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Brian The CSS Bee | Jonitrythall | 3,922 Kb |
BlueBox Fork | Huskynation | 12,675 Kb |
Comment Jquery | SquishyAndroid | 2,421 Kb |
Magnus 3 | ARocketfish | 7,944 Kb |
Carousel Test | Sbirchall | 1,509 Kb |
Expert Help | SinceSidSlid | 4,064 Kb |
Slider | Mohammed-fawzy | 2,634 Kb |
Wip elementary os navbar | Nickcolley | 2,993 Kb |
TinFoil Boats | Chandralil | 4,577 Kb |
Canvas snow | Win7killer | 2,572 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!