tynanpurdy.com
[READ-ONLY] Mirror of https://github.com/tynanpurdy/bootstrap. Learning project for custom web and eventual portfolio page
trying slant
author
tynanpurdy
date
(Jul 25, 2019, 11:36 AM -0400)
commit
6f90d60c
6f90d60c56c2d7441628f643a0fe51893426f3c8
parent
19ac64dc
19ac64dcdc7ed8b0bf0411d23b222ad716deaa4d
+43
-10
+1
bootstrap/css/bootstrap.css
+1
bootstrap/css/bootstrap.css
+5
imgs/slant.svg
+5
imgs/slant.svg
···
1
+
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
2
+
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
3
+
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
4
+
<path d="M0,800L1280,0L0,0L0,800Z" style="fill:white;"/>
5
+
</svg>
+4
-2
index.css
+4
-2
index.css
···
4
4
background: var(--light);
5
5
}
6
6
7
-
.header {
7
+
.hero {
8
+
content: "";
8
9
background-attachment: fixed;
9
10
background-repeat: no-repeat;
10
11
background-size: cover;
11
12
background-position: center;
12
13
position: relative;
13
-
height: 100%;
14
+
height: 90%;
15
+
background: url(./imgs/slant.svg);
14
16
}
15
17
16
18
.overlay {
+3
-5
index.html
+3
-5
index.html
···
32
32
</div>
33
33
</nav>
34
34
35
-
<header class="parallax-window page-header header container-fluid"
35
+
<header class="parallax-window page-header hero container-fluid slanted"
36
36
data-parallax="scroll" data-image-src="imgs/header-background.jpg">
37
37
<div class="overlay"></div>
38
38
<div class="description">
···
42
42
</div>
43
43
</header>
44
44
45
+
<section class="">
45
46
<div class="container features">
46
47
<div class="row">
47
48
<div class="col-lg-4 col-md-4 col-sm-12">
···
69
70
</div>
70
71
</div>
71
72
</div>
72
-
73
-
<div>
74
-
75
-
</div>
73
+
</section>
76
74
77
75
<footer class="page-footer">
78
76
<div class="container">
+30
-3
style.css
+30
-3
style.css
···
6
6
7
7
body {
8
8
font-family: 'Fira Sans';
9
-
color: #fff;
10
-
background: var(--primary);
9
+
/* color: #fff;
10
+
background: var(--primary); */
11
11
}
12
12
13
13
/* text styles */
···
32
32
33
33
.dark {
34
34
background: var(--primary);
35
-
back
36
35
background-size: cover;
37
36
color: #fff;
37
+
}
38
+
39
+
.magenta {
40
+
background: var(--secondary);
41
+
color: #fff;
42
+
}
43
+
44
+
.blue {
45
+
background: var(--tertiary);
46
+
color: #fff;
47
+
}
48
+
49
+
.slanted {
50
+
position: relative;
51
+
z-index: 1;
52
+
}
53
+
.slanted:after {
54
+
background: inherit;
55
+
bottom: 0;
56
+
content: '';
57
+
display: block;
58
+
height: 50%;
59
+
left: 0;
60
+
position: absolute;
61
+
right: 0;
62
+
transform: skewY(-1.5deg);
63
+
transform-origin: 100%;
64
+
z-index: -1;
38
65
}
39
66
40
67
/* navigation bar */