2020-1-capstone-design1 / Triz_Project1

Go to a project
Toggle navigation Toggle navigation pinning
minsung
11f55a73 1 parent add69f36

add CSS files for Youtube style

Inline Side-by-side
Showing 2 changed files with 350 additions and 0 deletions
1 +@font-face {
2 + font-family: 'icomoon';
3 + src:url('../fonts/icomoon.eot');
4 + src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
5 + url('../fonts/icomoon.woff') format('woff'),
6 + url('../fonts/icomoon.ttf') format('truetype'),
7 + url('../fonts/icomoon.svg#icomoon') format('svg');
8 + font-weight: normal;
9 + font-style: normal;
10 +}
11 +
12 +.dr-menu {
13 + width: 100%;
14 + max-width: 400px;
15 + min-width: 300px;
16 + position: relative;
17 + font-size: 1.3em;
18 + line-height: 2.5;
19 + font-weight: 400;
20 + color: #fff;
21 + padding-top: 2em;
22 +}
23 +
24 +.dr-menu > div {
25 + cursor: pointer;
26 + position: absolute;
27 + width: 100%;
28 + z-index: 100;
29 +}
30 +
31 +.dr-menu > div .dr-icon {
32 + top: 0;
33 + left: 0;
34 + position: absolute;
35 + font-size: 150%;
36 + line-height: 1.6;
37 + padding: 0 10px;
38 + -webkit-transition: all 0.2s ease;
39 + -moz-transition: all 0.2s ease;
40 + transition: all 0.2s ease;
41 +}
42 +
43 +.dr-menu.dr-menu-open > div .dr-icon {
44 + color: #60a773;
45 + left: 100%;
46 + -webkit-transform: translateX(-100%);
47 + -moz-transform: translateX(-100%);
48 + -ms-transform: translateX(-100%);
49 + transform: translateX(-100%);
50 +}
51 +
52 +.dr-menu > div .dr-icon:after {
53 + content: "\e008";
54 + position: absolute;
55 + font-size: 50%;
56 + line-height: 3.25;
57 + left: -10%;
58 + opacity: 0;
59 +}
60 +
61 +.dr-menu.dr-menu-open > div .dr-icon:after {
62 + opacity: 1;
63 +}
64 +
65 +.dr-menu > div .dr-label {
66 + padding-left: 3em;
67 + position: relative;
68 + display: block;
69 + color: #60a773;
70 + font-size: 0.9em;
71 + font-weight: 700;
72 + letter-spacing: 1px;
73 + text-transform: uppercase;
74 + line-height: 2.75;
75 + -webkit-transition: all 0.2s ease;
76 + -moz-transition: all 0.2s ease;
77 + transition: all 0.2s ease;
78 +}
79 +
80 +.dr-menu.dr-menu-open > div .dr-label {
81 + -webkit-transform: translateY(-90%);
82 + -moz-transform: translateY(-90%);
83 + -ms-transform: translateY(-90%);
84 + transform: translateY(-90%);
85 +}
86 +
87 +.dr-menu ul {
88 + padding: 0;
89 + margin: 0 3em 0 0;
90 + list-style: none;
91 + opacity: 0;
92 + position: relative;
93 + z-index: 0;
94 + pointer-events: none;
95 + -webkit-transition: opacity 0s linear 205ms;
96 + -moz-transition: opacity 0s linear 205ms;
97 + transition: opacity 0s linear 205ms;
98 +}
99 +
100 +.dr-menu.dr-menu-open ul {
101 + opacity: 1;
102 + z-index: 200;
103 + pointer-events: auto;
104 + -webkit-transition: opacity 0s linear 0s;
105 + -moz-transition: opacity 0s linear 0s;
106 + transition: opacity 0s linear 0s;
107 +}
108 +
109 +.dr-menu ul li {
110 + display: block;
111 + margin: 0 0 5px 0;
112 + opacity: 0;
113 + -webkit-transition: opacity 0.3s ease;
114 + -moz-transition: opacity 0.3s ease;
115 + transition: opacity 0.3s ease;
116 +}
117 +
118 +.dr-menu.dr-menu-open ul li {
119 + opacity: 1;
120 +}
121 +
122 +.dr-menu.dr-menu-open ul li:nth-child(2) {
123 + -webkit-transition-delay: 35ms;
124 + -moz-transition-delay: 35ms;
125 + transition-delay: 35ms;
126 +}
127 +
128 +.dr-menu.dr-menu-open ul li:nth-child(3) {
129 + -webkit-transition-delay: 70ms;
130 + -moz-transition-delay: 70ms;
131 + transition-delay: 70ms;
132 +}
133 +
134 +.dr-menu.dr-menu-open ul li:nth-child(4) {
135 + -webkit-transition-delay: 105ms;
136 + -moz-transition-delay: 105ms;
137 + transition-delay: 105ms;
138 +}
139 +
140 +.dr-menu.dr-menu-open ul li:nth-child(5) {
141 + -webkit-transition-delay: 140ms;
142 + -moz-transition-delay: 140ms;
143 + transition-delay: 140ms;
144 +}
145 +
146 +.dr-menu.dr-menu-open ul li:nth-child(6) {
147 + -webkit-transition-delay: 175ms;
148 + -moz-transition-delay: 175ms;
149 + transition-delay: 175ms;
150 +}
151 +
152 +.dr-menu.dr-menu-open ul li:nth-child(7) {
153 + -webkit-transition-delay: 205ms;
154 + -moz-transition-delay: 205ms;
155 + transition-delay: 205ms;
156 +}
157 +
158 +.dr-menu ul li a {
159 + display: inline-block;
160 + padding: 0 20px;
161 + color: #fff;
162 +}
163 +
164 +.dr-menu ul li a:hover {
165 + color: #60a773;
166 +}
167 +
168 +.dr-icon:before,
169 +.dr-icon:after {
170 + position: relative;
171 + font-family: 'icomoon';
172 + speak: none;
173 + font-style: normal;
174 + font-weight: normal;
175 + font-variant: normal;
176 + text-transform: none;
177 + -webkit-font-smoothing: antialiased;
178 +}
179 +
180 +.dr-menu ul .dr-icon:before {
181 + margin-right: 15px;
182 +}
183 +
184 +.dr-icon-bullhorn:before {
185 + content: "\e000";
186 +}
187 +
188 +.dr-icon-camera:before {
189 + content: "\e002";
190 +}
191 +
192 +.dr-icon-heart:before {
193 + content: "\e003";
194 +}
195 +
196 +.dr-icon-settings:before {
197 + content: "\e004";
198 +}
199 +
200 +.dr-icon-switch:before {
201 + content: "\e005";
202 +}
203 +
204 +.dr-icon-download:before {
205 + content: "\e006";
206 +}
207 +
208 +.dr-icon-user:before {
209 + content: "\e001";
210 +}
211 +
212 +.dr-icon-menu:before {
213 + content: "\e007";
214 +}
1 +/* General Demo Style */
2 +@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
3 +
4 +body, html { font-size: 100%; padding: 0; margin: 0;}
5 +
6 +/* Reset */
7 +*,
8 +*:after,
9 +*:before {
10 + -webkit-box-sizing: border-box;
11 + -moz-box-sizing: border-box;
12 + box-sizing: border-box;
13 +}
14 +
15 +/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
16 +.clearfix:before,
17 +.clearfix:after {
18 + content: " ";
19 + display: table;
20 +}
21 +
22 +.clearfix:after {
23 + clear: both;
24 +}
25 +
26 +body {
27 + font-family: 'Lato', Calibri, Arial, sans-serif;
28 + color: #fff;
29 + background: #91cfa1;
30 + font-weight: 300;
31 +}
32 +
33 +a {
34 + color: #f0f0f0;
35 + text-decoration: none;
36 +}
37 +
38 +a:hover {
39 + color: #fff;
40 +}
41 +
42 +.main,
43 +.container > header {
44 + width: 100%;
45 + margin: 0 auto;
46 + padding: 0 1.875em 3.125em 1.875em;
47 +}
48 +
49 +.main {
50 + max-width: 69em;
51 + min-height: 600px;
52 + padding: 2em 0 0 0;
53 +}
54 +
55 +.side {
56 + float: right;
57 + width: 30%;
58 + padding-right: 20px;
59 + min-width: 320px;
60 + box-shadow: 1px 0 rgba(0,0,0,0.1);
61 +}
62 +
63 +.main p {
64 + font-size: 2em;
65 + padding: 0 1em;
66 + margin: 0;
67 + line-height: 1.5;
68 + float: right;
69 + width: 70%;
70 +}
71 +
72 +.container > header {
73 + padding: 2.875em 1.875em 2.875em;
74 + text-align: center;
75 + background: rgba(0,0,0,0.02);
76 +}
77 +
78 +.container > header h1 {
79 + font-size: 2.625em;
80 + line-height: 1.3;
81 + margin: 0;
82 + color: #fff;
83 + font-weight: 300;
84 +}
85 +
86 +.container > header span {
87 + display: block;
88 + font-size: 60%;
89 + color: rgba(255,255,255,0.7);
90 + padding: 0 0 0.6em 0.1em;
91 +}
92 +
93 +/* Header Style */
94 +.codrops-top {
95 + background: #fff;
96 + background: rgba(255, 255, 255, 0.85);
97 + text-transform: uppercase;
98 + position: relative;
99 + font-size: 0.68em;
100 + box-shadow: 1px 0px 2px rgba(0,0,0,0.2);
101 + line-height: 2.2;
102 +}
103 +
104 +.codrops-top a {
105 + padding: 0 1em;
106 + letter-spacing: 0.1em;
107 + color: #333;
108 + display: inline-block;
109 +}
110 +
111 +.codrops-top a:hover {
112 + background: rgba(255,255,255,0.99);
113 + color: #000;
114 +}
115 +
116 +.codrops-top span.right {
117 + float: right;
118 +}
119 +
120 +.codrops-top span.right a {
121 + float: left;
122 + display: block;
123 +}
124 +
125 +@media screen and (max-width: 66.9375em) {
126 + .side, .main p {
127 + float: none;
128 + width: 100%;
129 + box-shadow: none;
130 + padding: 1em;
131 + }
132 +
133 + .main p {
134 + font-size: 130%;
135 + }
136 +}
...\ No newline at end of file ...\ No newline at end of file