[DGMD E-15] people page card
How do I make an [dgmd e-15] people page card?
Change this card to include a picture and information about yourself. When you are done, export it as a gist to your Github account and we will incorporate your card into the class website at dgmd.github.io/people. What is a [dgmd e-15] people page card? How do you make a [dgmd e-15] people page card? This script and codes were developed by Shaunalynn on 30 January 2023, Monday.
[DGMD E-15] people page card - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>[DGMD E-15] people page card</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html>
<head> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css">
</head>
<!-- Replace Kanye's name with your own, and include your own information and links in the HTML below. You can change the icons by using Font Awesome icons here: https://fortawesome.github.io/Font-Awesome/ -->
<body id="people"> <div id='susancantrell' class='person flip-container'> <div class='flipper'> <div class='fade'> <div class='front card'> <h2>Susan Cantrell</h2> <div class='headshot'></div> <i class="fa fa-undo flip"></i> </div> <div class='back card'> <ul> <li><i class="fa fa-hand-o-right"></i><a <h2>louisiana Based</h3></a> <li><i class="fa fa-user-secret"></i><a <h3>Army Brat</h3></a> <li><i class="fa fa-plane"></i><a <h3>Wanderlust</h3></a> <li><i class="fa fa-empire"></i><a <h3>Designer</h3></a> <li><i class="fa fa-bar-chart"></i><a <h3>Data Visualization</h3></a> </li> </ul> <i class="fa fa-undo flip"></i> </div> </div> </div>
</body>
</html> <script src="js/index.js"></script>
</body>
</html>
[DGMD E-15] people page card - Script Codes CSS Codes
/* Kanye West -- Replace with your name/ID and add CSS effects for your card here */
#susancantrell .headshot { background-image: url(https://lh3.googleusercontent.com/16IOG7eNmKpCcgFBiqB8xkiyZzLGTn4X-zsJgW17kt_pRRjnjeh3jM6fNyP_chBJTxeRBIw=s85);
}
#susancantrell h2 { font-size:26px;
}
#susancantrell .front.card { background-color:white;
}
/* .fade
{ opacity:.5;
}
.fade:hover
{ opacity:1;
} */
/*********************************
***Don't change below this line*** **********************************/
html { font-size: 1.475em;
}
@font-face { font-family: 'Georgia'; src: url('https://s3.amazonaws.com/dgmde15githubio/lmroman10-regular-webfont.eot'); src: url('https://s3.amazonaws.com/dgmde15githubio/lmroman10-regular-webfont.eot?#iefix') format('embedded-opentype'), url('https://s3.amazonaws.com/dgmde15githubio/lmroman10-regular-webfont.woff') format('woff'), url('https://s3.amazonaws.com/dgmde15githubio/lmroman10-regular-webfont.ttf') format('truetype'), url('https://s3.amazonaws.com/dgmde15githubio/lmroman10-regular-webfont.svg#latin_modern_roman10_regular') format('svg'); font-weight: normal; font-style: normal;
}
body { font-family: 'Georgia','Times New Roman', Times, serif; color: #0a0a0f; text-shadow: 0 0 3px #e6e6e6;
}
.person { width: calc((70ex - 2*1em)/3); height: calc((70ex - 2*1em)/3); margin-right: 1em; margin-bottom: 1em; float: left;
}
.person:nth-child(3n) { margin-right: 0;
}
#people h2 { text-align: center; text-transform: lowercase; font-family: 'Georgia','Times New Roman', Times, serif; font-variant: small-caps; line-height: 1.5em; font-size: 1.00em; margin-bottom: 0.25em; width: 100%; margin: 0; padding: 0;
}
.front, .back { backface-visibility: hidden; position: absolute; top: 0; left: 0; height: 100%; width: 100%; margin-left: auto; margin-right: auto; box-shadow: 0 0 0.5em #000; border-radius: 0.7em; border-style:double;
}
.card i.flip { position: absolute; top: 85%;
}
/**********************/
/* front of the cards */
.front.card { background-color:white; z-index: 2; transform: rotateY(0deg);
}
.person .headshot { box-shadow: inset 0 0 0.625em #000; width: 4.9em; height: 7.0em; background-size: cover; margin-left: auto; margin-right: auto; position: relative; top: .75%;
}
#mySquare:hover { transition: 1s; /* This is where the action happens: it tells CSS to animate any changes in the CSS styling of these elements over one second*/
}
/*********************/
/* back of the cards */
.back.card { background-color: #ffa366; transform: rotateY(180deg);
}
.back ul { padding:0;
}
.back li { list-style-type:; padding-left: 1ex;
}
.back li i.fa { margin-right: 1ex;
}
#people .back { padding: 0.25em;
}
#people .back li { margin-bottom: 0.3em; margin-left: 0; line-height: 0.50em;
}
a:hover { background-color:lightgrey;
}
/***********************************/
/* Flipping behavior for the cards */
i.flip { cursor: pointer; position: relative; top: 5px; left: calc((70ex - 2*1em)/3 - 4.25em);
}
.flip-container { perspective: 1000;
}
.flip-container.flipped .flipper { transform: rotateY(180deg);
}
.flipper { transition: 0.5s; transform-style: preserve-3d; position: relative; width: 100%; height: 100%;
}
[DGMD E-15] people page card - Script Codes JS Codes
// Add your Javascript effects here.
window.addEventListener('load', function() { var myCard = document.querySelector('#susancantrell'); var flipButtons = Array.prototype.slice.call(myCard.querySelectorAll('i.flip')); flipButtons.forEach(function(button) { button.addEventListener('click', function() { myCard.classList.toggle('flipped'); }); });
});
Developer | Shaunalynn |
Username | duffles |
Uploaded | January 30, 2023 |
Rating | 3 |
Size | 3,639 Kb |
Views | 8,096 |
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 |
Molly Josephs | 2,527 Kb |
Linking a picture from github | 1,232 Kb |
Alec Resnick | 2,177 Kb |
A Pen by shaunalynn | 1,736 Kb |
Template Bio Page for Creative Coding | 2,594 Kb |
Playing a video when you click | 1,774 Kb |
Shaunalynn Duffy | 2,651 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 |
A Pen by tugce | Ecgutcnkr | 4,197 Kb |
IE flex collapse bug fix | Rowno | 2,678 Kb |
CSSOff 2013 Submission | Codewunder | 14,766 Kb |
Calculator | Rzencoder | 4,572 Kb |
TinFoil Boats | Chandralil | 4,577 Kb |
Material Design-Layout-Principles Practice | Fraina | 2,331 Kb |
Exploring css spinners | Akagr | 3,569 Kb |
Birthday Party Starter | Aussieyang | 1,629 Kb |
Google Maps API Ground Overlay | Boycetrus | 2,961 Kb |
Arrow Navigation | Hinducows | 1,973 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!