My submissions for a digital business card challenge

Developer
Drew McConville
Size
3,364 Kb
Views
28,336
  1. My submissions for a digital business card challenge Previews
  2. My submissions for a digital business card challenge HTML Codes
  3. My submissions for a digital business card challenge CSS Codes

How do I make an my submissions for a digital business card challenge?

What is a my submissions for a digital business card challenge? How do you make a my submissions for a digital business card challenge? This script and codes were developed by Drew McConville on 31 August 2022, Wednesday.

My submissions for a digital business card challenge Previews
IQ Test

My submissions for a digital business card challenge - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>my submissions for a digital business card challenge</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="flip-container" ontouchstart="this.classList.toggle('hover');"> <div class="card"> <div class="front"> <div class="logo"> <h1>Drew McConville</h1> <span>Designer / Developer</span> </div> </div> <div class="back"> <ul> <li><span>Portfolio</span><br><a href="http://scotch-creative.com/">scotch-creative.com</a></li> <li><span>Contact</span><br><a href="mailto:[email protected]">[email protected]</a></li> <li><span>Twitter</span><br><a href="https://twitter.com/drew_mc">@drew_mc</a></li> </ul> </div> </div>
</div>
</body>
</html>

My submissions for a digital business card challenge - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Montserrat);
@import url(http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic);
body { background: #e3dfd2; position: relative;
}
body .flip-container { perspective: 1000;
}
body .flip-container:hover .card, body .flip-container.hover .card { transform: rotateY(180deg);
}
body .flip-container .card { position: relative; width: 427px; margin: 0 auto; transition: 0.8s; transform-style: preserve-3d;
}
body .flip-container .card .front { position: absolute; display: block; overflow: auto; margin: 5em auto; background-color: #fff; width: 427px; height: 320px; border-radius: 15px; -webkit-box-shadow: 0px 0px 5px 0px rgba(178, 175, 150, 0.4); -moz-box-shadow: 0px 0px 5px 0px rgba(178, 175, 150, 0.4); box-shadow: 0px 0px 5px 0px rgba(178, 175, 150, 0.4); backface-visibility: hidden; z-index: 2;
}
body .flip-container .card .front .logo { margin: 135px auto 0; width: 250px;
}
body .flip-container .card .front .logo h1 { font-family: 'Montserrat', sans-serif; text-transform: uppercase; font-size: 1.3em; letter-spacing: 2px; font-weight: 400; margin: 0;
}
body .flip-container .card .front .logo span { font-family: 'Crimson Text', serif; font-style: italic; font-size: 1.1em; letter-spacing: 1px;
}
body .flip-container .card .back { position: absolute; display: block; overflow: auto; margin: 5em auto; background-color: #fff; text-align: center; width: 427px; height: 320px; transform: rotateY(180deg); border-radius: 15px; -webkit-box-shadow: 0px 0px 5px 0px rgba(178, 175, 150, 0.4); -moz-box-shadow: 0px 0px 5px 0px rgba(178, 175, 150, 0.4); box-shadow: 0px 0px 5px 0px rgba(178, 175, 150, 0.4); backface-visibility: hidden;
}
body .flip-container .card .back ul { display: inline-block; text-align: left; margin: 5em auto 0; padding: 0; padding-left: 2em; border-left: 1px solid #eee;
}
body .flip-container .card .back ul li { list-style: none; padding: 7px 0;
}
body .flip-container .card .back ul li:first-child { padding-top: 0;
}
body .flip-container .card .back ul li:last-child { padding-bottom: 0;
}
body .flip-container .card .back ul li span { font-family: 'Montserrat', sans-serif; text-transform: uppercase; font-size: 0.7em; letter-spacing: 2px; font-weight: 400; margin: 0; color: #999;
}
body .flip-container .card .back ul li a { color: #000; text-decoration: none; font-family: 'Crimson Text', serif; font-style: italic; font-size: 1.3em; letter-spacing: 1px;
}
body .flip-container .card .back ul li a:hover { color: #636363;
}
My submissions for a digital business card challenge - Script Codes
My submissions for a digital business card challenge - Script Codes
Home Page Home
Developer Drew McConville
Username drew_mc
Uploaded August 31, 2022
Rating 3
Size 3,364 Kb
Views 28,336
Do you need developer help for My submissions for a digital business card challenge?

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!

Drew McConville (drew_mc) Script Codes
Name
Simple blog concept
Dynamic Box Shadow
Basic Hidden Form
Donation UI Concept
A Pen by Drew McConville
Baseball TV Scorebox
SVG Sprite - Credit Card Icons
Draft Bernie Sanders Email
Input modification feedback
Avg Donation Firework Effect for Bernie 2016 project
Create amazing love letters 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!