Тут все просто, скачиваем архив базового шаблона, распаковываем его и получаем базу для начала верстки. Это полностью вся структура папок и файлов готовая к верстке любого проекта.
В папке 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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="assets/css/styles.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.1.2/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/@popperjs/core@2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" 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) {}