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: