Skip to content

Instantly share code, notes, and snippets.

@marcuszierke

marcuszierke/portfolioPage.html

Last active May 22, 2017 19:51
Show Gist options
  • Save marcuszierke/348f711c8c4d69563bdd8cc079290f80 to your computer and use it in GitHub Desktop.
Save marcuszierke/348f711c8c4d69563bdd8cc079290f80 to your computer and use it in GitHub Desktop.
Download ZIP
portfolioPage.html
Raw
portfolioPage.html
<html lang="en-US">
<head>
<title>Portfolio Page - Marcus Zierke</title>
<link rel="stylesheet" href="style.css" />
<script src="https://use.fontawesome.com/fae79db71d.js"></script>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<!-- Navigation Bar -->
<ul></a>
<li><a href="#about">About</a></li>
<li><a href="#shoes">Z&amp;D Makers</a></li>
<li><a href="#realEstate">Real Estate</a></li>
<li><a href="#sport">Sport</a></li>
<li><a href="#model">Model Agencies</a></li>
<li style="float: right"><a href="#contact">Contact</a></li>
</ul>
<!-- Starting Page -->
<section class="start">
<div class="text-vertical-center">
<h1>Mahoney Management Inc.</h1><hr class="style1" />
<h2>Fields of Operations</h2>
</div>
</section>
<!-- About Page -->
<section class="about" id="about">
<h2>This website dislpays the activities and portfolio of Mahoney Management Inc.</h2>
<p class="lead">Feel free to discover the various fields and activities the company is operating in.</p>
</section>
<!-- Z&D Makers Page -->
<section class="shoes" id="shoes">
<h1><a href="#">Z&amp;D Makers</a></h1><hr class="style1">
<h4>Handemade leather shoes from Chile</h4><br/>
<div class="container">
<div class="row"">
<div class="col-md-3">
<span class="fa-stack fa-4x">
<i class="fa fa-thumbs-up" style="color: white; margin-top: 30px"></i>
</span><br/>
<h4><strong>HANDMADE</strong></h4>
<p>Those boots are made from shoesmakers in Chile with a long tradition in shoe-making.</p>
</div>
<div class="col-md-3">
<span class="fa-stack fa-4x">
<i class="fa fa-leaf" style="color: white; margin-top: 30px"></i>
</span>
<h4><strong>SUSTAINABLE</strong></h4>
<p>We are very conscious that we only use regional products and manufactures.</p>
</div>
<div class="col-md-3">
<span class="fa-stack fa-4x">
<i class="fa fa-money" style="color: white; margin-top: 30px"></i>
</span>
<h4><strong>AFFORTABLE</strong></h4>
<p>We cut out the wholesale so we can offer the shoes for an unbeatable price.</p>
</div>
<div class="col-md-3">
<span class="fa-stack fa-4x">
<i class="fa fa-map-signs" style="color: white; margin-top: 30px"></i>
</span>
<h4><strong>LOCAL</strong></h4>
<p>Sustainable by supporting local businesses abroad.</p>
</div>
</div>
<br/>
<div class="row">
<button class="btn"><a href="http://generation-y-shop.com" target="_blank"><h4 style="color: #696969; text-decoration: none;">Check out our Online Store</h4></a></button>
</div>
</div>
</section>
<!-- Real Estate -->
<section class="realEstate" id="realEstate">
<a href="#">Coming soon</a>
</section>
<!-- Sport Page -->
<section class="sports" id="sport">
<h1><a href="#" style="color: black;">Sport</a></h1><br/>
<div class="container">
<div class="row" style="margin-bottom: 37px;">
<div class="col-md-6 img">
<a href="https://www.youtube.com/watch?v=e7JnxI0G0aI" target="_blank"><img src="https://photos-2.dropbox.com/t/2/AABy866zp8GUVeiaa6_O_aQWlCJfqv6hOd1TkC7oCETP5w/12/15048347/jpeg/32x32/1/_/1/2/bjj.jpg/EPPEmQsYglEgAigC/r1JzgyzNymbSaNYP4gnW-jDqjpLAsum3FIvO_1SxP_0?size=1600x1200&size_mode=3" alt="Brazilian Jiu Jitsu" style="margin-left: 55px;"></a>
<div class="text">
<a href="https://www.youtube.com/watch?v=e7JnxI0G0aI" target="_blank" style="text-decoration: none; color: black;">BRAZILIAN JIU-JITSU</a>
</div>
</div>
<div class="col-md-6 img">
<a href="https://www.youtube.com/watch?v=EIuibfCQCDg" target="_blank"><img src="https://photos-5.dropbox.com/t/2/AABP5g-nWF-T6-esYbUQW-oKPR1zbRDyH53VMXtWZQdEMA/12/15048347/jpeg/32x32/1/_/1/2/oc.jpg/EPPEmQsYglEgAigC/jYEuH0lqb629GXQFSfRsXT-vHY7icUR5UreFPUV_kak?size=1600x1200&size_mode=3" alt="Outrigger Canoe" style="margin-left: -20px;"></a>
<div class="text">
<a href="https://www.youtube.com/watch?v=EIuibfCQCDg" target="_blank" style="text-decoration: none; color: black;">OUTRIGGER CANOE</a>
</div>
</div>
</div>
<div class="row" style="margin-bottom: 37px;">
<div class="col-md-6 img">
<a href="https://www.youtube.com/watch?v=uJETuRcG79w" target="_blank"><img src="https://photos-4.dropbox.com/t/2/AABqEwNaEIVUYX2RwXZS6ILI0D_m0hXzVu5BxyvVoPmJ3A/12/15048347/jpeg/32x32/1/_/1/2/surf2.jpg/EPPEmQsYglEgAigC/kkDkGQ4Ouw1ihMDHOKZN-syhTt34QAAKLQo-KQ0Ispg?size=1600x1200&size_mode=3" alt="Surfing" style="margin-left: 55px;"></a>
<div class="text">
<a href="https://www.youtube.com/watch?v=uJETuRcG79w" target="_blank" style="text-decoration: none; color: black;">SURFING</a>
</div>
</div>
<div class="col-md-6 img">
<a href="https://www.youtube.com/channel/UCVujIERKiKTMUrJU8ImHUrA" target="_blank"><img src="https://photos-4.dropbox.com/t/2/AAA5YrZJ15WipGG67gX2eJgJYFutY8M38gYZwc8LesCNkg/12/15048347/jpeg/32x32/1/_/1/2/freeletics.jpg/EPPEmQsYglEgAigC/6WgwooxEwS5xIEQ2BQWz5t6B_3Z3iMuqUvIwwjJyb8A?size=1600x1200&size_mode=3" alt="Freeletics Training" style="margin-left: -20px;"></a>
<div class="text">
<a href="https://www.youtube.com/channel/UCVujIERKiKTMUrJU8ImHUrA" target="_blank" style="text-decoration: none; color: black;">FREELETICS</a>
</div>
</div>
</div>
</div>
</section>
<!-- Model -->
<section id="model">
<div class="model" style="height: 450px; width: 100%;">
Model Agencies
</div>
<div class="hover-text" style="height: 450px; width: 100%;">
<a href="http://m4models.de/model/74" target="_blank"><p>M4 MODELS</p></a>
<a href="http://www.wilhelmina.com/new-york/models/mainboard/men/834089/marcus-zierke" target="_blank"><p>WILHELMINA</p></a>
<a href="http://www.metropolitanmodels.com/metropolitan/4014-markus-z/" target="_blank"><p>METROPOLITAN</a></p>
<a href="http://www.premiermodelmanagement.com/men/main-board/1951-marcus-zierke/" target="_blank"><p>PREMIER MODELS</p></a>
<a href="http://viewmanagement.com/models/marcus-zierke/" target="_blank"><p>VIEW MANAGEMENT</p></a>
</div>
</section>
<!-- Contact -->
<footer id="contact">
<div class="container">
<div class="row"" style="padding-bottom: 200px; padding-top: 200px; text-align: center;">
<div class="col-md-3 fa-stack fa-4x">
<a href="mailto:marcuszierke@gmail.com" target="_blank"><i class="fa fa-envelope"""></i></a>
</div>
<div class="col-md-3 fa-stack fa-4x">
<a href="https://www.facebook.com/zierkinho" target="_blank"><i class="fa fa-facebook"></i></a>
</div>
<div class="col-md-3 fa-stack fa-4x">
<a href="https://www.instagram.com/marcuszierke" target="_blank"><i class="fa fa-instagram"></i></a>
</div>
<div class="col-md-3 fa-stack fa-4x">
<a href="https://www.linkedin.com/in/marcus-zierke-a0049774/" target="_blank"><i class="fa fa-linkedin-square"></i></a>
</div>
</div>
</div>
<hr class="small" style="color: #696969; width: 400px;" />
<p style="text-align: center;">Copyright &copy; Marcus Zierke 2017</p>
</footer>
</body>
</html>
Raw
style.css
/* Bootstrtap for the Navigation bar
*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li a {
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
float: left;
}
li a:hover:not(.active) {
background-color: #111;
text-decoration: none;
color: white;
}
/*
general bootstrap
*/
.text-vertical-center {
margin-top: -10px;
padding-top: 500px;
padding-bottom: 125px;
text-align: center;
vertical-align: middle;
color: white;
}
.text-vertical-center h1 {
margin: 0;
padding: 0;
font-size: 4.5em;
font-weight: 400;
font-style: bold;
}
.text-vertical-center h2 {
font-size: 2em;
font-weight: 400;
}
hr.style1{
border-top: 3px solid white;
float: center;
width: 700px;
}
hr.style1{
border-top: 2px solid white;
float: center;
width: 400px;
}
body {
font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
}
.fa {
color: #696969;
display: block;
}
/*
starting page with company title
*/
.start {
background: url(https://photos-5.dropbox.com/t/2/AAB_bfC44z0p8gDnk1hnIGBGzfXZEMN8mIo9FWlVDXHYdQ/12/15048347/jpeg/32x32/1/_/1/2/business.jpg/EPPEmQsYglEgAigC/76-qMy83TPWHcKJ8ew82QMvoxRRg1j0-1umP8PsllgU?size=1600x1200&size_mode=3) no-repeat center center scroll;
position: relative;
width: 100%;
height: 100%;
background-size: cover;
}
/*
about
*/
.about {
padding-top: 50px;
padding-bottom: 50px;
text-align: center;
color: black;
font-weight: normal;
font-size: 1em;
}
/*
Z&D Makers
*/
.shoes {
background-color: #696969;
padding-top: 30px;
padding-bottom: 70px;
text-align: center;
color: white;
}
body a {
text-decoration: none;
text-align: center;
color: white;
}
body a .active {
color: white;
text-decoration: none;
}
body a:hover:not(.active) {
text-decoration: none;
color: white;
}
body a:active {
text-decoration: none;
color: white;
}
body a:not(.active) {
text-decoration: none;
color: white;
}
.btn {
background-color: #696969;
border-radius: 0 !important;
color: white;
}
/*
Real Estate
*/
.realEstate {
background: url(https://photos-6.dropbox.com/t/2/AAB4h-pAQ4aMk2BiQgPjVtQgl4SIUUAV-_SpwxZApW9AcA/12/15048347/jpeg/32x32/1/_/1/2/realEstate.jpg/EPPEmQsYglEgAigC/YWhpAqh4Uw77x3I-9-DAit2jKzoD1aAUhc0uS7JtHt0?size=1600x1200&size_mode=3) no-repeat center;
opacity: 0.8;
padding-top: 100px;
padding-bottom: 100px;
text-align: center;
color: white;
font-size: 4em;
font-weight: 600;
}
/*
sport
*/
.sports {
text-align: center;
}
.img {
display: block;
transition: .55s ease;
backface-visibility: hidden;
}
.text {
font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 4em;
font-weight: 700;
text-align: center;
transition: .55s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.img:hover .text {
opacity: 1;
}
.img:hover {
opacity: 0.35;
transform: scale(1.05);
}
/*
model
*/
.model {
background: url(https://photos-3.dropbox.com/t/2/AAAJamVL7af5vkmNel-Nv40AcgAlXYjwHM4nHzkcR7aTyA/12/15048347/jpeg/32x32/1/_/1/2/model2.jpg/EPPEmQsYglEgAigC/ijuGMhCQLQJYjFWdnB8q2F_GUs7LEm9Mbe48ZwKXCVc?size=1600x1200&size_mode=3) center no-repeat;
text-align: right;
padding-right: 70px;
padding-top: 180px;
position: absolute;
margin-right: 70px;
font-weight: 500;
font-size: 4em;
color: white;
}
.hover-text {
background: rgba(0,0,0,0.8);
text-align: center;;
vertical-align: middle;
color: white;
font-size: 4em;
font-weight: 500;
width: 100%;
opacity: 0;
position: relative;
z-index: 1;
}
.hover-text:hover {
opacity: 1;
transition: 0.75s ease;
}
/*
Footer
*/
.footer {
background-color: white;
padding-top: 250px;
padding-bottom: 250px;
text-align: center;
vertical-align: middle;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment