<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Studio Banx</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="b2">
<p class="t2"><i>b</i>anx</p>
</div>
<div class="b1">
<p class="t1"><span>DESIGN</span><span>WEB DESIGN</span> <span>GRAPHIC DESIGN</span> <span>PRINT DESIGN</span> <span>VIDEO DESIGN</span></p>
</div>
<div class="l1">
<div class="l2">
<p class="t3"><i><span>WE ARE</span></i></p>
</div>
</div>
<div>
<p class="t4">STUDIO BANX</p>
</div>
<div>
<p class="t5">A CREATIVE WEB & PRINT DIGITAL AGENCY BUILT ON METHOD AND CREATIVE JUICES</p>
<hr class="hr">
</div>
<div>
<form action="input1.php" name="test" method="post" class="b5">
<input class="b3" type="submit" value="See our work">
<input class="b4" type="submit" value="Meet the team">
</form>
</div>
</body>
</html>
body {
background: url(img/bg.jpg) no-repeat center center fixed;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100% 100%;
}
.t1 {
color: #4D4E67;
font-family: Rounds;
font-size: 14px;
font-weight: 800;
margin-bottom: 130px;
}
.t2 {
color: #4D4E67;
font-family: Rounds;
font-size: 30px;
font-weight: 800;
}
.b1 {
margin-left: 850px;
margin-right: 10px;
margin-top: -45px;
}
.b2 {
margin-left: 80px;
}
.b3 {
height: 50px;
width: 250px;
color: white;
font-style: italic;
background: linear-gradient(to top, #514E68, #747288);
border: 3px;
font-family: Rounds;
font-size: 20px;
margin-right: 15px;
border-radius: 50px;
margin-left: 500px;
}
.b4 {
height: 50px;
width: 250px;
color: white;
font-style: italic;
background: linear-gradient(to top, #907E8C, #C8B6C2);
border: 3px;
font-family: Rounds;
font-size: 20px;
border-radius: 50px;
}
.t3 {
text-align: center;
color: #4D4E67;
font-family: Rounds;
font-size: 23px;
font-weight: 800;
}
.t4 {
text-align: center;
color: #4D4E67;
font-family: Rounds;
font-size: 150px;
font-weight: 800;
margin: 10px;
}
.t5 {
text-align: center;
color: #4D4E67;
font-family: Rounds;
font-size: 18px;
font-weight: 800;
}
.b5 {
align-content: center;
}
hr {
color-profile: white;
width: 70%;
}
.hr {
margin-bottom: 60px;
background-image:
linear-gradient(transparent calc(49%), white calc(50% - 2px), white calc(50% + 2px), transparent calc(50% + 2px)),
linear-gradient(transparent calc(49%), white calc(50% - 2px), white calc(50% + 2px), transparent calc(50% + 2px));
background-size: calc(50% - 110px);
background-repeat: no-repeat;
background-position: 0 0, 100% 0;
}
span {
margin-right: 15px;
}
.l1 {
width: 70%;
text-align: center;
background-image:
linear-gradient(transparent calc(49%), white calc(50% - 2px), white calc(50% + 2px), transparent calc(50% + 2px)),
linear-gradient(transparent calc(49%), white calc(50% - 2px), white calc(50% + 2px), transparent calc(50% + 2px));
background-size: calc(70%);
background-repeat: no-repeat;
background-position: 30% 0, 70% 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Studio Banx</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="b2">
<p class="t2"><i>b</i>anx</p>
</div>
<div class="b1">
<p class="t1">DESIGN WEB DESIGN GRAPHIC DESIGN PRINT DESIGN VIDEO DESIGN</p>
</div>
<div class="l1">
<div class="l2">
<p class="t3"><i><span>WE ARE</span></i></p>
</div>
</div>
<div>
<p class="t4">STUDIO BANX</p>
</div>
<div>
<p class="t5">A CREATIVE WEB & PRINT DIGITAL AGENCY BUILT ON METHOD AND CREATIVE JUICES</p>
<hr>
</div>
<div>
<form action="input1.php" name="test" method="post" class="b5">
<input class="b3" type="submit" value="See our work">
<input class="b4" type="submit" value="Meet the team">
</form>
</div>
</body>
</html>
body {
background: url(img/bg.jpg) no-repeat center center fixed;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100% 100%;
}
.t1 {
color: #4D4E67;
font-family: Rounds;
font-size: 14px;
font-weight: 800;
margin-bottom: 130px;
}
.t2 {
color: #4D4E67;
font-family: Rounds;
font-size: 30px;
font-weight: 800;
}
.b1 {
margin-left: 920px;
margin-right: 50px;
margin-top: -45px;
}
.b2 {
margin-left: 80px;
}
.b3 {
height: 50px;
width: 250px;
color: white;
font-style: italic;
background: linear-gradient(to top, #514E68, #747288);
border: 3px;
font-family: Rounds;
font-size: 20px;
margin-right: 15px;
border-radius: 50px;
margin-left: 500px;
}
.b4 {
height: 50px;
width: 250px;
color: white;
font-style: italic;
background: linear-gradient(to top, #907E8C, #C8B6C2);
border: 3px;
font-family: Rounds;
font-size: 20px;
border-radius: 50px;
}
.t3 {
text-align: center;
color: #4D4E67;
font-family: Rounds;
font-size: 23px;
font-weight: 800;
}
.t4 {
text-align: center;
color: #4D4E67;
font-family: Rounds;
font-size: 150px;
font-weight: 800;
margin: 10px;
}
.t5 {
text-align: center;
color: #4D4E67;
font-family: Rounds;
font-size: 18px;
font-weight: 800;
}
.b5 {
align-content: center;
}
hr {
border-color: white;
color-profile: white;
}
<html>
<head>
<meta charset="UTF-8">
<title>Название</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="canvas.js"></script>
<script class="a11" src="Таймер.js"></script>
</head>
<body>
<div class="a1">
<h1 class="a2">COMING SOON</h1>
<p class="a3">SUBCRIBE TO GET NOTIFED ON UPDATES</p>
</div>
<div>
<form action="input1.php" name="test" method="post" class="a4">
<input class="a5" type="email" name="email" placeholder="Type your e-mail adress">
<input class="a6" type="submit" value="Subscribe">
</form>
</div>
<div class="a8">
<canvas id="circle1" width="100" height="100">
<p>Ваш браузер не поддерживает рисование.</p>
</canvas>
</div>
<div class="a9">
<canvas id="circle2" width="100" height="100">
<p>Ваш браузер не поддерживает рисование.</p>
</canvas>
</div>
<div class="a10">
<canvas id="circle3" width="100" height="100">
<p>Ваш браузер не поддерживает рисование.</p>
</canvas>
</div>
<div class="a7">
<h1>DAYS HOURS MINS</h1>
</div>
</body>
</html>
body {
background: url(img/bg.jpg) no-repeat center center fixed;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
}
.a1 {
height: 300px;
}
.a2 {
font-size: 50px;
font-family: Bold;
color: white;
text-align: center;
line-height: 0.5em;
margin-top: 125px;
}
.a3 {
color: darkblue;
text-align: center;
font-family: Bold;
line-height: 0em;
}
.a4 {
margin-left: 630px;
margin-top: -220px;
size: 500px;
}
.a5 {
width: 180px;
height: 30px;
}
.a6 {
background-color: orange;
color: white;
border-color: orange;
height: 35px;
}
.a7 {
font-size: 15px;
color: white;
font-family: Bold;
margin-left: 610px;
margin-top: 300px;
word-spacing: 25px;
position: relative;
}
.a8 {
margin-left: 570px;
margin-top: 200px;
}
.a9 {
margin-left: 700px;
margin-top: -100px;
}
.a10 {
margin-left: 830px;
margin-top: -100px;
}
.a11 {
margin-top: -280px;
}
window.addEventListener("load", function() {
var drawingCanvas = document.getElementById('circle1');
if (drawingCanvas && drawingCanvas.getContext) {
var context = drawingCanvas.getContext('2d');
// Рисуем окружность
context.strokeStyle = "#538ec2";
context.fillStyle = "#538ec2";
context.beginPath();
context.arc(drawingCanvas.width / 2, drawingCanvas.height / 2, drawingCanvas.width / 2, 0, Math.PI * 2, true);
context.closePath();
context.stroke();
context.fill();
}
})
window.addEventListener("load", function() {
var drawingCanvas = document.getElementById('circle2');
if (drawingCanvas && drawingCanvas.getContext) {
var context = drawingCanvas.getContext('2d');
// Рисуем окружность
context.strokeStyle = "#538ec2";
context.fillStyle = "#538ec2";
context.beginPath();
context.arc(drawingCanvas.width / 2, drawingCanvas.height / 2, drawingCanvas.width / 2, 0, Math.PI * 2, true);
context.closePath();
context.stroke();
context.fill();
}
})
window.addEventListener("load", function() {
var drawingCanvas = document.getElementById('circle3');
if (drawingCanvas && drawingCanvas.getContext) {
var context = drawingCanvas.getContext('2d');
// Рисуем окружность
context.strokeStyle = "#538ec2";
context.fillStyle = "#538ec2";
context.beginPath();
context.arc(drawingCanvas.width / 2, drawingCanvas.height / 2, drawingCanvas.width / 2, 0, Math.PI * 2, true);
context.closePath();
context.stroke();
context.fill();
}
})
(function() {
var _id="ba40f8b36c284523e3ef684a5f5bee02";
while(document.getElementById("timer"+_id))_id=_id+"0";
document.write("<div id='timer"+_id+"' style='min-width:222px;height:60px;'></div>");
var _t=document.createElement("script");_t.src="//megatimer.ru/timer/timer.min.js";
var _f=function(_k){var l=new MegaTimer(_id, {"view":[1,1,1,0],"type":{"currentType":"1","params":{"usertime":true,"tz":"3","utc":1572566400000}},"design":{"type":"text","params":{"number-font-family":{"family":"Comfortaa","link":"<link href='//fonts.googleapis.com/css?family=Comfortaa&subset=latin,cyrillic' rel='stylesheet' type='text/css'>"},"number-font-size":"60","number-font-color":"#538ec2","separator-margin":"20","separator-on":false,"separator-text":":","text-on":false,"text-font-family":{"family":"Comfortaa","link":"<link href='//fonts.googleapis.com/css?family=Comfortaa&subset=latin,cyrillic' rel='stylesheet' type='text/css'>"},"text-font-size":"12","text-font-color":"#c7c7c7"}},"designId":1,"theme":"white","width":222,"height":60});if(_k!=null)l.run();};_t.onload=_f;_t.onreadystatechange=function(){if(_t.readyState=="loaded")_f(1);};var _h=document.head||document.getElementsByTagName("head")[0];_h.appendChild(_t);}).call(this);
<html>
<head>
<meta charset="UTF-8">
<title>Название</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<div class="a1">
<h1 class="a2">COMING SOON</h1>
<p class="a3">SUBCRIBE TO GET NOTIFED ON UPDATES</p>
</div>
<div>
<form action="input1.php" name="test" method="post" class="a4">
<input class="a5" type="email" name="email" placeholder="Type your e-mail adress">
<input class="a6" type="submit" value="Subscribe">
</form>
</div>
<div class="a7">
<h1>DAYS HOURS MINS</h1>
</div>
<div class="a8">
<canvas id="circle1" width="180" height="180">
<p>Ваш браузер не поддерживает рисование.</p>
</canvas>
</div>
<div class="a9">
<canvas id="circle2" width="350" height="350">
<p>Ваш браузер не поддерживает рисование.</p>
</canvas>
</div>
<div class="a10">
<canvas id="circle3" width="200" height="200">
<p>Ваш браузер не поддерживает рисование.</p>
</canvas>
</div>
</body>
</html>
<script type="text/javascript" src="PSD-шники/2/index.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Вёрстка по псд</title>
<link rel="stylesheet" href="style.css">
<link rel="alternate" href="index.js">
</head>
<body>
<div class="a1">
<h1 class="a2">COMING SOON</h1>
<p class="a3">SUBCRIBE TO GET NOTIFED ON UPDATES</p>
</div>
<div>
<form action="input1.php" name="test" method="post" class="a4">
<input class="a5" type="email" name="email" placeholder="Type your e-mail adress">
<input class="a6" type="submit" value="Subscribe">
</form>
</div>
<div class="a7">
<h1>DAYS HOURS MINS</h1>
</div>
<div class="a8">
<canvas id="circle1" width="180" height="180">
<p>Ваш браузер не поддерживает рисование.</p>
</canvas>
</div>
<div class="a9">
<canvas id="circle2" width="250" height="250">
<p>Ваш браузер не поддерживает рисование.</p>
</canvas>
</div>
<div class="a10">
<canvas id="circle3" width="200" height="200">
<p>Ваш браузер не поддерживает рисование.</p>
</canvas>
</div>
</body>
</html>
body {
background: url(img/bg.jpg) no-repeat center center fixed;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
}
.a1 {
height: 300px;
}
.a2 {
font-size: 50px;
font-family: Bold;
color: white;
text-align: center;
line-height: 0.5em;
margin-top: 125px;
}
.a3 {
color: darkblue;
text-align: center;
font-family: Bold;
line-height: 0em;
}
.a4 {
margin-left: 630px;
margin-top: -220px;
size: 500px;
}
.a5 {
width: 180px;
height: 30px;
}
.a6 {
background-color: orange;
color: white;
border-color: orange;
height: 35px;
}
.a7 {
color: white;
font-family: Bold;
margin-left: 610px;
margin-top: 300px;
word-spacing: 15px;
position: relative;
}
.a8 {
margin-left: 550px;
margin-top: -140px;
}
.a9 {
margin-left: 600px;
margin-top: -150px;
}
.a10 {
margin-left: 650px;
margin-top: -150px;
}
window.addEventListener("load", function() {
var drawingCanvas = document.getElementById('circle1');
if (drawingCanvas && drawingCanvas.getContext) {
var context = drawingCanvas.getContext('2d');
// Рисуем окружность
context.strokeStyle = "#538ec2";
context.fillStyle = "#538ec2";
context.beginPath();
context.arc(100, 100, 50, 0, Math.PI * 2, true);
context.closePath();
context.stroke();
context.fill();
}
})
window.addEventListener("load", function() {
var drawingCanvas = document.getElementById('circle2');
if (drawingCanvas && drawingCanvas.getContext) {
var context = drawingCanvas.getContext('2d');
// Рисуем окружность
context.strokeStyle = "#538ec2";
context.fillStyle = "#538ec2";
context.beginPath();
context.arc(100, 100, 50, 0, Math.PI * 2, true);
context.closePath();
context.stroke();
context.fill();
}
})
window.addEventListener("load", function() {
var drawingCanvas = document.getElementById('circle3');
if (drawingCanvas && drawingCanvas.getContext) {
var context = drawingCanvas.getContext('2d');
// Рисуем окружность
context.strokeStyle = "#538ec2";
context.fillStyle = "#538ec2";
context.beginPath();
context.arc(100, 100, 50, 0, Math.PI * 2, true);
context.closePath();
context.stroke();
context.fill();
}
})
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Вёрстка по псд</title>
<link rel="stylesheet" href="style.css">
<style>
.a1 {
height: 300px;
}
.a2 {
font-size: 50px;
font-family: Bold;
color: white;
text-align: center;
line-height: 0.5em;
margin-top: 125px;
}
.a3 {
color: darkblue;
text-align: center;
font-family: Bold;
line-height: 0em;
}
.a4 {
margin-left: 630px;
margin-top: -220px;
size: 500px;
}
.a5 {
width: 180px;
height: 30px;
}
.a6 {
background-color: orange;
color: white;
border-color: orange;
height: 35px;
}
.a7 {
color: white;
font-family: Bold;
margin-left: 610px;
margin-top: 300px;
word-spacing: 15px;
position: relative;
}
.a8 {
margin-left: 550px;
margin-top: -140px;
}
.a9 {
margin-left: 600px;
margin-top: -200px;
}
.a10 {
margin-left: 650px;
margin-top: -230px;
}
</style>
<script>
window.onload = function() {
var drawingCanvas = document.getElementById('circle1');
if(drawingCanvas && drawingCanvas.getContext) {
var context = drawingCanvas.getContext('2d');
// Рисуем окружность
context.strokeStyle = "#538ec2";
context.fillStyle = "#538ec2";
context.beginPath();
context.arc(100,100,50,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();
}
}
window.addEventListener = function() {
var drawingCanvas = document.getElementById('circle2');
if(drawingCanvas && drawingCanvas.getContext) {
var context = drawingCanvas.getContext('2d');
// Рисуем окружность
context.strokeStyle = "#538ec2";
context.fillStyle = "#538ec2";
context.beginPath();
context.arc(100,100,50,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();
}
}
window.addEventListener = function() {
var drawingCanvas = document.getElementById('circle3');
if(drawingCanvas && drawingCanvas.getContext) {
var context = drawingCanvas.getContext('2d');
// Рисуем окружность
context.strokeStyle = "#538ec2";
context.fillStyle = "#538ec2";
context.beginPath();
context.arc(100,100,50,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();
}
}
</script>
</head>
<body>
<div class="a1">
<h1 class= "a2">COMING SOON</h1>
<p class="a3">SUBCRIBE TO GET NOTIFED ON UPDATES</p>
</div>
<div>
<form action="input1.php" name="test" method="post" class="a4">
<input class="a5" type="email" name="email" placeholder ="Type your e-mail adress">
<input class="a6" type="submit" value="Subscribe">
</form>
</div>
<div class="a7">
<h1>DAYS HOURS MINS</h1>
</div>
<div class="a8">
<canvas id="circle1" width="180" height="180">
<p>Ваш браузер не поддерживает рисование.</p>
</canvas>
</div>
<div class="a9">
<canvas id="circle2" width="250" height="250">
<p>Ваш браузер не поддерживает рисование.</p>
</canvas>
</div>
<div class="a10">
<canvas id="circle3" width="200" height="200">
<p>Ваш браузер не поддерживает рисование.</p>
</canvas>
</div>
</body>
</html>