hrtcup/src/assets/css/4-pages/_page-home.sass at master · theskillwithin/hrtcup · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
body
	overflow-x: hidden

.page-home
	text-align: center
	img
		max-width: 100%
	article
		margin-bottom: 50px

	section#howHeartcupWorks
		figure
			margin: 10px
			svg
				+size(60px)
				fill: lighten(grey, 15%)
				max-width: 100px

	section#trendingProjects
		article
			//height: 355px
			background-color: white
			max-width: 301px
			//margin: 0px 10px
			.bottom
				padding: 11px 0
			.heart
				height: 33px
				width: 37px
			.stats
				width: 193px
				p
					margin-bottom: 0
					&:first-child
						font-weight: bold
	section#ourCommunity
		figure
			height: 370px
			position: relative
			overflow-y: hidden
			background:
				size: cover
				origin: center center
			h4, p
				color: white
				text-align: left
				padding: 0 20px
				margin-bottom: 5px
			h4
				font-size: 22px
				margin-top: 35px
			p
				font-size: 16px
				margin-bottom: 24px
			&:hover .angled-bottom
				+animation(angled 200ms ease-in, angled 300ms ease)
				top: 51px
				height: auto
				max-height: 420px
			.angled-bottom
				+transition(all 300ms ease)
				background-color: rgba(110, 110, 110, .8)
				position: absolute
				bottom: 0
				right: 0
				left: 0
				height: auto
				max-height: 150px
				clip-path: polygon(0 0, 100% 15%, 100% 100%, 0% 100%)
				overflow-y: hidden
				//cubic-bezier(0.3, 0.09, 0.41, 1.13)
				@keyframes angled
					0%
						top: 200px
					12%
						top: 220px
					95%
						top: 59px
					98%
						top: 48px
					100%
						top: 51px
		.create
			background-image: url('../img/create.png')
		.projects
			background-image: url('../img/projects.png')
			.angled-bottom
				background-color: rgba(22, 137, 196, .8)
		.business
			background-image: url('../img/business.png')
		.charaties
			background-image: url('../img/charities.png')
			.angled-bottom
				background-color: rgba(230, 18, 47, .8)