UdnlxPortfolio - Базовый шаблон для начала верстки UiKit

Тут все просто, скачиваем архив базового шаблона, распаковываем его и получаем базу для начала верстки. Это полностью вся структура папок и файлов готовая к верстке любого проекта.

В папке fonts лежат часто используемые шрифты, в файле styles.css подключаем нужный.

Так же предлагаю для скачивания дополнительные, часто мной используемые шрифты.

Roboto-Bold
Roboto-Regular
Ubuntu-Bold
Ubuntu-Regular

Либо подберите нужный на сайтах шрифтов.

https://fonts.google.com/

Для удобства также публикую код двух базовых файлов для верстки.

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) {}