ValentynaGorbachenko/index.css

## index.css
header {
      text-align: center;
      background: url('http://gorbachenko.byethost18.com/assets/blog_bg2.png');
      background-size: cover;
      color: white;
    }
    a {
      text-decoration: none;
      color: white;
    }
    h1 {
      font-size: 70px;
      font-family: Verdana, Geneva, sans-serif
    }
    h2, a {
     font-family: Verdana, Geneva, sans-serif;
    }
    img {
      margin: 40px 0px 0px 0px;
      border: 6px solid white;
      border-radius: 40px;
    }
    ul {
      padding: 15px;
      background: rgba(0,0,0,0.5);
    }
    li {
      display: inline;
      padding: 0px 10px 0px 10px;
    }
    li:hover {
      background: rgba(0,0,0,0.6);
      padding: 10px;
    }
    article {
      max-width: 500px;
      padding: 20px;
      margin: 0 auto;
    }
    p {
      font-family:Arial, sans-serif;
      text-align: justify;
    }
    @media (max-width: 500px) {
      h1 {
        font-size: 36px;
        padding: 5px;
      }
      li {
        padding: 5px;
        display: block;
      }
      li:hover {
      background: rgba(0,0,0,0.6);
      padding: 5px;}
      header{
       background-position: center top;
      }
    }
    #logo{
      max-height: 150px;
    }

## index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>Valentyna's Blog</title>
        <script src="index.js"></script>
        <link href="index.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
	 <header>
	    <img id="logo" src="http://gorbachenko.byethost18.com/assets/valentyna_photo_avatar1.png">
	    <h1>Valentyna's Blog</h1>
	    <ul>
	      <li><a href="#">About Me</a></li>
	      <li><a href="#">Best Poems</a></li>
	      <li><a href="#">Worst Poems</a></li>
	    </ul>
	  </header>
	  <article>
	    <h2>Mauris varius ligula vitae ipsum</h2>
	    <p>Proin volutpat nibh felis, ut egestas purus congue vel. Phasellus non malesuada arcu, et molestie mauris. Pellentesque condimentum volutpat tortor sit amet congue. Mauris volutpat sem porta urna tempus aliquam. In venenatis sem in finibus ultricies. Maecenas vitae dolor eu nisl congue semper eget quis purus. Sed felis ipsum, dapibus non nulla eget, lacinia vestibulum purus. Mauris ornare vel nunc aliquam tristique. Vivamus ac cursus metus, eget ultricies metus. Cras eleifend metus ac bibendum laoreet. Morbi vitae urna ultricies dui mattis finibus. In hac habitasse platea dictumst. Aenean vestibulum egestas velit, vitae lacinia justo aliquet a. Nulla a tincidunt elit. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
	    <button>Like</button>
	  </article>
	  <article>
	    <h2>Nam euismod finibus quam, et ullamcorper ipsum porta non.</h2>
	    <p>Nulla nisl lacus, iaculis mattis feugiat dictum, mattis et massa. Morbi sit amet ultrices elit. Nulla facilisi. Etiam convallis vel est et bibendum. Nam iaculis fermentum mauris vitae aliquet. Duis euismod sapien eu justo maximus, et blandit leo scelerisque. Sed tincidunt lorem in neque pulvinar, ac varius felis auctor. Donec eget malesuada quam. Nullam sit amet molestie ex. Nam quis porta erat. Aenean pulvinar elit lacus, sed fermentum erat maximus ac. Duis a tortor sit amet odio lobortis vulputate eget a lectus. Fusce gravida mauris scelerisque egestas porta.</p>
	    <button>Like</button>
	  </article>
	  <article>
	    <h2>Integer suscipit, nisi vitae sagittis</h2>
	    <p>Quisque eu viverra nisl. Suspendisse accumsan, quam eu tristique mattis, neque justo interdum nunc, at volutpat mauris quam vitae metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam in erat purus. Nam rutrum, justo sit amet eleifend iaculis, nisl odio gravida augue, tristique pretium diam urna et nibh. Nunc condimentum feugiat arcu sed laoreet. Pellentesque efficitur, est eget sollicitudin scelerisque, justo sapien ornare dui, ac cursus diam felis posuere mauris. Aenean sed nibh et turpis rutrum luctus quis ut arcu. Vivamus tincidunt enim mauris, eu rutrum lorem posuere sit amet.</p>
	    <button >Like</button>
	  </article>
	  <script>
	    $("button").on("click", function() {
	      alert("Clicked!");
	    });
	  </script>
    </body>
</html>

## index.js
Empty file
	header {
	text-align: center;
	background: url('http://gorbachenko.byethost18.com/assets/blog_bg2.png');
	background-size: cover;
	color: white;
	}
	a {
	text-decoration: none;
	color: white;
	}
	h1 {
	font-size: 70px;
	font-family: Verdana, Geneva, sans-serif
	}
	h2, a {
	font-family: Verdana, Geneva, sans-serif;
	}
	img {
	margin: 40px 0px 0px 0px;
	border: 6px solid white;
	border-radius: 40px;
	}
	ul {
	padding: 15px;
	background: rgba(0,0,0,0.5);
	}
	li {
	display: inline;
	padding: 0px 10px 0px 10px;
	}
	li:hover {
	background: rgba(0,0,0,0.6);
	padding: 10px;
	}
	article {
	max-width: 500px;
	padding: 20px;
	margin: 0 auto;
	}
	p {
	font-family:Arial, sans-serif;
	text-align: justify;
	}
	@media (max-width: 500px) {
	h1 {
	font-size: 36px;
	padding: 5px;
	}
	li {
	padding: 5px;
	display: block;
	}
	li:hover {
	background: rgba(0,0,0,0.6);
	padding: 5px;}
	header{
	background-position: center top;
	}
	}
	#logo{
	max-height: 150px;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Valentyna's Blog</title>
	<script src="index.js"></script>
	<link href="index.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
	<header>
	<img id="logo" src="http://gorbachenko.byethost18.com/assets/valentyna_photo_avatar1.png">
	<h1>Valentyna's Blog</h1>
	<ul>
	<li><a href="#">About Me</a></li>
	<li><a href="#">Best Poems</a></li>
	<li><a href="#">Worst Poems</a></li>
	</ul>
	</header>
	<article>
	<h2>Mauris varius ligula vitae ipsum</h2>
	<p>Proin volutpat nibh felis, ut egestas purus congue vel. Phasellus non malesuada arcu, et molestie mauris. Pellentesque condimentum volutpat tortor sit amet congue. Mauris volutpat sem porta urna tempus aliquam. In venenatis sem in finibus ultricies. Maecenas vitae dolor eu nisl congue semper eget quis purus. Sed felis ipsum, dapibus non nulla eget, lacinia vestibulum purus. Mauris ornare vel nunc aliquam tristique. Vivamus ac cursus metus, eget ultricies metus. Cras eleifend metus ac bibendum laoreet. Morbi vitae urna ultricies dui mattis finibus. In hac habitasse platea dictumst. Aenean vestibulum egestas velit, vitae lacinia justo aliquet a. Nulla a tincidunt elit. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
	<button>Like</button>
	</article>
	<article>
	<h2>Nam euismod finibus quam, et ullamcorper ipsum porta non.</h2>
	<p>Nulla nisl lacus, iaculis mattis feugiat dictum, mattis et massa. Morbi sit amet ultrices elit. Nulla facilisi. Etiam convallis vel est et bibendum. Nam iaculis fermentum mauris vitae aliquet. Duis euismod sapien eu justo maximus, et blandit leo scelerisque. Sed tincidunt lorem in neque pulvinar, ac varius felis auctor. Donec eget malesuada quam. Nullam sit amet molestie ex. Nam quis porta erat. Aenean pulvinar elit lacus, sed fermentum erat maximus ac. Duis a tortor sit amet odio lobortis vulputate eget a lectus. Fusce gravida mauris scelerisque egestas porta.</p>
	<button>Like</button>
	</article>
	<article>
	<h2>Integer suscipit, nisi vitae sagittis</h2>
	<p>Quisque eu viverra nisl. Suspendisse accumsan, quam eu tristique mattis, neque justo interdum nunc, at volutpat mauris quam vitae metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam in erat purus. Nam rutrum, justo sit amet eleifend iaculis, nisl odio gravida augue, tristique pretium diam urna et nibh. Nunc condimentum feugiat arcu sed laoreet. Pellentesque efficitur, est eget sollicitudin scelerisque, justo sapien ornare dui, ac cursus diam felis posuere mauris. Aenean sed nibh et turpis rutrum luctus quis ut arcu. Vivamus tincidunt enim mauris, eu rutrum lorem posuere sit amet.</p>
	<button >Like</button>
	</article>
	<script>
	$("button").on("click", function() {
	alert("Clicked!");
	});
	</script>
	</body>
	</html>