how to place this in an html document

Asked

Viewed 67 times

-2

I have the following code snippets:

HTML:

<h1>CSS 3D FLIP BOX</h1>
<h3>Flipping content to a div (Transitions and 3D Transforms)</h3>

<div class="wrapper">
      <div class="col_third">
        <div class="hover panel">
          <div class="front">
            <div class="box1">
              <p>Front Side</p>
            </div>
          </div>
          <div class="back">
            <div class="box2">
              <p>Back Side</p>
            </div>
          </div>
        </div>
        </div>

        <div class="col_third">
        <div class="hover panel">
          <div class="front">
            <div class="box1">
              <p>Front Side</p>
            </div>
          </div>
          <div class="back">
            <div class="box2">
              <p>Back Side</p>
            </div>
          </div>
        </div>
        </div>

        <div class="col_third end">
        <div class="hover panel">
          <div class="front">
            <div class="box1">
              <p>Front Side</p>
            </div>
          </div>
          <div class="back">
            <div class="box2">
              <p>Back Side</p>
            </div>
          </div>
        </div>
      </div>
     </div>

CSS:

body {
    background-color: #ecf0f1;
    margin: 20px;
    font-family: Arial, Tahoma; 
    font-size: 20px; 
    color: #666666; 
    text-align: center; 
}
p { color: #ffffff;  }

/*-=-=-=-=-=-=-=-=-=-*/
/* Column Grids */
/*-=-=-=-=-=-=-=-=-= */

.col_half { width: 49%; }
.col_third { width: 32%; }
.col_fourth { width: 23.5%; }
.col_fifth { width: 18.4%; }
.col_sixth { width: 15%; }
.col_three_fourth { width: 74.5%;}
.col_twothird{ width: 66%;}
.col_half,
.col_third,
.col_twothird,
.col_fourth,
.col_three_fourth,
.col_fifth{
    position: relative;
    display:inline;
    display: inline-block;
    float: left;
    margin-right: 2%;
    margin-bottom: 20px;
}
.end { margin-right: 0 !important; }

/*-=-=-=-=-=-=-=-=-=-=- */
/* Flip Panel */
/*-=-=-=-=-=-=-=-=-=-=- */

.wrapper{ width: 980px; margin: 0 auto;  background-color: #bdd3de; hoverflow: hidden;}

.panel {
    margin: 0 auto;
    height: 130px;  
    position: relative;
    -webkit-perspective: 600px;
    -moz-perspective: 600px;
}

.panel .front,
.panel .back {
    text-align: center;
}

.panel .front {
    height: inherit;
    position: absolute;
    top: 0;
    z-index: 900;
    text-align: center;
    -webkit-transform: rotateX(0deg) rotateY(0deg);
       -moz-transform: rotateX(0deg) rotateY(0deg);
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
    -webkit-transition: all .4s ease-in-out;
       -moz-transition: all .4s ease-in-out;
        -ms-transition: all .4s ease-in-out;
         -o-transition: all .4s ease-in-out;
            transition: all .4s ease-in-out;
}

.panel .back {
    height: inherit;
    position: absolute;
    top: 0;
    z-index: 1000;
    -webkit-transform: rotateY(-180deg);
       -moz-transform: rotateY(-180deg);
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
    -webkit-transition: all .4s ease-in-out;
       -moz-transition: all .4s ease-in-out;
        -ms-transition: all .4s ease-in-out;
         -o-transition: all .4s ease-in-out;
            transition: all .4s ease-in-out;
}
.panel.flip .front {
    z-index: 900;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
}
.panel.flip .back {
    z-index: 1000;
    -webkit-transform: rotateX(0deg) rotateY(0deg);
    -moz-transform: rotateX(0deg) rotateY(0deg);
}
.box1{
    background-color: #14bcc8;
    width: 250px;
    height: 150px;
    margin: 0 auto;
    padding: 20px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}
.box2{
    background-color: #ff7e70;
    width: 250px;
    height: 150px;
    margin: 0 auto;
    padding: 20px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

JS:

$(document).ready(function(){
        // set up hover panels
        // although this can be done without JavaScript, we've attached these events
        // because it causes the hover to be triggered when the element is tapped on a touch device
        $('.hover').hover(function(){
            $(this).addClass('flip');
        },function(){
            $(this).removeClass('flip');
        });
    });

I am having difficulty and would like to know how to join and save these snippets in a file html, to be used in a browser.

html

2 answers

2

It’s almost just copy/paste, and put in the right places. In this case I added from <!DOCTYPE html> until </head>, and within the <head> put the css (also inside the tag <style>), I also added to dependency so that the JS (javascript) can be executed: <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>. Inside the tag below, too <script>, the JS you developed. And finally we closed the tag <body> (</body>) and that of </html>.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>YO PEDRO</title>
    <style>
      body {
        background-color: #ecf0f1;
        margin: 20px;
        font-family: Arial, Tahoma; 
        font-size: 20px; 
        color: #666666; 
        text-align: center; 
      }
      p { color: #ffffff;  }

      /*-=-=-=-=-=-=-=-=-=-*/
      /* Column Grids */
      /*-=-=-=-=-=-=-=-=-= */

      .col_half { width: 49%; }
      .col_third { width: 32%; }
      .col_fourth { width: 23.5%; }
      .col_fifth { width: 18.4%; }
      .col_sixth { width: 15%; }
      .col_three_fourth { width: 74.5%;}
      .col_twothird{ width: 66%;}
      .col_half,
      .col_third,
      .col_twothird,
      .col_fourth,
      .col_three_fourth,
      .col_fifth{
        position: relative;
        display:inline;
        display: inline-block;
        float: left;
        margin-right: 2%;
        margin-bottom: 20px;
      }
      .end { margin-right: 0 !important; }

      /*-=-=-=-=-=-=-=-=-=-=- */
      /* Flip Panel */
      /*-=-=-=-=-=-=-=-=-=-=- */

      .wrapper{ width: 980px; margin: 0 auto;  background-color: #bdd3de; hoverflow: hidden;}

      .panel {
        margin: 0 auto;
        height: 130px;  
        position: relative;
        -webkit-perspective: 600px;
        -moz-perspective: 600px;
      }

      .panel .front,
      .panel .back {
        text-align: center;
      }

      .panel .front {
        height: inherit;
        position: absolute;
        top: 0;
        z-index: 900;
        text-align: center;
        -webkit-transform: rotateX(0deg) rotateY(0deg);
           -moz-transform: rotateX(0deg) rotateY(0deg);
        -webkit-transform-style: preserve-3d;
           -moz-transform-style: preserve-3d;
        -webkit-backface-visibility: hidden;
           -moz-backface-visibility: hidden;
        -webkit-transition: all .4s ease-in-out;
           -moz-transition: all .4s ease-in-out;
          -ms-transition: all .4s ease-in-out;
           -o-transition: all .4s ease-in-out;
            transition: all .4s ease-in-out;
      }

      .panel .back {
        height: inherit;
        position: absolute;
        top: 0;
        z-index: 1000;
        -webkit-transform: rotateY(-180deg);
           -moz-transform: rotateY(-180deg);
        -webkit-transform-style: preserve-3d;
           -moz-transform-style: preserve-3d;
        -webkit-backface-visibility: hidden;
           -moz-backface-visibility: hidden;
        -webkit-transition: all .4s ease-in-out;
           -moz-transition: all .4s ease-in-out;
          -ms-transition: all .4s ease-in-out;
           -o-transition: all .4s ease-in-out;
            transition: all .4s ease-in-out;
      }
      .panel.flip .front {
        z-index: 900;
        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
      }
      .panel.flip .back {
        z-index: 1000;
        -webkit-transform: rotateX(0deg) rotateY(0deg);
        -moz-transform: rotateX(0deg) rotateY(0deg);
      }
      .box1{
        background-color: #14bcc8;
        width: 250px;
        height: 150px;
        margin: 0 auto;
        padding: 20px;
        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
      }
      .box2{
        background-color: #ff7e70;
        width: 250px;
        height: 150px;
        margin: 0 auto;
        padding: 20px;
        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
      }
    </style>
</head>
<body>
  <h1>CSS 3D FLIP BOX</h1>
  <h3>Flipping content to a div (Transitions and 3D Transforms)</h3>

  <div class="wrapper">
        <div class="col_third">
          <div class="hover panel">
            <div class="front">
              <div class="box1">
                <p>Front Side</p>
              </div>
            </div>
            <div class="back">
              <div class="box2">
                <p>Back Side</p>
              </div>
            </div>
          </div>
      </div>

      <div class="col_third">
          <div class="hover panel">
            <div class="front">
              <div class="box1">
                <p>Front Side</p>
              </div>
            </div>
            <div class="back">
              <div class="box2">
                <p>Back Side</p>
              </div>
            </div>
          </div>
      </div>

      <div class="col_third end">
          <div class="hover panel">
            <div class="front">
              <div class="box1">
                <p>Front Side</p>
              </div>
            </div>
            <div class="back">
              <div class="box2">
                <p>Back Side</p>
              </div>
            </div>
          </div>
        </div>
     </div>
     <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
     <script>
          $(document).ready(function(){
            // set up hover panels
            // although this can be done without JavaScript, we've attached these events
            // because it causes the hover to be triggered when the element is tapped on a touch device
            $('.hover').hover(function(){
              $(this).addClass('flip');
            },function(){
              $(this).removeClass('flip');
            });
          });
     </script>
</body>
</html>

  • CSS belongs to the CSS file so it does not have to be in the HTML file

  • @dippas See the title of the question

  • and an html document cannot have a <link rel="stylesheet" href="ficheiro.css" /> ?

  • 1

    Sure @dippas, that’s how I would do, but the question clearly doesn’t ask to do that. " I am having difficulty and would like to know how to join and save these snippets in an html file..."

  • if that’s how you would do it, then explain best practices, and not just how the OP (who posted) thinks they want things, the question is that you are a beginner in the area, and explain things that are not good practices then leads to bad addictions ;)

  • 1

    @dippas but look that it is not necessarily bad practice, in terms of performance gets faster like this, and taking into account that the css are not many I would say that until it can stay like this, It was necessary to make external requests (what takes time) and if I did CSS Minify would be even better

  • @dippas formalize your answer the way you think is most correct, after all the more options the better, at the end the author of the question decides which one will use and which is better for the problem in question.

  • I don’t give answers here, I really think I only have one and it’s this same OP, I’m focused on the general OS :)

Show 3 more comments

1

Basically just use the tags. To start everything would have to be between the tags <html></html> (Remembering that to indicate the end of a tag HTML is used </).

With the <html> created, you add <head> and <body>, inside <head>, add <style> to put the code CSS, and <style> to the JS. And within <body> the part HTML.

Save the file with .html in the end, example: exemplo.html

The whole code goes like this:

<html>
    <head>
        <style>
            body {
                background-color: #ecf0f1;
                margin: 20px;
                font-family: Arial, Tahoma; 
                font-size: 20px; 
                color: #666666; 
                text-align: center; 
            }
            p { color: #ffffff;  }

            /*-=-=-=-=-=-=-=-=-=-*/
            /* Column Grids */
            /*-=-=-=-=-=-=-=-=-= */

            .col_half { width: 49%; }
            .col_third { width: 32%; }
            .col_fourth { width: 23.5%; }
            .col_fifth { width: 18.4%; }
            .col_sixth { width: 15%; }
            .col_three_fourth { width: 74.5%;}
            .col_twothird{ width: 66%;}
            .col_half,
            .col_third,
            .col_twothird,
            .col_fourth,
            .col_three_fourth,
            .col_fifth{
                position: relative;
                display:inline;
                display: inline-block;
                float: left;
                margin-right: 2%;
                margin-bottom: 20px;
            }
            .end { margin-right: 0 !important; }

            /*-=-=-=-=-=-=-=-=-=-=- */
            /* Flip Panel */
            /*-=-=-=-=-=-=-=-=-=-=- */

            .wrapper{ width: 980px; margin: 0 auto;  background-color: #bdd3de; hoverflow: hidden;}

            .panel {
                margin: 0 auto;
                height: 130px;  
                position: relative;
                -webkit-perspective: 600px;
                -moz-perspective: 600px;
            }

            .panel .front,
            .panel .back {
                text-align: center;
            }

            .panel .front {
                height: inherit;
                position: absolute;
                top: 0;
                z-index: 900;
                text-align: center;
                -webkit-transform: rotateX(0deg) rotateY(0deg);
                   -moz-transform: rotateX(0deg) rotateY(0deg);
                -webkit-transform-style: preserve-3d;
                   -moz-transform-style: preserve-3d;
                -webkit-backface-visibility: hidden;
                   -moz-backface-visibility: hidden;
                -webkit-transition: all .4s ease-in-out;
                   -moz-transition: all .4s ease-in-out;
                    -ms-transition: all .4s ease-in-out;
                     -o-transition: all .4s ease-in-out;
                        transition: all .4s ease-in-out;
            }

            .panel .back {
                height: inherit;
                position: absolute;
                top: 0;
                z-index: 1000;
                -webkit-transform: rotateY(-180deg);
                   -moz-transform: rotateY(-180deg);
                -webkit-transform-style: preserve-3d;
                   -moz-transform-style: preserve-3d;
                -webkit-backface-visibility: hidden;
                   -moz-backface-visibility: hidden;
                -webkit-transition: all .4s ease-in-out;
                   -moz-transition: all .4s ease-in-out;
                    -ms-transition: all .4s ease-in-out;
                     -o-transition: all .4s ease-in-out;
                        transition: all .4s ease-in-out;
            }
            .panel.flip .front {
                z-index: 900;
                -webkit-transform: rotateY(180deg);
                -moz-transform: rotateY(180deg);
            }
            .panel.flip .back {
                z-index: 1000;
                -webkit-transform: rotateX(0deg) rotateY(0deg);
                -moz-transform: rotateX(0deg) rotateY(0deg);
            }
            .box1{
                background-color: #14bcc8;
                width: 250px;
                height: 150px;
                margin: 0 auto;
                padding: 20px;
                border-radius: 10px;
                -moz-border-radius: 10px;
                -webkit-border-radius: 10px;
            }
            .box2{
                background-color: #ff7e70;
                width: 250px;
                height: 150px;
                margin: 0 auto;
                padding: 20px;
                border-radius: 10px;
                -moz-border-radius: 10px;
                -webkit-border-radius: 10px;
            }
        </style>

        <!-- Necessário para que o Script funcione -->
        <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

        <script>
            $(document).ready(function(){
                // set up hover panels
                // although this can be done without JavaScript, we've attached these events
                // because it causes the hover to be triggered when the element is tapped on a touch device
                $('.hover').hover(function(){
                    $(this).addClass('flip');
                },function(){
                    $(this).removeClass('flip');
                });
            });
        </script>
    </head>
    <body>
        <h1>CSS 3D FLIP BOX</h1>
        <h3>Flipping content to a div (Transitions and 3D Transforms)</h3>

        <div class="wrapper">
              <div class="col_third">
                <div class="hover panel">
                  <div class="front">
                    <div class="box1">
                      <p>Front Side</p>
                    </div>
                  </div>
                  <div class="back">
                    <div class="box2">
                      <p>Back Side</p>
                    </div>
                  </div>
                </div>
                </div>

                <div class="col_third">
                <div class="hover panel">
                  <div class="front">
                    <div class="box1">
                      <p>Front Side</p>
                    </div>
                  </div>
                  <div class="back">
                    <div class="box2">
                      <p>Back Side</p>
                    </div>
                  </div>
                </div>
                </div>

                <div class="col_third end">
                <div class="hover panel">
                  <div class="front">
                    <div class="box1">
                      <p>Front Side</p>
                    </div>
                  </div>
                  <div class="back">
                    <div class="box2">
                      <p>Back Side</p>
                    </div>
                  </div>
                </div>
              </div>
             </div>
    </body>
</html>

Well, that’s it, any questions ask.

Att;

  • CSS belongs to the CSS file so it does not have to be in the HTML file

  • Only if you want, this is not a rule, if it were there would be the <style> option. It goes a lot from the programmer, technically it is simpler to use a CSS that is only applied to this page directly on it than to have to import a file that would be of only use.

Browser other questions tagged html

You are not signed in. Login or sign up in order to post.