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

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

Cкачать шаблон для верстки

Bootstrap 4.6.1

Bootstrap 5.2.0

Сайт Bootstrap

В папке 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" 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) {}

 

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

Для связи со мной можно воспользоваться любой социальной сетью,
или написать на почту:

С моим резюме можно ознакомиться по ссылке:

© 2020-2024 Портфолио Юдина Александра г.Пенза. Все права защищены