bsod/brc
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

update collection page design

Browse source
This commit is contained in:
bsod 2020-10-30 22:27:38 +01:00
parent c69fe74067
commit 0f3d3db46e
3 changed files with 26 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
about.php
View file

@ -1,5 +1,5 @@
<?php include('header.tpl'); ?>
<div id="content_margin">
<video autoplay playsinline nofullscreen nodownload autoplay loop mute style="pointer-events: none" src="video/Heart.m4v" width="80%" height="auto" ></video>
<div class="home-about-textbox parallax--box">
@ -16,5 +16,5 @@
<a href="contacts" class="button button-dark">Order</a>
</div>
</section> -->
</div>
<?php include('footer.tpl'); ?>

10
collections.php
View file

@ -1,5 +1,5 @@
<?php include('header.tpl'); ?>
<div id="project_margin">
<div id="content_padding">
<?php include('projects_data/project_items.php'); ?>
<div class="collection_container">
<?php
@ -10,12 +10,8 @@
<div class="flexbox-col-img">
<div class="col-img-container">
<img class="col-image" src="projects_data/img/' . $c['preview_image_url'] . '" alt="example image for ' . $c['name'] .'">
<div class="col-img-desc">
<div>
<p>' . $c['name'] . '</p>
<a href="show_collection.php?id=' . $index .'" class="button button-accent button-small">Details</a>
</div>
</div>
<a class="col-img-desc" href="#">
</a>
</div>
<div class="col-desc">
' . $c['collection_description'] . '

37
css/projects.css
View file

@ -114,15 +114,13 @@ h1, h2, h3, h4, h5 {
header {
background: rgba(0,0,0,0.4);
font-family: 'IM Fell English SC';
margin: 0px;
margin: 0px;
border-bottom: 2px solid #f9f9ed;
}
@media only screen and (min-width: 1000px) {
div#project_margin {
margin-top: 250px;
}
video {
margin-top: 230px;
div#content_padding {
padding-top: 120px;
}
}
@ -178,12 +176,18 @@ div.collection_container {
div.collection {
margin: 4px;
margin-bottom: 30px;
margin-bottom: 50px;
}
div.collection h1 {
margin: 10px;
margin-top: 40px;
margin-bottom: 30px;
margin-left: auto;
margin-right: auto;
text-align: center;
display: block;
width: 350px;
font-size: 36pt;
}
div.collection div.col-desc {
@ -202,27 +206,28 @@ div.collection div.col-desc {
.col-img-container {
position: relative;
width: 350px;
height: 350px;
width: 220px;
height: 220px;
}
.col-image {
display: block;
width: 350px;
height: 350px;
width: 220px;
height: 220px;
border-radius: 50%;
border: 3px solid #f9f9ed;
/*border: 2px solid #f9f9ed; */
}
.col-img-desc {
display: block;
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(51, 51, 51, 0.4);
overflow: hidden;
width: 350px;
height: 350px;
width: 220px;
height: 220px;
opacity: 0;
border-radius: 50%;
transition: .5s ease;