[DGMD E-15] people page card

Developer
Size
3,639 Kb
Views
8,096

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 Previews

[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'); }); });
});
[DGMD E-15] people page card - Script Codes
[DGMD E-15] people page card - Script Codes
Home Page Home
Developer Shaunalynn
Username duffles
Uploaded January 30, 2023
Rating 3
Size 3,639 Kb
Views 8,096
Do you need developer help for [DGMD E-15] people page 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!

Shaunalynn (duffles) Script Codes
Create amazing SEO content 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!