Skip to content

Commit 5a2e1d7

Browse files
scottpdawsonscottpdawson
committed
cupcake and frosting art
1 parent 7e93e01 commit 5a2e1d7

21 files changed

Lines changed: 353 additions & 0 deletions

‎public/cake_dark_brown.png‎

167 KB
Loading

‎public/cake_light_brown.png‎

169 KB
Loading

‎public/cake_pink.png‎

172 KB
Loading

‎public/cake_red.png‎

165 KB
Loading

‎public/cake_white.png‎

160 KB
Loading

‎public/chocolate_buttercream.png‎

156 KB
Loading

‎public/coconut.png‎

73.5 KB
Loading

‎public/cookies_and_cream.png‎

111 KB
Loading

‎public/cream_cheese.png‎

135 KB
Loading

‎public/cupcake.css‎

Lines changed: 351 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,351 @@
1+
/* http://meyerweb.com/eric/tools/css/reset/
2+
v2.0 | 20110126
3+
License: none (public domain)
4+
*/
5+
6+
html, body, div, span, applet, object, iframe,
7+
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
8+
a, abbr, acronym, address, big, cite, code,
9+
del, dfn, em, img, ins, kbd, q, s, samp,
10+
small, strike, strong, sub, sup, tt, var,
11+
b, u, i, center,
12+
dl, dt, dd, ol, ul, li,
13+
fieldset, form, label, legend,
14+
table, caption, tbody, tfoot, thead, tr, th, td,
15+
article, aside, canvas, details, embed,
16+
figure, figcaption, footer, header, hgroup,
17+
menu, nav, output, ruby, section, summary,
18+
time, mark, audio, video {
19+
margin: 0;
20+
padding: 0;
21+
border: 0;
22+
font-size: 100%;
23+
font: inherit;
24+
vertical-align: baseline;
25+
}
26+
/* HTML5 display-role reset for older browsers */
27+
article, aside, details, figcaption, figure,
28+
footer, header, hgroup, menu, nav, section {
29+
display: block;
30+
}
31+
body {
32+
line-height: 1;
33+
}
34+
ol, ul {
35+
list-style: none;
36+
}
37+
blockquote, q {
38+
quotes: none;
39+
}
40+
blockquote:before, blockquote:after,
41+
q:before, q:after {
42+
content: '';
43+
content: none;
44+
}
45+
table {
46+
border-collapse: collapse;
47+
border-spacing: 0;
48+
}
49+
body {
50+
background: linear-gradient(to bottom, #fdefb9 0%, #fcd135 50%);
51+
font-family: Arial, Helvetica, sans-serif;
52+
font-size: 1em;
53+
}
54+
.header {
55+
background-image: url(./emoticakes.png);
56+
height: 57px;
57+
background-position: -169px -118px;
58+
background-repeat: no-repeat;
59+
background-size: auto 300px;
60+
padding: 20px 20px 0 167px;
61+
text-align: right;
62+
border-bottom: 2px solid #FCD135;
63+
margin-bottom: 0px;
64+
}
65+
.hed {
66+
text-transform: uppercase;
67+
font-size: .85em;
68+
opacity: .7;
69+
display: block;
70+
margin-bottom: 5px;
71+
}
72+
h1 {
73+
font-family: Georgia, 'Times New Roman', Times, serif;
74+
font-size: 1.6em;
75+
}
76+
h4 {
77+
display: block;
78+
padding: 20px 30px;
79+
font-size: 1.2em;
80+
}
81+
h4:hover, .orderCard .edit:hover {
82+
cursor: pointer;
83+
}
84+
h4.orderDate {
85+
background-color: #F6B01199;
86+
}
87+
h4.deliveryOption {
88+
background-color: #5CAD6C99;
89+
}
90+
h4.yourOrder {
91+
background-color: #E0216D99;
92+
}
93+
h4.requestQuote {
94+
background-color: #006D9E99;
95+
}
96+
h4 .chevron {
97+
position: relative;
98+
top: 2px;
99+
opacity: .7;
100+
left: -5px;
101+
}
102+
div.padded {
103+
margin: 15px 30px;
104+
font-size: .9em;
105+
line-height: 1.4em;
106+
transition:opacity 0.5s linear;
107+
}
108+
.subTitle {
109+
display: block;
110+
text-transform: uppercase;
111+
opacity: .8;
112+
font-size: .7em;
113+
margin: 5px 0px 0px 21px;
114+
}
115+
.quote-form{
116+
max-width: 500px;
117+
}
118+
.quote-form label{
119+
display: block;
120+
margin: 0px 0px 7px 0px;
121+
}
122+
.quote-form label > span{
123+
width: 100%;
124+
display: block;
125+
font-weight: normal;
126+
padding: 0px 0px 5px 0px;
127+
}
128+
.quote-form input,
129+
.quote-form .tel-number-field,
130+
.quote-form .textarea-field,
131+
.quote-form .select-field{
132+
box-sizing: border-box;
133+
-webkit-box-sizing: border-box;
134+
-moz-box-sizing: border-box;
135+
border: 1px solid #C2C2C2;
136+
box-shadow: 1px 1px 4px #EBEBEB;
137+
-moz-box-shadow: 1px 1px 4px #EBEBEB;
138+
-webkit-box-shadow: 1px 1px 4px #EBEBEB;
139+
border-radius: 3px;
140+
-webkit-border-radius: 3px;
141+
-moz-border-radius: 3px;
142+
padding: 7px;
143+
outline: none;
144+
width: 100%;
145+
}
146+
.quote-form .input-field:focus,
147+
.quote-form .tel-number-field:focus,
148+
.quote-form .textarea-field:focus,
149+
.quote-form .select-field:focus{
150+
border: 1px solid white;
151+
}
152+
.quote-form button[type=submit],
153+
.quote-form button[type=button]{
154+
border: none;
155+
padding: 8px 15px 8px 15px;
156+
background: #006D9E99;
157+
color: #fff;
158+
box-shadow: 1px 1px 4px #DADADA;
159+
-moz-box-shadow: 1px 1px 4px #DADADA;
160+
-webkit-box-shadow: 1px 1px 4px #DADADA;
161+
border-radius: 3px;
162+
-webkit-border-radius: 3px;
163+
-moz-border-radius: 3px;
164+
}
165+
.quote-form button[type=button]:disabled {
166+
opacity: 0.65;
167+
cursor: not-allowed;
168+
border-radius: 20px;
169+
}
170+
.quote-form input[type=submit]:hover,
171+
.quote-form input[type=button]:hover{
172+
background: #EA7B00;
173+
color: #fff;
174+
}
175+
.orderCarousel {
176+
height: 270px;
177+
display: flex;
178+
overflow-x: auto;
179+
-webkit-overflow-scrolling: touch;
180+
scroll-behavior: smooth;
181+
}
182+
.orderCard {
183+
width: 100px;
184+
border: 5px dashed black;
185+
opacity: .2;
186+
border-radius: 10px;
187+
transition: all .4s ease;
188+
margin-right: 20px;
189+
flex-shrink: 0;
190+
text-align: center;
191+
position: relative;
192+
overflow: hidden;
193+
}
194+
.orderItem {
195+
width: 160px;
196+
opacity: 1;
197+
background-color: rgba(253, 234, 167, 0.541);
198+
border-style: solid;
199+
border-color: transparent;
200+
padding: 20px;
201+
}
202+
.addItemToOrder {
203+
display: grid;
204+
place-items: center;
205+
}
206+
.addItemToOrder:hover {
207+
cursor: pointer;
208+
opacity: .5;
209+
background: rgba(255, 255, 255, .5);
210+
}
211+
.orderQuantity {
212+
float: left;
213+
font-size: 2.5em;
214+
font-weight: bold;
215+
}
216+
.orderBoxSize {
217+
display: inline-block;
218+
text-transform: uppercase;
219+
font-size: .9em;
220+
height: 32px;
221+
width: 108px;
222+
text-align: left;
223+
line-height: 1.2em;
224+
margin-top: -6px;
225+
opacity: .8;
226+
margin-left: 10px;
227+
}
228+
.orderCost {
229+
position: absolute;
230+
bottom: 4px;
231+
display: block;
232+
width: 100%;
233+
left: 0;
234+
font-size: 1.2em;
235+
opacity: .65;
236+
}
237+
.orderDetails {
238+
display: block;
239+
margin-top: 10px;
240+
}
241+
.orderCard .edit, .orderCard .trash {
242+
position: absolute;
243+
top: 0px;
244+
right: 0px;
245+
width: 30px;
246+
height: 30px;
247+
vertical-align: middle;
248+
border-radius: 20px;
249+
display: grid;
250+
place-items: center;
251+
transition: all 0.25s linear;
252+
}
253+
.orderCard .edit:hover, .orderCard .trash:hover {
254+
background: rgba(0, 0, 0, 0.05);
255+
}
256+
.orderCard .trash {
257+
color: #ec6f75;
258+
}
259+
.orderCard .trash:hover {
260+
background: rgba(0, 0, 0, 0.05);
261+
}
262+
.orderCard .done {
263+
border-radius: 4px;
264+
display: block;
265+
padding: 5px;
266+
background-color: #ec6e74;
267+
border-bottom: 3px solid #ea5057;
268+
}
269+
.orderCard .done:hover {
270+
cursor: pointer;
271+
background-color: #ea5057;
272+
}
273+
.editOrderItemBlock select {
274+
display: block;
275+
width: 100%;
276+
margin: 2px 0px 8px;
277+
}
278+
.orderEditSectionTitle {
279+
display: block;
280+
font-size: .85em;
281+
text-align: left;
282+
}
283+
.startOver {
284+
opacity: .3;
285+
}
286+
.startOver:hover {
287+
opacity: 1;
288+
cursor: pointer;
289+
}
290+
.startOverIcon {
291+
width: 12px;
292+
height: 12px;
293+
margin-left: 5px;
294+
}
295+
.emailResult {
296+
min-height: 400px;
297+
text-align: center;
298+
line-height: 1.5em;
299+
font-family: Georgia, 'Times New Roman', Times, serif;
300+
max-width: 400px;
301+
margin: 0 auto;
302+
margin-bottom: 100px;
303+
}
304+
.emailStatusIcon {
305+
margin: 50px 0px 25px;
306+
width: 100px;
307+
height: 100px;
308+
}
309+
.emailResult h3 {
310+
font-size: 2em;
311+
margin-bottom: 50px;
312+
}
313+
.emailResult p {
314+
text-align: left;
315+
margin-bottom: 15px;
316+
}
317+
.cupcakeContainer {
318+
position: relative;
319+
width: 150px;
320+
margin: 0 auto;
321+
}
322+
.cupcakeContainerLeft {
323+
left: -80px;
324+
}
325+
.cupcakeContainerRight {
326+
right: -80px;
327+
}
328+
.cupcakeContainer img {
329+
width: 150px;
330+
top: 0;
331+
left: 0;
332+
position: absolute;
333+
}
334+
.cupcakeDescription {
335+
position: absolute;
336+
z-index: 10;
337+
width: 146px;
338+
background: #dedede;
339+
border-radius: 30px;
340+
font-family: serif;
341+
font-style: italic;
342+
line-height: 1em;
343+
padding: 7px;
344+
opacity: .85;
345+
bottom: 36px;
346+
}
347+
.specialReqInstructions {
348+
font-size: .9em;
349+
line-height: 1.2em;
350+
margin-bottom: 10px;
351+
}

0 commit comments

Comments
 (0)