HTML
<!DOCTYPE html>
<html lang="en">
<!--[if lte IE 8]>
<html lang="en" class="oldbro">
<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes">
<title>Template</title>
<link rel="stylesheet" href="css/style.css">
<!--[if lt IE 8]>
<link rel="stylesheet" href="css/ie.css" />
<![endif]-->
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="manifest" href="site.webmanifest">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link href="https://fonts.googleapis.com/css?family=Sarpanch&subset=latin-ext" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Michroma" rel="stylesheet">
</head>
<body>
<div id="burg"><span></span><span></span><span></span><span></span></div>
<div id="tophead">
<div id="header">
<div id="inheader"><a href="/">Template<span class="logo"></span></a></div>
</div>
<div id="nav">
<ul>
<li><a href="#about">About</a></li>
<li><a href="#products">Products</a></li>
<li><a href="#contacts">Contacts</a></li>
<li><a href="#facts">Facts</a></li>
<li><a id="donate" target="_blank" href="https://www.paypal.me/kostassliazas">Donate</a></li>
</ul>
</div>
</div>
<div id="main">
<div class="row">
<div id="leftcolumn">
<div class="box" id="products">
<h1>Products</h1>
<a class="h240" href="#Ok"><img src="http://burundukas.lt/templates/template2018/img/photo3.jpg" alt="ok"></a>
<h5>Lighting, March, 2018</h5>
<p>Lorem ipsum dolor sit amet, no sed euismod dolorum fuisset, nulla ancillae ne nec? Graecis dolores repudiandae ut vim, mea an delectus explicari? Ius an eirmod discere epicuri. Ad porro liber possit vel, has etiam aliquam contentiones at? Ius cu erat probatus patrioque, mollis virtute no est, nostro offendit vix an.
</p>
</div>
<div class="box" id="contacts">
<h1>Contacts</h1>
<a class="h240" href="#fot"><img src="http://burundukas.lt/templates/template2018/img/photo1.jpg" alt="ok"></a>
<h5>Keyboard, March, 2018</h5>
<p>Lorem ipsum dolor sit amet, no sed euismod dolorum fuisset, nulla ancillae ne nec? Graecis dolores repudiandae ut vim, mea an delectus explicari? Ius an eirmod discere epicuri. Ad porro liber possit vel, has etiam aliquam contentiones at? Ius cu erat probatus patrioque, mollis virtute no est, nostro offendit vix an.
</p>
</div>
<div class="box" id="about">
<h1>About</h1>
<div class="img">
<img src="http://burundukas.lt/templates/template2018/img/photo2.jpg" alt="ok">
<h4>Lorem ipsum dolor sit amet</h4>
</div>
<p>Lorem ipsum dolor sit amet, no sed euismod dolorum fuisset, nulla ancillae ne nec? Graecis dolores repudiandae ut vim, mea an delectus explicari? Ius an eirmod discere epicuri. Ad porro liber possit vel, has etiam aliquam contentiones at? Ius cu erat probatus patrioque, mollis virtute no est, nostro offendit vix an.
</p>
</div>
<div class="box" id="facts">
<h1>Facts</h1>
<a class="h240" href="#Ok"><img src="http://burundukas.lt/templates/template2018/img/photo4.jpg" alt="ok"></a>
<h5>Fact, March, 2018</h5>
<p>Lorem ipsum dolor sit amet, no sed euismod dolorum fuisset, nulla ancillae ne nec? Graecis dolores repudiandae ut vim, mea an delectus explicari? Ius an eirmod discere epicuri. Ad porro liber possit vel, has etiam aliquam contentiones at? Ius cu erat probatus patrioque, mollis virtute no est, nostro offendit vix an.
</p>
</div>
</div>
<div id="rightcolumn">
<div class="box">
<a href="http://burundukas.lt/templates/template2018/template2018-pink.zip"><img src="http://burundukas.lt/templates/template2018/img/download.png" alt="ok"><span>Download <br>1.15 MB</span></a>
<img src="http://burundukas.lt/templates/template2018/img/fake-img.svg" alt="ok">
<img src="http://burundukas.lt/templates/template2018/img/fake-img.svg" alt="ok">
</div>
<div class="box">
<img src="http://burundukas.lt/templates/template2018/img/fake-img.svg" alt="ok">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, no sed euismod dolorum fuisset, nulla ancillae ne nec? Graecis dolores repudiandae ut vim, mea an delectus explicari? Ius an eirmod discere epicuri. Ad porro liber possit vel, has etiam aliquam contentiones at? Ius cu erat probatus patrioque, mollis virtute no est, nostro offendit vix an.
</p>
</div>
<div class="box">
<img src="http://burundukas.lt/templates/template2018/img/fake-img.svg" alt="ok">
<h1>Lorem ipsum</h1>
<ul>
<li><a href="http://www.burundukas.lt/home/burunduk/webdesign/">Lorem ipsum dolor sit amet</a></li>
<li><a href="http://www.burundukas.lt/home/burunduk/webdesign/">Lorem ipsum dolor sit amet</a></li>
<li><a href="http://www.burundukas.lt/home/burunduk/webdesign/">Lorem ipsum dolor sit amet</a></li>
</ul>
</div>
<div class="box">
<img src="http://burundukas.lt/templates/template2018/img/fake-img.svg" alt="ok">
<h1>Lorem ipsum</h1>
<ul>
<li><a href="http://www.burundukas.lt/home/burunduk/webdesign/">Lorem ipsum dolor sit amet</a></li>
<li><a href="http://www.burundukas.lt/home/burunduk/webdesign/">Lorem ipsum dolor sit amet</a></li>
<li><a href="http://www.burundukas.lt/home/burunduk/webdesign/">Lorem ipsum dolor sit amet</a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="fot">
<div id="footer">
<div id="lines"></div>
<span id="flogo"></span>
<h6>2018 by Kostas Šliažas</h6>
</div>
</div>
<script src="js/script.js"></script>
<script>
console.log(document.URL);
</script>
</body>
</html>
CSS
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;outline:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after{content:'';content:none}q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}*{box-sizing:border-box}button,button:focus,button:active,button:hover{outline:none;outline-color:#eee}input[type="button"]{outline:none}input[type="button"]::-moz-focus-inner{border:0}button::-moz-focus-inner{border:0}body{color:#333;font:16px/1.5em Arial, Geneva, Tahoma, sans-serif;background:#fafafa;background:repeating-linear-gradient(45deg, rgba(200,200,200,0.1) 300px, rgba(200,200,200,0.3) 301px, rgba(200,200,200,0.5) 1000px, rgba(200,200,200,0.2) 1001px),repeating-linear-gradient(135deg, rgba(200,200,200,0.2) 300px, rgba(200,200,200,0.5) 301px, rgba(200,200,200,0.2) 1000px, rgba(200,200,200,0.1) 1001px);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{line-height:1.5em;position:relative}#main a:link,#main a:visited{text-decoration:none;color:#555}#main a:hover,#main a:active{text-decoration:underline;color:#333;-webkit-text-decoration-color:#941C5E;text-decoration-color:#941C5E;text-decoration-style:double}h1{margin:0;font-size:1.5em;line-height:1em;margin-bottom:1em;font-family:'Sarpanch', Arial, sans-serif;font-display:swap}#leftcolumn h1{display:flex;align-items:center;width:100%;text-transform:lowercase}#leftcolumn h1:after,#leftcolumn h1:before{flex:1;height:2px;content:"";background:#941C5E}#leftcolumn h1:before{margin:0 12px 0 0}#leftcolumn h1:after{margin:0 0 0 12px}h2,h3{margin:0;font-size:1.25em;line-height:1.2em;margin-bottom:1.2em}h4,h5,h6{margin:0;font-size:0.75em;line-height:2em;padding:0 4px}h4{background:#fafafa}h5{text-align:right;font-style:italic}ol,ul{list-style-position:inside}#leftcolumn li{position:relative;line-height:1.5em}p,blockquote,pre,td,th,label{margin:0;font-size:1em;line-height:1.5em;margin-bottom:1.5em}p{text-align:justify}p:last-child{padding:0;margin:0}#leftcolumn p{text-align:justify;-moz-text-align-last:center;text-align-last:center}#rightcolumn p{text-align:justify;-moz-text-align-last:justify;text-align-last:justify}#main{width:960px;margin:0 auto;padding-bottom:24px;position:relative}#tophead{display:block;width:100%;position:relative;top:0;z-index:7;backface-visibility:hidden;will-change:transform;transform:translateZ(0);-ms-transform:translateZ(0)}#burg{display:none}#header{text-align:center;overflow:hidden;background:#BE1673;height:48px;width:100%;position:relative;background:linear-gradient(to bottom, #941C5E 0px, #333 1px, #941C5E 1px, #941C5E 46px, #333 46px, #941C5E 47px)}#inheader{width:960px;margin:0 auto;display:block;position:relative;height:48px;overflow:hidden}#inheader a{font-family:'Sarpanch', Arial, sans-serif;font-display:swap;height:48px;overflow:hidden;padding-right:48px;right:0;position:absolute;display:block;color:#fafafa;line-height:48px;font-weight:900;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-transform:uppercase;text-align:right;text-decoration:none}#nav{background:#E91189;margin:0 auto 0;overflow:hidden;width:100%;z-index:1;display:block;border-bottom:1px solid #BE1673;position:relative;top:0;background:linear-gradient(to bottom, transparent 40px, #941c5e 40px, #941c5e 42px, transparent 42px),linear-gradient(90deg, #BE1673 50%, #BE1673 50%, #E91189 50%),linear-gradient(to bottom, #E91189 40px, #333 40px, #333 42px, #E91189 42px)}#nav ul{margin:0 auto;width:960px;display:block;min-height:48px;background:linear-gradient(to bottom, transparent 40px, #941c5e 40px, #941c5e 42px, transparent 42px),linear-gradient(135deg, #BE1673 34px, #E91189 34px, #E91189 52px, #BE1673 52px, #BE1673 70px, #E91189 70px, #E91189 88px, #BE1673 88px, #BE1673 106px, #E91189 106px, #E91189 124px, #BE1673 124px, #BE1673 142px, #E91189 142px)}#nav a{float:right;display:block;text-align:center;padding:12px 14px;text-decoration:none;text-transform:lowercase;color:#333;font-size:0.75em;line-height:2;text-transform:uppercase;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-family:'Michroma', sans-serif;font-display:swap;letter-spacing:.083em;font-weight:bold}#nav a:hover{color:#fafafa;text-shadow:none;background:linear-gradient(to bottom, transparent 40px, #ff1493 40px, #ff1493 42px, transparent 42px)}.line{transform:skew(-25deg, 0deg) translate(0, -100%);display:block;float:left;list-style:none;margin:0 0 0 24px;height:24px;width:24px;transform:skew(-45deg, 0deg);z-index:2;background:#E91189}#lines{display:block;border-top:2px solid #E91189;margin-top:24px}#logos{display:block;height:2px;width:50%;position:relative;margin:0 auto;background:#E91189}.logo{position:absolute;line-height:48px;height:48px;width:48px;background:url(../img/log.svg) no-repeat center/40px;display:inline-block}#flogo{position:relative;height:48px;width:120px;background:#941C5E url(../img/log.svg) no-repeat center/40px;display:block;margin:-24px auto 0}#leftcolumn{float:left;width:65%}#rightcolumn{float:left;width:35%;padding-left:24px}#fot{background:#941C5E;-webkit-box-shadow:0px 1px 2px 0px #999;-moz-box-shadow:0px 1px 2px 0px #999;box-shadow:0px 1px 2px 0px #999;display:block;width:100%;height:120px}#footer{width:960px;height:120px;text-align:right;margin:0 auto;padding-top:24px;color:#333}.box{background:#fafafa;padding:24px;margin-top:24px;-webkit-box-shadow:0px 1px 2px 0px #999;-moz-box-shadow:0px 1px 2px 0px #999;box-shadow:0px 1px 2px 0px #999;border-radius:2px}.img{margin:0 0 0 12px;position:relative;height:192px;overflow:hidden;display:block;width:50%;float:right;padding-bottom:24px;text-align:right}img{width:100%;height:100%;display:block;transition:.2s ease-in-out;object-fit:cover}#rightcolumn img{margin-bottom:24px;height:144px}#rightcolumn img{-webkit-box-shadow:0px 1px 2px 0px #999;-moz-box-shadow:0px 1px 2px 0px #999;box-shadow:0px 1px 2px 0px #999}body{counter-reset:count}#rightcolumn li::before{counter-increment:count;content:counter(count) ". "}#rightcolumn div>a{display:block}#rightcolumn li a{display:inline-block}.box span{text-align:center;position:absolute;display:block;max-width:264px;max-height:144px;width:100%;left:50%;top:50%;-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=0, Direction=315, Color=#f7f7f7)";text-shadow:-1px -1px 1px #f7f7f7, 1px -1px 1px #eee, 1px 0px 1px #f7f7f7, -1px 1px 1px #aaaaaa;filter:progid:DXImageTransform.Microsoft.Shadow(Strength=0, Direction=315, Color=#f7f7f7);font-size:1.5em;font-family:'Sarpanch', Arial, sans-serif;font-display:swap;overflow:hidden}#rightcolumn img:last-child{margin-bottom:0}#slide{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.h240{display:block;position:relative;overflow:hidden;height:240px;min-height:240px}#tophead:after,#toper:after,#lines:after,.line:after,.box:after,.row:after{content:"";display:table;clear:both;height:0;overflow:hidden;width:0}table{border-collapse:collapse;margin-bottom:1.5em}#toper{display:block;top:0;right:0;position:absolute;width:48px;z-index:2;height:100%}#ttop{backface-visibility:hidden;will-change:transform;top:100%;transform:translate(0, -48px);-ms-transform:translate(0, -48px);position:fixed;display:none;line-height:48px;text-align:center;height:48px;width:48px;background:#E91189;background:#E91189 url(../img/top.svg) center 8px no-repeat;cursor:pointer;text-decoration:none;border:0;-webkit-box-shadow:0px 1px 2px 0px #999;-moz-box-shadow:0px 1px 2px 0px #999;box-shadow:0px 1px 2px 0px #999;border-radius:2px;margin:0 0 -2px 2px}@media screen and (max-width: 800px){#main,#leftcolumn,#rightcolumn,#nav ul,#nav li,#inheader,.img{width:100%;padding:0}#footer{width:100%}.img{padding:0 0 24px 0}#main{padding-top:24px}#tophead{position:fixed}#nav{display:none}#toper{padding:0}#burg{overflow:hidden;border-radius:2px;background:#941C5E;background:linear-gradient(to bottom, #941C5E 0px, #333 1px, #333 1px, #333 46px, #333 46px, #941C5E 47px);display:block;cursor:pointer;height:48px;width:48px;position:fixed;top:0;z-index:9998;padding:14px 12px 10px}#burg span{display:list-item;list-style:none;height:2px;font-size:0;margin:0 0 4px 0;background:#999;text-align:center}}@media screen and (max-width: 480px){#nav a,#nav li{float:none;width:100%;background:#E91189;border-bottom:1px solid #BE1673}#nav a:hover,#nav li:hover{background:#BE1673}.h240{height:144px;max-height:144px;min-height:144px;display:block}}
