Задание по HTML к шестому уроку

Автор: | 17.09.2015
Нет комментариев

Задание сверстать старницу на подобие этой WebMaster или inext

Iwemaster

Inext

 

IWebMaster

Код HTML

<html>
  <head>
    <meta charset="utf-8">
    <title>6 урок</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div id="header" class="fix">
      <div class="center">
        <div class="row">
          <div class="logo">
            <h3>
            <a href="index.html">IWebmaster.kz</a>
            </h3>
          </div>
          <div class="menu">
            <ul>
              <li><a href="index.html">Главная</a></li>
              <li><a href="">О нас</a></li>
              <li><a href="">Услуги</a></li>
              <li><a href="#">Контакты</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div id="content">
      <div class="block">
        <div class="center">
          <div class="row">
          </div>
        </div>
      </div>
      <div class="block2">
        <div class="center">
          <div class="row">content</div>
        </div>
      </div>
      <div class="center">
        <div class="row">
        <div class="col-2"><img src="images/2.jpg">
        </div>
        <div class="col-4 himg"><img src="images/5.jpeg"></div>
        <div class="col-4 himg"><img src="images/6.jpeg"></div>
        <div class="col-4 himg"><img src="images/7.jpeg"></div>
        <div class="col-4 himg"><img src="images/8.jpeg"></div>
        </div>
        </div>
      </div>
    </div>
    <div id="footer">
      <div class="center">
        <div class="row">footer</div>
      </div>
    </div>
    <div id="up">
    <a href="#"><img src="images/up.png"></a>
    </div>
    
  </body>
</html>

CSS

/* *-универсальный селектор - 0 баллов
  a,body,h1,p и т.д. - селекторы тегов(элементов) - 2 балла
  .content,.row и т.д. - селекторы классов - 10 баллов
  #header,#content,#footer - селекторы идентификаторов - 100 баллов
 */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  
}
a{
  text-decoration:none;
  
}
body{
  background:#ff0 url(images/pattern3.jpg) repeat;
}
img{
  max-width:100%;
  width:auto;
}
/*задаем блокам резиновые свойства*/
#header,#content,#footer{
  width:100%;
  float:left;
  border:1px solid #FFF;
}
.fix{
  position:fixed;
}
#header,#footer{
  background:rgba(0,0,0,0.7);
}
#content{
  margin-top:64px;
}
/*
position:fixed;
position:relative;
position:absolute;
*/
/*задаем ширину рабочей области и оцентровываем ее*/
.center{
  max-width:1124px;/**/
  margin:0 auto;
}

.row{
  float:left;
  width:100%;
  padding:20px;
}
.logo{
  float:left;
}
.menu{
  float:right;
}
.menu a,.logo a{
  color:#fff;
}
.menu li{
  float:left;
}
.menu a{
  padding:25px 20px;
  
}
/* :hover - псевдоселектор, изменяет отображение блока при наведении*/
.menu a:hover{
  background:#fff;
  color:#000;
  border-bottom:5px solid red;
}
.block{
  float:left;
  width:100%;
  background:url(images/fon1.png) no-repeat;
  background-size:cover; /*размер фоновой картинки: ширина 100% и высота 100% блока*/
  background-position:50% 50%;/*оцентровываем картинку*/
  background-attachment:fixed; /*создаем параллакс эффект - фиксируем картинку*/
  height:100vh; /*100% высота окна*/
  
}
.block2{
  float:left;
  width:100%;
  background:url(images/pattern.jpg) no-repeat;
  background-size:cover;
  background-position:50% 50%;
  background-attachment:fixed;
  height:100vh;
  
}
.col-2{
  width:50%;
  padding:20px;
  float:left;
}
.col-4{
  width:25%;
  padding:20px;
  float:left;
}

.himg{
  height:150px;
}
#up{
  position:fixed;
  width:50px;
  bottom:10%;
  right:5%;
}
.str1{
  
}
.str1::after{
   content: " ";
    height: 200px;
    background: #000;
    width: 1px;
    position: absolute;
    transform: rotate(-45deg);
    left: 100%;
    top: 20px;
}

 

 

 

INEXT

Код HTML

<html>
    <head> 
       <title> Блочная верстка </title>
     <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    
  </head>
    
  <body> 
    <div id="wrapper">
    <!--шапка сайта-->
      <div class="header">
      <div class="top">
        <div class="zapis"><a href="contact.html">Записaться</a></div>
        <div class="phone"><address>г.Караганда, ул.Бульвар мира 37, офис 412 | тел: +7 7212 421218, + 7 777 226 27 88</address></div>
      </div>
      <div class="main">
        <div class="logo"><a href="index.html"><img src="images/logo.png"></a></div>
        <div class="menu">
            <ul>
              <li><a href="">Главная </a>	</li>
              <li><a href="">Портфолио</a></li>
              <li><a href="">Отзывы</a></li>
              <li><a href="">Контакты</a></li>
            </ul>
        </div>
      </div>
      </div>
      <!--Конец шапки сайта-->
      <!--1 блок-->
      <div id="content">
        <div class="backcontent">
        </div>
        <div class="center"><h1>Школа программирования NEXT в Караганде</h1></div>
        <div class="left">
        <p>Ты школьник или студент? Хочешь изучать современные языки программирования?
        Создавать сайты, мобильные приложения, игры.
        Тебя ждёт школа программирования «Next».<br>
        Запишись скорее, количество мест ограничено.
        Школа «Next» - программировать с нами – это увлекательно.</p>
        </div>
        <div class="right"></div>
      </div>
      <!--Конец второго блока-->
      <!--2 блок-->
      <div id="content2">
        <h2>Расписание школы программирования Next</h2>
        <div class="left2">
        <p>Время занятий:<br>
        10:00 - 12:00, 12:00 - 14:00<br>
        14:00 - 16:00, 16:00 - 18:00<br>
        Два занятия в неделю<br>
        Группы: Пн-Пт, Вт-Чт, Ср-Сб<br></p>
        </div>
        <div class="center2">
        <p>
        Предлагаемые курсы:<br>
        - Общий курс программирования<br>
        (3 - 11 классы)<br>
        - Алгоритмы и олимпиады<br>
        (6 - 11 классы, студенты)<br>
        - Веб: дизайн и программирование<br>
        (6 - 11 классы, студенты)<br>
        </p>
        </div>
        <div class="right2"><p>
          11000 тг. в месяц
          Скидка 30%.<br>
          </p><p>
          Адрес:<br>
          Г. Караганда.<br>
          Бульвар Мира 37 <br>
          Офис 412	. 4 этаж.</p>
        </div>
      </div>
      <!--конец второго блока-->
      <div class="footer">Футер</div>
      
    </div>
  </body>
</html>

Код СSS

@import url(https://fonts.googleapis.com/css?family=Ubuntu+Condensed&subset=latin,cyrillic);
*{
  margin:0;
  padding:0;	
}
body{
  font-family: 'Ubuntu Condensed', sans-serif;
  background:url(images/pattern.png);
  background-attachment:fixed;
  
}
img{
  max-width:100%;
  width:auto;
}
/*Внешняя оболочка сайта*/
#wrapper{
  max-width:1200px;
  min-width:300px;
  margin:0 auto;
  position:relative;
}
/*шапка сайта*/
.header{
  width:100%;
  float:left;
  border-bottom: 2px #fff solid;
}
/*верхняя часть шапки где указывается координаты*/
.top{
  max-width:1200px;
  width:100%;
  min-width:300px;
  background: rgba(0, 0, 0, 0.8);
    color: #F5F5F5;
    border-bottom: 1px #fff solid;
    font-size: 12px;
  position:fixed;
  top:0;
  z-index:5;
  
}
/*ссылка записаться на курсы */
.zapis{
  float:left;
  margin:10px 20px;
}
.zapis a{
  color:#fff;
}
/*контактные данные*/
.phone{
  float:right;
  margin:10px 20px;
  max-width:375px;
  width:100%;
  min-width:300px;
}
/*конец верхней части top*/

/*логотип*/
.main{
  background:rgba(222, 33, 75, 0.82);
  float:left;
  width:100%;
  margin-top: 34px;
}
.logo{
  max-width:300px;/*максимальная ширина блока с логотипом*/
  float:left;
  margin:10px 20px;
}
  .logo img{
  width:100px;/*ширина картинки*/
}
/*меню*/
.menu{
  max-width:820px;/*максимальная ширина блока*/
  margin:10px 0px;/*внешний отступ сверху и снизу 10px*/
  float:right;/*расположение справа*/
  font-size: 20px;/*размер шрифта*/
}

.menu li{
  float:left;
  margin:5px 0px;
}
.menu a{
  padding:10px 20px;
  text-decoration:none;
  color:#fff;
  border-left:1px transparent solid;/*рамка слева с прозрачным цветом*/
  border-right:1px transparent solid;/*рамка справа с прозрачным цветом*/
}
/*правило для меню при наведении*/
.menu a:hover{
  padding:15px 20px; 
  background:#a73c53;
  border-left:1px #fff solid;
  border-right:1px #fff solid;
}
.sidebar{
  width:300px;
  background:#666;
  float:left;
  padding:15px;
  box-sizing:border-box;
}
.content{
  width:calc(100% - 300px);
  min-width:300px;
  background:#777;
  float:left;
  padding:15px;
  box-sizing:border-box;
}
#content{
  float:left;
  width:100%;
  position:relative;
  border-bottom: 2px #fff solid;
}
#content2{
  z-index:3;
  background:#fff;
  float:left;
  width:100%;
}
/*фон картинка*/
.backcontent{
  width:100%;
  height:400px;
  background:url(images/Zanyatiya.jpg);
  background-size:cover;/*Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.*/
  background-attachment:fixed;/*Делает фоновое изображение элемента неподвижным.*/
  -webkit-filter: blur(0px) brightness(0.3);/*размытие 0, яркость 0.3*/
  -moz-filter:  blur(0px) brightness(0.3);
  -o-filter:  blur(0px) brightness(0.3);
  -ms-filter:  blur(0px) brightness(0.3);
  filter: blur(1px) brightness(0.3);
}
.center{
  width:100%;
  text-align:center;
  color:#fff;
  position:absolute;
  top:40px;
  z-index:2;
}
.left{
  width:40%;
  color:#fff;
  position:absolute;
  left:10%;
  top:100px;
  font-size:18px;
  text-align:center;
}

.right{
  width:40%;
  color:#fff;
  position:absolute;
  right:10%;
  top:80px;
  font-size:18px;
  text-align:center;
}
.left2,.center2,.right2{
  width:30%;
  float:left;
  margin:20px;
  text-align:center;
  font-weight:bold;
  }
#content2 h2{
  text-align:center;
  margin:20px 0;
  
}
  

.footer{
  width:100%;
  background:#000;
  float:left;
  padding:15px;
  box-sizing:border-box;
  color:#fff;
}

Дополнительно

Работа с фоном

  1. Сделать фон, который при прокрутке сайта в низ становился темнее.
  2. Создать галерию для сайта с эфффектами для фото.
  1. Создать страницу galereya.html и задать стиль для фона:
<html>

    <head>

        <title>Город мой</title>
        <meta name="keywords" content="Ключевые слова, HTML и его элементы" >
        <meta charset="utf-8">
        <meta name="description" content="Основы HTML от GoldStudio" >
        <meta name="author" content="Джон Дое" >
        <meta name="robots" content="index,follow">
        <style type="text/css">

            html,body {
                 height:auto !important;
                 height:3000px;
                 background: #f0f9ff;
                 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f9ff), color-stop(3000px,#6996d3));
                 background: -webkit-linear-gradient(top,  #f0f9ff 0%,#6996d3 3000px);
                 background: -moz-linear-gradient(top,  #f0f9ff 0%, #6996d3 3000px);
                 background: -ms-linear-gradient(top,  #f0f9ff 0%,#6996d3 3000px);
                 background: -o-linear-gradient(top,  #f0f9ff 0%,#6996d3 3000px);
                 background: linear-gradient(to bottom,  #f0f9ff 0%,#6996d3 3000px);
                 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f9ff', endColorstr='#6996d3',GradientType=0 );
                 }
         </style>

    </head>
    <body>
…
    </body>

</html>

Тот же стиль можно добавить и на остальные страницы убрав или закоментировав имеющийся, тогда при увеличении длины страницы и прокрутки ее в низ до размеров в 3000px фон будет становится темнее. Длину можно сделать больше или меньше. Плюс поменять цвета для остальных стилей например так:

Untitled-32

2.Перед тем как приступить работать с изображениями в стилях зададим базовые правила для них. Код:

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

body {
background: #333;
}

.pic {
border: 10px solid #fff; 
float: left;
height: 300px;
width: 300px;
margin: 20px;
overflow: hidden;

-webkit-box-shadow: 5px 5px 5px #111;
box-shadow: 5px 5px 5px #111; 
}

border-box означает, что высота и ширина блоков с изображениями будут включать в себя значения полей и границ, а класс pic является общим для всех изображений. Ограничивает высоту, ширину, задает границу и тень. И что самое важное содержимое (т.е. изображения) этого блочного элемента, будет отображаться только внутри, за пределы не выйдет свойство overflow : hidden

3.Рассмотрим применение фильтров изображений.  Чтобы обеспечить максимальную совместимость браузера, в фильтрах использовать будем префикс-WebKit (для браузеров Chrome и Safari), потому что другие браузеры, к сожалению их (фильтры) не поддерживают.
Эффект размытия:

<div class="blur pic">
<img src="gorod7.jpg" alt="plane">
</div>

Стиль:

/*BLUR*/
.blur img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

.blur img:hover {
-webkit-filter: blur(5px);
}

Untitled-40

4. С помощью этого фильтра, добьемся эффекта черно-белого изображения.

<div class="bw pic">
<img src="gorod8.jpg" alt="sea">
</div>

Стиль:

/*B&W*/
.bw {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

.bw:hover {
-webkit-filter: grayscale(100%);
}

Untitled-41

5. Еще один эффект перевод цветного изображения в тональность сепия.
Значения фильтров сепия и оттенки серого указаны в процентах, где 100% является максимальным. Если не указывать число то 100% будут применены по умолчанию. То же относится и к предыдущему стилю.

<div class="sepia pic"style="clear: both">
<img src="gorod9.jpg" alt="sea">
</div>

И

/*SEPIA*/
.sepia img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

.sepia img:hover {
-webkit-filter: sepia(100%);
}

Untitled-42

6. Теперь контрастность. Существует небольшая разница в использовании этого фильтра. Обычным значение контрастности является 100%. Больше 100% цвета насыщенней, меньше цвета тускнеют.

/*CONTRAST*/
.contrast img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

.contrast img:hover {
-webkit-filter: contrast(185%); 
}

И

<div class="contrast pic">
<img src="gorod10.jpg" alt="sea">
</div>

Результат:

Untitled-43

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

/*HUE_ROTATE*/
.hue-rotate img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

.hue-rotate img:hover {
-webkit-filter: hue-rotate(130deg); 
}

И

<div class="hue-rotate pic">
<img src="gorod11.jpg" alt="sea">
</div>

Untitled-44

8. Еще один Webkit фильтр изображений — это инверсия. Данный фильтр инвертирует цвета. Значение задается в % от 0-100.

/*INVERT*/
.invert img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

.invert img:hover {
-webkit-filter: invert(100%); 
}

И

<div class="invert pic">
<img src="gorod12.jpg" alt="sea">
</div>

Untitled-45

9. Наверное самый распространенный способ манипуляции с цветами изображения, так это добавление прозрачности. Теперь и с помощью CSS3. Вынес его в отдельный раздел в связи с одной особенностью, о ней ниже. Значение прозрачности в фильтре задается опять таки процентами, где 100% это не прозрачно, а 0% полностью прозрачно. Особенность использования прозрачности заключается в том, что его можно использовать как обычное свойство CSS, а не только как фильтр. Соответственно и работает такой эффект во всех браузерах, даже в IE9+.

/*OPACITY*/
.opacity img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

.opacity img:hover {
-webkit-filter: opacity(25%); 
}

И

<div class="opacity pic">
<img src="gorod13.jpg" alt="sea">
</div>

Untitled-46

10. Ну и в заключении объединим фильтры в одном правиле, это возможно и дает боле комплексный эффект например такой:

/*obe*/
.obe img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

.obe img:hover {
-webkit-filter: sepia(100%) contrast(150%) opacity(40%);
}

И

<div class="obe pic">
<img src="gorod9.jpg" alt="sea">
</div>

Untitled-47

 

  1. Сделаем блок с фотографиями под заголовком, используя position:absolute

1. Под заголовок вставляем блок с содержимым:

 

<div>

         <img class="pic  a" src="gorod.jpg" alt="караганда">
         <img class="pic  b" src="gorod1.jpg" alt="караганда">
         <img class="pic  c" src="gorod2.jpg" alt="караганда">
         <img class="pic  d" src="gorod3.jpg" alt="караганда">
         <img class="pic  e" src="gorod4.jpg" alt="караганда">

</div>

Обратите внимание на использование двух классов для одного изображения class=»pic  a»

  1. Укажем общий класс для всей изображений pic:
.pic {

                border: 10px solid #fff; 
                float: left;
                height: 200px;
                width: 200px;
                margin: 20px;
                overflow: hidden;
                -webkit-box-shadow: 5px 5px 5px #111;
                box-shadow: 5px 5px 5px #111; 

      }
  1. Укажем класс для каждого отдельного изображения:

 

 .a {

                position: absolute;
                left: 10px;
                top: 30px;
                z-index: 1;

            }
  .b {

                position: absolute;
                left: 115px;
                top: 115px;
                z-index: 2;

            }
  .c {

                position: absolute;
                left: 10px;
                top: 300px;
                z-index: 3;

            }
  .d {

                position: absolute;
                left: 115px;
                top: 400px;
                z-index: 4;

            }
  .e {

                position: absolute;
                left: 10px;
                top: 570px;
                z-index: 5;

            }

Смотрим результат:

Untitled-59