Skip to content

Commit 37f0113

Browse files
vivian-hafenervivian-hafener
committed
Started bringing changes from old re-write to dev
1 parent 50168eb commit 37f0113

File tree

4 files changed

+312
-61
lines changed

4 files changed

+312
-61
lines changed

‎_sass/_project_images.scss‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
.content {
2+
position: relative;
3+
width: 100%;
4+
margin: auto;
5+
overflow: hidden;
6+
}
7+
8+
.content-overlay {
9+
background: rgba(0,0,0,0.7);
10+
position: absolute;
11+
height: 100%;
12+
width: 100%;
13+
left: 0;
14+
top: 0;
15+
bottom: 0;
16+
right: 0;
17+
opacity: 0;
18+
-webkit-transition: all 0.4s ease-in-out 0s;
19+
-moz-transition: all 0.4s ease-in-out 0s;
20+
transition: all 0.4s ease-in-out 0s;
21+
}
22+
23+
.content:hover .content-overlay{
24+
opacity: 1;
25+
}
26+
27+
.content-image{
28+
width: 100%;
29+
}
30+
31+
.content-background {
32+
background: rgba(0, 0, 0, 0.45);
33+
}
34+
35+
.content-details {
36+
position: absolute;
37+
text-align: center;
38+
padding-left: 1em;
39+
padding-right: 1em;
40+
width: 100%;
41+
top: 50%;
42+
left: 50%;
43+
opacity: 0;
44+
-webkit-transform: translate(-50%, -50%);
45+
-moz-transform: translate(-50%, -50%);
46+
transform: translate(-50%, -50%);
47+
-webkit-transition: all 0.3s ease-in-out 0s;
48+
-moz-transition: all 0.3s ease-in-out 0s;
49+
transition: all 0.3s ease-in-out 0s;
50+
}
51+
52+
.content:hover .content-details{
53+
top: 50%;
54+
left: 50%;
55+
opacity: 1;
56+
}
57+
58+
.content-details h3{
59+
color: #fff;
60+
font-weight: 500;
61+
letter-spacing: 0.15em;
62+
margin-bottom: 0.5rem;
63+
padding: auto;
64+
text-transform: uppercase;
65+
}
66+
67+
.content-details p{
68+
color: #fff;
69+
font-size: 0.8em;
70+
}
71+
72+
.fadeIn-bottom{
73+
top: 80%;
74+
}
75+
76+
@media screen and (max-width: 700px) {
77+
.content-details{
78+
top: 50%;
79+
left: 50%;
80+
opacity: 1;
81+
}
82+
.content-overlay{
83+
opacity: 1;
84+
}
85+
}
86+

‎_sass/_triple_image.scss‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
$card-size: 300px;
2+
$p-m-default: 20px;
3+
4+
$black: #111;
5+
$white: #FFF;
6+
7+
$csh-pink: #b0197e;
8+
$csh-blue: #404b69;
9+
$gray: #f4f4f6;
10+
11+
// Easing Properties
12+
$easeOutQuad: cubic-bezier(0.250, 0.460, 0.450, 0.940);
13+
14+
// PX to EM
15+
$browser-context: 16;
16+
17+
@function em($pixels, $context: $browser-context) {
18+
@if (unitless($pixels)) {
19+
$pixels: $pixels * 1px;
20+
}
21+
22+
@if (unitless($context)) {
23+
$context: $context * 1px;
24+
}
25+
26+
@return $pixels / $context * 1em;
27+
}
28+
29+
// Transition Mixin
30+
@mixin transition($transition...) {
31+
-moz-transition: $transition;
32+
-o-transition: $transition;
33+
-webkit-transition: $transition;
34+
transition: $transition;
35+
}
36+
37+
38+
.triple_a {
39+
@include transition(all 300ms $easeOutQuad);
40+
&:hover {
41+
@include transition(all 300ms $easeOutQuad);
42+
}
43+
}
44+
45+
#wrapper {
46+
position: relative;
47+
display: flex;
48+
height: 100vh;
49+
align-items: center;
50+
justify-content: center;
51+
}
52+
53+
.card {
54+
background-image: linear-gradient(0deg, $csh-blue 0%, $csh-pink 100%);
55+
width: $card-size;
56+
height: $card-size;
57+
margin: $p-m-default;
58+
position: relative;
59+
overflow: hidden;
60+
}
61+
62+
.card-image {
63+
max-width: 100%;
64+
width: 100%;
65+
height: $card-size;
66+
object-fit: cover;
67+
transform: translate(0,0);
68+
@include transition(all 400ms $easeOutQuad);
69+
}
70+
71+
.card-meta {
72+
font-size: em(11);
73+
text-transform: uppercase;
74+
letter-spacing: 1px;
75+
&:before {
76+
content: '';
77+
height: 1px;
78+
width: 30px;
79+
background-color: #fff;
80+
position: relative;
81+
display: block;
82+
margin-bottom: 10px;
83+
backface-visibility: hidden;
84+
opacity: 0;
85+
transform: translate(0,-10px);
86+
@include transition(all 200ms $easeOutQuad);
87+
}
88+
}
89+
90+
.card-text {
91+
color: #FFF;
92+
// This next line controls the background opacity
93+
background-color: rgba($black, .40);
94+
position: absolute;
95+
padding: $p-m-default;
96+
z-index: 10;
97+
width:100%;
98+
height: 100%;
99+
display: flex;
100+
flex-wrap: wrap;
101+
align-content: flex-end;
102+
@include transition(all 200ms $easeOutQuad);
103+
}
104+
105+
.card-title {
106+
margin: 8px 0;
107+
font-weight: 300;
108+
font-size: em(30);
109+
}
110+
111+
.card a {
112+
&:hover {
113+
.card-text {
114+
background-color: rgba($black, .86);
115+
}
116+
.card-meta {
117+
&:before {
118+
transform: translate(0,0);
119+
opacity: 1;
120+
@include transition(all 200ms $easeOutQuad);
121+
}
122+
}
123+
124+
.card-image {
125+
transform: translate(20px,0);
126+
@include transition(all 400ms $easeOutQuad);
127+
}
128+
}
129+
}
130+

‎assets/css/main.scss‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,19 @@ img.rounded,
4141
box-shadow: 0 2px 15px darken($gray, 20%);
4242
}
4343

44+
.container {
45+
display: flex;
46+
flex-direction: row;
47+
flex-wrap: wrap;
48+
justify-content: space-evenly;
49+
align-items: flex-start;
50+
}
51+
52+
.quad_image {
53+
display:grid;
54+
grid-template-columns: 25% 25% 25% 25%;
55+
}
56+
4457
.card-header {
4558
white-space: nowrap;
4659
overflow: hidden;
@@ -79,6 +92,12 @@ a.btn {
7992
margin-bottom: 1em;
8093
}
8194

95+
@media screen and (max-width: 600px) {
96+
.quad_image {
97+
display: block;
98+
}
99+
}
100+
82101
@import "typography";
83102
@import "nav";
84103
@import "slider";
@@ -92,3 +111,5 @@ a.btn {
92111
@import "insights";
93112
@import "footer";
94113
@import "hackathon";
114+
@import "triple_image";
115+
@import "project_images.scss";

0 commit comments

Comments
 (0)