API tools faq
paste
Advertisement
obernardovieira

My Valentine Gift (+HTML+CSS)

obernardovieira
Feb 14th, 2014
303
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 18.87 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br" xml:lang="pt-br">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />
  6.     <title>Happy Valentine's day</title>
  7.     <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  8.     <style>
  9.     .primaryContainer {
  10.         height: auto;margin-left: auto;margin-right: auto;min-height: 100%;width: 100%;position: relative;background-color: rgb(255, 0, 0);
  11.     }
  12.     #msgpalco {
  13.         float: left;font-size: 1em;width: 80.742508%;height: auto;text-align: left;font-weight: normal;
  14.         line-height: 1em;margin-left: 9.628746%;margin-top: 49px;clear: none;min-height: 293px;
  15.     }
  16.     #boxesquerda {
  17.         float: left;margin-left: 9.628746%;margin-top: 25px;border-top: 25px solid transparent;
  18.         border-right-width: 50px;border-right-style: solid;border-right-color: red;border-bottom: 25px solid transparent;
  19.     }
  20.     #boxdireita {
  21.         float: left;margin-left: 75.026115%;margin-top: 366px;position: absolute;
  22.         border-top: 25px solid transparent;border-left: 50px solid red;border-bottom: 25px solid transparent;
  23.     }
  24.     .corda {
  25.         float: left;font-size: 1em;width: 1.791159%;text-align: left;font-weight: normal;line-height: 1em;clear: none;
  26.         position: absolute;top: 0px;border-left-color: rgb(255, 255, 255);border-left-width: 1px;border-left-style: solid;
  27.     }
  28.     .miniheart { position: relative;width: 100px;height: 90px; }
  29.     .miniheart:before,
  30.     .miniheart:after { position: absolute;content: "";left: 50px;top: 0;width: 50px;height: 80px;background: white;
  31.         -moz-border-radius: 50px 50px 0 0;
  32.         border-radius: 50px 50px 0 0;
  33.         -webkit-transform: rotate(-45deg);
  34.            -moz-transform: rotate(-45deg);
  35.             -ms-transform: rotate(-45deg);
  36.              -o-transform: rotate(-45deg);
  37.                 transform: rotate(-45deg);
  38.         -webkit-transform-origin: 0 100%;
  39.            -moz-transform-origin: 0 100%;
  40.             -ms-transform-origin: 0 100%;
  41.              -o-transform-origin: 0 100%;
  42.                 transform-origin: 0 100%;
  43.     }
  44.     .miniheart:after {
  45.         left: 0;
  46.         -webkit-transform: rotate(45deg);
  47.            -moz-transform: rotate(45deg);
  48.             -ms-transform: rotate(45deg);
  49.              -o-transform: rotate(45deg);
  50.                 transform: rotate(45deg);
  51.         -webkit-transform-origin: 100% 100%;
  52.            -moz-transform-origin: 100% 100%;
  53.             -ms-transform-origin: 100% 100%;
  54.              -o-transform-origin: 100% 100%;
  55.                 transform-origin :100% 100%;
  56.     }
  57.     #barraesquerda { width: 0%;border-bottom: rgb(0, 0, 0) 1px solid;float: right;text-align: right;height: 16px; }
  58.     #barradireita { width: 0%;border-bottom: rgb(0, 0, 0) 1px solid;margin-left: -2px;height: 16px; }
  59.     #barra_esquerda { width: 0%;border-bottom: rgb(0, 0, 0) 1px solid;float: right;text-align: right;height: 0px; }
  60.     #barra_direita { width: 0%;border-bottom: rgb(0, 0, 0) 1px solid;margin-left: -2px;height: 0px; }
  61.     #boxpalco {
  62.         float: left;margin-left: 6.129043%;margin-top: 116px;clear: none;height: 0px;width: 87.733629%;
  63.         border-top: rgb(0, 0, 0) 1px solid;border-right: rgb(0, 0, 0) 1px solid;border-left: rgb(0, 0, 0) 1px solid;
  64.     }
  65.     #caixabarra { float: left;height: 116px;width: 80%; }
  66.     #therealheart { position:fixed;width: 100%;height: 100%;  }
  67.     #sombra { width: 100%;height: 100%;position: fixed;background-color: rgba(255, 157, 157, 0.63);top: 0px;left: 0px; }
  68.     #happyday { position: relative;top: 40%;left: 40%;font: italic bold 44px Georgia,serif;text-shadow: 0px 0px 5px #FF0000; }
  69.     </style>
  70.     <script>
  71.     var textos = new Array(
  72.     "Mensagem Secreta 1",
  73.     "Mensagem Secreta 2",
  74.     "Mensagem Secreta 3",
  75.     "Mensagem Secreta 4",
  76.     "Mensagem Secreta 5",
  77.     "Mensagem Secreta 6",
  78.     "Mensagem Secreta 7",
  79.     "Mensagem Secreta 8",
  80.     "Mensagem Secreta 9",
  81.     "Mensagem Secreta 10",
  82.     "Mensagem Secreta 11"
  83.     );
  84.    
  85.     var texto_a = 0;
  86.     var desenhou_c = 0;
  87.     var palco = 0;
  88.     var descer = new Array(new Array("5.53","332",1,"252"),new Array("55.53","110",3,"430"),new Array("93.74","166",2,"205"),
  89.     new Array("38.46","110",2,"133"),new Array("86.32","249",1,"169"),new Array("46.45","44",2,"47"),new Array("12.86","438",3,"1741"),
  90.     new Array("90","438",1,"337"),new Array("23.20","80",2,"95"),new Array("71.45","44",1,"23"));
  91.     function batebate(bate) {
  92.         if(!bate)
  93.             setTimeout(function(){$("#coraz").css('zoom', '200%');batebate(1);},500);
  94.         else
  95.             setTimeout(function(){$("#coraz").css('zoom', '220%');batebate(0);},1000);
  96.     }
  97.     function avanco(vai) {
  98.         if(!vai) {
  99.             if(texto_a != 0) {
  100.                 texto_a --;
  101.                 $("#msgpalco").html(textos[texto_a]);
  102.                 if(!texto_a) $("#boxesquerda").hide();
  103.             }
  104.         }
  105.         else {
  106.             if(texto_a == textos.length-1) {
  107.                 $("#sombra").css('visibility', 'visible');
  108.                 setTimeout(function(){$("#coraz").css('zoom', '220%');batebate(0);},1000);
  109.             }
  110.             else {
  111.                 texto_a ++;
  112.                 if(texto_a > desenhou_c) {
  113.                     var zoom = 0;
  114.                     switch(descer[desenhou_c][2]) {
  115.                         case 1:
  116.                             zoom = 125;
  117.                             break;
  118.                         case 2:
  119.                             zoom = 75;
  120.                             break;
  121.                         case 3:
  122.                             zoom = 25;
  123.                             break;
  124.                     }
  125.                     $("#primaryContainer").append("<div id='rop"+desenhou_c+"' class='corda' style='left: "+descer[desenhou_c][0]+"%;'>"+
  126.                     "<div style='zoom: "+zoom+"%'><div id='heart"+desenhou_c+"' style='left:-50px;top:"+descer[desenhou_c][3]+"px'></div></div>"+
  127.                     "</div>");
  128.                     $( "#rop"+desenhou_c ).animate({height: ""+descer[desenhou_c][1]+"px"}, 2000, function() {
  129.                         $( "#heart"+(texto_a-1) ).addClass("miniheart");
  130.                     });
  131.                     desenhou_c ++;
  132.                 }
  133.                 if(texto_a == 1) {
  134.                     $("#boxesquerda").show();
  135.                 }
  136.                 $("#msgpalco").html(textos[texto_a]);
  137.             }
  138.         }
  139.     }
  140.     function abrirpalco() {
  141.         palco ++;
  142.         if(palco == 2) {
  143.             $("#primaryContainer").html('<div id="boxpalco" class="clearfix"></div>'+
  144.             '<table border="0px" style="float: left;width: 87.733629%;margin-left: 100.129043%;margin-top: -2px;">'+
  145.             '<tr><td><div id="barra_direita"></div></td><td><div id="barra_esquerda"></div></td></tr></table>');
  146.             $( "#boxpalco" ).animate({height: "480px"}, 2000, function() {
  147.                 $( "#barra_direita" ).animate({ width: "102.5%" }, 2000, function() {});
  148.                 $( "#barra_esquerda" ).animate({ width: "100%" }, 2000, function() {
  149.                     $( "#boxpalco" ).css('border-bottom', 'rgb(0, 0, 0) 1px solid');
  150.                     $( "#barra_direita" ).remove();
  151.                     $( "#barra_esquerda" ).remove();
  152.                     $( "#boxpalco" ).animate({borderTopLeftRadius: "35px",borderTopRightRadius: "35px",borderBottomLeftRadius: "35px",borderBottomRightRadius: "35px"
  153.                     }, 2000, function() {
  154.                         $( "#boxpalco" ).css('background-color', 'rgb(255, 114, 114)');
  155.                         $( "#boxpalco" ).html('<p id="msgpalco"></p>'+
  156.                         '<div id="boxesquerda" onmouseover="$(\'#boxesquerda\').css(\'border-right-color\', \'white\');"'+
  157.                         ' onmouseout="$(\'#boxesquerda\').css(\'border-right-color\', \'red\');" onclick="avanco(0)" '+
  158.                         'class="clearfix"></div><div id="boxdireita" onmouseover="$(\'#boxdireita\').css(\'border-left-color\', \'white\');"'+
  159.                         ' onmouseout="$(\'#boxdireita\').css(\'border-left-color\', \'red\');" onclick="avanco(1)" class="clearfix"></div>');
  160.                         $("#boxesquerda").hide();
  161.                         $("#msgpalco").html(textos[0]);
  162.                     });
  163.                 });
  164.             });
  165.         }
  166.     }
  167.     $( document ).ready(function() {
  168.         $( "#barradireita" ).animate({ width: "100%" }, 2000, function() {abrirpalco();});
  169.         $( "#barraesquerda" ).animate({ width: "100%" }, 2000, function() {abrirpalco();});
  170.     });
  171.     </script>
  172. </head>
  173. <body>
  174.     <div id="primaryContainer" class="primaryContainer clearfix">
  175.         <table border="0px" style="float: left;height: 16px;width: 87.733629%;margin-left: 6.129043%;margin-top: 100px;">
  176.             <tr><td><div id="barraesquerda"></div></td><td><div id="barradireita"></div></td></tr>
  177.         </table>
  178.     </div>
  179.     <div id="sombra" style='visibility: hidden;'>
  180.     <div id='coraz' style="zoom: 200%;margin-top: 20%;margin-left: 20%;position: absolute;"><div class="miniheart"></div></div>
  181.     <div id="happyday">Happy Valentine's day</div>
  182. </body>
  183. </html>
  184.  
  185.  
  186.  
  187.  
  188.  
  189.  
  190.  
  191.  
  192.  
  193.  
  194.  
  195.  
  196. <html>
  197. <head>
  198. <style>
  199. /*
  200.  * HTML5 ✰ Boilerplate
  201.  *
  202.  * What follows is the result of much research on cross-browser styling.
  203.  * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
  204.  * Kroc Camen, and the H5BP dev community and team.
  205.  *
  206.  * Detailed information about this CSS: h5bp.com/css
  207.  *
  208.  * ==|== normalize ==========================================================
  209.  */
  210.  
  211.  
  212. /* =============================================================================
  213.    HTML5 display definitions
  214.    ========================================================================== */
  215.  
  216. article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
  217. audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
  218. audio:not([controls]) { display: none; }
  219. [hidden] { display: none; }
  220.  
  221.  
  222. /* =============================================================================
  223.    Base
  224.    ========================================================================== */
  225.  
  226. /*
  227.  * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
  228.  * 2. Force vertical scrollbar in non-IE
  229.  * 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
  230.  */
  231.  
  232. html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
  233.  
  234. body { margin: 0; font-size: 100%; line-height: 1.231; }
  235.  
  236. body, button, input, select, textarea { font-family: helvetica, arial,"lucida grande", verdana, "メイリオ", "ＭＳ Ｐゴシック", sans-serif; color: #222; }
  237. /*
  238.  * Remove text-shadow in selection highlight: h5bp.com/i
  239.  * These selection declarations have to be separate
  240.  * Also: hot pink! (or customize the background color to match your design)
  241.  */
  242.  
  243. ::selection { text-shadow: none; background-color: highlight; color: highlighttext; }
  244.  
  245.  
  246. /* =============================================================================
  247.    Links
  248.    ========================================================================== */
  249.  
  250. a { color: #00e; }
  251. a:visited { color: #551a8b; }
  252. a:hover { color: #06e; }
  253. a:focus { outline: thin dotted; }
  254.  
  255. /* Improve readability when focused and hovered in all browsers: h5bp.com/h */
  256. a:hover, a:active { outline: 0; }
  257.  
  258.  
  259. /* =============================================================================
  260.    Typography
  261.    ========================================================================== */
  262.  
  263. abbr[title] { border-bottom: 1px dotted; }
  264.  
  265. b, strong { font-weight: bold; }
  266.  
  267. blockquote { margin: 1em 40px; }
  268.  
  269. dfn { font-style: italic; }
  270.  
  271. hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
  272.  
  273. ins { background: #ff9; color: #000; text-decoration: none; }
  274.  
  275. mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
  276.  
  277. /* Redeclare monospace font family: h5bp.com/j */
  278. pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
  279.  
  280. /* Improve readability of pre-formatted text in all browsers */
  281. pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
  282.  
  283. q { quotes: none; }
  284. q:before, q:after { content: ""; content: none; }
  285.  
  286. small { font-size: 85%; }
  287.  
  288. /* Position subscript and superscript content without affecting line-height: h5bp.com/k */
  289. sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
  290. sup { top: -0.5em; }
  291. sub { bottom: -0.25em; }
  292.  
  293.  
  294. /* =============================================================================
  295.    Lists
  296.    ========================================================================== */
  297.  
  298. ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
  299. dd { margin: 0 0 0 40px; }
  300. nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
  301.  
  302.  
  303. /* =============================================================================
  304.    Embedded content
  305.    ========================================================================== */
  306.  
  307. /*
  308.  * 1. Improve image quality when scaled in IE7: h5bp.com/d
  309.  * 2. Remove the gap between images and borders on image containers: h5bp.com/e
  310.  */
  311.  
  312. img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
  313.  
  314. /*
  315.  * Correct overflow not hidden in IE9
  316.  */
  317.  
  318. svg:not(:root) { overflow: hidden; }
  319.  
  320.  
  321. /* =============================================================================
  322.    Figures
  323.    ========================================================================== */
  324.  
  325. figure { margin: 0; }
  326.  
  327.  
  328. /* =============================================================================
  329.    Forms
  330.    ========================================================================== */
  331.  
  332. form { margin: 0; }
  333. fieldset { border: 0; margin: 0; padding: 0; }
  334.  
  335. /* Indicate that 'label' will shift focus to the associated form element */
  336. label { cursor: pointer; }
  337.  
  338. /*
  339.  * 1. Correct color not inheriting in IE6/7/8/9
  340.  * 2. Correct alignment displayed oddly in IE6/7
  341.  */
  342.  
  343. legend { border: 0; *margin-left: -7px; padding: 0; }
  344.  
  345. /*
  346.  * 1. Correct font-size not inheriting in all browsers
  347.  * 2. Remove margins in FF3/4 S5 Chrome
  348.  * 3. Define consistent vertical alignment display in all browsers
  349.  */
  350.  
  351. button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
  352.  
  353. /*
  354.  * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
  355.  */
  356.  
  357. button, input { line-height: normal; }
  358.  
  359. /*
  360.  * 1. Display hand cursor for clickable form elements
  361.  * 2. Allow styling of clickable form elements in iOS
  362.  * 3. Correct inner spacing displayed oddly in IE7 (doesn't effect IE6)
  363.  */
  364.  
  365. button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
  366.  
  367. /*
  368.  * Consistent box sizing and appearance
  369.  */
  370.  
  371. input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }
  372. input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
  373. input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
  374.  
  375. /*
  376.  * Remove inner padding and border in FF3/4: h5bp.com/l
  377.  */
  378.  
  379. button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
  380.  
  381. /*
  382.  * 1. Remove default vertical scrollbar in IE6/7/8/9
  383.  * 2. Allow only vertical resizing
  384.  */
  385.  
  386. textarea { overflow: auto; vertical-align: top; resize: vertical; }
  387.  
  388. /* Colors for form validity */
  389. input:valid, textarea:valid {  }
  390. input:invalid, textarea:invalid { background-color: #f0dddd; }
  391.  
  392.  
  393. /* =============================================================================
  394.    Tables
  395.    ========================================================================== */
  396.  
  397. table { border-collapse: collapse; border-spacing: 0; }
  398. td { vertical-align: top; }
  399.  
  400.  
  401. /* ==|== primary styles =====================================================
  402.    Author:
  403.    ========================================================================== */
  404.  
  405. /* ==|== media queries ======================================================
  406.    PLACEHOLDER Media Queries for Responsive Design.
  407.    These override the primary ('mobile first') styles
  408.    Modify as content requires.
  409.    ========================================================================== */
  410.  
  411. @media only screen and (min-width: 480px) {
  412.   /* Style adjustments for viewports 480px and over go here */
  413.  
  414. }
  415.  
  416. @media only screen and (min-width: 768px) {
  417.   /* Style adjustments for viewports 768px and over go here */
  418.  
  419. }
  420.  
  421.  
  422.  
  423. /* ==|== non-semantic helper classes ========================================
  424.    Please define your styles before this section.
  425.    ========================================================================== */
  426.  
  427. /* For image replacement */
  428. .ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
  429. .ir br { display: none; }
  430.  
  431. /* Hide from both screenreaders and browsers: h5bp.com/u */
  432. .hidden { display: none !important; visibility: hidden; }
  433.  
  434. /* Hide only visually, but have it available for screenreaders: h5bp.com/v */
  435. .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
  436.  
  437. /* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
  438. .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
  439.  
  440. /* Hide visually and from screenreaders, but maintain layout */
  441. .invisible { visibility: hidden; }
  442.  
  443. /* Contain floats: h5bp.com/q */
  444. .clearfix:before, .clearfix:after { content: ""; display: table; }
  445. .clearfix:after { clear: both; }
  446. .clearfix { *zoom: 1; }
  447.  
  448.  
  449.  
  450. /* ==|== print styles =======================================================
  451.    Print styles.
  452.    Inlined to avoid required HTTP connection: h5bp.com/r
  453.    ========================================================================== */
  454.  
  455. @media print {
  456.     * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  457.     a, a:visited { text-decoration: underline; }
  458.     a[href]:after { content: " (" attr(href) ")"; }
  459.     abbr[title]:after { content: " (" attr(title) ")"; }
  460.     .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  461.     pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  462.     table { display: table-header-group; } /* h5bp.com/t */
  463.     tr, img { page-break-inside: avoid; }
  464.     img { max-width: 100% !important; }
  465.     @page { margin: 0.5cm; }
  466.     p, h2, h3 { orphans: 3; widows: 3; }
  467.     h2, h3 { page-break-after: avoid; }
  468. }
  469.  
  470. /* reflow reset for -webkit-margin-before: 1em */
  471. p { margin: 0; }
  472.  
  473. html {
  474.     overflow-y: auto;
  475.     background-color: transparent;
  476.     height: 100%;
  477. }
  478.  
  479. body {
  480.     background: #fff;
  481.     font: normal 100%;
  482.     position: relative;
  483.     height: 100%;
  484. }
  485.  
  486. body, div, img, p, button, input, select, textarea {
  487.     box-sizing: border-box;
  488. }
  489.  
  490. .image {
  491.     display: block;
  492. }
  493.  
  494. input {
  495.     cursor: default;
  496.     display: block;
  497. }
  498.  
  499. input[type=button] {
  500.     background-color: #e5e9e8;
  501.     border: 1px solid #9daca9;
  502.     border-radius: 4px;
  503.     box-shadow: inset 0 1px #fff;
  504.     font: inherit;
  505.     letter-spacing: inherit;
  506.     text-indent: inherit;
  507.     color: inherit;
  508. }
  509.  
  510. input[type=button]:hover {
  511.     background-color: #eff1f1;
  512. }
  513.  
  514. input[type=button]:active {
  515.     background-color: #d2d6d6;
  516.     border: 1px solid #9daca9;
  517.     box-shadow: inset 0 1px rgba(0,0,0,0.1);
  518. }
  519.  
  520. /* Reset anchor styles to an unstyled default to be in parity with design surface. It
  521.    is presumed that most link styles in real-world designs are custom (non-default). */
  522. a, a:visited, a:hover, a:active {
  523.     color: inherit;
  524.     text-decoration: inherit;
  525. }
  526. </style>
  527. </head>
  528. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!