Тут все просто, скачиваем архив базового шаблона, распаковываем его и получаем базу для начала верстки. Это полностью вся структура папок и файлов готовая к верстке любого проекта.
В папке fonts лежат часто используемые шрифты, в файле styles.css подключаем нужный.
Так же предлагаю для скачивания дополнительные, часто мной используемые шрифты.
Roboto-Bold
Roboto-Regular
Ubuntu-Bold
Ubuntu-Regular
Либо подберите нужный на сайтах шрифтов.
Для удобства также публикую код двух базовых файлов для верстки.
index.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<meta name="Description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" type="text/css" href="assets/css/styles.css">
<link rel="stylesheet" type="text/css" href="assets/css/uikit.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.1.2/css/all.css">
</head>
<body>
<a id="home"></a>
<div class="uk-header1">
<div class="uk-header1-content uk-margin-auto">
</div>
</div>
<div class="uk-header2">
<div class="uk-header2-content uk-margin-auto">
</div>
</div>
<div class="uk-001">
<div class="uk-001-content uk-margin-auto">
</div>
</div>
<div class="uk-footer1">
<div class="uk-footer1-content uk-margin-auto">
</div>
</div>
<div class="uk-footer2">
<div class="uk-footer2-content uk-margin-auto">
</div>
</div>
<script src="assets/js/main.js"></script>
<script src="assets/js/uikit.js"></script>
<script src="assets/js/uikit-icons.min.js"></script>
</body>
</html>
styles.css
@font-face {
font-family: "Akademische";
src: url("../fonts/Akademische.otf") format("truetype"); }
.uk-header1 {
background-color: #ffffff;}
.uk-header1-content {
background-color: #ffffff;
width: 1440px;
box-sizing: border-box;
padding: 15px 10px 15px 10px;}
.uk-header2 {
background-color: #ffffff;}
.uk-header2-content {
background-color: #ffffff;
width: 1440px;
box-sizing: border-box;
padding: 15px 10px 15px 10px;}
.uk-001 {
background-color: #ffffff;}
.uk-001-content {
background-color: #ffffff;
width: 1440px;
box-sizing: border-box;
padding: 15px 10px 15px 10px;}
.uk-footer1 {
background-color: #ffffff;}
.uk-footer1-content {
background-color: #ffffff;
width: 1440px;
box-sizing: border-box;
padding: 15px 10px 15px 10px;}
.container-footer2 {
background-color: #ffffff;}
.container-footer2-content {
background-color: #ffffff;
width: 1440px;
box-sizing: border-box;
padding: 15px 10px 15px 10px;}
@media (max-width: 1440px) {}
@media (max-width: 1200px) {}
@media (max-width: 1024px) {}
@media (max-width: 960px) {}
@media (max-width: 768px) {}
@media (max-width: 640px) {}
@media (max-width: 425px) {}
@media (max-width: 375px) {}