Need help fixing code

Discussion in 'HTML and CSS' started by Ziggy50, Mar 30, 2018.

  1. Ziggy50

    Ziggy50

    Joined:
    Mar 30, 2018
    Messages:
    1
    Likes Received:
    0
    Hi, I use blogger and I run my own review website. I use code for the layout but for some reason, every time I use it, it seems to break the page. Also, from my homepage, when I use this code, the preview for the post come see up as raw html. I believe I have to get rid of the <body>, <html> and <head>. I have tried getting rid of them but it has not helped. I would appreciate if anyone had a solution for me! Here’s the code:

    Code (HTML5):

    <div class="separator" style="clear: both; text-align: center;">
    </div>
    <div class="separator" style="clear: both; text-align: center;">
    </div>
    <html>
    <head>

    <style>
    * {
        box-sizing: border-box;
    }

    body {
        margin: 0;
    }

    /* Create three equal columns that floats next to each other */
    .column {
        float: left;
        width: 50%;
        padding: 10px;
        height: auto; /* Should be removed. Only for demonstration */
    }

    /* Clear floats after the columns */
    .row:after {
        content: "";
        display: table;
        clear: both;
    }

    /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
    @media (max-width: 600px) {
        .column {
            width: 100%;
        }
    }
    </style>
    </head>
    <body>

    <h2 style="font-size: 300%;">
    Verdict:</h2>
    Comfortable, durable and stylish. Does exactly as promised and the 1000 mile guarantee is reassuring.<br />


    <div class="row">
      <div class="column" style="background-color: #e5e4e2;">
        <h2>
    Pros:</h2>
    Comfortable<br />Exactly as expected
    <br />Blister-free
    <br />

      </div>
    <div class="column" style="background-color: #e5e4e2;">
        <h2>
    Cons:</h2>
    Very warm when exercising
    <br />
    Quite expensive
    <br />
    <br />

      </div>
    </div>
    </body>
    </html>

    <head>
      <script src="[URL]http://code.jquery.com/jquery.min.js[/URL]" type="text/javascript"></script>
    </head>

    <br />
    <div id="container">
    <h2>
    <strong>Ratings:</strong></h2>
    <div class="bar-main-container azure" id="bar-1">
    <div class="wrap">
    <div class="bar-percentage" data-percentage="100">
    </div>
    Comfort
          <br />
    <div class="bar-container">
    <div class="bar">
    </div>
    </div>
    </div>
    </div>
    <div class="bar-main-container azure" id="bar-2">
    <div class="wrap">
    <div class="bar-percentage" data-percentage="98">
    </div>
    Warmth
          <br />
    <div class="bar-container">
    <div class="bar">
    </div>
    </div>
    </div>
    </div>
    <div class="bar-main-container azure" id="bar-3">
    <div class="wrap">
    <div class="bar-percentage" data-percentage="77">
    </div>
    Sweat free
          <br />
    <div class="bar-container">
    <div class="bar">
    </div>
    </div>
    </div>
    </div>
    <div class="bar-main-container azure" id="bar-4">
    <div class="wrap">
    <div class="bar-percentage" data-percentage="94">
    </div>
    Price
          <br />
    <div class="bar-container">
    <div class="bar">
    </div>
    </div>
    </div>
    </div>
    <div class="bar-main-container emerald" id="bar-5">
    <div class="wrap">
    <div class="bar-percentage" data-percentage="88">
    </div>
    OVERALL
          <br />
    <div class="bar-container">
    <div class="bar">
    </div>
    </div>
    </div>
    </div>
    </div>
    <style>

    #container { text-align: center; float:left; margin: 20px; }
    h2 { color: #CCC; }
    a { text-decoration: none; color: #EC5C93; }

    .bar-main-container {
      margin: 2px auto;
      width: 300px;
      height: 50px;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
      font-family: sans-serif;
      font-weight: normal;
      font-size: 0.8em;
      color: #FFF;
    }

    .wrap { padding: 8px; }

    .bar-percentage {
      float: left;
      background: rgba(0,0,0,0.13);
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
      padding: 9px 0px;
      width: 18%;
      height: 35px;
    }

    .bar-container {
      float: right;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
      height: 10px;
      background: rgba(0,0,0,0.13);
      width: 78%;
      margin: 0px 0px;
      overflow: hidden;
    }

    .bar {
      float: left;
      background: #FFF;
      height: 100%;
      -webkit-border-radius: 10px 0px 0px 10px;
      -moz-border-radius: 10px 0px 0px 10px;
      border-radius: 10px 0px 0px 10px;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
      filter: alpha(opacity=100);
      -moz-opacity: 1;
      -khtml-opacity: 1;
      opacity: 1;
    }

    /* COLORS */
    .azure   { background: #38B1CC; }
    .emerald { background: #2CB299; }
    .violet  { background: #8E5D9F; }
    .yellow  { background: #EFC32F; }
    .red     { background: #E44C41; }

    img {
    float: right;
    }

    </style>

    <script>

    $('.bar-percentage[data-percentage]').each(function () {
      var progress = $(this);
      var percentage = Math.ceil($(this).attr('data-percentage'));
      $({countNum: 0}).animate({countNum: percentage}, {
        duration: 2000,
        easing:'linear',
        step: function() {
          // What todo on every count
        var pct = '';
        if(percentage == 0){
          pct = Math.floor(this.countNum) + '%';
        }else{
          pct = Math.floor(this.countNum+1) + '%';
        }
        progress.text(pct) && progress.siblings().children().css('width',pct);
        }
      });
    });

    </script>

    <br />
    <h3 style="text-align: center;">
    <u><span style="font-size: large;">
    Key features:</span></u></h3>
    <h4 style="text-align: center;">

    Review price: £12
    </h4>
    <h4 style="text-align: center;">
    Brand: 1000 Mile
    </h4>
    <h4 style="text-align: center;">
    Multi-sport
    </h4>
    <h4 style="text-align: center;">
    Double-padding</h4>
    <b></b><b></b><i></i><i></i><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><br />
     
     
    Last edited by a moderator: Apr 2, 2018
    Ziggy50, Mar 30, 2018
    #1
    1. Advertisements

  2. Ziggy50

    Luke Millard

    Joined:
    Apr 10, 2018
    Messages:
    2
    Likes Received:
    0
    I dont know anything about blogger but is it possible you can use html5 or css?
     
    Luke Millard, Apr 10, 2018
    #2
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.