Difference between revisions of "Twisted Toppings"

From City of Hope MUSH
Jump to navigation Jump to search
imported>Felix
m
m
 
(16 intermediate revisions by 4 users not shown)
Line 84: Line 84:
 
     padding-left: 1.25em;
 
     padding-left: 1.25em;
 
     position: relative;
 
     position: relative;
−
}
 
−
#catlinks.catlinks a {
 
−
    color: #5a8029 !important;
 
 
}
 
}
 
div#footer {
 
div#footer {
Line 146: Line 143:
 
     border-bottom: 1px dotted white;
 
     border-bottom: 1px dotted white;
 
     border-top: 1px dotted white;
 
     border-top: 1px dotted white;
−
     line-height: 2em;
+
    font-size: 1.15em;
 +
     line-height: 2.25em;
 
     position: absolute;
 
     position: absolute;
 
     top: 90px;
 
     top: 90px;
Line 157: Line 155:
 
     max-width: 1200px;
 
     max-width: 1200px;
 
     margin: 0 auto;
 
     margin: 0 auto;
 +
}
 +
#menu a {
 +
    color: #00ffff;
 
}
 
}
 
.nav {
 
.nav {
 +
    font-size: 1.15em;
 
     margin-bottom: -1.5em;
 
     margin-bottom: -1.5em;
 
     position: relative;
 
     position: relative;
Line 211: Line 213:
 
.toppings > li:nth-of-type(8) {
 
.toppings > li:nth-of-type(8) {
 
     color: cyan;
 
     color: cyan;
 +
}
 +
.toppings > li:nth-of-type(9) {
 +
    color: gold;
 
}
 
}
 
.toppings > li > ul {
 
.toppings > li > ul {
Line 266: Line 271:
 
     position: relative;
 
     position: relative;
 
     z-index: 1;
 
     z-index: 1;
−
}
 
−
.content {
 
−
    min-height: 750px;
 
 
}
 
}
 
.ttfooter {
 
.ttfooter {
 
     background: rgba(0,0,0,.4);
 
     background: rgba(0,0,0,.4);
 
     border-top: 1px dotted white;
 
     border-top: 1px dotted white;
 +
    font-size: 1.15em;
 +
    text-align: center;
 +
}
 +
.ttfooter img[alt="TTtinypizza.png"] {
 +
    margin: 0 1em;
 
}
 
}
 
/*---Panels---*/
 
/*---Panels---*/
Line 280: Line 287:
 
     justify-content: center;
 
     justify-content: center;
 
     width: 75%;
 
     width: 75%;
−
     margin: 0 auto;
+
     margin: 1em auto;
 
     position: relative;
 
     position: relative;
 
     overflow: hidden;
 
     overflow: hidden;
−
}
 
−
.tab {
 
−
    font-weight: bold;
 
−
    margin-top: -19em;
 
−
    order: 2;
 
−
    padding-top: 19em;
 
−
}
 
−
#first {
 
−
    order: 1;
 
−
}
 
−
.tab a, *:target ~ #first a {
 
−
    border-bottom: medium none;
 
−
    display: inline-block;
 
−
    margin: 0 0.5em 0.5em;
 
−
    opacity: 0.5;
 
−
    padding: 0 .25em;
 
−
    color: cyan;
 
−
    font-size: 2em;
 
−
}
 
−
tab a:hover, .tab a:active {
 
−
    text-decoration: none;
 
−
}
 
−
#first a, .tab:target a {
 
−
    opacity: 1;
 
−
    color: lime;
 
 
}
 
}
 
.panel {
 
.panel {
 +
    animation: moveIt 60s infinite;
 +
    animation-timing-function: linear;
 
     order: 0;
 
     order: 0;
−
    text-indent: 1.5em;
 
 
     margin-bottom: 0.5em;
 
     margin-bottom: 0.5em;
−
     min-height: 100px;
+
     max-height: 300px;
 
     width: calc(100% - 2px);
 
     width: calc(100% - 2px);
 
     border: 1px dotted rgba(255,255,255,.75);
 
     border: 1px dotted rgba(255,255,255,.75);
Line 321: Line 304:
 
     left: 0;
 
     left: 0;
 
     transition: all 1s;
 
     transition: all 1s;
 +
}
 +
.panel img {
 +
    height: auto;
 +
    width: 100%;
 
}
 
}
 
#first-panel {
 
#first-panel {
Line 328: Line 315:
 
}
 
}
 
:target ~ #first-panel {
 
:target ~ #first-panel {
−
     left: -100%;
+
     left: 100%;
 
}
 
}
 
#first:target ~ #first-panel, #second:target ~ #second-panel, #third:target ~ #third-panel {
 
#first:target ~ #first-panel, #second:target ~ #second-panel, #third:target ~ #third-panel {
 
     left: 0;
 
     left: 0;
−
}
 
−
.tab a {
 
−
    animation: whichOne 60s infinite;
 
−
    animation-timing-function: linear;
 
−
}
 
−
#first a, #first:target a, #second:target a, #third:target a {
 
−
    animation-delay: 0s;
 
−
    opacity: 1;
 
−
    color: lime;
 
−
}
 
−
#second a, #first:target ~ #second a, #second:target ~ #third a, #third:target ~ #first a {
 
−
    animation-delay: 20s;
 
−
    opacity: 0.5;
 
−
    color: cyan;
 
−
}
 
−
#third a, #first:target ~ #third a, #second:target ~ #first a, #third:target ~ #second a {
 
−
    animation-delay: 40s;
 
−
    opacity: 0.5;
 
−
    color: cyan;
 
−
}
 
−
.panel {
 
−
    animation: moveIt 60s infinite;
 
−
    animation-timing-function: linear;
 
−
}
 
−
#first-panel, #first:target ~ #first-panel {
 
−
    background: rgba(255,0,0,.25);
 
−
    z-index: 5;
 
−
}
 
−
#second-panel, #first:target ~ #second-panel {
 
−
    background: rgba(0,0,255,.25);
 
−
    z-index: 6;
 
−
}
 
−
#third-panel, #first:target ~ #third-panel {
 
−
    background: rgba(255,255,0,.25);
 
−
    z-index: 7;
 
 
}
 
}
 
#first-panel, #first:target ~ #first-panel, #second:target ~ #second-panel, #third:target ~ #third-panel {
 
#first-panel, #first:target ~ #first-panel, #second:target ~ #second-panel, #third:target ~ #third-panel {
Line 374: Line 326:
 
#second-panel, #first:target ~ #second-panel, #second:target ~ #third-panel, #third:target ~ #first-panel {
 
#second-panel, #first:target ~ #second-panel, #second:target ~ #third-panel, #third:target ~ #first-panel {
 
     animation-delay: 20s;
 
     animation-delay: 20s;
−
     left: -100%;
+
     left: 100%;
 
}
 
}
 
#third-panel, #first:target ~ #third-panel, #second:target ~ #first-panel, #third:target ~ #second-panel {
 
#third-panel, #first:target ~ #third-panel, #second:target ~ #first-panel, #third:target ~ #second-panel {
 
     animation-delay: 40s;
 
     animation-delay: 40s;
−
     left: -100%;
+
     left: 100%;
 
}
 
}
 
#panels:hover .panel {
 
#panels:hover .panel {
Line 384: Line 336:
 
}
 
}
 
@keyframes moveIt {
 
@keyframes moveIt {
−
     0% {left: -100%;}
+
     0% {left: 100%;}
 
     3.3333333333333333% {left: 0px;}
 
     3.3333333333333333% {left: 0px;}
−
     33.333333333333333%{left: 0px;}
+
     33.333333333333333% {left: 0px;}
−
     36.666666666666667% {left: 100%;}
+
     36.666666666666667% {left: -100%;}
−
     100% {left: 100%;}
+
     100% {left: -100%;}
 
}
 
}
−
@keyframes whichOne {
+
/*--Trio--*/
−
     0% {opacity: 0.5; color: cyan;}
+
#trio {
−
     1.6666666666666667% {opacity: 1; color: lime;}
+
     display: flex;
−
    33.333333333333333%{opacity: 1; color: lime;}
+
    flex-flow: row wrap;
−
     35% {opacity: 0.5; color: cyan;}
+
    justify-content: space-between;
−
     100% {opacity: 0.5; color: cyan;}
+
    margin: 2em auto;
 +
    width: 75%;
 +
}
 +
#trio > div {
 +
    background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
 +
    border: 1px dotted white;
 +
    flex: 1 1 25%;
 +
    font-size: 1.15em;
 +
    height: 238px;
 +
    margin-right: 2.5em;
 +
    overflow: hidden;
 +
    padding: 1em;
 +
    position: relative;
 +
    text-align: justify;
 +
}
 +
#trio > div:last-of-type {
 +
    margin-right: 0;
 +
}
 +
#trio span {
 +
    align-items: center;
 +
    background: #00ff00 none repeat scroll 0 0;
 +
    border: 2px dotted white;
 +
    border-radius: 0 0 5em;
 +
    color: #00ffff;
 +
    display: flex;
 +
    float: left;
 +
    font-size: 1.75em;
 +
    font-weight: bold;
 +
    height: 2.5em;
 +
    justify-content: center;
 +
    left: -1em;
 +
    margin: 0 -0.5em -1.25em 0;
 +
    position: relative;
 +
    text-shadow: 1px 1px 1px black, -2px 1px 1px black, 1px -1px 1px black, -1px -1px 1px black;
 +
     top: -1.1em;
 +
    width: 2.5em;
 +
}
 +
#trio .two span {
 +
    background: #ff0000 none repeat scroll 0 0;
 +
    color: #ffff00;
 +
}
 +
#trio .three > span {
 +
    background: #0000ff none repeat scroll 0 0;
 +
    color: #ff00ff;
 +
}
 +
.one > img {
 +
    height: auto;
 +
    margin: 0.25em -1.75em;
 +
     width: 125%;
 +
}
 +
.two > img {
 +
    height: auto;
 +
    margin: 1em -1em 0;
 +
    width: calc(100% + 2em);
 +
}
 +
.three > img {
 +
    height: auto;
 +
    margin: 0 -1em;
 +
     width: calc(100% + 2em);
 +
}
 +
/*--Note--*/
 +
.note {
 +
    border: 1px dotted white;
 +
    font-size: 1.15em;
 +
    margin: 1em auto;
 +
    padding: 1em;
 +
    width: calc(855px - 2em);
 +
}
 +
.note sup {
 +
    position: relative;
 +
    top: 0.25em;
 +
}
 +
.note > span {
 +
    display: block;
 +
}
 +
.note > .title {
 +
    font-size: 1.35em;
 +
    font-weight: bold;
 +
}
 +
.note > .asterisk {
 +
    font-size: 0.75em;
 
}
 
}
 
}}<div class="bg">[[File:TTbg.jpg|link=]]</div>
 
}}<div class="bg">[[File:TTbg.jpg|link=]]</div>
Line 401: Line 433:
 
<div class="pizza2">[[File:TTbigpizza2.png|link=]]</div>
 
<div class="pizza2">[[File:TTbigpizza2.png|link=]]</div>
 
<div class="navback">&nbsp;</div>
 
<div class="navback">&nbsp;</div>
−
<div class="wrapper">
+
<div class="wrapper" id="menu">
 
<div class="nav">[[File:twistedtoppings.png|class=logo|link=]]<ul class="toppings">
 
<div class="nav">[[File:twistedtoppings.png|class=logo|link=]]<ul class="toppings">
 
<li>Crusts
 
<li>Crusts
Line 412: Line 444:
 
* Thin
 
* Thin
 
* Waffle
 
* Waffle
 +
* Cauliflower
 +
*Croissant
 
</li>
 
</li>
 
<li>Sauces
 
<li>Sauces
Line 454: Line 488:
 
* Ricotta
 
* Ricotta
 
* Romano
 
* Romano
 +
*Vegan Cheez
 
</li>
 
</li>
 
<li>Fruit
 
<li>Fruit
 +
* Apples
 +
* Bananas
 
* Blueberries
 
* Blueberries
 
* Cherries
 
* Cherries
Line 464: Line 501:
 
* Lemon
 
* Lemon
 
* Peaches
 
* Peaches
 +
*Pineapple
 +
* Strawberries
 
</li>
 
</li>
 
<li>Veggies
 
<li>Veggies
Line 500: Line 539:
 
* Bratwurst
 
* Bratwurst
 
* Chicken
 
* Chicken
 +
* Chikkin
 
* Crab Meat
 
* Crab Meat
 
* Eggs
 
* Eggs
−
* Emu
 
 
* Haggis
 
* Haggis
 
* Ham
 
* Ham
 
* Hot Dogs
 
* Hot Dogs
 
* Italian Sausage
 
* Italian Sausage
−
* Kangaroo
 
 
* Lamb
 
* Lamb
 
* Mussels
 
* Mussels
Line 516: Line 554:
 
* Salami
 
* Salami
 
* Salmon
 
* Salmon
 +
* SHAM (Vegan Ham)
 
* Shrimp
 
* Shrimp
 
* Sloppy Joe
 
* Sloppy Joe
Line 542: Line 581:
 
<li>Other
 
<li>Other
 
* Cotton Candy
 
* Cotton Candy
−
* Macaroni
+
* Macaroni and Cheese
 
* Marshmallow
 
* Marshmallow
 
* Sliced Egg Rolls
 
* Sliced Egg Rolls
 +
* Chocolate Chips
 +
* White Chocolate Chips
 +
* Gummy Bears
 +
</li>
 +
<li>Prefab Pizzas
 +
* Sherman Tank
 +
* Wassup Rabbit?
 +
* Did I do that?
 +
* Yo Mama!
 +
* Fairy Princess
 +
* Cowboy Jim
 +
* Grab the Milk!
 
</li>
 
</li>
 
</ul>
 
</ul>
Line 550: Line 601:
 
<div class="content">
 
<div class="content">
 
<div id="panels">
 
<div id="panels">
−
<div id="second" class="tab" tabindex="0">[[#second|●]]</div>
+
<div id="first-panel" class="panel">[[File:TTpanel1.jpg|link=]]</div>
−
<div id="third" class="tab" tabindex="0">[[#third|●]]</div>
+
<div id="second-panel" class="panel">[[File:TTpanel2.jpg|link=]]</div>
−
<div id="first" class="tab" tabindex="0">[[#first|●]]</div>
+
<div id="third-panel" class="panel">[[File:TTpanel3.jpg|link=]]</div>
−
<div id="first-panel" class="panel">Panel 1</div>
 
−
<div id="second-panel" class="panel">Panel 2</div>
 
−
<div id="third-panel" class="panel">Panel 3</div>
 
−
</div>
 
−
Stuff goes here</div>
 
 
</div>
 
</div>
−
<div class="ttfooter"><span>And here also.</span></div>
+
<div id="trio">
 +
<div class="one"><span>1&thinsp;</span> All pizzas are personal pan sized.  You just pick your [[#menu|crust]]. We'll prepare it for you and hand it over on a pan or peel.<br/>[[File:TTpeel.png|link=]]</div>
 +
<div class="two"><span>2&thinsp;</span>Pick out your [[#menu|sauces, cheeses, and toppings]] at our topping bar.  Put on as much or as little as you like!<br/>[[File:TTtoppings.jpg|link=]]</div>
 +
<div class="three"><span>3&thinsp;</span>Let us swiftly bake it for you until it's the perfect combination of gooey and crisp... then, <font color="#00ff00">enjoy</font>!<br/>[[File:TTenjoy.png|link=]]</div></div>
 +
<div class="note"><span class="title">Meetings, workshops, celebrations?</span>If your group needs a quieter, more exclusive place to enjoy your pizza, why not try our private back room?<span class="asterisk" id="disclaimer"><font color="#00fff">
 +
 
 +
Bring in your receipt from Down the Rabbit Hole and get 10% off</font>
 +
</div></div>
 +
<div class="ttfooter"><span>Twisted Toppings [[File:TTtinypizza.png|15px|link=]] D St. & Canary St. [[File:TTtinypizza.png|15px|link=]] [[File:Facebook-Icon.png|18px|link=]] [[File:Twitter-Icon.png|18px|link=]] [[File:TTtinypizza.png|15px|link=]] Prospect, California [[File:TTtinypizza.png|15px|link=]] (555)867-5309</span></div>
 +
[[Category:Business]]

Latest revision as of 17:00, 1 November 2020

TTbg.jpg
TTbigpizza.png
TTbigpizza2.png
 
Retrieved from "https://cityofhopemush.net/index.php?title=Twisted_Toppings&oldid=221422"