<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<html>
<head>
<title>jane bloglife</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body style="background-color: #eee;">
<div class="col-lg-12 icon" style="background-color: black;padding:10px;color:white;">
<ul class="nav" style="list-style-type:none;margin: -10px;">
<li><a href="#"><i class="fa fa-facebook-official" style="font-size:15px"></i></a></li>
<li><a href="#"><i class="fa fa-instagram" style="font-size:15px"></i></a></li>
<li><a href="#"><i class="fa fa-snapchat" style="font-size:15px"></i></a></li>
<li><a href="#"><i class="fa fa-flickr" style="font-size:15px"></i></a></li>
<li><a href="#"><i class="fa fa-twitter" style="font-size:15px"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin" style="font-size:15px"></i></a></li>
<li style="float: right;"><a href="#"><i class="fa fa-search" style="font-size:15px;text-align: right;"></i></a></li>
</ul>
</div>
<div class="col-lg-12" style="padding: 50px;background-color: white;">
<p style="font-family: oswald;font-size:50px;color:black;font-weight: bold;text-align: center;">
JANE BLOGLIFE</p>
<p class='col-lg-12 col-xs-12' style="font-family: oswald;font-size:17px;text-align: center;color:black;">Welcome to the blog of <b style="background-color: black;color:white;padding: 5px;">Jane's world</b></p>
</div>
<div>
<img src='https://www.w3schools.com/w3images/jane.jpg' class='img-respomsive' style='width:100%;'>
</div>
<div class="col-lg-8" style="background-color:#eee;padding-top: 30px;">
<div style="background-color:white;padding: 25px;margin-bottom: 30px;">
<p style="text-align: center;font-size: 25px;font-family: oswald;color: black;">TITLE HEADING</p>
<p style="text-align: center;font-size: 20px;font-family: oswald;"><f style="color:black;">Title description,</f> May 2, 2016</p>
<img src='https://www.w3schools.com/w3images/girl_hat.jpg' class='img-respomsive' style='width:100%;'>
<p style="font-size: 17px;color:black;padding-top: 30px;text-align: justify;"><b>More Hats!</b> I am crazy about hats these days.
Some text about this blog entry.
Fashion fashion and mauris neque quam, fermentum ut nisl vitae, convallis maximus nisl.
Sed mattis nunc id lorem euismod placerat.
Vivamus porttitor magna enim, ac accumsan tortor cursus at.
Phasellus sed ultricies mi non congue ullam corper.
Praesent tincidunt sedtellus ut rutrum.
Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.<br><br>
Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco.
</p>
<i class="fa fa-thumbs-up icon2" style="border:1px solid gray;padding: 13px;color: black;">LIKE</i>
<p class="icon1"> Replies <b style="background-color: white;color: black;padding: 5px;">1</b></p>
<hr style="margin-top: 50px;">
<div class="col-lg-3 col-xs-12">
<img src="https://www.w3schools.com/w3images/avatar_smoke.jpg" id="imgid" style="width: 50%;float: left;">
</div>
<div>
<p style="font-family:oswald;font-size: 15px;padding-top:20px;"><b style="font-size:18px;">George</b> May 3, 2015, 6:32 PM</p>
<p style="font-family:arial;font-size: 15px;">Great blog post! Following</p>
</div>
</div>
<div style="margin-top: 20px;background-color:white;padding: 25px;">
<p style="text-align: center;font-size: 25px;font-family: oswald;color: black;">TITLE HEADING</p>
<p style="text-align: center;font-size: 20px;font-family: oswald;"><f style="color:black;">Title description,</f> April 23, 2016</p>
<img src='https://www.w3schools.com/w3images/man_hat.jpg' class='img-respomsive' style='width:100%;'>
<p style="font-size: 17px;color:black;padding-top: 30px;text-align: justify;"><b>Hats!</b> The trend this summer is hats for men!<br><br>
Some text about this blog entry.
Fashion fashion and mauris neque quam, fermentum ut nisl vitae, convallis maximus nisl.
Sed mattis nunc id lorem euismod placerat. Vivamus porttitor magna enim, ac accumsan tortor cursus at.
Phasellus sed ultricies mi non congue ullam corper. Praesent tincidunt sedtellus ut rutrum.
Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.
</p>
<i class="fa fa-thumbs-up icon2" style="border:1px solid gray;padding: 13px;color: black;">LIKE</i>
<p class="icon1"> Replies <b style="background-color: white;color: black;padding: 5px;">2</b></p>
</div>
<div style="margin-top: 20px;background-color:white;padding: 25px;margin-bottom: 30px;">
<p style="text-align: center;font-size: 25px;font-family: oswald;color: black;">TITLE HEADING</p>
<p style="text-align: center;font-size: 20px;font-family: oswald;"><f style="color:black;">Title description,</f> April 7, 2016</p>
<img src='https://www.w3schools.com/w3images/runway.jpg' class='img-respomsive' style='width:100%;'>
<p style="font-size: 17px;color:black;padding-top: 30px;text-align: justify;"><b>Dont miss!</b>The runway in New York City this weekend is gonna be legendary!<br><br>
Some text about this blog entry.
Fashion fashion and mauris neque quam, fermentum ut nisl vitae, convallis maximus nisl.
Sed mattis nunc id lorem euismod placerat. Vivamus porttitor magna enim, ac accumsan tortor cursus at.
Phasellus sed ultricies mi non congue ullam corper. Praesent tincidunt sedtellus ut rutrum.
Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.
</p>
<i class="fa fa-thumbs-up icon2" style="border:1px solid gray;padding: 13px;color: black;">LIKE</i>
<p class="icon1"> Replies <b style="background-color: white;color: black;padding: 5px;">3</b></p>
</div>
</div>
<div class="col-lg-4 col-xs-12" style="background-color: #eee;padding-top: 30px;">
<div>
<img src="https://www.w3schools.com/w3images/avatar_girl2.jpg" style="width: 100%;">
<p style="padding: 15px ;font-family: oswald;font-size:20px;background-color: black;color: white;">My Name<br>
<v style="font-family: system-ui;font-size: 15px;">Just me, myself and I, exploring the universe of uknownment.
I have a heart of love and a interest of lorem ipsum and mauris neque quam blog.
I want to share my world with you.</v>
</p>
</div>
<hr>
<div>
<p style="font-family: oswald;background-color: black;color: white;padding: 15px;font-size:20px;">Popular Posts</p>
<ul style="list-style-type:none;background-color: white;padding:15px;margin-top: -10px;color:black;">
<li class="right" style="padding:7px;">
<img src="https://www.w3schools.com/w3images/avatar_smoke.jpg" style="float:left;width: 60px;padding-right: 10px;">
<span style="font-size: 20px;">Denim</span>
<br>
<span>Sed mattis nunc</span>
</li>
<hr>
<li class="right" style="padding:7px;">
<img src="https://www.w3schools.com/w3images/bandmember.jpg" style="float:left;width: 60px;padding-right: 10px;">
<span style="font-size: 20px;">Sweaters</span>
<br>
<span>Praes tinci sed</span>
</li>
<hr>
<li class="right" style="padding:7px;">
<img src="https://www.w3schools.com/w3images/workshop.jpg" style="float:left;width: 60px;padding-right: 10px;">
<span style="font-size: 20px;">Workshop </span>
<br>
<span>Ultricies congue</span>
</li>
<hr>
<li class="right" style="padding:7px;">
<img src="https://www.w3schools.com/w3images/avatar_smoke.jpg" style="float:left;width: 60px;padding-right: 10px;filter: grayscale(100%);">
<span style="font-size: 20px;">Trends </span>
<br>
<span>Lorem ipsum dipsum</span>
</li>
</ul>
</div>
<hr>
<div>
<p style="font-family: oswald;background-color: black;color: white;padding: 15px;font-size:20px;">Advertise</p>
<div style="background-color: white;padding: 10px;margin-top: -10px;">
<div style="margin: 5px;">
<p style="background-color: #eee;color: black;padding: 100px;text-align: center;">Your AD Here</p>
</div>
</div>
</div>
<hr>
<div>
<p style="font-family: oswald;background-color: black;color: white;padding: 20px;font-size:20px;">Tags</p>
<p style="background-color: white;margin-top: -10px;padding: 20px;">
<span style="background-color: black;color: white;padding: 5px;padding-bottom: 2px;padding-right: 10px;padding-left: 10px;">Fashion</span>
<span style="background-color: #eee;color: black;padding: 2px;padding-bottom: 2px;padding-right: 10px;padding-left: 10px;">Jeans</span>
<span style="background-color: #eee;color: black;padding: 2px;padding-bottom: 2px;padding-right: 10px;padding-left: 10px;">shoes</span>
<span style="background-color: #eee;color: black;padding: 2px;padding-bottom: 2px;padding-right: 10px;padding-left: 10px;">Hats</span>
</p>
</div>
<hr>
<div class="" style="height:auto; background-color: white; padding-bottom: 10px;">
<div style="font-family: oswald; background-color: black;color: white;padding: 20px;font-size:20px;">Inspiration</div>
<div align="center">
<img src="https://www.w3schools.com/w3images/jeans.jpg" style="width: 45%; padding: 5px;">
<img src="https://www.w3schools.com/w3images/avatar_hat.jpg" style="width: 45%; padding: 5px;">
<img src="https://www.w3schools.com/w3images/team1.jpg" style="width: 45%; padding: 5px;">
<img src="https://www.w3schools.com/w3images/team4.jpg" style="width: 45%; padding: 5px;">
</div>
</div>
<hr>
<div class="">
<p style="font-family: oswald;background-color: black;color: white;padding: 20px;font-size:20px;">Follow Me</p>
<div style="background-color: white;padding: 15px;margin-top: -10px;color: black;letter-spacing: 2px;">
<i class="fa fa-facebook-official" style="font-size:24px"></i>
<i class="fa fa-instagram" style="font-size:24px"></i>
<i class="fa fa-snapchat" style="font-size:24px"></i>
<i class="fa fa-pinterest-p" style="font-size:24px"></i>
<i class="fa fa-twitter" style="font-size:24px"></i>
<i class="fa fa-linkedin" style="font-size:24px"></i>
</div>
</div>
<hr>
<div class="">
<p style="font-family: oswald;background-color: black;color: white;padding: 20px;font-size:20px;">Subscribe</p>
<div style="background-color: white;padding: 15px;margin-top: -10px;color: black;">
<p style="font-size: 17px;">Enter your e-mail below and get notified on the latest blog posts.</p>
<form>
<input type="email" name="email" placeholder="Enter e-mail" style="padding: 10px;font-family: oswald;width: 100%; " autocomplete="off">
<br><br>
<button style="padding: 10px;font-family: oswald;width: 100%;color: white;background-color: #f44336;border: 0; ">Subscribe</button>
</form>
</div>
</div>
</div>
<div class="col-lg-12 col-xs-12" style="background-color: #616161;color: white ;padding: 20px;">
<p align="center">Powered by <a href="#" style="color: white;">marg</a></p>
</div>
<div class="scroll-top-wrapper ">
<span class="scroll-top-inner">
<i class="fa fa-2x fa-arrow-circle-up"></i>
</span>
</div>
.icon ul li{
float:left;
}
.icon ul li a{
font-size:15px;
color:white;
padding: 13px;
}
.icon ul li a:hover{
background-color: #DCDCDC;
cursor: pointer;
color: black;
}
.icon1{
float: right;
font-size:15px;
border: 1px solid #DCDCDC;
background-color: black;
color:white;
padding: 10px;
font-weight: bold;
}
.icon1:hover{
background-color: #DCDCDC;
color:black;
}
.icon2:hover{
background-color: #DCDCDC;
color:black;
}
.scroll-top-wrapper {
position: fixed;
opacity: 0;
visibility: hidden;
overflow: hidden;
text-align: center;
z-index: 99999999;
background-color: black;
color: #eeeeee;
width: 50px;
height: 48px;
line-height: 48px;
right: 30px;
bottom: 30px;
padding-top: 2px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.scroll-top-wrapper:hover {
background-color: #888888;
}
.scroll-top-wrapper.show {
visibility:visible;
cursor:pointer;
opacity: 0.6;
}
.scroll-top-wrapper i.fa {
line-height: inherit;
}
$(document).ready(function(){
$(function(){
$(document).on( 'scroll', function(){
if ($(window).scrollTop() > 100) {
$('.scroll-top-wrapper').addClass('show');
} else {
$('.scroll-top-wrapper').removeClass('show');
}
});
$('.scroll-top-wrapper').on('click', scrollToTop);
});
function scrollToTop() {
verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
element = $('body');
offset = element.offset();
offsetTop = offset.top;
$('html, body').animate({scrollTop: offsetTop}, 500, 'linear');
}
});
