Содержание файла i mage . html

⇐ ПредыдущаяСтр 3 из 3

<!DOCTYPE html>
<html lang="ru">
<head>
<title>Соколов Виталий - 3D визуализатор / Дизайнер</title>
<meta http-equiv="Content-Type" content="text/html; charset=Utf-8">
<link rel="stylesheet" type="text/css" href="styles.css">
<meta name="keywords" content="дизайн интерьеров, дизайн интерьера, дизайна логотипа, дизайн студия, дизайн проект, визуализация, графика, 3D,Красноярск">
</head>
<body>
<div class ="parrent">
<div class = "header">
<div class="logo"><a href="index.html" id ="logolink">Vitaly Sokoloff</a></div>
<div class="unlogo">3D - визуализатор / Дизайнер</div>
<div class="unlogo"><hr size = 1px color = #d3d3d3 ></div>
</div>
<div class="title">Обо мне</div>
<div class="text">Меня зовут Виталий Соколов, как вы возможно уже догадались. Более семи лет я занимаюсь компьютерной графикой.
<p> Если вам нужен логотип, векторный принт, 3D - модель, архитектурная или интерьерная визуализация, то Вам ко мне.
<p> За годы работы я овладел навыками работы в различных программах, таких как 3ds max, Illustrator, Photoshop, AutoCad.
<p> В настоящий момент я обучаюсь в Красноярском колледже радиоэлектроники и информационых технологий на
<p> специальности программирование в компьютерных системах. Новообретённые навыки программирования планирую
<p> применять для расширения фунционала программы 3ds Max и автоматизации процесса моделирования.</div>
<div class="text"> <hr size = 1px color = #d3d3d3 align = center width = 500px >
<div class="title2">Портфолио</div>
<div class="blockimag">
<span id = "imag"><a href="images/01.jpg" id ="link"><img src="images/01.jpg" height="300" alt="картинка1"></a><span>
<span id = "imag"><a href="images/02.jpg" id ="link"><img src="images/02.jpg" height="300" alt="картинка2"></a><span>
</div>
<div class="blockimag">
<span id = "imag"><a href="images/03.jpg" id ="link"><img src="images/03.jpg" height="300" alt="картинка3"></a><span>
<span id = "imag"><a href="images/04.jpg" id ="link"><img src="images/04.jpg" height="300" alt="картинка4"></a><span>
</div>
<div class="blockimag">
<span id = "imag"><a href="images/05.jpg" id ="link"><img src="images/05.jpg" height="300" alt="картинка5"></a><span>
<span id = "imag"><a href="images/06.jpg" id ="link"><img src="images/06.jpg" height="300" alt="картинка6"></a><span>
</div>
<div class="text"> <hr size = 1px color = #d3d3d3 align = center width = 500px >
<div class="text">vitaliysokoloff@gmail.com / +7 983 505 59 23</div>
</div>
</body>
</html>

Содержание файла styles .c ss

@font-face {
font-family: Ubuntu-Light;
src: url("fonts/Ubuntu-Light.ttf") format("truetype");
font-style: normal;
font-weight: normal;
}
body{
font-family: Ubuntu-Light;
background-color: #fefefe;
margin-top: 0px;
margin-bottom: 0px;
background: #dddddd;
}
.parrent{
width: 1024px;
min-height: 100%;
background: #ffffff;
color: #0d0d0d;
margin: auto;
box-shadow: 0 0 5px 2px #d3d3d3;
outline: 1px solid #d1d1d1;
}
.header{
position: fixed;
width: 1024px;
height: 113px;
background: #ffffff;
}
.logo{
margin: auto;
padding-top: 14px;
padding-bottom: 14px;
width: 100%;
height: 45px;
text-align: center;
font-size: 45px;
}
.unlogo{
margin:auto;
width:100%;
height: 16px;
text-align: center;
font-size: 16px;
padding-bottom: 14px;
}
.title{
margin: auto;
padding-top: 130px;
padding-bottom: 21px;
width: 100%;
height: 28px;
text-align: center;
font-size: 28px;
}
.title2{
margin: auto;
padding-top: 21px;
padding-bottom: 21px;
width: 100%;
height: 28px;
text-align: center;
font-size: 28px;
}
.text{
margin: auto;
padding-top: 0px;
padding-bottom: 14px;
width: 100%;
text-align: center;
font-size: 14px;
}
.blockimag{
margin: auto;
padding-top: 21px;
padding-bottom: 21px;
padding-left: 50px;
padding-right: 50px;
width: 924px;
height: 300px;
text-align: center;
}
#imag{
padding-top: 0px;
padding-bottom: 0px;
padding-left: 8px;
padding-right: 8px;
width: 450px;
height: 300px;
}
#link:hover{
outline: 8px solid #637553;
}
#link:active{
outline: 8px solid #d82e00;
}
#logolink{
color: #637553;
text-decoration: none;
}
#logolink:hover{
color: #637553;
}
#logolink:visited{
color: #637553;
}
#logolink:active{
color: #d82e00;
}

ЗАКЛЮЧЕНИЕ

Поставленная задача по разработке сайта-визитки была выполнена. Мной были освоены основы html/css вёрстки.

Список литературы

1. htmlbook.ru – сайт обучающий css вёрстки.

Приложение

Рисунок 2. Страница сайта

Рисунок 3. Страница сайта

Дата добавления: 2019-01-14; просмотров: 228; Мы поможем в написании вашей работы!

Поделиться с друзьями:

⇐ Предыдущая 1 23

Мы поможем в написании ваших работ!