- Автор темы
- #1
Всем, привет!
На прошлом уроке мы полностью разобрались с навигационным меню, сегодня мы будем верстать тело сайта - середина между навигационным меню и подвалом, для начала открываем наш проект и файл index.html, и в теге <body>, после <header> пишем:
В теге <p> пишите описание вашего проекта, мне лень придумывать, так что проехали, теперь открываем style.css, и редачим наш текст:
Сохраняем и обновляем страницу, бальзам для глаз, но справа много лишнего места, скачиваем img автомобиля или персонажа из gta, я поставлю
AMG 63, закидываем img в source/img/ и открываем html файл, и подключаем фотку:
Вместо amg63.png указываем свою картинку, и id тоже указываем свой (если хотите), открываем style.css и прописываем:
width зависит от самой картинки, у вас может быть другой размер, и через top и right указываем позицию нашей картинки на этом урок окончен, в следующем мы продолжим редактирования тела сайта!
Если возникли проблемы - vk.com/ebaniysamper
Вот какой сайт получился у меня на момент урока, надеюсь я понятно объясняю
На прошлом уроке мы полностью разобрались с навигационным меню, сегодня мы будем верстать тело сайта - середина между навигационным меню и подвалом, для начала открываем наш проект и файл index.html, и в теге <body>, после <header> пишем:
HTML:
<div class="body">
<h2 class="body">Florida Role Play -</h2>
<p id="hTwo">Описание лень придумывать :).</p>
</div>В теге <p> пишите описание вашего проекта, мне лень придумывать, так что проехали, теперь открываем style.css, и редачим наш текст:
CSS:
#hTwo{
font-family: 'Russo One';
font-size: 65px;
position: absolute;
left: 60px;
top: 375px;
-webkit-transition: all 1.3s ease;
transition: all 1.3s ease;
}
.body .prjInfo{
font-family: 'Roboto Mono', monospace;
font-size: 30px;
position: absolute;
left: 100px;
top: 530px;
-webkit-transition: all 1.3s ease;
transition: all 1.3s ease;
}Сохраняем и обновляем страницу, бальзам для глаз, но справа много лишнего места, скачиваем img автомобиля или персонажа из gta, я поставлю
AMG 63, закидываем img в source/img/ и открываем html файл, и подключаем фотку:
HTML:
<img src="source/img/amg63.png" id="amg">Вместо amg63.png указываем свою картинку, и id тоже указываем свой (если хотите), открываем style.css и прописываем:
CSS:
#amg{
width: 900px;
position: absolute;
top: 260px;
right: -200px;
}width зависит от самой картинки, у вас может быть другой размер, и через top и right указываем позицию нашей картинки на этом урок окончен, в следующем мы продолжим редактирования тела сайта!
Если возникли проблемы - vk.com/ebaniysamper
Вот какой сайт получился у меня на момент урока, надеюсь я понятно объясняю
Вложения
-
Screenshot_206.png
