JSFiddle - React, Tailwind, and code Playground
HTML
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keyword" content="XHTMLMP, vts" />
<meta name="author" content="vts" />
<title>Main page</title>
<link href="lav.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container" >
<div id="top">
</div>
<div id="header">
</div>
<div id="content">
<div id="dugme" >
<a class="lav " href="http://lavpivo.rs/naslovna">ili jesi</a>
<a class="lav " href="denied.xhtml">ili nisi</a>
</div>
<h1>PUNOLETAN</h1>
</div>
<div id="bottom"></div>
<div id="footer">
</div>
</div>
</body>
</html>
CSS
#container{
width:98%;
margin:0 auto;
color:#fff;
font-family:arial, helvetica, "sans serif";
font-size:12pt;
white-space: nowrap;
}
@font-face{
font-family: 'Homestead Display';
src: url('Homestead-Display.ttf');
font-weight: normal;
font-style: normal;
}
@font-face{
font-family: 'Homestead Regular';
src: url('Homestead-Regular.ttf');
font-weight: normal;
font-style: normal;
}
@font-face{
font-family: 'Wisdom';
src: url('wisdom.otf');
font-weight: normal;
font-style: normal;
}
html,body {
background: url('lav-bg.png') no-repeat center center fixed;
-webkit-background-size: cover; /* For WebKit*/
-moz-background-size: cover; /* Mozilla*/
-o-background-size: cover; /* Opera*/
background-size: cover; /* Generic*/
}
h1
{font:100px 'Homestead Display', Arial, Helvetica, sans-serif;
color:#fff;
text-align:center;
}
.denied
{
font:70px 'Homestead Regular', Arial, Helvetica, sans-serif;
color:#fff;
text-align:right;
position:absolute;
}
#dugme {
margin:4cm 6cm 2cm 6cm;;
padding-bottom:20px;
text-align:center;
}
.lav {
display:inline-block;
width:183px;
height:79px;
border:1px solid #729fc9;
text-align:center;
font:53px/79px 'Wisdom', Arial, Helvetica, sans-serif;
color:#fff;
text-decoration:none;
margin-left: auto;
margin-right: auto;
background: -moz-linear-gradient(left, rgba(3,67,141,0.3) 0%, rgba(0,169,234,0.3) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(3,67,141,0.3)), color-stop(100%,rgba(0,169,234,0.3))); /* Chrome,Safari4+ */
}
img
{
position: center;
top: 50%;
left: 50%;
margin-left: -(X/2)px;
margin-top: -(Y/2)px;
}
#top
{
width: 750px;
height: 110px;
padding-bottom: 10px;
position: fixed;
top: 0;
left: 50%; /* Start at 50% of browser window */
margin-left: -325px; /* Go half of width...