html-sample

<section class="header">
	<div class="container">
	<div class="row">
		<div class="col-4">
			<div class="logo">
				<img src="https://www.susu.ru/sites/all/themes/boot2017/logo/ru/wider/2400.png">
			</div>
		</div>
		<div class="col-8">
			<nav>
				<ul>
					<li>Главная</li>
					<li>О нас</li>
					<li>Преподаватели</li>
					<li>Курсы</li>
				</ul>
			</nav>
		</div>
	</div>
	</div>
</section>
<section class="banner">
	<div class="baner-bcg">
		<div class="banner-mask">
			<div class="banner-content">
				<div class="row">
					<div class="col-6">
						<h2>
							 Курсы 3D моделирования
						</h2>
						<p>
							Следует отметить, что существующая теория способствует повышению качества благоприятных перспектив. Не следует, однако, забывать.
						</p>
						<input type="button" value="Выбрать курс">
					</div>
					<div class="col-6">
						<img src="https://www.susu.ru/sites/default/files/images/prio.jpg">
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<section class="about-us">
	<div class="container">
		<h2 class="title">
			 Преимущества обучения
		</h2>
		<div class="row">
			<div class="col-12 col-sm-12 col-md-6">
				<img src="https://www.susu.ru/sites/default/files/images/prio.jpg">
			</div>
			<div class="col-12 col-sm-12 col-md-6">
				<p>
					Имеется спорная точка зрения, гласящая примерно следующее: акционеры крупнейших компаний, которые представляют собой яркий пример континентально-европейского типа политической культуры, будут рассмотрены исключительно в разрезе маркетинговых предпосылок.
				</p>
			</div>
			<div class="col-sm-12 col-md-4">
				<div class="card-about">
					<div class="icon">
						<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
							<path d="M40 0C34.7471 0 29.5457 1.03463 24.6927 3.04482C19.8396 5.05501 15.4301 8.00138 11.7157 11.7157C4.21427 19.2172 0 29.3913 0 40C0 50.6087 4.21427 60.7828 11.7157 68.2843C15.4301 71.9986 19.8396 74.945 24.6927 76.9552C29.5457 78.9654 34.7471 80 40 80C50.6087 80 60.7828 75.7857 68.2843 68.2843C75.7857 60.7828 80 50.6087 80 40C80 34.7471 78.9654 29.5457 76.9552 24.6927C74.945 19.8396 71.9986 15.4301 68.2843 11.7157C64.5699 8.00138 60.1604 5.05501 55.3073 3.04482C50.4543 1.03463 45.2529 0 40 0ZM40 56C29.48 56 20 49.72 16 40C21.52 26.76 36.76 20.48 50 26C56.32 28.64 61.36 33.68 64 40C60 49.72 50.52 56 40 56Z" fill="#3F2AFF"/>
							<path fill-rule="evenodd" clip-rule="evenodd" d="M40.3571 30.3125C37.6931 30.3125 35.1382 31.3708 33.2545 33.2545C31.3708 35.1382 30.3125 37.6931 30.3125 40.3571C30.3125 43.0211 31.3708 45.576 33.2545 47.4598C35.1382 49.3435 37.6931 50.4018 40.3571 50.4018C43.0212 50.4018 45.576 49.3435 47.4598 47.4598C49.3435 45.576 50.4018 43.0211 50.4018 40.3571C50.4018 37.6931 49.3435 35.1382 47.4598 33.2545C45.576 31.3708 43.0212 30.3125 40.3571 30.3125ZM40.3565 44.8772C42.8529 44.8772 44.8766 42.8535 44.8766 40.3571C44.8766 37.8608 42.8529 35.837 40.3565 35.837C37.8601 35.837 35.8364 37.8608 35.8364 40.3571C35.8364 42.8535 37.8601 44.8772 40.3565 44.8772Z" fill="#212133"/>
							</svg>

</div>
					<h3>
						Результат вашего обучения является самым важным для нас приоритетом
					</h3>
				</div>
			</div>
			<div class="col-sm-12 col-md-4">
				<div class="card-about">
					<div class="icon">
						<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
							<path d="M40 0C34.7471 0 29.5457 1.03463 24.6927 3.04482C19.8396 5.05501 15.4301 8.00138 11.7157 11.7157C4.21427 19.2172 0 29.3913 0 40C0 50.6087 4.21427 60.7828 11.7157 68.2843C15.4301 71.9986 19.8396 74.945 24.6927 76.9552C29.5457 78.9654 34.7471 80 40 80C50.6087 80 60.7828 75.7857 68.2843 68.2843C75.7857 60.7828 80 50.6087 80 40C80 34.7471 78.9654 29.5457 76.9552 24.6927C74.945 19.8396 71.9986 15.4301 68.2843 11.7157C64.5699 8.00138 60.1604 5.05501 55.3073 3.04482C50.4543 1.03463 45.2529 0 40 0ZM40 56C29.48 56 20 49.72 16 40C21.52 26.76 36.76 20.48 50 26C56.32 28.64 61.36 33.68 64 40C60 49.72 50.52 56 40 56Z" fill="#3F2AFF"/>
							<path fill-rule="evenodd" clip-rule="evenodd" d="M40.3571 30.3125C37.6931 30.3125 35.1382 31.3708 33.2545 33.2545C31.3708 35.1382 30.3125 37.6931 30.3125 40.3571C30.3125 43.0211 31.3708 45.576 33.2545 47.4598C35.1382 49.3435 37.6931 50.4018 40.3571 50.4018C43.0212 50.4018 45.576 49.3435 47.4598 47.4598C49.3435 45.576 50.4018 43.0211 50.4018 40.3571C50.4018 37.6931 49.3435 35.1382 47.4598 33.2545C45.576 31.3708 43.0212 30.3125 40.3571 30.3125ZM40.3565 44.8772C42.8529 44.8772 44.8766 42.8535 44.8766 40.3571C44.8766 37.8608 42.8529 35.837 40.3565 35.837C37.8601 35.837 35.8364 37.8608 35.8364 40.3571C35.8364 42.8535 37.8601 44.8772 40.3565 44.8772Z" fill="#212133"/>
							</svg>

</div>
					<h3>
						Лично познакомитесь с одним из своих будущих преподавателей
					</h3>
				</div>
			</div>
			<div class="col-sm-12 col-md-4">
				<div class="card-about">
					<div class="icon">
						<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
							<path d="M40 0C34.7471 0 29.5457 1.03463 24.6927 3.04482C19.8396 5.05501 15.4301 8.00138 11.7157 11.7157C4.21427 19.2172 0 29.3913 0 40C0 50.6087 4.21427 60.7828 11.7157 68.2843C15.4301 71.9986 19.8396 74.945 24.6927 76.9552C29.5457 78.9654 34.7471 80 40 80C50.6087 80 60.7828 75.7857 68.2843 68.2843C75.7857 60.7828 80 50.6087 80 40C80 34.7471 78.9654 29.5457 76.9552 24.6927C74.945 19.8396 71.9986 15.4301 68.2843 11.7157C64.5699 8.00138 60.1604 5.05501 55.3073 3.04482C50.4543 1.03463 45.2529 0 40 0ZM40 56C29.48 56 20 49.72 16 40C21.52 26.76 36.76 20.48 50 26C56.32 28.64 61.36 33.68 64 40C60 49.72 50.52 56 40 56Z" fill="#3F2AFF"/>
							<path fill-rule="evenodd" clip-rule="evenodd" d="M40.3571 30.3125C37.6931 30.3125 35.1382 31.3708 33.2545 33.2545C31.3708 35.1382 30.3125 37.6931 30.3125 40.3571C30.3125 43.0211 31.3708 45.576 33.2545 47.4598C35.1382 49.3435 37.6931 50.4018 40.3571 50.4018C43.0212 50.4018 45.576 49.3435 47.4598 47.4598C49.3435 45.576 50.4018 43.0211 50.4018 40.3571C50.4018 37.6931 49.3435 35.1382 47.4598 33.2545C45.576 31.3708 43.0212 30.3125 40.3571 30.3125ZM40.3565 44.8772C42.8529 44.8772 44.8766 42.8535 44.8766 40.3571C44.8766 37.8608 42.8529 35.837 40.3565 35.837C37.8601 35.837 35.8364 37.8608 35.8364 40.3571C35.8364 42.8535 37.8601 44.8772 40.3565 44.8772Z" fill="#212133"/>
							</svg>

</div>
					<h3>
						Значимость этих проблем очевидна, поэтому стоит всегда быть внимательным
					</h3>
				</div>
			</div>
		</div>
	</div>
</section>

Results:

Преимущества обучения

Имеется спорная точка зрения, гласящая примерно следующее: акционеры крупнейших компаний, которые представляют собой яркий пример континентально-европейского типа политической культуры, будут рассмотрены исключительно в разрезе маркетинговых предпосылок.