My Business Card

Developer
Joost Jansen
Size
4,034 Kb
Views
8,096
  1. My Business Card Previews
  2. My Business Card HTML Codes
  3. My Business Card CSS Codes
  4. My Business Card JS Codes

How do I make an my business card?

I made a business card for the DevWars.tv challenge. Hope you like it :). What is a my business card? How do you make a my business card? This script and codes were developed by Joost Jansen on 19 November 2022, Saturday.

My Business Card Previews
IQ Test

My Business Card - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>My Business Card</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html lang="en">
<head> <title>My Business Card</title> <meta name="viewport" content="width=device-width, height=devide-height, initial-scale=1.0">
</head>
<body> <div class="wrapper"> <h1>Joost Jansen > <span id="currentcontent">About me</span></h1> <!--<hr color="black">--> <div class="inner"> <img class='avatar' src="https://scontent-ams3-1.xx.fbcdn.net/hphotos-xfp1/v/t1.0-9/11057740_865412623537255_7331283565891080732_n.jpg?oh=2d2993971619a43b5367a299ba2dd394&oe=56855C22"> <div class="about" id="aboutcontent"> <p> I am a junior software developer. I have experience with Java(FX), C++ and basic webdevelopment including some Bootstrap. </p> </div> <div class="jobs" id="jobscontent"> <p> I've had a job in tech support where I went from door to door to help people fix their pc problems. <br>More info at <a href="http://.studentaanhuis.nl">studentaanhuis.nl</a>. <br>I would like to do a job that involves programming. </p> </div> <div class="social" id="socialcontent"> <ul> <li><a href="https://nl.linkedin.com/pub/joost-jansen/b4/966/121" target="_blank"><img class="linkedin" height="50px" width="60px" src="https://joanbang.files.wordpress.com/2011/08/linkedin-icon.png"></a></li> <li><a href="https://www.facebook.com/joost.jansen.794" target="_blank"><img class="facebook" height="50px" width="50px" src="https://cdn1.iconfinder.com/data/icons/logotypes/32/square-facebook-512.png"></a></li> <li><a href="https://twitter.com/B1tsPls" target="_blank"><img class="twitter" height="50px" width="50px" src="https://cdn1.iconfinder.com/data/icons/logotypes/32/square-twitter-512.png"></a></li> </ul> </div> </div> <!--<hr color="black">--> <ul class="optionMenu"> <li><a id="aboutlink" href="#">About</a></li> <li><a id="jobslink" href="#">My Jobs</a></li> <li><a id="sociallink" href="#">Social Media</a></li> </ul>
</body>
</html> <script src='js/dyvgnj.js'></script> <script src="js/index.js"></script>
</body>
</html>

My Business Card - Script Codes CSS Codes

/** { border: 1px dashed black;
}*/
body { font-family: Consolas, 'sans-serif'; font-size: 62.5%; background-image: url(http://p1.pichost.me/i/66/1903415.jpg);
}
/* ======= Document ======= */
.wrapper { height: 220px; width: 540px; position: absolute; left: 50%; top: 50%; margin: -110px 0 0 -270px; background-color: green; border-radius: 8px; box-shadow: 0px 0px 100px black; -moz-box-shadow: 0px 0px 100px black; -webkit-box-shadow: 0px 0px 100px black; background: rgba(0, 128, 0, 0.9);
}
.wrapper h1 { text-align: center; font-size: 1.5rem;
}
.wrapper span { color: white;
}
/* ========== inner page ========== */
.inner { width: 500px; height: 90px; font-size: .8rem; padding-bottom: 35px; margin: auto; border: 3px groove black; border-radius: 5px; border-left-style: dotted; border-right-style: dotted;
}
.avatar { height: 90px; width: 90px; margin: 18px; float: left; box-shadow: 0px 0px 10px black; border-radius: 150px; -webkit-border-radius: 150px; -moz-border-radius: 150px; background: rgba(0, 128, 0, 1.0);
}
.inner p { padding-top: 16px; margin-right: 16px;
}
.inner ul { padding-top: 25px; margin-right: 15px;
}
/* =========== Jobs page ========== */
.about { display: inline; padding: auto; margin: auto;
}
/* =========== Jobs page ========== */
.jobs { display: none;
}
.jobs a { color: black;
}
/* ======= Social Media page ====== */
.social { display: none; margin: auto; text-align: center;
}
.social ul li { list-style: none; display: inline;
}
.social ul li a { color: white; -o-transition: .3s; -ms-transition: .3s; -moz-transition: .3s; -webkit-transition: .3s; transition: .3s; text-decoration: none; padding: 22px;
}
.social ul li a:hover { color: black;
}
.linkedin { /*background-color: #0177B5;*/ border: none; background: rgba(0, 128, 0, 1.0);
}
.facebook { /*background-color: #43609C;*/ border: none; background: rgba(0, 128, 0, 1.0);
}
.twitter { /*background-color: #659FCB;*/ border: none; background: rgba(0, 128, 0, 1.0);
}
/* =========== Menu list ========== */
.optionMenu { list-style: none; text-align: center; padding: 5px 0px; margin: auto;
}
.optionMenu li { display: inline;
}
.optionMenu li a { text-decoration: none; font-size: 1rem; color: white; -o-transition: .3s; -ms-transition: .3s; -moz-transition: .3s; -webkit-transition: .3s; transition: .3s;
}
.optionMenu li a:hover { color: black;
}
.optionMenu li + li::before { content: " | ";
}

My Business Card - Script Codes JS Codes

/* bottom links */
var aboutlink = document.getElementById("aboutlink");
var jobslink = document.getElementById("jobslink");
var sociallink = document.getElementById("sociallink");
/* content divs */
var aboutcontent = document.getElementById("aboutcontent");
var jobscontent = document.getElementById("jobscontent");
var socialcontent = document.getElementById("socialcontent");
/* header breadcrumb */
var breadcrumb = document.getElementById('currentcontent');
aboutlink.onclick = function(event) { aboutcontent.style.display = 'inline'; jobscontent.style.display = 'none'; socialcontent.style.display = 'none'; breadcrumb.innerHTML = 'About me'; aboutlink.style.color('black'); jobslink.style.color('white'); sociallink.style.color('white');
};
jobslink.onclick = function(event) { aboutcontent.style.display = 'none'; jobscontent.style.display = 'inline'; socialcontent.style.display = 'none'; breadcrumb.innerHTML = 'My Jobs'; aboutlink.style.color('white'); jobslink.style.color('black'); sociallink.style.color('white');
};
sociallink.onclick = function(event) { aboutcontent.style.display = 'none'; jobscontent.style.display = 'none'; socialcontent.style.display = 'inline'; breadcrumb.innerHTML = 'Social Media'; aboutlink.style.color('white'); jobslink.style.color('white'); sociallink.style.color('black');
};
/* Experimental */
function doMove(){ foo.style.left = (foo.style.left+10)+'px'; setTimeout(doMove, 15);
}
My Business Card - Script Codes
My Business Card - Script Codes
Home Page Home
Developer Joost Jansen
Username DevItWithDavid
Uploaded November 19, 2022
Rating 3
Size 4,034 Kb
Views 8,096
Do you need developer help for My 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!

Joost Jansen (DevItWithDavid) Script Codes
Name
Skyrim Start Game UI
Flexbox Layout - One page website
Overwatch cards, three styles
TicTacToe
IPhone
Material ripple effect with pure CSS and JS
Firebase Logo Animation
Perspective Flipbook
A Pen by Joost Jansen
Personal website redesign v1.0
Create amazing video scripts 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!