From 6d6dfc5dce4f497e7073b10c5ca2099d7f007853 Mon Sep 17 00:00:00 2001 From: Chris Date: Thu, 29 Oct 2020 01:26:25 +0100 Subject: [PATCH] update css files (slide in image overlay) --- css/projects.css | 83 ++++++++++++++++++++++++++++++++++++++++++++++++ css/styles.css | 4 ++- 2 files changed, 86 insertions(+), 1 deletion(-) create mode 100644 css/projects.css diff --git a/css/projects.css b/css/projects.css new file mode 100644 index 0000000..4574734 --- /dev/null +++ b/css/projects.css @@ -0,0 +1,83 @@ + +div.collection_container { + display: flex; + flex-wrap: wrap; +} + +div.collection { + background-color: #1f1f1f; + border: #444 2px solid; + margin: 4px; +} + + +@media only screen and (min-width: 1000px) { + div.collection { + width: calc(33.3333% - 8px); + } +} +@media only screen and (min-width: 600px) and (max-width: 999px) { + div.collection { + width: calc(50% - 8px); + } +} +@media only screen and (max-width: 599px) { + div.collection { + width: calc(100% - 8px); + } +} + +div.collection h1 { + margin: 10px; + text-align: center; +} + +div.collection div.col-desc { + padding: 10px; + font-family: sans-serif; /* FIXME: find suitable font */ + text-align: justify; +} + +section.cta h2 { + color: #1f1f1f; +} + +/* Slide in stuff */ + +.col-img-container { + position: relative; +} + +.col-image { + display: block; + width: 100%; + height: auto; +} + +.col-img-desc { + position: absolute; + bottom: 0; + left: 0; + right: 0; + background-color: rgba(51, 51, 51, 0.4); + overflow: hidden; + width: 100%; + height: 0; + transition: .5s ease; +} + +.col-img-container:hover .col-img-desc { + height: 50%; +} + +.col-img-desc div { + color: white; + font-size: 20px; + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + text-align: center; +} \ No newline at end of file diff --git a/css/styles.css b/css/styles.css index f0d1b3a..e192e0a 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1,5 +1,6 @@ @import url("https://fonts.googleapis.com/css?family=Raleway:300,400,700,900"); @import url("stylesheet.css"); +@import url("projects.css"); * { box-sizing: border-box; @@ -11,6 +12,7 @@ body { font-family: "dominican_small_capsregular"; text-align: center; background-color: #000; + color: #f9f9ed; } img { @@ -353,7 +355,7 @@ header { =================== */ .home-hero { - background-image: url(../img/hero-bg.jpg); + background-image: url(/images/backgroud_img/hero-bg.jpg); background-size: cover; background-position: center; padding: 10em 0;