Difference between revisions of "Team:Rotterdam HR/Notebook"

Line 10: Line 10:
 
}
 
}
 
 
−
.under-construction {
+
.cards {
−
margin: 30px auto;
+
−
width: 100%;
+
 
display: flex;
 
display: flex;
−
flex-direction: column;
+
flex-wrap: wrap;
−
align-items: center;
+
justify-content: center;
 +
width: 80%;
 +
margin: 20px auto;
 +
}
 +
 
 +
.card {
 +
width: 180px;
 +
height: 180px;
 +
margin: 10px;
 +
position: relative;
 +
text-align: center;
 +
box-shadow: 2px 2px 10px rgba(0,0,0,0.25);
 +
transition: 200ms;
 +
border-radius: 3px;
 +
color: white;
 +
text-shadow: 2px 2px rgba(0, 0, 0, 0.1);
 +
}
 +
 
 +
.hardware-card {
 +
background: var(--hardware-color);
 +
}
 +
 
 +
.wetlab-card {
 +
background: var(--wetlab-color);
 +
}
 +
 
 +
.card::before, .card::after {
 +
content: '';
 +
position: absolute;
 +
top: 5px;
 +
left: 5px;
 +
right: 5px;
 +
bottom: 5px;
 +
transition: transform 400ms;
 +
z-index: 0;
 +
}
 +
 
 +
.card::before {
 +
border-top: rgba(255,255,255,0.5) solid 1px;
 +
border-bottom: rgba(255,255,255,0.5) solid 1px;
 +
transform: scale(0, 1);
 +
}
 +
 
 +
.card::after {
 +
border-left: rgba(255,255,255,0.5) solid 1px;
 +
border-right: rgba(255,255,255,0.5) solid 1px;
 +
transform: scale(1, 0);
 +
}
 +
 
 +
.card .number {
 +
position: absolute;
 +
top: 0;
 +
left: 0;
 +
width: 30px;
 +
height: 45px;
 +
padding: 2px;
 +
background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(255, 255, 255, 0) 50%);
 +
text-align: left;
 +
}
 +
 
 +
.card .title {
 +
margin: 0;
 +
padding: 5px;
 +
background: rgba(255, 255, 255, 0.1)
 +
}
 +
 
 +
.card .more-info {
 +
transform: scale(0,0);
 +
position: absolute;
 +
bottom: 0;
 +
left: 0;
 +
right: 0;
 +
margin: 10px;
 +
padding: 5px;
 +
border-radius: 2px;
 +
box-shadow: 2px 2px 10px rgba(0,0,0,0.20);
 +
text-transform: uppercase;
 +
text-decoration: none;
 +
color: white;
 +
background: rgba(255, 255, 255, 0.5);
 +
transition: transform 400ms;
 +
z-index: 1;
 +
}
 +
 
 +
.card .more-info:after {
 +
content: '';
 +
display: block;
 +
width: 70%;
 +
height: 1px;
 +
margin: 0 auto;
 +
background: white;
 +
transform: scale(0, 0);
 +
transform-origin: left;
 +
transition: transform 250ms;
 +
}
 +
 
 +
.card svg {
 +
position: absolute;
 +
top: 50px;
 +
left: 50px;
 +
right: 50px;
 +
bottom: 50px;
 +
}
 +
 
 +
.date {
 +
position: absolute;
 +
bottom: -10px;
 +
left: 0;
 +
right: 0;
 +
margin-top: 5px;
 +
transform: scale(1, 1);
 +
transition: transform 400ms;
 +
}
 +
 
 +
.card:hover .date {
 +
transform: scale(0,0);
 +
transition: transform 200ms;
 +
}
 +
 
 +
.card:hover::before {
 +
transform: scale(1, 1);
 +
}
 +
 
 +
.card:hover::after {
 +
transform: scale(1, 1);
 +
}
 +
 
 +
.card:hover .title::after {
 +
transform: scale(1, 0.5);
 +
}
 +
 
 +
.card:hover .more-info {
 +
transform: scale(1, 1);
 +
transition: transform 400ms 200ms;
 +
}
 +
 
 +
.card .more-info:hover {
 +
background: rgba(255, 255, 255, 0.3);
 +
}
 +
 
 +
.card .more-info:hover::after {
 +
transform: scale(1, 1);
 +
}
 +
 
 +
.wetlab-filter:checked ~ .cards .hardware-card {
 +
display: none;
 +
}
 +
 
 +
.hardware-filter:checked ~ .cards .wetlab-card {
 +
display: none;
 
}
 
}
 
</style>
 
</style>
Line 26: Line 173:
 
<!-- ------ CONTENT START ------ -->
 
<!-- ------ CONTENT START ------ -->
  
−
<div class="under-construction">
+
<div class="cards">
−
<h1>Notebook</h1>
+
<div class="card wetlab-card">
−
<p>This page has no content yet.</p>
+
<h1 class="title">Title</h1>
 +
<svg style="width:80px;height:80px" viewBox="0 0 24 24">
 +
<path fill="currentColor" d="M9.46,6.28L11.05,9C8.47,9.26 6.5,11.41 6.5,14A5,5 0 0,0 11.5,19C13.55,19 15.31,17.77 16.08,16H13.5V14H21.5V16H19.25C18.84,17.57 17.97,18.96 16.79,20H19.5V22H3.5V20H6.21C4.55,18.53 3.5,16.39 3.5,14C3.5,10.37 5.96,7.2 9.46,6.28M12.74,2.07L13.5,3.37L14.36,2.87L17.86,8.93L14.39,10.93L10.89,4.87L11.76,4.37L11,3.07L12.74,2.07Z" />
 +
</svg>
 +
<a class="more-info" href="#">Show more</a>
 +
<h2 class="date">19/07/2018</h2>
 +
</div>
 
</div>
 
</div>
  

Revision as of 12:20, 19 July 2018

Title

Show more

19/07/2018