prototypal project cards

This commit is contained in:
Lorin Werthen 2016-07-26 22:48:59 +02:00
parent 92828d9199
commit 73f6279f2f
No known key found for this signature in database
GPG key ID: F11FFC921E0E08E0
4 changed files with 52 additions and 4 deletions

View file

@ -214,3 +214,33 @@ a, a:hover, a:visited, a:link, a:active {
width: 100%; width: 100%;
bottom: 0; bottom: 0;
} }
.project-card {
background-color: #2D5CB4;
color: white;
height: 300px;
margin-top: 5px;
margin-bottom: 5px;
display: flex;
justify-content: space-between;
.project-title {
background: #1e3c72; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #1e3c72 , #2a5298); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #1e3c72 , #2a5298); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
font-size: 4em;
padding: 20px;
flex-grow: 1;
}
.project-description {
background-color: #1e3c72;
text-align: right;
padding: 20px;
width: 700px;
}
}

15
content/projects.erb Normal file
View file

@ -0,0 +1,15 @@
<% 5.times do %>
<div class="project-card">
<div class="project-title">
Hydra
</div>
<div class="project-description">
<p>
Dit is een heel cool project enal
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus facere, ut in magnam harum at, aliquam nostrum totam tempore distinctio explicabo natus quis pariatur quos maiores dignissimos inventore! Ad amet harum ipsum laudantium modi ipsa dolores, omnis impedit nostrum expedita sed molestias similique veritatis, quo explicabo odit minus cum quibusdam accusamus beatae quam vitae cumque ipsam eius. Alias ipsam blanditiis deleniti nam magni veritatis, quas quae. Quam quia at tempora repellat optio aliquam, quasi deserunt esse distinctio voluptate harum hic sed vel blanditiis nam modi fuga, totam neque vero! Sunt, ipsum sit! Libero quam temporibus deserunt, quo itaque perspiciatis earum.
</p>
</div>
</div>
<% end %>

View file

@ -1,6 +1,6 @@
<div class="pure-g"> <div class="pure-g">
<div class="pure-u-xl-1-5 pure-u-lg-1-6 pure-u-md-1-8 pure-u-sm-1-12 pure-u-1-24"></div> <div class="pure-u-1-24"></div>
<div id="container" class="pure-u-xl-3-5 pure-u-lg-2-3 pure-u-md-3-4 pure-u-sm-5-6 pure-u-11-12"> <div id="container" class="pure-u-11-12">
<header> <header>
<div class="header-top"> <div class="header-top">
<a href="/"> <a href="/">

View file

@ -5,10 +5,13 @@
<a href="/archives"> <a href="/archives">
Archief Archief
</a> </a>
<a href="/search"> <a href="/projects">
Zoeken Projecten
</a> </a>
<a href="/cammie"> <a href="/cammie">
Cammie Cammie
</a> </a>
<a href="/search">
Zoeken
</a>
</nav> </nav>