Результат искажается от задуманного
<!DOCTYPE html>
<html>
<head>
<title>Испытание 2: слайдер</title>
<meta charset="utf-8">
</head>
<body>
<div class="all">
<h2>Долго, дорого,<br> скрупулезно</h2>
<p>Математически выверенный<br> дизайн для вашего сайта или<br> мобильного приложения.</p>
<button>Узнать больше</button>
</div>
<div class="circle a"></div> <div class="circle b"></div> <div class="circle c"></div>
</body>
</html>
html,body{
margin:0;
padding:0;
}
body{
width:500px;
height:300px;
font-size:16px;
font-family:"Tahoma", sans-serif;
line-height:20px;
color:black;
background:url(/assets/ifmo/slide-bg.png) no-repeat #fff;
background-position: 280px 80px;
}
.all{
}
h2{
font-size:25px;
padding: 20px 0 0 20px;
display: block;
}
p{
margin: 20px 0 0 20px;
display: block;
}
button{
background:#FB565A;
border:none;
color: #fff;
width:200px;
height:40px;
margin: 25px 0 0 20px;
font-size:14px;
border-radius:5px;
text-transform:uppercase;
}
.circle{
position:relative;
top:25px;
left:220px;
display: inline-block;
height:5px;
width:5px;
margin: 0px 0 0 5px;
border:5px solid #666666;
border-radius: 30px;
}
.b, .c{
background:#666666;
}
/*
Адрес фоновой картинки слайда:
/assets/ifmo/slide-bg.png
Используемые цвета:
#666666
#ffffff
#fb565a
*/