Jump to content

mindapolis

Members
 View Profile  See their activity

  • Posts

    361

  • Joined

  • Last visited

 Content Type 

Everything posted by mindapolis

  1. mindapolis
    I almost have it! I just can't figure out why the words front and back are above the boxes. <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <script type="text/javascript" src="http://www.linkbuildingservices4sites.com/resources/slide-show.js"></script> <style type="text/css"> /* entire container, keeps perspective */ .flip-container { perspective: 1000; } /* flip the pane when hovered */ .flip-container:hover .flipper, .flip-container.hover .flipper { transform: rotateY(180deg); } .flip-container, .front, .back { background-color: #99cc99; width: 320px; height: 200px; clear: both; border-radius: 35px; } /* flip speed goes here */ .flipper { transition: 0.6s; transform-style: preserve-3d; position: relative; } /* hide back of pane during swap */ .front, .back { backface-visibility: hidden; position: absolute; top: 0; left: 0; } /* front pane, placed above back */ .front { z-index: 2; /* for firefox 31 */ transform: rotateY(0deg); } /* back, initially hidden pane */ .back { transform: rotateY(180deg); } li { list-style:none; } #marketingPortfolio{ float:right; width: 320px; } #websitePortfolio { float:left; width:320px; margin-top:20px; clear:both; } .quotes { -webkit-transition: opacity 0.5s ease-in; -moz-transition: opacity 0.5s ease-in; -o-transition: opacity 0.5s ease-in; } .quotes.fade-out { opacity:0; } .quotes.fade-in { opacity:1; } </style> <link href="MSU.css" rel="stylesheet" type="text/css"> <link href="jQueryAssets/jquery.ui.core.min.css" rel="stylesheet" type="text/css"> <link href="jQueryAssets/jquery.ui.theme.min.css" rel="stylesheet" type="text/css"> <link href="jQueryAssets/jquery.ui.button.min.css" rel="stylesheet" type="text/css"> <link href="jQueryAssets/jquery.ui.tabs.min.css" rel="stylesheet" type="text/css"> <!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--> <script src="jQueryAssets/jquery-1.11.1.min.js" type="text/javascript"></script> <script src="jQueryAssets/jquery.ui-1.10.4.button.min.js" type="text/javascript"></script> <script src="jQueryAssets/jquery.ui-1.10.4.tabs.min.js" type="text/javascript"></script> <script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/bad-script:n4:default;arbutus:n4:default;allan:n7:default.js" type="text/javascript"></script> <script type="text/javascript"> function fade(btnElement) { if (btnElement.value === "Fade Out") { document.getElementById("myImg").className = "fade-out"; btnElement.value = "Fade In"; } else { document.getElementById("myImg").className = "fade-in"; btnElement.value = "Fade Out"; } } </script> </head> <body> <header> <img src="assets/logo.png" width="274" height="103" alt=""/><br /> <span id="catchPhrase">Meeting All Your Marketing Needs. . .</span> <p> </p> <nav> <p> </p> <p><a href="test1.html" tabindex="1" accesskey="H">Home</a> <a href="services.htm" tabindex="2" accesskey="S">Services</a> <a href="contact.php" tabindex="3" accesskey="C">Contact Us</a></p> </nav> </header> <section> Running a business, of any size, is rough, but it's especially rough for small businesses. as an owner of a small business, you wear so many hats! You are the salesperson, the producer of the product, and sometime you have to do all the marketing work. Wouldn't it be nice if there was a way to hand the marketing tasks to someone else, and not have to hire a full-time marketing staff? Well, fortunately there is! Media Services Unlimited is a full-service marketing company specifically geared towards small businesses. We handle all the marketing tasks, so you can focus on producing high-quality products and your customers! </section> <aside> <h2 class="quotes">first quote</h2> <h2 class="quotes">second quote</h2> </aside> <span id="websitePortfolio"> <div class="flip-container" ontouchstart="this.classList.toggle('hover');"> <div class="flipper"> <div class="front"> Website Portfolio </div> <div class="back"> <ul> <li>Website Design </li> <li>Content Management </li> <li>SEO</li> </ul> </div> </div> </div> </span> <span id="marketingPortfolio"> <div class="flip-container" ontouchstart="this.classList.toggle('hover');"> <div class="flipper"> <div class="front"> Marketing Portfolio </div> <div class="back"> <ul> <li>Marketing Material Creation </li> <li>Social Media Management </li> <li>Creative Writing </li> </ul> </div> </div> </div> </span> </body> </html>
  2. mindapolis
    I tried the css version. It was easier to understand but it 's still not working. if someone could help me I would appreciate it. <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <script type="text/javascript" src="http://www.linkbuildingservices4sites.com/resources/slide-show.js"></script> <style type="text/css"> /* entire container, keeps perspective */ .flip-container { perspective: 1000; } /* flip the pane when hovered */ .flip-container:hover .flipper, .flip-container.hover .flipper { transform: rotateY(180deg); } .flip-container, .front, .back { background-color: #99cc99; width: 320px; height: 200px; clear: both; border-radius: 35px; } /* flip speed goes here */ .flipper { transition: 0.6s; transform-style: preserve-3d; position: relative; } /* hide back of pane during swap */ .front, .back { backface-visibility: hidden; position: absolute; top: 0; left: 0; } /* front pane, placed above back */ .front { z-index: 2; /* for firefox 31 */ transform: rotateY(0deg); } /* back, initially hidden pane */ .back { transform: rotateY(180deg); } li { list-style:none; } #marketingPortfolio{ float:right; width: 320px; } #websitePortfolio { float:left; width:320px; margin-top:20px; clear:both; } .quotes { -webkit-transition: opacity 0.5s ease-in; -moz-transition: opacity 0.5s ease-in; -o-transition: opacity 0.5s ease-in; } .quotes.fade-out { opacity:0; } .quotes.fade-in { opacity:1; } </style> <link href="MSU.css" rel="stylesheet" type="text/css"> <link href="jQueryAssets/jquery.ui.core.min.css" rel="stylesheet" type="text/css"> <link href="jQueryAssets/jquery.ui.theme.min.css" rel="stylesheet" type="text/css"> <link href="jQueryAssets/jquery.ui.button.min.css" rel="stylesheet" type="text/css"> <link href="jQueryAssets/jquery.ui.tabs.min.css" rel="stylesheet" type="text/css"> <!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--> <script src="jQueryAssets/jquery-1.11.1.min.js" type="text/javascript"></script> <script src="jQueryAssets/jquery.ui-1.10.4.button.min.js" type="text/javascript"></script> <script src="jQueryAssets/jquery.ui-1.10.4.tabs.min.js" type="text/javascript"></script> <script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/bad-script:n4:default;arbutus:n4:default;allan:n7:default.js" type="text/javascript"></script> <script type="text/javascript"> function fade(btnElement) { if (btnElement.value === "Fade Out") { document.getElementById("myImg").className = "fade-out"; btnElement.value = "Fade In"; } else { document.getElementById("myImg").className = "fade-in"; btnElement.value = "Fade Out"; } } </script> </head> <body> <header> <img src="assets/logo.png" width="274" height="103" alt=""/><br /> <span id="catchPhrase">Meeting All Your Marketing Needs. . .</span> <p> </p> <nav> <p> </p> <p><a href="test1.html" tabindex="1" accesskey="H">Home</a> <a href="services.htm" tabindex="2" accesskey="S">Services</a> <a href="contact.php" tabindex="3" accesskey="C">Contact Us</a></p> </nav> </header> <section> Running a business, of any size, is rough, but it's especially rough for small businesses. as an owner of a small business, you wear so many hats! You are the salesperson, the producer of the product, and sometime you have to do all the marketing work. Wouldn't it be nice if there was a way to hand the marketing tasks to someone else, and not have to hire a full-time marketing staff? Well, fortunately there is! Media Services Unlimited is a full-service marketing company specifically geared towards small businesses. We handle all the marketing tasks, so you can focus on producing high-quality products and your customers! </section> <aside> <h2 class="quotes">first quote</h2> <h2 class="quotes">second quote</h2> </aside> <span id="websitePortfolio"> <div class="flip-container" ontouchstart="this.classList.toggle('hover');"> <div class="flipper"> <div class="front"> Website Portfolio </div> <div class="back"> <ul> <li>Website Design </li> <li>Content Management </li> <li>SEO</li> </ul> </div> </div> </div> </span> <span id="marketingPortfolio"> <div class="flip-container" ontouchstart="this.classList.toggle('hover');"> <div class="flipper"> <div class="front"> Marketing Portfolio </div> <div class="back"> <ul> <li>Marketing Material Creation </li> <li>Social Media Management </li> <li>Creative Writing </li> </ul> </div> </div> </div> </span> </body> </html>
  3. mindapolis
    if I try the css version, where exactexactly would the animate.min.css file be?
  4. mindapolis
    Is there a script that fades text in and out?
  5. mindapolis
    Sorry, one more question. I'm trying to get the portfolio blocks to line up horizontally, not vertically? I thought the float would work but it 's not doing anything. <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <style type="text/css"> /* entire container, keeps perspective */ .flip-container { perspective: 1000; } /* flip the pane when hovered */ .flip-container:hover .flipper, .flip-container.hover .flipper { transform: rotateY(180deg); } .flip-container, .front, .back { background-color: #99cc99; width: 320px; height: 200px; clear: both; border-radius: 35px; } /* flip speed goes here */ .flipper { transition: 0.6s; transform-style: preserve-3d; position: relative; } /* hide back of pane during swap */ .front, .back { backface-visibility: hidden; position: absolute; top: 0; left: 0; } /* front pane, placed above back */ .front { z-index: 2; /* for firefox 31 */ transform: rotateY(0deg); } /* back, initially hidden pane */ .back { transform: rotateY(180deg); } li { list-style:none; } marketingPortfolio, multimediaPortfolio { float:right; width: 320px; } websitePortfolio { float:left; width:320px; } </style> <link href="MSU.css" rel="stylesheet" type="text/css"> <link href="jQueryAssets/jquery.ui.core.min.css" rel="stylesheet" type="text/css"> <link href="jQueryAssets/jquery.ui.theme.min.css" rel="stylesheet" type="text/css"> <link href="jQueryAssets/jquery.ui.button.min.css" rel="stylesheet" type="text/css"> <link href="jQueryAssets/jquery.ui.tabs.min.css" rel="stylesheet" type="text/css"> <!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--> <script src="jQueryAssets/jquery-1.11.1.min.js" type="text/javascript"></script> <script src="jQueryAssets/jquery.ui-1.10.4.button.min.js" type="text/javascript"></script> <script src="jQueryAssets/jquery.ui-1.10.4.tabs.min.js" type="text/javascript"></script> <script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/bad-script:n4:default;arbutus:n4:default;allan:n7:default.js" type="text/javascript"></script> </head> <body> <header> <img src="assets/logo.png" width="274" height="103" alt=""/><br /> <span id="catchPhrase">Meeting All Your Marketing Needs. . .</span> <p> </p> <nav> <p> </p> <p><a href="test1.html" tabindex="1" accesskey="H">Home</a> <a href="services.htm" tabindex="2" accesskey="S">Services</a> <a href="contact.php" tabindex="3" accesskey="C">Contact Us</a></p> </nav> </header> <section> Running a business, of any size, is rough, but it's especially rough for small businesses. as an owner of a small business, you wear so many hats! You are the salesperson, the producer of the product, and sometime you have to do all the marketing work. Wouldn't it be nice if there was a way to hand the marketing tasks to someone else, and not have to hire a full-time marketing staff? Well, fortunately there is! Media Services Unlimited is a full-service marketing company specifically geared towards small businesses. We handle all the marketing tasks, so you can focus on producing high-quality products and your customers! </section> <aside> testimonial quotes will go here </aside> <div id="websitePortfolio"> <div class="flip-container" ontouchstart="this.classList.toggle('hover');"> <div class="flipper"> <div class="front"> Website Portfolio </div> <div class="back"> <ul> <li>Website Design </li> <li>Content Management </li> <li>SEO</li> </ul> </div> </div> </div> </div> <div id="marketingPortfolio"> <div class="flip-container" ontouchstart="this.classList.toggle('hover');"> <div class="flipper"> <div class="front"> Marketing Portfolio </div> <div class="back"> <ul> <li>Marketing Material Creation </li> <li>Social Media Management </li> <li>Creative Writing </li> </ul> </div> </div> </div> </div> <div id="multimediaPortfolio"> <div class="flip-container" ontouchstart="this.classList.toggle('hover');"> <div class="flipper"> <div class="front"> Multimedia Portfolio </div> <div class="back"> <ul> <li>Video Editing </li> </ul> </div> </div> </div> </div> </body> </html>
  6. mindapolis
    Is there a way to get the whole green area to flip, not just the words? <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <style type="text/css"> /* entire container, keeps perspective */ .flip-container { perspective: 1000; } /* flip the pane when hovered */ .flip-container:hover .flipper, .flip-container.hover .flipper { transform: rotateY(180deg); } .flip-container, .front, .back { background-color: #99cc99; width: 320px; height: 200px; clear: both; border-radius: 35px; } /* flip speed goes here */ .flipper { transition: 0.6s; transform-style: preserve-3d; position: relative; } /* hide back of pane during swap */ .front, .back { backface-visibility: hidden; position: absolute; top: 0; left: 0; } /* front pane, placed above back */ .front { z-index: 2; /* for firefox 31 */ transform: rotateY(0deg); } /* back, initially hidden pane */ .back { transform: rotateY(180deg); } li { list-style:none; } marketingPortfolio, multimediaPortfolio { float:right; } websitePortfolio { float:left; } </style> <link href="MSU.css" rel="stylesheet" type="text/css"> <link href="jQueryAssets/jquery.ui.core.min.css" rel="stylesheet" type="text/css"> <link href="jQueryAssets/jquery.ui.theme.min.css" rel="stylesheet" type="text/css"> <link href="jQueryAssets/jquery.ui.button.min.css" rel="stylesheet" type="text/css"> <link href="jQueryAssets/jquery.ui.tabs.min.css" rel="stylesheet" type="text/css"> <!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--> <script src="jQueryAssets/jquery-1.11.1.min.js" type="text/javascript"></script> <script src="jQueryAssets/jquery.ui-1.10.4.button.min.js" type="text/javascript"></script> <script src="jQueryAssets/jquery.ui-1.10.4.tabs.min.js" type="text/javascript"></script> <script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/bad-script:n4:default;arbutus:n4:default;allan:n7:default.js" type="text/javascript"></script> </head> <body> <header> <img src="assets/logo.png" width="274" height="103" alt=""/><br /> <span id="catchPhrase">Meeting All Your Marketing Needs. . .</span> <p> </p> <nav> <p> </p> <p><a href="test1.html" tabindex="1" accesskey="H">Home</a> <a href="services.htm" tabindex="2" accesskey="S">Services</a> <a href="contact.php" tabindex="3" accesskey="C">Contact Us</a></p> </nav> </header> <section> Running a business, of any size, is rough, but it's especially rough for small businesses. as an owner of a small business, you wear so many hats! You are the salesperson, the producer of the product, and sometime you have to do all the marketing work. Wouldn't it be nice if there was a way to hand the marketing tasks to someone else, and not have to hire a full-time marketing staff? Well, fortunately there is! Media Services Unlimited is a full-service marketing company specifically geared towards small businesses. We handle all the marketing tasks, so you can focus on producing high-quality products and your customers! </section> <aside> testimonial quotes will go here </aside> <div id="websitePortfolio"> <div class="flip-container" ontouchstart="this.classList.toggle('hover');"> <div class="flipper"> <div class="front"> Website Portfolio </div> <div class="back"> <ul> <li>Website Design </li> <li>Content Management </li> <li>SEO</li> </ul> </div> </div> </div> </div> <div id="marketingPortfolio"> <div class="flip-container" ontouchstart="this.classList.toggle('hover');"> <div class="flipper"> <div class="front"> Marketing Portfolio </div> <div class="back"> <ul> <li>Marketing Material Creation </li> <li>Social Media Management </li> <li>Creative Writing </li> </ul> </div> </div> </div> </div> <div id="multimediaPortfolio"> <div class="flip-container" ontouchstart="this.classList.toggle('hover');"> <div class="flipper"> <div class="front"> Multimedia Portfolio </div> <div class="back"> <ul> <li>Video Editing </li> </ul> </div> </div> </div> </div> </body> </html>
  7. mindapolis
    It 's working sort of. I want it below the section and the aside elements. I set it to clear both elements but it 's not putting it below everything. <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <style type="text/css"> /* entire container, keeps perspective */ .flip-container { perspective: 1000; } /* flip the pane when hovered */ .flip-container:hover .flipper, .flip-container.hover .flipper { transform: rotateY(180deg); clear: both; } .flip-container, .front, .back { width: 320px; height: 480px; } /* flip speed goes here */ .flipper { transition: 0.6s; transform-style: preserve-3d; position: relative; } /* hide back of pane during swap */ .front, .back { backface-visibility: hidden; position: absolute; top: 0; left: 0; } /* front pane, placed above back */ .front { z-index: 2; /* for firefox 31 */ transform: rotateY(0deg); } /* back, initially hidden pane */ .back { transform: rotateY(180deg); } </style> <link href="MSU.css" rel="stylesheet" type="text/css"> <link href="jQueryAssets/jquery.ui.core.min.css" rel="stylesheet" type="text/css"> <link href="jQueryAssets/jquery.ui.theme.min.css" rel="stylesheet" type="text/css"> <link href="jQueryAssets/jquery.ui.button.min.css" rel="stylesheet" type="text/css"> <link href="jQueryAssets/jquery.ui.tabs.min.css" rel="stylesheet" type="text/css"> <!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--> <script src="jQueryAssets/jquery-1.11.1.min.js" type="text/javascript"></script> <script src="jQueryAssets/jquery.ui-1.10.4.button.min.js" type="text/javascript"></script> <script src="jQueryAssets/jquery.ui-1.10.4.tabs.min.js" type="text/javascript"></script> <script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/bad-script:n4:default;arbutus:n4:default;allan:n7:default.js" type="text/javascript"></script> </head> <body> <header> <img src="assets/logo.png" width="274" height="103" alt=""/><br /> <span id="catchPhrase">Meeting All Your Marketing Needs. . .</span> <p> </p> <nav> <p> </p> <p><a href="test1.html" tabindex="1" accesskey="H">Home</a> <a href="services.htm" tabindex="2" accesskey="S">Services</a> <a href="contact.php" tabindex="3" accesskey="C">Contact Us</a></p> </nav> </header> <section> Running a business, of any size, is rough, but it's especially rough for small businesses. as an owner of a small business, you wear so many hats! You are the salesperson, the producer of the product, and sometime you have to do all the marketing work. Wouldn't it be nice if there was a way to hand the marketing tasks to someone else, and not have to hire a full-time marketing staff? Well, fortunately there is! Media Services Unlimited is a full-service marketing company specifically geared towards small businesses. We handle all the marketing tasks, so you can focus on producing high-quality products and your customers! </section> <aside> testimonial quotes will go here </aside> <div class="flip-container" ontouchstart="this.classList.toggle('hover');"> <div class="flipper"> <div class="front"> did I </div> <div class="back"> do it? </div> </div> </div> </body> </html>
  8. mindapolis
    I think I'm making some progrses now.
  9. mindapolis
    Something is not working. No boxes are on the screen. <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <style type="text/css"> button { background: yellow; width: 250px; height: 150px; transition: transform .8s ease-in-out, color .75s; position: relative; display: inline-block; } /* entire container, keeps perspective */ .flip-container { perspective: 1000; } /* flip the pane when hovered */ .flip-container:hover .flipper, .flip-container.hover .flipper { transform: rotateY(180deg); } .flip-container, .front, .back { width: 320px; height: 480px; } /* flip speed goes here */ .flipper { transition: 0.6s; transform-style: preserve-3d; position: relative; } /* hide back of pane during swap */ .front, .back { backface-visibility: hidden; position: absolute; top: 0; left: 0; } /* front pane, placed above back */ .front { z-index: 2; /* for firefox 31 */ transform: rotateY(0deg); } /* back, initially hidden pane */ .back { transform: rotateY(180deg); } </style> <link href="MSU.css" rel="stylesheet" type="text/css"> <link href="jQueryAssets/jquery.ui.core.min.css" rel="stylesheet" type="text/css"> <link href="jQueryAssets/jquery.ui.theme.min.css" rel="stylesheet" type="text/css"> <link href="jQueryAssets/jquery.ui.button.min.css" rel="stylesheet" type="text/css"> <link href="jQueryAssets/jquery.ui.tabs.min.css" rel="stylesheet" type="text/css"> <!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--> <script src="jQueryAssets/jquery-1.11.1.min.js" type="text/javascript"></script> <script src="jQueryAssets/jquery.ui-1.10.4.button.min.js" type="text/javascript"></script> <script src="jQueryAssets/jquery.ui-1.10.4.tabs.min.js" type="text/javascript"></script> <script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/bad-script:n4:default;arbutus:n4:default;allan:n7:default.js" type="text/javascript"></script> </head> <body> <header> <img src="assets/logo.png" width="274" height="103" alt=""/><br /> Meeting All Your Marketing Needs. . . <p> </p> <nav> <p> </p> <p><a href="test1.html" tabindex="1" accesskey="H">Home</a> <a href="services.htm" tabindex="2" accesskey="S">Services</a> <a href="contact.php" tabindex="3" accesskey="C">Contact Us</a></p> </nav> </header> <section> Running a business, of any size, is rough, but it's especially rough for small businesses. as an owner of a small business, you wear so many hats! You are the salesperson, the producer of the product, and sometime you have to do all the marketing work. Wouldn't it be nice if there was a way to hand the marketing tasks to someone else, and not have to hire a full-time marketing staff? Well, fortunately there is! Media Services Unlimited is a full-service marketing company specifically geared towards small businesses. We handle all the marketing tasks, so you can focus on producing high-quality products and your customers! </section> <div class="flip-container" ontouchstart="this.classList.toggle('hover');"> <div class="flipper"> <div class="front"> <!-- front content --> </div> <div class="back"> <!-- back content --> </div> </div> </div> </body> </html>
  10. mindapolis
    like you would flip over a card in a deck of cards. Does that make sense?
  11. mindapolis
    No I would like them to flip, not rotate.
  12. mindapolis
    Originally I had the buttons flip 180 degrees when the mouse hovered over them , but now they are fading in and out which is not what I want.
  13. mindapolis
    Well, I thought everything was set. i had the button flipping, not fading. Can anyone please tell me what needs to be changed please?
  14. mindapolis
    Thanks! It's where I can work with it now. Thanks so much!
  15. mindapolis
    Hi, I have been out of coding for a few years, and I'm having trouble figuring out why the 2 boxes aren't side by side. if someone could help me I would really appreciate it. <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <style type="text/css"> button { background: yellow; width: 250px; height: 150px; margin: 230px; transition: transform .8s ease-in-out, color .75s; position: relative; } button>span { display: inline-block; transition: opacity .8s; position: absolute; width: 250px; top: 15px; left: 0; float: right; } button>.flipped { opacity: 0; transform: rotate(180deg); } button:hover { transform: rotate(180deg); } button:hover>.normal { opacity: 0; } button:hover>.flipped { opacity: 1; } li { list-style:none; } buttonMarketing>span { display: inline-block; transition: opacity .8s; position: absolute; width: 250px; top: 15px; left: 0; float:right; } buttonMarketing>.flipped { opacity: 0; transform: rotate(180deg); } buttonMarketing:hover { transform: rotate(180deg); } buttonMarketing:hover>.normal { opacity: 0; } buttonMarketing:hover>.flipped { opacity: 1; } li { list-style:none; } </style> <link href="MSU.css" rel="stylesheet" type="text/css"> <link href="jQueryAssets/jquery.ui.core.min.css" rel="stylesheet" type="text/css"> <link href="jQueryAssets/jquery.ui.theme.min.css" rel="stylesheet" type="text/css"> <link href="jQueryAssets/jquery.ui.button.min.css" rel="stylesheet" type="text/css"> <!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--> <script src="jQueryAssets/jquery-1.11.1.min.js" type="text/javascript"></script> <script src="jQueryAssets/jquery.ui-1.10.4.button.min.js" type="text/javascript"></script> <script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/bad-script:n4:default;arbutus:n4:default;allan:n7:default.js" type="text/javascript"></script> </head> <body> <header><span id="BusName"> Media Services Unlimited </span> <br> <span id="BizMotto"> Meeting All Your Marketing Needs. . . </span> <p> </p> <nav> <a href="test1.html" tabindex="1" accesskey="H">Home</a> <a href="services.htm" tabindex="2" accesskey="S">Services</a> <a href="contact.php" tabindex="3" accesskey="C">Contact Us</a> </nav> </header> <button><span class="normal">Web Samples</span><span class="flipped"> <ul> <li> Website Design </li> <li> Social Media </li> <li> SEO</li> </ul> </span></button> <buttonMarketing><span class="normal">Marketing Samples</span><span class="flipped"> <ul> <li> Blogs</li> <li> Marketing Material Creation </li> </ul> </span></buttonMarketing> </body> </html>
  16. mindapolis
    YES! That is the idea I had. I will work on it next week! Thank you so much!
  17. mindapolis
    That's not quite what I had in mind. Something like this Only when the button flips over there would be links on the back. Is that possible?
  18. mindapolis
    Hi, is there a way that when the mouse rolls over a buton, the button flips over with links on the back of the button?
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.