1+ body {
2+ font-family : 'Open Sans' , sans-serif;
3+ margin : 0 ;
4+
5+
6+ }
7+
8+ .page {
9+ display : flex;
10+ flex-direction : column;
11+ background-image : url (images/gears-1236578_1920.jpg);
12+ background-size : cover;
13+ min-height : 100vh ;
14+
15+ }
16+ header {
17+ width : 100% ;
18+ padding : 30px 20px 70px ;
19+ box-sizing : border-box;
20+ background-color : # 1b1b33 ;
21+ clip-path : polygon (
22+ 0 0 ,
23+ 100% 0% ,
24+ 100% calc (100% - 6vw ),
25+ 0% 100%
26+ );
27+ margin-bottom : -6vw ;
28+ }
29+ main {
30+ flex-grow : 2 ;
31+ display : flex;
32+ flex-direction : column;
33+ clip-path : polygon (
34+ 6w 0 ,
35+ 100% 0 ,
36+ 100% 100% ,
37+ 0% 100%
38+ );
39+ }
40+ .product1 {
41+ background : linear-gradient (to right, rgba (3 , 119 , 148 , 0.9 ), rgba (87 , 69 , 147 , 0.9 ));
42+ flex-grow : 1 ;
43+ padding-top : 6vw ;
44+ clip-path : polygon (
45+ 0 6vw ,
46+ 100% 0% ,
47+ 100% 100% ,
48+ 0% calc (100% - 6vw )
49+ );
50+ padding : 3vw 10vw ;
51+ display : flex;
52+ flex-direction : row;
53+ justify-content : flex-end;
54+ }
55+ .product2 {
56+ background : linear-gradient (to left, rgba (3 , 119 , 148 , 0.9 ), rgba ( 55 , 167 , 74 , 0.9 ));
57+ flex-grow : 1 ;
58+ margin-top : -6vw ;
59+ clip-path : polygon (
60+ 0 0 ,
61+ 100% 6vw ,
62+ 100% calc (100% - 6vw ),
63+ 0% 100%
64+ );
65+ padding : 3vw 10vw ;
66+ display : flex;
67+ flex-direction : row;
68+ justify-content : flex-start;
69+ }
70+ footer {
71+ background-color : # 1b1b33 ;
72+ color : rgba (255 , 255 , 255 , 0.5 );
73+ margin-top : -6vw ;
74+ padding : 0.7vw 20px 10px 20px ;
75+ font-size : 11px ;
76+ clip-path : polygon (
77+ 0 6vw ,
78+ 100% 0% ,
79+ 100% 100% ,
80+ 0% 100%
81+ );
82+ display : flex;
83+ align-content : flex-end;
84+ justify-content : flex-end;
85+ }
86+ h2 {
87+ font-family : 'Quicksand' , sans-serif;
88+ margin-bottom : 0.5em ;
89+ }
90+ h4 {
91+ margin-bottom : 0.3em ;
92+ font-weight : bold;
93+ }
94+ p {
95+ margin-top : 0.5em ;
96+ margin-bottom : 0.5em ;
97+ }
98+ .logo {
99+ text-align : center;
100+ margin : 10px ;
101+ }
102+ .logo img {
103+ max-width : 40px ;
104+ margin-right : 10px
105+ }
106+ .name {
107+ color : # ffffff ;
108+ font-size : 36px ;
109+ font-family : 'Quicksand' , sans-serif;
110+ display : inline-block;
111+ vertical-align : 0.15em ;
112+ }
113+ .payoff {
114+ color : # ffffff ;
115+ text-align : center;
116+ font-style : italic;
117+ font-size : 24px ;
118+ color : rgba (255 , 255 , 255 , 0.5 );
119+ }
120+ .description {
121+ width : 80vw ;
122+ max-width : 480px ;
123+ color : # ffffff ;
124+ margin-top : 10px ;
125+ margin-bottom : 20px ;
126+ }
127+ .product_logo {
128+ margin-bottom : 10px ;
129+ display : inline-block;
130+ margin-right : 10px ;
131+ }
132+ .product_logo img {
133+ width : 30px ;
134+ }
135+ .product_name {
136+ display : inline-block;
137+ vertical-align : 0.15em ;
138+ }
139+
140+ .button {
141+ border : 1px solid # ffffff ;
142+ border-radius : 16px ;
143+ color : # ffffff ;
144+ text-decoration : none;
145+ padding : 3px 15px 4px ;
146+ margin : 5px 0 ;
147+ cursor : pointer;
148+ display : inline-block;
149+ }
150+ .button : hover {
151+ background-color : # ffffff ;
152+ color : # 1b1b33 ;
153+ }
154+ .company-info {
155+ text-align : right;
156+ padding-bottom : 10px ;
157+ }
0 commit comments