Тут все просто, скачиваем архив базового шаблона, распаковываем его и получаем базу для начала верстки. Это полностью вся структура папок и файлов готовая к верстке любого проекта.
В папке 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" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="assets/css/styles.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
</head>
<body>
<a id="home"></a>
<div class="container-header1">
<div class="container-header1-content">
</div>
</div>
<div class="container-header2">
<div class="container-header2-content">
</div>
</div>
<div class="container-001">
<div class="container-001-content">
</div>
</div>
<div class="container-footer1">
<div class="container-footer1-content">
</div>
</div>
<div class="container-footer2">
<div class="container-footer2-content">
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
<script src="assets/js/main.js"></script>
</body>
</html>
styles.css
@font-face {
font-family: "Akademische";
src: url("../fonts/Akademische.otf") format("truetype"); }
.hover-effect {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;}
.hover-effect:hover {
-moz-box-shadow: 0 0 7px #000;
-webkit-box-shadow: 0 0 7px #000;
box-shadow:0 0 7px #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;}
.overlay-white {
position: relative;}
.overlay-white:before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(225deg, #00000057 10%, #ffffff 60%);
opacity: 0.5;}
.overlay-black {
position: relative;}
.overlay-black:before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(225deg, #00000057 10%, #000000 60%);
opacity: 0.5;}
.container-header1 {
background-color: #ffffff;}
.container-header1-content {
background-color: #ffffff;
width: 1200px;
margin: auto;
display: flex;
padding: 15px 10px 15px 10px;
justify-content: center;
align-items: center;}
.container-header2 {
background-color: #ffffff;}
.container-header2-content {
background-color: #ffffff;
width: 1200px;
margin: auto;
display: flex;
padding: 15px 10px 15px 10px;
justify-content: center;
align-items: center;}
.container-001 {
background-color: #ffffff;}
.container-001-content {
background-color: #ffffff;
width: 1200px;
margin: auto;
display: flex;
justify-content: space-between;
padding: 15px 10px 15px 10px;}
.container-footer1 {
background-color: #ffffff;}
.container-footer1-content {
background-color: #ffffff;
width: 1200px;
margin: auto;
display: flex;
justify-content: space-between;
padding: 15px 10px 15px 10px;}
.container-footer2 {
background-color: #ffffff;}
.container-footer2-content {
background-color: #ffffff;
width: 1200px;
margin: auto;
display: flex;
justify-content: space-between;
padding: 15px 10px 15px 10px;}
@media (max-width: 1200px) {}
@media (max-width: 992px) {}
@media (max-width: 768px) {}
@media (max-width: 576px) {}
@media (max-width: 400px) {}