Skip to content

Commit 54f5c98

Browse files
Jared-GrossJared-Gross
committed
New layout
1 parent d079e73 commit 54f5c98

File tree

8 files changed

+2949
-1939
lines changed

8 files changed

+2949
-1939
lines changed

‎index old.html‎

Lines changed: 1679 additions & 0 deletions
Large diffs are not rendered by default.

‎index.html‎

Lines changed: 823 additions & 1637 deletions
Large diffs are not rendered by default.

‎static/css/computer-style.css‎

Lines changed: 340 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,340 @@
1+
2+
/* COMPUTER MODEL CODE */
3+
#stage {
4+
width: 50px;
5+
height: 50px;
6+
top: 150px;
7+
position: absolute;
8+
left: -37%;
9+
transform: scale(0.3);
10+
transition: transform 100ms ease-in-out;
11+
}
12+
#stage:hover{
13+
transform: scale(0.4);
14+
transition: transform 100ms ease-in-out;
15+
}
16+
/* media queres */
17+
@media(max-width:780px) {
18+
.grid-3 {
19+
grid-template-columns: 1fr;
20+
}
21+
22+
.section-1 {
23+
padding: 0;
24+
padding-top: 5rem;
25+
}
26+
27+
.section-2 {
28+
padding: 0;
29+
padding-left: 1.5rem;
30+
padding-top: 2rem;
31+
}
32+
#stage {
33+
margin-left: 40%;
34+
transform: scale(0.3);
35+
}
36+
#stage:hover{
37+
transform: scale(0.4);
38+
}
39+
}
40+
41+
42+
/* BASE */
43+
#computer_render {
44+
/* background: white; */
45+
width: 150px;
46+
height: 150px;
47+
margin: auto;
48+
position: relative;
49+
50+
-webkit-transform-style: preserve-3d;
51+
transform-style: preserve-3d;
52+
-webkit-transform: rotateX(75deg) rotate(65deg);
53+
transform: rotateX(75deg) rotate(65deg);
54+
-webkit-animation: turnComputer 10s linear infinite;
55+
animation: turnComputer 10s linear infinite;
56+
}
57+
58+
#computer_render>div {
59+
overflow: hidden;
60+
clear: right;
61+
position: absolute;
62+
-webkit-transition: all 0.5s ease-in-out;
63+
transition: all 0.5s ease-in-out;
64+
overflow: hidden;
65+
opacity: 0.85;
66+
}
67+
68+
/* BASE START */
69+
#right {
70+
width: 150px;
71+
height: 45px;
72+
transform: rotateX(90deg) translateY(22.5px) translateZ(22.5px);
73+
-moz-transform: rotateX(90deg) translateY(22.5px) translateZ(22.5px);
74+
-webkit-transform: rotateX(90deg) translateY(22.5px) translateZ(22.5px);
75+
background-color: rgba(79, 79, 74, 0.3);
76+
}
77+
78+
#left {
79+
width: 150px;
80+
height: 45px;
81+
transform: rotateX(-90deg) translateY(-22.5px) translateZ(127.5px);
82+
-moz-transform: rotateX(-90deg) translateY(-22.5px) translateZ(127.5px);
83+
-webkit-transform: rotateX(-90deg) translateY(-22.5px) translateZ(127.5px);
84+
background-color: rgba(79, 79, 74, 0.3);
85+
}
86+
87+
#front {
88+
width: 150px;
89+
height: 45px;
90+
transform: rotateY(-90deg) rotateZ(90deg) translateX(52.5px) translateY(-22.5px) translateZ(-75px);
91+
-moz-transform: rotateY(-90deg) rotateZ(90deg) translateX(52.5px) translateY(-22.5px) translateZ(-75px);
92+
-webkit-transform: rotateY(-90deg) rotateZ(90deg) translateX(52.5px) translateY(-22.5px) translateZ(-75px);
93+
background-color: rgba(79, 79, 74, 0.3);
94+
}
95+
96+
#back {
97+
width: 150px;
98+
height: 45px;
99+
transform: rotateY(-90deg) rotateZ(90deg) translateX(52.5px) translateY(-22.5px) translateZ(75px);
100+
-moz-transform: rotateY(-90deg) rotateZ(90deg) translateX(52.5px) translateY(-22.5px) translateZ(75px);
101+
-webkit-transform: rotateY(-90deg) rotateZ(90deg) translateX(52.5px) translateY(-22.5px) translateZ(75px);
102+
background-color: rgba(79, 79, 74, 0.3);
103+
}
104+
105+
#top {
106+
width: 150px;
107+
height: 150px;
108+
transform: translateX(0px) translateY(0px) translateZ(45px);
109+
-moz-transform: translateX(0px) translateY(0px) translateZ(45px);
110+
-webkit-transform: translateX(0px) translateY(0px) translateZ(45px);
111+
background-color: rgba(109, 109, 103, 0.3);
112+
}
113+
114+
#bottom {
115+
width: 150px;
116+
height: 150px;
117+
transform: translateX(0px) translateY(0px);
118+
-moz-transform: translateX(0px) translateY(0px);
119+
-webkit-transform: translateX(0px) translateY(0px);
120+
background-color: rgba(56, 56, 53, 0.3);
121+
}
122+
123+
/* BASE END */
124+
125+
/* MONITER STAND START */
126+
#moniter_stand_right {
127+
width: 90px;
128+
height: 15px;
129+
transform: rotateX(90deg) translateX(30px) translateY(53px) translateZ(-22.5px);
130+
-moz-transform: rotateX(90deg) translateX(30px) translateY(53px) translateZ(-22.5px);
131+
-webkit-transform: rotateX(90deg) translateX(30px) translateY(53px) translateZ(-22.5px);
132+
background-color: rgba(109, 109, 103, 0.3);
133+
}
134+
135+
#moniter_stand_left {
136+
width: 90px;
137+
height: 15px;
138+
transform: rotateX(-90deg) translateX(30px) translateY(-53px) translateZ(112.5px);
139+
-moz-transform: rotateX(-90deg) translateX(30px) translateY(-53px) translateZ(112.5px);
140+
-webkit-transform: rotateX(-90deg) translateX(30px) translateY(-53px) translateZ(112.5px);
141+
background-color: rgba(109, 109, 103, 0.3);
142+
}
143+
144+
#moniter_stand_front {
145+
width: 90px;
146+
height: 15px;
147+
transform: rotateY(-90deg) rotateZ(90deg) translateX(67.5px) translateY(-53px) translateZ(-75px);
148+
-moz-transform: rotateY(-90deg) rotateZ(90deg) translateX(67.5px) translateY(-53px) translateZ(-75px);
149+
-webkit-transform: rotateY(-90deg) rotateZ(90deg) translateX(67.5px) translateY(-53px) translateZ(-75px);
150+
background-color: rgba(109, 109, 103, 0.3);
151+
}
152+
153+
#moniter_stand_back {
154+
width: 90px;
155+
height: 15px;
156+
transform: rotateY(-90deg) rotateZ(90deg) translateX(67.5px) translateY(-53px) translateZ(15px);
157+
-moz-transform: rotateY(-90deg) rotateZ(90deg) translateX(67.5px) translateY(-53px) translateZ(15px);
158+
-webkit-transform: rotateY(-90deg) rotateZ(90deg) translateX(67.5px) translateY(-53px) translateZ(15px);
159+
background-color: rgba(109, 109, 103, 0.3);
160+
}
161+
162+
/* MONITER STAND END */
163+
164+
/* SCREEN BASE START */
165+
#moniter_base_right {
166+
width: 15px;
167+
height: 120px;
168+
transform: translateX(0px) translateY(0px);
169+
-moz-transform: translateX(0px) translateY(0px);
170+
-webkit-transform: translateX(15px) translateY(15px) translateZ(60px);
171+
background-color: rgba(109, 109, 103, 0.3);
172+
}
173+
174+
#moniter_base_left {
175+
width: 15px;
176+
height: 120px;
177+
transform: translateX(0px) translateY(0px);
178+
-moz-transform: translateX(0px) translateY(0px);
179+
-webkit-transform: translateX(120px) translateY(15px) translateZ(60px);
180+
background-color: rgba(109, 109, 103, 0.3);
181+
}
182+
183+
#moniter_base_front {
184+
width: 90px;
185+
height: 15px;
186+
transform: translateX(0px) translateY(0px);
187+
-moz-transform: translateX(0px) translateY(0px);
188+
-webkit-transform: translateX(30px) translateY(15px) translateZ(60px);
189+
background-color: rgba(109, 109, 103, 0.3);
190+
}
191+
192+
#moniter_base_back {
193+
width: 90px;
194+
height: 15px;
195+
transform: translateX(0px) translateY(0px);
196+
-moz-transform: translateX(0px) translateY(0px);
197+
-webkit-transform: translateX(30px) translateY(120px) translateZ(60px);
198+
background-color: rgba(109, 109, 103, 0.3);
199+
}
200+
201+
/* SCREEN BASE END */
202+
203+
/* SCREEN START */
204+
205+
#moniter_right {
206+
width: 120px;
207+
height: 75px;
208+
transform: rotateX(90deg) translateX(15px) translateY(97.5px) translateZ(-97.5px);
209+
-moz-transform: rotateX(90deg) translateX(15px) translateY(97.5px) translateZ(-97.5px);
210+
-webkit-transform: rotateX(90deg) translateX(15px) translateY(97.5px) translateZ(-97.5px);
211+
background-color: rgba(109, 109, 103, 0.3);
212+
}
213+
214+
#moniter_left {
215+
width: 120px;
216+
height: 75px;
217+
transform: rotateX(-90deg) translateX(15px) translateY(-97.5px) translateZ(-22.5px);
218+
-moz-transform: rotateX(-90deg) translateX(15px) translateY(-97.5px) translateZ(-22.5px);
219+
-webkit-transform: rotateX(-90deg) translateX(15px) translateY(-97.5px) translateZ(-22.5px);
220+
background-color: rgba(109, 109, 103, 0.3);
221+
}
222+
223+
#moniter_back {
224+
width: 120px;
225+
height: 75px;
226+
transform: rotateY(-90deg) rotateZ(90deg) translateX(37.5px) translateY(-97.5px) translateZ(15px);
227+
-moz-transform: rotateY(-90deg) rotateZ(90deg) translateX(37.5px) translateY(-97.5px) translateZ(15px);
228+
-webkit-transform: rotateY(-90deg) rotateZ(90deg) translateX(37.5px) translateY(-97.5px) translateZ(45px);
229+
background-color: rgba(109, 109, 103, 0.3);
230+
}
231+
232+
#moniter_top {
233+
width: 120px;
234+
height: 120px;
235+
transform: translateX(15px) translateY(15px) translateZ(135px);
236+
-moz-transform: translateX(15px) translateY(15px) translateZ(135px);
237+
-webkit-transform: translateX(15px) translateY(15px) translateZ(135px);
238+
background-color: rgba(109, 109, 103, 0.3);
239+
}
240+
241+
/* FRONT OF SCREEN START*/
242+
243+
#moniter_front1 {
244+
width: 120px;
245+
height: 15px;
246+
transform: rotateY(-90deg) rotateZ(90deg) translateX(67.5px) translateY(-67.5px) translateZ(-75px);
247+
-moz-transform: rotateY(-90deg) rotateZ(90deg) translateX(67.5px) translateY(-67.5px) translateZ(-75px);
248+
-webkit-transform: rotateY(-90deg) rotateZ(90deg) translateX(67.5px) translateY(-67.5px) translateZ(-75px);
249+
background-color: rgba(109, 109, 103, 0.3);
250+
}
251+
252+
#moniter_front2 {
253+
width: 120px;
254+
height: 15px;
255+
transform: rotateY(-90deg) rotateZ(90deg) translateX(67.5px) translateY(-127.5px) translateZ(-75px);
256+
-moz-transform: rotateY(-90deg) rotateZ(90deg) translateX(67.5px) translateY(-127.5px) translateZ(-75px);
257+
-webkit-transform: rotateY(-90deg) rotateZ(90deg) translateX(67.5px) translateY(-127.5px) translateZ(-75px);
258+
background-color: rgba(109, 109, 103, 0.3);
259+
}
260+
261+
#moniter_front3 {
262+
width: 15px;
263+
height: 45px;
264+
transform: rotateY(-90deg) rotateZ(90deg) translateX(0px) translateY(-97.5px) translateZ(-127.5px);
265+
-moz-transform: rotateY(-90deg) rotateZ(90deg) translateX(0px) translateY(-97.5px) translateZ(-127.5px);
266+
-webkit-transform: rotateY(-90deg) rotateZ(90deg) translateX(0px) translateY(-97.5px) translateZ(-127.5px);
267+
background-color: rgba(109, 109, 103, 0.3);
268+
}
269+
270+
#moniter_front4 {
271+
width: 15px;
272+
height: 45px;
273+
transform: rotateY(-90deg) rotateZ(90deg) translateX(0px) translateY(-97.5px) translateZ(-127.5px);
274+
-moz-transform: rotateY(-90deg) rotateZ(90deg) translateX(0px) translateY(-97.5px) translateZ(-127.5px);
275+
-webkit-transform: rotateY(-90deg) rotateZ(90deg) translateX(105px) translateY(-97.5px) translateZ(-127.5px);
276+
background-color: rgba(109, 109, 103, 0.3);
277+
}
278+
279+
#moniter_front5 {
280+
width: 15px;
281+
height: 45px;
282+
transform: rotateY(-90deg) rotateZ(90deg) translateX(0px) translateY(-97.5px) translateZ(-127.5px);
283+
-moz-transform: rotateY(-90deg) rotateZ(90deg) translateX(0px) translateY(-97.5px) translateZ(-127.5px);
284+
-webkit-transform: rotateX(-90deg) translateX(119.5px) translateY(-97.5px) translateZ(97.5px);
285+
background-color: rgba(109, 109, 103, 0.3);
286+
}
287+
288+
#moniter_front6 {
289+
width: 15px;
290+
height: 45px;
291+
transform: rotateY(-90deg) rotateZ(90deg) translateX(0px) translateY(-97.5px) translateZ(-127.5px);
292+
-moz-transform: rotateY(-90deg) rotateZ(90deg) translateX(0px) translateY(-97.5px) translateZ(-127.5px);
293+
-webkit-transform: rotateX(-90deg) translateX(119.5px) translateY(-97.5px) translateZ(7.5px);
294+
background-color: rgba(109, 109, 103, 0.3);
295+
}
296+
297+
#moniter_front7 {
298+
width: 15px;
299+
height: 90px;
300+
transform: rotateY(-90deg) rotateZ(90deg) translateX(0px) translateY(-97.5px) translateZ(-127.5px);
301+
-moz-transform: rotateY(-90deg) rotateZ(90deg) translateX(0px) translateY(-97.5px) translateZ(-127.5px);
302+
-webkit-transform: translateX(119.5px) translateY(30px) translateZ(120px);
303+
background-color: rgba(109, 109, 103, 0.3);
304+
}
305+
306+
#moniter_front8 {
307+
width: 15px;
308+
height: 90px;
309+
transform: rotateY(-90deg) rotateZ(90deg) translateX(0px) translateY(-97.5px) translateZ(-127.5px);
310+
-moz-transform: rotateY(-90deg) rotateZ(90deg) translateX(0px) translateY(-97.5px) translateZ(-127.5px);
311+
-webkit-transform: translateX(119.5px) translateY(30px) translateZ(75px);
312+
background-color: rgba(109, 109, 103, 0.3);
313+
}
314+
315+
#moniter_screen {
316+
width: 90px;
317+
height: 45px;
318+
transform: rotateY(-90deg) rotateZ(90deg) translateX(0px) translateY(-97.5px) translateZ(-127.5px);
319+
-moz-transform: rotateY(-90deg) rotateZ(90deg) translateX(0px) translateY(-97.5px) translateZ(-127.5px);
320+
-webkit-transform: rotateY(-90deg) rotateZ(90deg) translateX(52.5px) translateY(-97.5px) translateZ(-75px);
321+
background-color: rgba(0, 0, 0, 0.646);
322+
}
323+
324+
/* FRONT OF SCREEN END */
325+
326+
/* SCREEN END */
327+
328+
329+
/* No idea what the below does, so just leave it please :) */
330+
@-webkit-keyframes turnComputer {
331+
100% {
332+
-webkit-transform: rotateX(75deg) rotate(425deg);
333+
}
334+
}
335+
336+
@keyframes turnComputer {
337+
100% {
338+
transform: rotateX(75deg) rotate(425deg);
339+
}
340+
}

0 commit comments

Comments
 (0)