<div class="header">
	<h1>Начало использования</h1>
    <h2>Основные возможности</h3>
</div>

<style>
    .header {
		background-image: url("/download/attachments/6817598/bg_3.png");
        text-align: center;
        padding: 20px;
    }

	.header h1,
    .header h2,
    .header span {            
        color: white;
    }
	.header h1,
    .header h2 {            
        margin: 20px;
    }
        
	.header h1 {
        font-size: 48px;
		line-height: 1.5;
    }
		
	.header h2 {
        font-size: 18px;
    }
        

	.header h1,
    .header h2,
    .header span {            
        color: white;
    }
	.header h1,
    .header h2 {            
        margin: 20px;
    }
        
	.header h1 {
        font-size: 48px;
		line-height: 1.5;
    }
		
	.header h2 {
        font-size: 18px;
    }
        
</style>

   
<div class="menu">
    <ul>
		<li>
            <a href="https://docs.tn.in.ua/pages/viewpage.action?pageId=26968566">
                <img src="/download/attachments/6817598/interface.png">
                <h3>Интерфейс</h3>
                <p>Описание интерфейса программы.</p>
            </a>
        </li>
        <li>
            <a href="https://docs.tn.in.ua/pages/viewpage.action?pageId=26968173">
                <img src="https://docs.tn.in.ua/download/attachments/6817661/search_car.png?version=1&modificationDate=1503312917264&api=v2">
                <h3>Оформление заказа, поиск машины</h3>
                <p>Создание заказа, поиск машины.</p>
            </a>
        </li>
       
        <li>
            <a href="https://docs.tn.in.ua/pages/viewpage.action?pageId=26968175">
                <img src="https://docs.tn.in.ua/download/attachments/6817661/order_vip.png?version=1&modificationDate=1503312917043&api=v2">
                <h3>Заказы клиента</h3>
                <p>История заказов клиента.</p>
            </a>
        </li>
		 <li>
            <a href="https://docs.tn.in.ua/pages/viewpage.action?pageId=26968177">
                <img src="https://docs.tn.in.ua/download/attachments/6817661/admin_setting.png?version=1&modificationDate=1503312916683&api=v2">
                <h3>Профиль клиента и настройки</h3>
                <p>Настройки персональных данных клиента и приложения.</p>
            </a>
        </li>       
</li>
      
     
    </ul>
</div>
    <style>
        
        .menu a:link {
            text-decoration: none;
        }
        
        .menu a:visited {
            text-decoration: none;
        }
        
        .menu ul{
            margin: 0px;
            padding: 0px;
            display: flex;
            flex-flow: row wrap;
            justify-content: center;
            list-style: none;
            max-width: 1000px;
            margin: auto;
        }
        
        .menu li {
            border: 1px solid #A0A0A1;
            border-radius: 10px;
            margin: 20px;
            height: 115px;
            flex-basis: 400px;
        }
        
        .menu li img {
            background-color: #F0F4F8;
            float: left;
            margin-right: 5px;
border-top-left-radius: 10px;
    border-bottom-left-radius: 10px; }
        
        .menu li h3 {
            margin: 8px 8px 0px 0px;
            color: #5685BE;
        }
        
        .menu li p {
            margin: 8px 8px 8px 0px;
            color: #717171;}
		#title-heading {display: none;}
		.page-metadata {visibility: hidden;}
 </style>