Skip to content

Instantly share code, notes, and snippets.

@anita-owens

anita-owens/Portfolio project page.markdown

Created October 7, 2015 16:16
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save anita-owens/915bd96a41713d61dcb1 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save anita-owens/915bd96a41713d61dcb1 to your computer and use it in GitHub Desktop.
Download ZIP
Portfolio project page
Raw
index.html
<!--Pattern HTML-->
<div class="cover" style="background-image: url('http://placekitten.com/600/400');">
<div class="cover-content">
<h3 class="title">
The kitten
</h3>
<div class="subtitle">Here is one cute kitten</div>
</div>
</div>
<div class="post">
<section class="post-content">
<p>This is a very cute kitten. And this is some lorem ipsum text: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h2>The title</h2>
<img src="http://placekitten.com/720/300"/>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<!-- Iframe not working on Codepen for some reason
<div class="video-wrapper">
<iframe src="//player.vimeo.com/video/1053647?title=0&amp;byline=0&amp;portrait=0" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>
</div> -->
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<a href="">The link</a>
</section>
</div>
<footer>
<ul>
<li>
© The Author 2014
</li>
//
<li>
<a href="https://twitter.com/damianogui">Twitter</a>
</li>
//
<li>
<a href="">Blog</a>
</li>
//
<li>
<a href="">Contact</a>
</li>
</ul>
</footer>
Raw
Portfolio project page.markdown

Portfolio project page

Trying to make a minimal portfolio project page with an image cover à la Medium.com (of course it's about a kitten). No Javascript.

A Pen by Damiano Gui on CodePen.

License.

Raw
style.css
/* Many thanks to Jon Q for the layout basics http://codepen.io/ItsJonQ/pen/jzaKH*/
html, body {
margin:0;
}
/*-------- Typography ------*/
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 200;
color: #0000;
}
.title {
font-size: 300%;
font-weight: 100;
text-align: left;
}
.subtitle {
font-size: 150%;
}
p {
text-align: left;
}
a {
color: #000;
text-decoration: underline;
outline: none;
}
a:hover {
color: #fff;
background-color: #A2A2A2;
}
/*-------- Elements style ------*/
img {
width:100%;
max-width: 720px;
}
hr {
background-color: #A2A2A2;
border: 0;
height: 1px;
}
/* CSS Trick for responsive iframe (http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php) */
.video-wrapper {
position: relative;
padding-bottom: 56%; /* 16:9 */
padding-top: 10px;
height: 0;
}
.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/*-------- Layout ------*/
.cover {
color: #fff;
min-height: 20em;
background-color: #000;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
position: relative;
}
.cover .cover-content {
position: absolute;
left: 0;
right: 0;
bottom: 0;
background: -webkit-linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);
background: -moz-linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);
background: -o-linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);
background: linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);;;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 );
}
.cover-content, .post-content {
padding: 0 1.5em 0.5em 1.5em;
}
.cover-content .title, .subtitle, .post-content {
max-width: 720px;
margin: auto;
}
footer {
color: #A2A2A2;
position: absolute;
right: 0em;
top: -1em;
}
footer ul {
list-style: none;
padding: 0.5em;
background: rgb(0, 0, 0); /* The Fallback */
background: rgba(0, 0, 0, 0.7);
}
footer ul li {
display: inline-block;
font-size: 70%;
}
footer ul li a {
color: #fff;
}
footer ul li a:hover {
color: #2D2D2D;
background-color: #fff;
}
@media screen and (max-width: 35em) {
footer {
width: 100%;
text-align: center;
position: fixed;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment