Interactive Business Card

Developer
Mark Santiago
Size
2,585 Kb
Views
10,120
  1. Interactive Business Card Previews
  2. Interactive Business Card HTML Codes
  3. Interactive Business Card CSS Codes

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 Previews
IQ Test

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;
}
Interactive Business Card - Script Codes
Interactive Business Card - Script Codes
Home Page Home
Developer Mark Santiago
Username msantiago1256
Uploaded November 02, 2022
Rating 3
Size 2,585 Kb
Views 10,120
Do you need developer help for Interactive Business Card?

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!

Mark Santiago (msantiago1256) Script Codes
Name
Playing with pseudo and animate
A Pen by Mark Santiago
Adult Learning, quick intro to JS math...
CSS Nav ideas to show team
Dribbble 2 CSS relaxer
Work in progress...
Working out an idea for a site design...
Variation on first rotating frames
Showing the class some basics
Bootcamp Day 1
Create amazing sales emails with AI!

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!