Difference between revisions of "Twisted Toppings"

From City of Hope MUSH
Jump to navigation Jump to search
imported>HoneyBadger
imported>Felix
Line 268: Line 268:
 
}
 
}
 
.content {
 
.content {
−
     min-height: 750px;
+
     //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;
 +
    text-align: center;
 +
}
 +
.ttfooter img[alt="TTtinypizza.png"] {
 +
    margin: 0 1em;
 
}
 
}
 
/*---Panels---*/
 
/*---Panels---*/
Line 280: Line 284:
 
     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;
+
     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 301:
 
     left: 0;
 
     left: 0;
 
     transition: all 1s;
 
     transition: all 1s;
 +
}
 +
.panel img {
 +
    height: 100%;
 +
    width: auto;
 
}
 
}
 
#first-panel {
 
#first-panel {
Line 332: Line 316:
 
#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 390: Line 339:
 
     100% {left: -100%;}
 
     100% {left: -100%;}
 
}
 
}
−
@keyframes whichOne {
+
#trio {
−
     0% {opacity: 0.5; color: cyan;}
+
     display: flex;
−
     1.6666666666666667% {opacity: 1; color: lime;}
+
    flex-flow: row wrap;
−
     33.333333333333333%{opacity: 1; color: lime;}
+
    justify-content: space-between;
−
     35% {opacity: 0.5; color: cyan;}
+
    margin: 2em auto;
−
     100% {opacity: 0.5; color: cyan;}
+
    width: 75%;
 +
}
 +
#trio > div {
 +
    background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
 +
    border: 1px dotted white;
 +
     flex: 1 1 25%;
 +
    margin-right: 2.5em;
 +
    min-height: 250px;
 +
    padding: 1em;
 +
    position: relative;
 +
}
 +
#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: 5em;
 +
    color: #00ffff;
 +
    display: flex;
 +
    float: left;
 +
    font-size: 2em;
 +
    font-weight: bold;
 +
    height: 2em;
 +
    justify-content: center;
 +
    left: -1em;
 +
    position: relative;
 +
    text-shadow: 1px 1px 1px black, -2px 1px 1px black, 1px -1px 1px black, -1px -1px 1px black;
 +
    top: -1em;
 +
    width: 2em;
 +
}
 +
#trio .two span {
 +
     background: #ff0000 none repeat scroll 0 0;
 +
    color: #ffff00;
 +
}
 +
#trio .three > span {
 +
     background: #0000ff none repeat scroll 0 0;
 +
    color: #ff00ff;
 
}
 
}
 
}}<div class="bg">[[File:TTbg.jpg|link=]]</div>
 
}}<div class="bg">[[File:TTbg.jpg|link=]]</div>
Line 553: Line 540:
 
<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>
 
</div>
−
Stuff goes here</div>
+
<div id="trio">
 +
<div class="one"><span>1</span>Step one.</div>
 +
<div class="two"><span>2</span>Step two.</div>
 +
<div class="three"><span>3</span>Step three.</div>
 +
</div></div>
 
</div>
 
</div>
−
<div class="ttfooter"><span>And here also.</span></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>

Revision as of 08:08, 7 March 2017

TTbg.jpg
TTbigpizza.png
TTbigpizza2.png
 
  • Crusts
    • Deep Dish
    • Garlic Bread
    • Pan
    • Pita
    • Potato Chip
    • Pretzel
    • Thin
    • Waffle
  • Sauces
    • Alfredo
    • BBQ Sauce
    • Butter
    • Caesar
    • Chocolate
    • Cream Cheese
    • Garlic Butter
    • Honey
    • Hot Sauce
    • Hummus
    • Jelly
    • Marinara
    • Marshmallow Sauce
    • Mayo
    • Nutella
    • Olive Oil
    • Peanut Butter
    • Pesto
    • Ranch
    • Sour Cream
    • Strawberry Balsamic
    • Tzatziki sauce
  • Cheeses
    • American
    • Asiago
    • Bleu Cheese
    • Brie
    • Cheddar
    • Colby
    • Cottage Cheese
    • Goat Cheese
    • Gouda
    • Mascarpone
    • Monterey Jack
    • Mozzarella
    • Parmesan
    • Provolone
    • Ricotta
    • Romano
  • Fruit
    • Blueberries
    • Cherries
    • Coconut
    • Figs
    • Granola
    • Grilled Watermelon
    • Lemon
    • Peaches
  • Veggies
    • Artichoke
    • Arugula
    • Avocado
    • Banana Peppers
    • Black Olives
    • Broccoli
    • Capers
    • Caramelized Onion
    • Corn
    • Cucumber
    • Diced Tomatoes
    • Eggplant
    • Green Onion
    • Green Peppers
    • Jalapenos
    • Mushrooms
    • Onions
    • Peas
    • Pickles
    • Roasted Garlic
    • Roasted Red Peppers
    • Sliced Tomatoes
    • Spinach
    • Sun-Dried Tomatoes
    • Sweet Potato
    • Swiss Chard
  • Protein
    • Alligator
    • Bacon
    • Beef
    • Boiled Egg
    • Bratwurst
    • Chicken
    • Crab Meat
    • Eggs
    • Emu
    • Haggis
    • Ham
    • Hot Dogs
    • Italian Sausage
    • Kangaroo
    • Lamb
    • Mussels
    • Octopus
    • Pine Nuts
    • Pepperoni
    • Roast Beef
    • Salami
    • Salmon
    • Shrimp
    • Sloppy Joe
    • Spam
    • Squid
    • Sunflower Seeds
    • Tofu
    • Tuna
  • Spices
    • Allspice
    • Cilantro
    • Cinnamon
    • Cumin
    • Oregano
    • Paprika
    • Parsley
    • Pepper
    • Peppermint
    • Pumpkin Pie Spice
    • Rosemary
    • Sage
    • Salt
    • Thyme
  • Other
    • Cotton Candy
    • Macaroni and Cheese
    • Marshmallow
    • Sliced Egg Rolls
    • Chocolate Chips
    • White Chocolate Chips
    • Gummy Bears
TTpanel1.jpg
TTpanel2.jpg
TTpanel3.jpg
1Step one.
2Step two.
3Step three.
Twisted Toppings TTtinypizza.png D St. & Canary St. TTtinypizza.png Facebook-Icon.png Twitter-Icon.png TTtinypizza.png Prospect, California TTtinypizza.png (555)867-5309
Retrieved from "https://cityofhopemush.net/index.php?title=Twisted_Toppings&oldid=115561"