Правильна ли эта вёрстка?

206

14 апреля 2017, 19:44

Здравствуйте. Во время вёрстки первого для меня макета появились вопросы. Расположил левый блок, затем основную часть, потом - правую. Сверстал кое-как. Вопросы следующие:

Макет основан на слайдере. Мои навыки JS почти нулевые. Подсказали fullpage.js. Вся документация на английском. Какие нужны навыки JS, чтобы посадить сайт на слайдер? Непонятно, каким образом верстать следующие страницы макета после этой.
Правильно ли таким образом располагать блоки на странице? Использую флексбоксы, каким образом поместить блоки с текстом и иконками в нижнем левом углу экрана?
В макете есть тень для нижней части экрана, однако никак не могу поместить её именно так, как это указано в макете psd.
Присутствует небольшая, но раздражающая, горизонтальная прокрутка. Можно применить overflow-z: hidden, однако таким образом пропадет правая часть экрана на мобильных устройствах =>
Несмотря на то, что это мой первый макет, не собираюсь бросать его потому, что появились трудности со слайдером и пр. В мыслях - доверстать до конца кроссбраузерно и адаптивно.

@import url('https://fonts.googleapis.com/css?family=Roboto+Slab:100,300,400,700'); 
@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i'); 
html, 
body { 
  margin: 0; 
  padding: 0; 
} 
 
body { 
  font-family: "Roboto", sans-serif; 
  background: url("background.jpg"); 
  background-repeat: no-repeat; 
  color: white; 
  width: 1360px; 
} 
 
.container { 
  position: relative; 
} 
 
.left-side, 
.main { 
  position: absolute; 
  height: 768px; 
} 
 
.left-side { 
  display: flex; 
  flex-direction: column; 
  justify-content: space-between; 
  align-items: center; 
  width: 110px; 
  background: #fff; 
  left: 0; 
  max-height: 768px; 
  max-width: 110px; 
} 
 
.left-side_logo { 
  text-align: center; 
  line-height: 130px; 
  width: 17px; 
  height: 130px; 
} 
 
.left-side_bottom { 
  text-align: center; 
  line-height: 130px; 
  width: 17px; 
  height: 130px; 
} 
 
.left-side_bottom img { 
  transition: all .3s ease-in-out; 
  opacity: 1; 
} 
 
.left-side_bottom img:hover { 
  opacity: .5; 
} 
 
.left-side_center { 
  position: relative; 
} 
 
.selected { 
  position: absolute; 
  top: -2px; 
  left: -2px; 
} 
 
.opa { 
  opacity: 0.72; 
} 
 
.main { 
  left: 110px; 
} 
 
.main>div { 
  position: relative; 
} 
 
.main_play { 
  left: 15px; 
  top: 525px; 
} 
 
.main_play img { 
  transition: all .3s ease-in-out; 
  opacity: 1; 
} 
 
.main_play img:hover { 
  opacity: .5; 
} 
 
.main_company-name { 
  font-style: "Roboto", sans-serif; 
  font-size: 40px; 
  top: 390px; 
  left: 90px; 
} 
 
.main_slogan { 
  font-style: Arial, sans-serif; 
  font-size: 18px; 
  top: 340px; 
  left: 90px; 
} 
 
.main_lines { 
  left: 90px; 
  top: 380px; 
} 
 
.main_calc { 
  left: 1200px; 
  top: -300px; 
  width: 50px; 
} 
 
.main_calc, 
.main_wite-us, 
.main_download, 
.main_call-us, 
.main_play, 
.main_lines, 
.left-side_logo, 
.left-side_bottom, 
.left-side_selected, 
.left-side_center img { 
  cursor: pointer; 
} 
 
.main_calc img { 
  transition: all .3s ease-in-out; 
  opacity: 1; 
} 
 
.main_calc img:hover { 
  opacity: .5; 
} 
 
.main_wite-us { 
  left: 1200px; 
  top: -250px; 
  width: 50px; 
} 
 
.main_wite-us img { 
  transition: all .3s ease-in-out; 
  opacity: 1; 
} 
 
.main_wite-us img:hover { 
  opacity: .5; 
} 
 
.main_download { 
  left: 1200px; 
  top: -200px; 
  width: 50px; 
} 
 
.main_download img { 
  transition: all .3s ease-in-out; 
  opacity: 1; 
} 
 
.main_download img:hover { 
  opacity: .5; 
} 
 
.main_rotate-text { 
  -webkit-transform: rotate(-90deg); 
  -ms-transform: rotate(-90deg); 
  transform: rotate(-90deg); 
  left: 1000px; 
  top: 50px; 
} 
 
.main_call-us { 
  left: 1185px; 
  top: 250px; 
  width: 50px; 
}

<!DOCTYPE html> 
<html lang="en"> 
<meta charset="utf-8"> 
 
<head> 
  <link rel="stylesheet" href="style.css"> 
  <title>Interica</title> 
</head> 
 
<body> 
  <div class="container"> 
    <div class="main"> 
      <div class="main_play"> 
        <a href="#"><img src="play.png" title="Title"></a> 
      </div> 
      <div class="main_company-name"> 
        <h1>INTERICA</h1> 
      </div> 
      <div class="main_slogan"> 
        <p>We are an association of professionals who are ready <br /> to assist you in matters of redevelopment</p> 
      </div> 
      <div class="main_lines"> 
        <img src="-.png"> 
        <img src="-.png"> 
        <img src="-.png"> 
        <img src="-.png"> 
      </div> 
      <div class="main_calc"> 
        <a href="#"><img src="calc.png" title="Calculator"></a> 
      </div> 
      <div class="main_wite-us"> 
        <a href="#"><img src="wite-us.png" title="Wite Us"></a> 
      </div> 
      <div class="main_download"> 
        <a href="#"><img src="download.png" title="Download"></a> 
      </div> 
      <div class="main_rotate-text"> 
        <p>The Interior Agency Theme</p> 
      </div> 
      <div class="main_call-us"> 
        <a href="#"><img src="call-us.png"></a> 
      </div> 
    </div> 
    <div class="left-side"> 
      <div class="left-side_logo"> 
        <a href="#"><img src="logo.jpg" title="Interica"></a> 
      </div> 
      <div class="left-side_center"> 
        <a href="#"><img src="Elipse-gray.png" class="opa"></a> 
        <img src="Elipse.png" class="selected"> 
      </div> 
      <div class="left-side_bottom"> 
        <a href="#"><img src="share.png" title="Share"></a> 
      </div> 
    </div> 
  </div> 
</body> 
 
</html>

Answer 1

Навыков JS здесь и не надо, т.к. на сам слайдер максимум уйдёт до 30 строчек кода. Если есть документация - просто переведите её с английского на русский.
На счет верстки блоками...Пробуйте изучить Bootstrap. Адаптивность в нём гарантирована.
Чтобы не было полос прокрутки, нужно указать max-width для основной части.

Создание интернет-магазина строительных материалов в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как сделать Unit Test этого статичного метода?

Почему-то вызывает проблемы тестирование этого метода GetByIdНадеюсь на вашу помощь

232

Анимация всего окна вместо компонентов

После того как установил бинд цвета к ресурсу приложения <SolidColorBrush x:Key="ContrastBrush" Color="{Binding ContrastBrush, Source={x:Static properties:SettingsDefault}}"/> все компоненты...

172

Связи между двумя dbGrid-ами - C#

Имеется привязанная база данных Access cо связями

222

Как переместить узлы (привязка из бд средствами LinqToSql) кнопками верх / вниз в TreeList Devexpress

C#Имеется компонент TreeList DevExpress

213