prototypal project cards
This commit is contained in:
parent
92828d9199
commit
73f6279f2f
4 changed files with 52 additions and 4 deletions
|
@ -214,3 +214,33 @@ a, a:hover, a:visited, a:link, a:active {
|
|||
width: 100%;
|
||||
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
15
content/projects.erb
Normal 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 %>
|
|
@ -1,6 +1,6 @@
|
|||
<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 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 class="pure-u-1-24"></div>
|
||||
<div id="container" class="pure-u-11-12">
|
||||
<header>
|
||||
<div class="header-top">
|
||||
<a href="/">
|
||||
|
|
|
@ -5,10 +5,13 @@
|
|||
<a href="/archives">
|
||||
Archief
|
||||
</a>
|
||||
<a href="/search">
|
||||
Zoeken
|
||||
<a href="/projects">
|
||||
Projecten
|
||||
</a>
|
||||
<a href="/cammie">
|
||||
Cammie
|
||||
</a>
|
||||
<a href="/search">
|
||||
Zoeken
|
||||
</a>
|
||||
</nav>
|
||||
|
|
Loading…
Reference in a new issue