Добрый день. В этой статье расскажу как просто сделать свой сайт-визитку (одностраничник) на чистом html, буквально за 15 минут.
Итак, начнем... Создаем папку на своем компьютере с любым названием. В ней создаем файл index.html (в нем как раз и будет текст нашей визитки).
Так же создаем еще один файл в этой же папке с названием styles.css (это стили для нашей визитки).
Открываем в простом текстовом редакторе наш файл index.html и в него вставляем текст:
<head>
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@700&family=Merriweather&display=swap" rel="stylesheet">
</head>
<body>
<h1>Страница визитка фотографа</h1>
<div class="content">
<div class="photo-logo"><img width="200" src="https://i.pinimg.com/originals/bf/b6/2c/bfb62cbb0394628265193e19ebe56310.jpg"></img></div>
<div class="content-item"><p>Практический опыт показывает, что повышение уровня гражданского сознания напрямую зависит от ключевых компонентов планируемого обновления. Дорогие друзья, постоянный количественный рост и сфера нашей активности обеспечивает актуальность дальнейших направлений развитая системы массового участия. Разнообразный и богатый опыт начало повседневной работы по формированию позиции способствует подготовке и реализации системы масштабного изменения ряда параметров.
Дорогие друзья, сложившаяся структура организации способствует подготовке и реализации существующих финансовых и административных условий!</p> </div>
</div>
Тут ничего сложного нет. Для тех кто хотя бы немного знает HTML. В блоке head подключаем шрифты с сайта google fonts. Далее, в этом же блоке подключаем наш файл стилей styles.css. В блоке h1 пишем заголовок нашей страницы. И потом в блоках div создаем сам контент нашей визитки.
Если сейчас открыть наш файл index.html в браузере, то все будет выглядеть максимально коряво, все блоки будут один под другим, без шрифтов и выравниваний.
Делаем стили для сайта-визитки
Для того, чтобы все выровнять и приписать стили для наших блоков и текста открываем наш файл styles.css и в нем вставляем текст:
body {
background: url('https://i.pinimg.com/originals/83/db/5e/83db5e3bbd052772c02d5678e7e8e1e2.jpg');
}
h1 {
text-align:center;
margin-top: 10px;
font-size: 28px;
}
img {
border-radius: 10px;
box-shadow: 10px 10px 200px yellow;
}
.photo-logo {
padding-left: 30px;
padding-right: 50px;
}
.content {
display:flex;
gap: 10px; flex-wrap: wrap;
padding-top: 20px;
font-size: 22px;
font-family: 'Caveat', cursive;
}
.content-item {
display:flex;
gap: 10px;
padding-right: 20px;
width: 50%;
}
В body вставил фоновое изображение для всей страницы-визитки. Тег H1 будет по центру с отступом от верхней границы в 10 пикселей и размер шрифта 28 пикселей.
Тег img, в котором находится картинка будет с закругленными краями по 10 пикселей с каждого угла и с желтой тенью. Так же блок photo-logo в котором находится картинка будет с внутренними отступами слева 30 пикселей и справа 50 пикселей.
Основной блок content имеет параметр display: flex , который делает все дочерние элементы "резиновыми" т.е при уменьшении экрана, дочерние элементы будут перескакивать на новую строку.
Параметр gap делает отступы между дочерними элементами. И так же задаем размер шрифта в 22 пикселя и сам шрифт, который мы взяли в google fonts. С content-item так же все понятно. Все параметры описаны выше.
Вот на этом и все. Должно получится примерно так.