Need help fixing code


Joined
Mar 30, 2018
Messages
1
Reaction score
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:

HTML:
<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:
Ad

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. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads


Top