Leadership Bio Buildout
How do I make an leadership bio buildout?
What is a leadership bio buildout? How do you make a leadership bio buildout? This script and codes were developed by Kdooley on 25 September 2022, Sunday.
Leadership Bio Buildout Previews
Leadership Bio Buildout - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Leadership Bio Buildout</title> <link rel='stylesheet prefetch' href='https://www.dynatrace.com/etc/designs/dynatrace/clientlibs.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="row bio-top"><!--starts the first row with Bios--> <div class="row"> <div class="col-md-4 bio"><!--John Van Siclen Headshot--> <div class="col-sm-12 bio-jvs"> <div class="download-bio"> <p><a href="">Download Hi-Res</a></p> </div> <div class="bio-overlay"> <h3>John Van Siclen</h3> <p><i>CEO</i></p> <div class="view-more"> <p> <a href="javascript:leadershipBios('jvs-bio');">View Full <i class="fa fa-check-circle"></i> </a> </p> </div> </div> </div> </div><!--John Van Siclen Headshot-->
<!--Bernd Greifeneder Headshot--> <div class="col-md-4 bio"> <div class="col-sm-12 bio-bg"> <div class="download-bio"> <p><a href="">Download Hi-Res</a></p> </div> <div class="bio-overlay"> <h3>Bernd Greifeneder</h3> <p><i>Chief Technology Officer</i></p> <div class="view-more"> <p> <a href="javascript:leadershipBios('bg-bio');">View Full <i class="fa fa-check-circle"></i> </a> </p> </div> </div> </div> </div>
<!--Bernd Greifeneder Headshot-->
<!--Steve Tack Headshot--> <div class="col-md-4 bio"> <div class="col-sm-12 bio-st"> <div class="download-bio"> <p><a href="">Download Hi-Res</a></p> </div> <div class="bio-overlay"> <h3>Steve Tack</h3> <p><i>VP of Product Management</i></p> <div class="view-more"> <p> <a href="javascript:leadershipBios('st-bio');">View Full <i class="fa fa-check-circle"></i> </a> </p> </div> </div> </div> </div>
<!--Steve Tack Headshot--> </div><!--ends the row of headshots--> <!--full bio for row John,Bernd,Steve--> <div class="leadership_Bios col-md-12" id="jvs-bio"> <div class="col-md-4 bio-pic"> <img class="img-center" src="https://www.dynatrace.com/content/dam/dynatrace/misc/About-Us-Executives/jvs_square.jpg"> </div> <div class="col-md-8 bio-desc"> <div class="close"><p><a href="#">close <i class="fa fa-times"></i></a></p></div> <div class="bio-name"> <h4>John Van Siclen</h4> <p><i>General Manager</i></p> </div> <div class="bio-social"> <img src="https://www.dynatrace.com/content/dam/dynatrace/misc/About-Us-Executives/twitter_block.png" alt="" /> </div> <div class="bio-body"> <p>John, formerly CEO of dynaTrace (acquired by Compuware), became general manager of the APM business unit in 2011. With over 30 years of experience in system and software companies such as Net FRAME, Informix and Interwoven, he has built a number of highly scalable businesses in some of the most competitive markets in the technology. Most recently, he successfully reshaped Compuware’s collection of APM brands into a tightly integrated solution that is consistently recognized as a leader in Gartner’s APM Magic Quadrant. CRN Magazine named Van Siclen a “Top 25 Disrupter” for his years of breaking the mold and advancing new models that accelerate business growth. John has an AB from Princeton University and is a founding member of the New England Clean Energy executive program.</p> </div> </div> </div> <!--end JVS full bio--> <!--BG full-bio--> <div class="leadership_Bios col-md-12" id="bg-bio"> <div class="col-md-4 bio-pic"> <img class="img-center" src="https://www.dynatrace.com/content/dam/dynatrace/misc/About-Us-Executives/bg-square.jpg"> </div> <div class="col-md-8 bio-desc"> <div class="close"><p><a href="#">close <i class="fa fa-times"></i></a></p></div> <div class="bio-name"> <h4>Bernd Greifeneder</h4> <p><i>Chief Technology Officer</i></p> </div> <div class="bio-social"> <img src="https://www.dynatrace.com/content/dam/dynatrace/misc/About-Us-Executives/twitter_block.png" alt="" /> </div> <div class="bio-body"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vestibulum, justo vitae porta gravida, erat nibh faucibus libero, at ultrices lorem ipsum vel leo. Duis ut eros est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc lacinia velit nec sapien consectetur, nec ultrices ornare.</p> </div> </div> </div> <!--end BG full bio--> <!--AH full-bio--> <div class="col-md-12 leadership_Bios" id="st-bio"> <div class="col-md-4 bio-pic"> <img class="img-center" src="https://www.dynatrace.com/content/dam/dynatrace/misc/About-Us-Executives/st-square.jpg"> </div> <div class="col-md-8 bio-desc"> <div class="close"><p><a href="#">close <i class="fa fa-times"></i></a></p></div> <h4>Steve Tack</h4> <p><i>VP of Product Management</i></p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vestibulum, justo vitae porta gravida, erat nibh faucibus libero, at ultrices lorem ipsum vel leo. Duis ut eros est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc lacinia velit nec sapien consectetur, nec ultrices ornare. Nam sit amet lobortis nisl, sit amet tristique eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam scelerisque tortor eu condimentum tincidunt. Phasellus a vulputate dui. Suspendisse dictum arcu ac est vehicula tempor. Maecenas convallis aliquet est, id bibendum nibh mollis ut. In tincidunt vestibulum elit sed euismod. Sed consequat massa turpis, ut egestas metus pharetra non. Aenean dignissim dolor leo, et sodales.</p> </div> </div> <!--end st full bio--> </div><!--ends the first row with bios--> <div class="row bio-top"><!--starts the second row with Bios--> <div class="row"> <div class="col-md-4 bio"><!--Nicolas Robbe Headshot--> <div class="col-sm-12 bio-nr"> <div class="download-bio"> <p><a href="">Download Hi-Res</a></p> </div> <div class="bio-overlay"> <h3>Nicolas Robbe</h3> <p><i>Chief Marketing Officer</i></p> <div class="view-more"> <p> <a href="javascript:leadershipBios('nr-bio');">View Full <i class="fa fa-check-circle"></i> </a> </p> </div> </div> </div> </div><!--Nicolas Robbe Headshot-->
<!--Andrew Hittle Headshot--> <div class="col-md-4 bio"> <div class="col-sm-12 bio-ah"> <div class="download-bio"> <p><a href="">Download Hi-Res</a></p> </div> <div class="bio-overlay"> <h3>Andrew Hittle</h3> <p><i>VP of Dynatrace Customer Services</i></p> <div class="view-more"> <p> <a href="javascript:leadershipBios('ah-bio');">View Full <i class="fa fa-check-circle"></i> </a> </p> </div> </div> </div> </div>
<!--Andrew Hittle Headshot-->
<!--Eric Fischer Headshot--> <div class="col-md-4 bio"> <div class="col-sm-12 bio-ef"> <div class="download-bio"> <p><a href="">Download Hi-Res</a></p> </div> <div class="bio-overlay"> <h3>Eric Fisher</h3> <p><i>Senior VO of Business Development</i></p> <div class="view-more"> <p> <a href="javascript:leadershipBios('ef-bio');">View Full <i class="fa fa-check-circle"></i> </a> </p> </div> </div> </div> </div>
<!--Steve Tack Headshot--> </div><!--ends the row of headshots--> <!--full bio for row Nicolas ,Andrew, Eric--> <div class="leadership_Bios col-md-12" id="nr-bio"> <div class="col-md-4 bio-pic"> <img class="img-center" src="https://www.dynatrace.com/content/dam/dynatrace/misc/About-Us-Executives/nr-square.jpg"> </div> <div class="col-md-8 bio-desc"> <div class="close"><p><a href="#">close <i class="fa fa-times"></i></a></p></div> <div class="bio-name"> <h4>Nicolas Robbe</h4> <p><i>Chief Marketing Officer</i></p> </div> <div class="bio-social"> <img src="https://www.dynatrace.com/content/dam/dynatrace/misc/About-Us-Executives/twitter_block.png" alt="" /> </div> <div class="bio-body"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vestibulum, justo vitae porta gravida, erat nibh faucibus libero, at ultrices lorem ipsum vel leo. Duis ut eros est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc lacinia velit nec sapien consectetur, nec ultrices ornare.</p> </div> </div> </div> <!--end NR full bio--> <!--AH full-bio--> <div class="leadership_Bios col-md-12" id="ah-bio"> <div class="col-md-4 bio-pic"> <img class="img-center" src="https://www.dynatrace.com/content/dam/dynatrace/misc/About-Us-Executives/ah-square.jpg"> </div> <div class="col-md-8 bio-desc"> <div class="close"><p><a href="#">close <i class="fa fa-times"></i></a></p></div> <div class="bio-name"> <h4>Andrew Hittle</h4> <p><i>VP of Dynatrace Customer Services</i></p> </div> <div class="bio-social"> <img src="https://www.dynatrace.com/content/dam/dynatrace/misc/About-Us-Executives/twitter_block.png" alt="" /> </div> <div class="bio-body"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vestibulum, justo vitae porta gravida, erat nibh faucibus libero, at ultrices lorem ipsum vel leo. Duis ut eros est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc lacinia velit nec sapien consectetur, nec ultrices ornare.</p> </div> </div> </div> <!--end BG full bio--> <!--EF full-bio--> <div class="col-md-12 leadership_Bios" id="ef-bio"> <div class="col-md-4 bio-pic"> <img class="img-center" src="https://www.dynatrace.com/content/dam/dynatrace/misc/About-Us-Executives/af-square.jpg"> </div> <div class="col-md-8 bio-desc"> <div class="close"><p><a href="#">close <i class="fa fa-times"></i></a></p></div> <h4>Eric Fischer</h4> <p><i>Senior VP of Business Development</i></p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vestibulum, justo vitae porta gravida, erat nibh faucibus libero, at ultrices lorem ipsum vel leo. Duis ut eros est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc lacinia velit nec sapien consectetur, nec ultrices ornare. Nam sit amet lobortis nisl, sit amet tristique eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam scelerisque tortor eu condimentum tincidunt. Phasellus a vulputate dui. Suspendisse dictum arcu ac est vehicula tempor. Maecenas convallis aliquet est, id bibendum nibh mollis ut. In tincidunt vestibulum elit sed euismod. Sed consequat massa turpis, ut egestas metus pharetra non. Aenean dignissim dolor leo, et sodales.</p> </div> </div> <!--end EF full bio--> </div><!--ends the second row with bios--> <div class="row bio-top"><!--starts the third row with Bios--> <div class="row"> <div class="col-md-4 bio"><!--Lisa Archer Headshot--> <div class="col-sm-12 bio-la"> <div class="download-bio"> <p><a href="">Download Hi-Res</a></p> </div> <div class="bio-overlay"> <h3>Lisa Archer</h3> <p><i>VP of Human Resources</i></p> <div class="view-more"> <p> <a href="javascript:leadershipBios('la-bio');">View Full <i class="fa fa-check-circle"></i> </a> </p> </div> </div> </div> </div><!--Lisa Archer Headshot-->
<!--Jon Rider Headshot--> <div class="col-md-4 bio"> <div class="col-sm-12 bio-jr"> <div class="download-bio"> <p><a href="">Download Hi-Res</a></p> </div> <div class="bio-overlay"> <h3>John Rider</h3> <p><i>Chief Information Officer</i></p> <div class="view-more"> <p> <a href="javascript:leadershipBios('jr-bio');">View Full <i class="fa fa-check-circle"></i> </a> </p> </div> </div> </div> </div>
<!--Andrew Hittle Headshot--> </div><!--ends the row of headshots--> <!--full bio for row Lisa and John--> <div class="leadership_Bios col-md-12" id="jr-bio"> <div class="col-md-4 bio-pic"> <img class="img-center" src="https://www.dynatrace.com/content/dam/dynatrace/misc/About-Us-Executives/jr-square.jpg"> </div> <div class="col-md-8 bio-desc"> <div class="close"><p><a href="#">close <i class="fa fa-times"></i></a></p></div> <div class="bio-name"> <h4>Nicolas Robbe</h4> <p><i>Chief Marketing Officer</i></p> </div> <div class="bio-social"> <img src="https://www.dynatrace.com/content/dam/dynatrace/misc/About-Us-Executives/twitter_block.png" alt="" /> </div> <div class="bio-body"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vestibulum, justo vitae porta gravida, erat nibh faucibus libero, at ultrices lorem ipsum vel leo. Duis ut eros est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc lacinia velit nec sapien consectetur, nec ultrices ornare.</p> </div> </div> </div> <!--end NR full bio--> <!--AH full-bio--> <div class="leadership_Bios col-md-12" id="la-bio"> <div class="col-md-4 bio-pic"> <img class="img-center" src="https://www.dynatrace.com/content/dam/dynatrace/misc/About-Us-Executives/ah-square.jpg"> </div> <div class="col-md-8 bio-desc"> <div class="close"><p><a href="#">close <i class="fa fa-times"></i></a></p></div> <div class="bio-name"> <h4>LIsa Archer</h4> <p><i>VP of Human Resources</i></p> </div> <div class="bio-social"> <img src="https://www.dynatrace.com/content/dam/dynatrace/misc/About-Us-Executives/twitter_block.png" alt="" /> </div> <div class="bio-body"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vestibulum, justo vitae porta gravida, erat nibh faucibus libero, at ultrices lorem ipsum vel leo. Duis ut eros est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc lacinia velit nec sapien consectetur, nec ultrices ornare.</p> </div> </div> </div> <!--end BG full bio--> </div><!--ends the Third row with bios--> </div><!--ends the container--> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://www.dynatrace.com/etc/designs/dynatrace/clientlibs/js/bootstrap.js'></script> <script src="js/index.js"></script>
</body>
</html>
Leadership Bio Buildout - Script Codes CSS Codes
.bio { padding: 30px;
}
.bio-jvs { background-image: url(https://www.dynatrace.com/content/dam/dynatrace/misc/About-Us-Executives/jvs-headshot.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; padding: 0px; height: 400px;
}
.bio-nr { background-image: url(https://www.dynatrace.com/content/dam/dynatrace/misc/About-Us-Executives/nr-headshot.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; padding: 0px; height: 400px;
}
.bio-ah { background-image: url(https://www.dynatrace.com/content/dam/dynatrace/misc/About-Us-Executives/ah-headshot.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; padding: 0px; height: 400px;
}
.bio-st { background-repeat: no-repeat; background-size: cover; background-position: center; padding: 0px; height: 400px; background-image: url(https://www.dynatrace.com/content/dam/dynatrace/misc/About-Us-Executives/st-headshot.jpg);
}
.bio-bg { background-repeat: no-repeat; background-size: cover; background-position: center; padding: 0px; height: 400px; background-repeat: no-repeat; background-size: cover; background-position: center; padding: 0px; height: 400px; background-image: url(https://www.dynatrace.com/content/dam/dynatrace/misc/About-Us-Executives/bg-headshot.jpg);
}
.bio-ef { background-repeat: no-repeat; background-size: cover; background-position: center; padding: 0px; height: 400px; background-repeat: no-repeat; background-size: cover; background-position: center; padding: 0px; height: 400px; background-image: url(https://www.dynatrace.com/content/dam/dynatrace/misc/About-Us-Executives/af-headshot.jpg);
}
.bio-la { background-repeat: no-repeat; background-size: cover; background-position: center; padding: 0px; height: 400px; background-repeat: no-repeat; background-size: cover; background-position: center; padding: 0px; height: 400px; background-image: url(https://www.dynatrace.com/content/dam/dynatrace/misc/About-Us-Executives/la-headshot.jpg);
}
.bio-jr { background-repeat: no-repeat; background-size: cover; background-position: center; padding: 0px; height: 400px; background-repeat: no-repeat; background-size: cover; background-position: center; padding: 0px; height: 400px; background-image: url(https://www.dynatrace.com/content/dam/dynatrace/misc/About-Us-Executives/jr-headshot.jpg);
}
.bio-top:nth-of-type(even) { background-color: white;
}
.bio-overlay { background: #2b2b2e; bottom: 0; position: absolute; height: 100px; width: 100%; color: white; padding-left: 15px;
}
.bio-overlay p { font-size: .9em; color: #ababac;
}
.bio-overlay .view-more { bottom: 0; right: 0; position: absolute; background: #d5d5d5; padding-right: 10px; padding-left: 10px; padding-top: 5px; text-decoration: none;
}
.bio-overlay .view-more a { color: #2b2b2e;
}
.bio-overlay .view-more a:hover { color: #137ea8; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; transition: all 300ms ease; text-decoration: none;
}
.download-bio { border-left: 1px solid white; border-bottom: 1px solid white; top: 0; right: 0; position: absolute; color: white; padding-top: 5px; padding-left: 5px; padding-right: 5px; width: 125px;
}
.download-bio a { color: white;
}
.download-bio a:hover { color: #137ea8; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; transition: all 300ms ease; text-decoration: none;
}
.bio-name { border-right: 2px solid #959596; display: inline-block; padding-right: 25px;
}
.bio-social { display: inline; font-size: 3em; padding-left: 25px;
}
.bio-social img { margin-top: -20px;
}
.bio-body { padding-top: 20px; font-weight: 200;
}
.leadership_Bios { padding-top: 25px; font-weight: 100; display: none;
}
.bio-pic img { border-radius: 190px; border: 5px solid #d5d5d5; width: 190px;
}
.close p a { float: right; font-size: 14px; border: 1px solid #0090b6; padding: 10px; color: #0090b6;
}
.close p a:hover { color: white; background: #0090b6; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; transition: all 300ms ease; text-decoration: none;
}
@media (max-width: 992px) { .leadership_Bios { display: block; padding-top: 35px; border-bottom: 2px solid #eeeeee; } .bio-jvs, .bio-bg, .bio-st, .bio-nr, .bio-ah, .bio-ef, .bio-la, .bio-jr { display: none; } .bio-pic img { margin-bottom: 25px; } .close { display: none; } .bio { padding: 5px 0px 5px 0px; } .bio-body { padding-top: 20px; font-weight: 200; padding-bottom: 30px; }
}
Leadership Bio Buildout - Script Codes JS Codes
function leadershipBios(chosenBio) { $('.leadership_Bios').each(function(index) { if ($(this).attr("id") == chosenBio) { $(this).slideDown(600); } else { $(this).slideUp(600); } });
}
$(".close").click(function(){ $(".leadership_Bios").fadeOut("fast");
})
| Developer | Kdooley |
| Username | kdooley89 |
| Uploaded | September 25, 2022 |
| Rating | 3 |
| Size | 5,857 Kb |
| Views | 20,240 |
Do you need developer help for Leadership Bio Buildout?
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!
Kdooley (kdooley89) Script Codes
| Name | Size |
| Listing-card-style | 3,573 Kb |
| Login Screen | 4,227 Kb |
| VSCO Emulation | 4,079 Kb |
| DevOps Submenu | 3,020 Kb |
| Color Swatches | 2,472 Kb |
| Fixed-Background-Panels | 2,446 Kb |
| A Pen by Kdooley | 4,873 Kb |
| Testimonials Compuware layout | 3,832 Kb |
| DoorChampion Login Page | 3,747 Kb |
| Image-Slider in laptop screen | 2,469 Kb |
Create amazing marketing copy 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!
Similar Scripts & Codes
| Name | Username | Size |
| How to add Css Fold Notes In Blogger By Askwithloud.com | Askwithloud | 2,280 Kb |
| Basecamp 3 Document | Lachlanjc | 3,811 Kb |
| Portfolio page | Bhavya_j | 2,804 Kb |
| CSS3 Selectables with information rollover | Jasonmayes | 9,565 Kb |
| Replace url via jquery | Serluk | 1,429 Kb |
| Weird glowy CSS3 game | Toneworm | 3,684 Kb |
| Static Image to Video Block | Grayghostvisuals | 4,864 Kb |
| Responsive Pricing Table | Jeremycaris | 2,690 Kb |
| CSS3 Form | Tusharbandal | 1,836 Kb |
| Flat UI - Checkbox FIX | ARS | 2,663 Kb |
Do you want hide your ip address?
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!