static #2
3 changed files with 29 additions and 86 deletions
|
@ -8,18 +8,19 @@
|
||||||
$html = '
|
$html = '
|
||||||
<div class="collection">
|
<div class="collection">
|
||||||
<h1>' . $c["name"] . '</h1>
|
<h1>' . $c["name"] . '</h1>
|
||||||
|
<div class="flexbox-col-img">
|
||||||
<div class="col-img-container">
|
<div class="col-img-container">
|
||||||
<img class="col-image" src="projects_data/img/' . $c['preview_image_url'] . '" alt="example image for ' . $c['name'] .'">
|
<img class="col-image" src="projects_data/img/' . $c['preview_image_url'] . '" alt="example image for ' . $c['name'] .'">
|
||||||
<div class="col-img-desc">
|
<div class="col-img-desc">
|
||||||
<div>
|
<div>
|
||||||
<p>' . $c['name'] . '</p>
|
<p>' . $c['name'] . '</p>
|
||||||
<a href="show_collection.php?id=' . $index .'" class="button button-accent button-small">Details</a>
|
<a href="show_collection.php?id=' . $index .'" class="button button-accent button-small">Details</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="col-desc">
|
||||||
<div class="col-desc">
|
' . $c['collection_description'] . '
|
||||||
' . $c['collection_description'] . '
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
';
|
';
|
||||||
|
|
|
@ -54,8 +54,6 @@ div.collection_container {
|
||||||
}
|
}
|
||||||
|
|
||||||
div.collection {
|
div.collection {
|
||||||
background-color: #1f1f1f;
|
|
||||||
border: #444 2px solid;
|
|
||||||
margin: 4px;
|
margin: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -82,6 +80,7 @@ div.collection h1 {
|
||||||
}
|
}
|
||||||
|
|
||||||
div.collection div.col-desc {
|
div.collection div.col-desc {
|
||||||
|
display: none;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
text-align: justify;
|
text-align: justify;
|
||||||
}
|
}
|
||||||
|
@ -92,14 +91,23 @@ section.cta h2 {
|
||||||
|
|
||||||
/* Slide in stuff */
|
/* Slide in stuff */
|
||||||
|
|
||||||
|
.flexbox-col-img {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
.col-img-container {
|
.col-img-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
width: 350px;
|
||||||
|
height: 350px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.col-image {
|
.col-image {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 350px;
|
||||||
height: auto;
|
height: 350px;
|
||||||
|
border-radius: 50%;
|
||||||
|
box-shadow: 0px 0px 15px 4px #9c8e8e;
|
||||||
}
|
}
|
||||||
|
|
||||||
.col-img-desc {
|
.col-img-desc {
|
||||||
|
@ -109,13 +117,15 @@ section.cta h2 {
|
||||||
right: 0;
|
right: 0;
|
||||||
background-color: rgba(51, 51, 51, 0.4);
|
background-color: rgba(51, 51, 51, 0.4);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
width: 100%;
|
width: 350px;
|
||||||
height: 0;
|
height: 350px;
|
||||||
|
opacity: 0;
|
||||||
|
border-radius: 50%;
|
||||||
transition: .5s ease;
|
transition: .5s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.col-img-container:hover .col-img-desc {
|
.col-img-container:hover .col-img-desc {
|
||||||
height: 50%;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.col-img-desc div {
|
.col-img-desc div {
|
||||||
|
|
|
@ -50,74 +50,6 @@ video {
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Column system
|
|
||||||
=================== */
|
|
||||||
|
|
||||||
[class^="col-"] {
|
|
||||||
width: 100%;
|
|
||||||
margin-top: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
[class^="col-"]:first-child {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.col-1 {
|
|
||||||
width: 33.333334%;
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 40rem) {
|
|
||||||
[class^="col-"] {
|
|
||||||
float: left;
|
|
||||||
padding: 0 0.5em;
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
[class^="col-"]:first-child {
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
[class^="col-"]:last-child {
|
|
||||||
padding-right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.col-3 {
|
|
||||||
width: 50%;
|
|
||||||
color: #f9f9ed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.col-1 {
|
|
||||||
width: 16.6666%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.column {
|
|
||||||
float: left;
|
|
||||||
width: 33.33%;
|
|
||||||
display: none; /* Hide all elements by default */
|
|
||||||
}
|
|
||||||
|
|
||||||
.row {
|
|
||||||
margin: 10px -16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.row,
|
|
||||||
.row > .column {
|
|
||||||
padding: 0.8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.row:after {
|
|
||||||
content: "";
|
|
||||||
display: table;
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
|
|
||||||
.show {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* typography
|
/* typography
|
||||||
=================== */
|
=================== */
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue