Staff Page Mockup

Developer
Calvin
Size
3,633 Kb
Views
34,408
  1. Staff Page Mockup Previews
  2. Staff Page Mockup HTML Codes
  3. Staff Page Mockup CSS Codes
  4. Staff Page Mockup JS Codes

How do I make an staff page mockup?

What is a staff page mockup? How do you make a staff page mockup? This script and codes were developed by Calvin on 11 August 2022, Thursday.

Staff Page Mockup Previews
IQ Test

Staff Page Mockup - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Staff Page Mockup</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<h2>highlights individual staff members on hover <br><br> css is easily customized <br><br> modern + functional + clean</h2>
<div class='portrait-container'> <div class='portrait collin'> <ul class='portrait-details'> <li>Collin</li> <li class="title" style="border-top:2px solid #fff;border-bottom:2px solid #fff;letter-spacing:3.5px; padding-bottom:18px; margin:-5px 0 20px;'">designer</li> <li><p>the first rule about the hockey club, don't talk about the hockey club. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. </p></li><BR> <li class='fontawesome-email'> <nav class="containersocial"> <a class="fbook" href="#"><i class="fa fa-facebook"></i></a> <a class="twitt" href="#"><i class="fa fa-twitter"></i></a> <a class="gplus" href="#"><i class="fa fa-google-plus"></i></a> <a class="insta" href="#"><i class="fa fa-instagram"></i></a> <a class="lin" href="#"><i class="fa fa-linkedin"></i></a> </nav></li> </ul> </div> <div class='portrait levent'> <ul class='portrait-details'> <li>Casper</li> <li class="title" style="border-top:2px solid #fff;border-bottom:2px solid #fff;letter-spacing:3.5px; padding-bottom:18px; margin:-5px 0 20px; background:transparent;">developer</li> <li><p>just download netscape. dolor sit, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. </p></li><BR> <li class='fontawesome-email'> <nav class="containersocial"> <a class="fbook" href="#"><i class="fa fa-facebook"></i></a> <a class="twitt" href="#"><i class="fa fa-twitter"></i></a> <a class="gplus" href="#"><i class="fa fa-google-plus"></i></a> <a class="lin" href="#"><i class="fa fa-linkedin"></i></a> </nav></li> </ul> </div> <div class='portrait alison'> <ul class='portrait-details'> <li>Mamadu</li> <li class="title" style="border:2px solid #fff;letter-spacing:3.5px; padding-bottom:18px; margin:-5px 0 20px;">social media</li> <li><p>i've got some dresses for you! Consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.</p> </li><BR> <li class='fontawesome-email'> <nav class="containersocial"> <a class="fbook" href="#"><i class="fa fa-facebook"></i></a> <a class="twitt" href="#"><i class="fa fa-twitter"></i></a> <a class="insta" href="#"><i class="fa fa-instagram"></i></a> <a class="lin" href="#"><i class="fa fa-linkedin"></i></a> </nav></li> </ul> </div> <div class='portrait cros'> <ul class='portrait-details'> <li>Akio</li> <li class="title" style="border:2px solid #fff;letter-spacing:3.5px; padding-bottom:18px; margin:-5px 0 20px; background:transparent;">greeter</li> <li><p>foood. lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.</p> </li><BR> <li class='fontawesome-email'> <nav class="containersocial"> <a class="fbook" href="#"><i class="fa fa-facebook"></i></a> <a class="twitt" href="#"><i class="fa fa-twitter"></i></a> <a class="gplus" href="#"><i class="fa fa-google-plus"></i></a> <a class="insta" href="#"><i class="fa fa-instagram"></i></a> <a class="lin" href="#"><i class="fa fa-linkedin"></i></a> </nav></li> </ul> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

Staff Page Mockup - Script Codes CSS Codes

html, body{ overflow-x:hidden; font: 400 1em/1 "Droid Sans"; text-align: center; -webkit-backface-visibility: hidden; width:100%; height:99.9%; min-width: 400px; min-height: 400px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background: url(http://cdn.backgroundhost.com/backgrounds/subtlepatterns/classy_fabric.png) repeat center center fixed;
padding-top:2px;
}
@import url(http://fonts.googleapis.com/css?family=PT+Serif);
@import url(http://fonts.googleapis.com/css?family=Roboto:400,700,300);
@import url(http://weloveiconfonts.com/api/?family=fontawesome);
h1 { font: 400 2em/1 'Roboto', sans-serif; text-transform: uppercase; margin: 1.5em 0 0.3em;
}
h2 { text-align:left; font: 400 0.75em/1 'Roboto', sans-serif; margin: 0 0 0; width:5%; color:#fff; padding:20px; border-left:4px solid rgba(255,255,255, .1); background:rgba(0,0,0, .5);
}
[class*="fontawesome-"]:before { font-family: "FontAwesome", sans-serif; margin-right: 0.3em;
}
.fontawesome-email a{display:inline; padding:0 5px;font-size:20px;
}
.fbook i:hover { color: #3b5998; text-decoration: none;
}
.gplus i:hover { color: #dd4b39; text-decoration: none;
}
.insta i:hover { color: #517fa4; text-decoration: none;
}
.twitt i:hover { color: #00aced; text-decoration: none;
}
.lin i:hover { color: #007bb6; text-decoration: none;
}
.portrait-container { max-width: 1020px; height:200px; margin: 0 auto; *zoom: 1; text-align: center; position: relative;
}
.portrait { height: 200px; width: 200px; display: inline-block; position: relative; margin: 1em; background-size: cover; background-repeat: no-repeat; background-position: center; cursor: pointer; -moz-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-filter: grayscale(100%) opacity(0.7); filter: grayscale(100%) opacity(0.7);
}
.portrait:hover { -webkit-filter: grayscale(0) opacity(1); filter: grayscale(0) opacity(1); -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
}
.portrait-details { /* white-space: nowrap; */ cursor: text; position: absolute; list-style-type: none; margin-top: 200px; margin-left: -.5px; padding: 5px; height: 360px; width:191px; background: rgba(0, 0, 0, .6); -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; border-bottom:2px solid rgba(0,200,255,.5);
}
.title {
text-transform:uppercase; background:rgba(0,200,255,.5);
}
@media all and (max-width: 64em) { .portrait-details { white-space: normal; min-width: 150px; opacity:0; visibility:hidden; } }
.portrait-details li { color: #fff; line-height:.5rem; padding: 0.3em 1.9em; font: 400 0.8em/1 'Roboto', serif; }
p {
font-size: .94em;
line-height: 1.25em;
margin: 0.625em 0;
padding:.25;
text-align: justify;
word-break: break-all;
}
p:first-line {
font-size:1.10em;
font-variant:small-caps;
}
.portrait-details li:first-child { font: 200% 'Roboto', sans-serif; text-transform:uppercase; padding: 21px; margin-top:-8px; margin-left:-0px; color: #fff;
}
.portrait-details li:last-child { border-bottom: none; padding-bottom: 1.5em; }
.portrait-details li:nth-child(2) { color: #fff; letter-spacing:.5px; padding: 1.5em 1.9em 0.7em; font-weight: 700; }
.portrait-details li a { color: inherit; cursor: pointer; line-height:1rem;
}
.collin{ background-image: url(http://placehold.it/200x200);}
.levent{
background-image: url(http://placehold.it/200x200);}
.alison{ background-image: url(http://placehold.it/200x200);}
.cros{
background-image: url(http://placehold.it/200x200);}
.containersocial { width:100%; display:table; margin:0;
}

Staff Page Mockup - Script Codes JS Codes

//thanks to http://codepen.io/whoiswardlarson/pen/gtIei & http://codepen.io/marianarlt/pen/CzwhI for allowing me to branch off of their work
Staff Page Mockup - Script Codes
Staff Page Mockup - Script Codes
Home Page Home
Developer Calvin
Username CalvinMorett
Uploaded August 11, 2022
Rating 3
Size 3,633 Kb
Views 34,408
Do you need developer help for Staff Page Mockup?

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!

Calvin (CalvinMorett) Script Codes
Name
Horizontal Scrolling Theme
A Pen by Calvin
Portfolio Idea
Showcase 1 Gallery
R
Staff
Pulserende
PORTFOLIO - CEMENT
CoNTENT
FireHazard Landing Page
Create amazing art & images 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!