• Как сделать такую же линию?

    IninsaY
    @IninsaY Автор вопроса
    origami1024, так как решить это?
    5db9f1d623094555282862.png
  • Когда я меняю размеры страницы, то некоторые элементы съезжают, как исправить?

    IninsaY
    @IninsaY Автор вопроса
    Валерий Витальевич, ой, я не то написал, я имел ввиду, что когда я изменяю размеры окна, то элементы съезжают, посмотрите на картинке
    5db9efdba91f0425486913.png
    5db9efe4cb580135594591.png
  • Как сделать такую же линию?

    IninsaY
    @IninsaY Автор вопроса
    origami1024, спасибо, но мне интересно, как вы подбираете цифры в этой строчке: "background-size: calc(45% - 50px);"?
  • Как сделать такую же линию?

    IninsaY
    @IninsaY Автор вопроса
    Что-то не понимаю, посмотри
    <!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;
    }
  • Как сделать такую же линию?

    IninsaY
    @IninsaY Автор вопроса
    origami1024, большое спасибо, но когда я меняю "width" на 70%, вместо 100 и линия оказывается не в центре
  • Как сделать такую же линию?

    IninsaY
    @IninsaY Автор вопроса
    у меня как раз и фон, и если я ставлю вместо белого - прозрачный, то линия опять видна
  • Как сделать такую же линию?

    IninsaY
    @IninsaY Автор вопроса
    Спасибо, но у меня что-то не получается интерпретировать под мой код.
    <!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;
    }
  • Как писать код в половине экрана, если сайт отображается некорректно?

    IninsaY
    @IninsaY Автор вопроса
    Вы не правы, если кинуть ютуб в половину екрана то он будет отображаться корректно, и с другими сайтами так же
  • У меня есть таймер, но я не могу настроить его размещение, как?

    IninsaY
    @IninsaY Автор вопроса
    Я понял вашу задумку, но я пока не начал учить js, если вам не сложно, можете запихнуть в канвас таймер? Буду очень благодарен.
    <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);
  • Когда я добавляю несколько канвасов, то другие игнорируют местоположение, которое им указано, втф?

    IninsaY
    @IninsaY Автор вопроса
    Да, путь был правильный, я снёс всё и скопировал ваше на пустой документ и заново написал боди и хеад, 3 круга появилось, но появилась ещё проблема, размеры кругов не увеличиваются.
    <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>
  • Когда я добавляю несколько канвасов, то другие игнорируют местоположение, которое им указано, втф?

    IninsaY
    @IninsaY Автор вопроса
    Даниил Братухин, видимо, я проклят, всё ровно не работает
    <script type="text/javascript" src="PSD-шники/2/index.js"></script>
  • Когда я добавляю несколько канвасов, то другие игнорируют местоположение, которое им указано, втф?

    IninsaY
    @IninsaY Автор вопроса
    Вот
    <!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();
      }
    })
  • Когда я добавляю несколько канвасов, то другие игнорируют местоположение, которое им указано, втф?

    IninsaY
    @IninsaY Автор вопроса
    Даниил Братухин, а в каком редакторе вы работали? Я уверен, что правильно скопировал, но всё ровно не работает, у меня Sublime Text 3
  • Когда я добавляю несколько канвасов, то другие игнорируют местоположение, которое им указано, втф?

    IninsaY
    @IninsaY Автор вопроса
    Даниил Братухин, либо я тупой, либо я не знаю... Если вам не сложно, можете сделать, чтобы было видно 3 круга?
  • Когда я добавляю несколько канвасов, то другие игнорируют местоположение, которое им указано, втф?

    IninsaY
    @IninsaY Автор вопроса
    Спасибо, но что-то все ровно не так, появилось 2, но 3 так и нету.
    <!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>