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'); ?> <?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> <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"> <div class="home-about-textbox parallax--box">
@ -16,5 +16,5 @@
<a href="contacts" class="button button-dark">Order</a> <a href="contacts" class="button button-dark">Order</a>
</div> </div>
</section> --> </section> -->
</div>
<?php include('footer.tpl'); ?> <?php include('footer.tpl'); ?>

10
collections.php
View file

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

33
css/projects.css
View file

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