Код шаблона 'Дизайн интерьера'

<!DOCTYPE html>
<html>
<title>Код шаблона 'Дизайн интерьера'</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="Description" content="Пример шаблона для сайта 'Дизайн интерьера' | Schoolsw3.com" />
<link rel="stylesheet" href="/w3css/4/w3.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Source+Sans+Pro" rel="stylesheet">
<style>
body,h1,h2,h3,h4,h5 {
font-family: 'Source Sans Pro', sans-serif;
font-family: 'Open Sans', sans-serif;}
body {font-size:16px;}
.w3-half img{margin-bottom:-6px;margin-top:16px;opacity:0.8;cursor:pointer}
.w3-half img:hover{opacity:1}
</style>
<body>

<nav class="w3-sidebar w3-red w3-collapse w3-top w3-large w3-padding" style="z-index:3;width:300px;font-weight:bold;" id="mySidebar"><br>
  <a href="javascript:void(0)" onclick="w3_close()" class="w3-button w3-hide-large w3-display-topleft" style="width:100%;font-size:22px">Закрыть Меню</a>
  <div class="w3-container">
    <h3 class="w3-padding-64"><b>Название<br>Компании</b></h3>
  </div>
  <div class="w3-bar-block">
    <a href="#" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Главная</a> 
    <a href="#showcase" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Витрина</a> 
    <a href="#services" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Сервисы</a> 
    <a href="#designers" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Модельеры</a> 
    <a href="#packages" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Пакеты</a> 
    <a href="#contact" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Контакты</a>
  </div>
</nav>

<header class="w3-container w3-top w3-hide-large w3-red w3-xlarge w3-padding">
  <a href="javascript:void(0)" class="w3-button w3-red w3-margin-right" onclick="w3_open()">☰</a>
  <span>Компания Название</span>
</header>

<div class="w3-overlay w3-hide-large" onclick="w3_close()" style="cursor:pointer" title="закрыть боковое меню" id="myOverlay"></div>

<div class="w3-main" style="margin-left:340px;margin-right:40px">

<div class="w3-container" style="margin-top:80px" id="showcase">
    <h1 class="w3-jumbo"><b>Дизайн Интерьера</b></h1>
    <h1 class="w3-xxxlarge w3-text-red"><b>Витрина.</b></h1>
    <hr style="width:50px;border:5px solid red" class="w3-round">
  </div>
  
  
  <div class="w3-row-padding">
    <div class="w3-half">
      <img src="/w3images/kitchenconcrete.jpg" style="width:100%" onclick="onClick(this)" alt="Бетон встречает кирпичи">
      <img src="/w3images/livingroom.jpg" style="width:100%" onclick="onClick(this)" alt="Светлый, белый и плотный скандинавский дизайн">
      <img src="/w3images/diningroom.jpg" style="width:100%" onclick="onClick(this)" alt="Белые стены с дизайнерскими стульями">
    </div>

<div id="modal01" class="w3-modal w3-black" style="padding-top:0" onclick="this.style.display='none'">
    <span class="w3-button w3-black w3-xxlarge w3-display-topright">×</span>
    <div class="w3-modal-content w3-animate-zoom w3-center w3-transparent w3-padding-64">
      <img id="img01" class="w3-image">
      <p id="caption"></p>
    </div>
  </div>

<div class="w3-container" id="services" style="margin-top:75px">
    <h1 class="w3-xxxlarge w3-text-red"><b>Сервис.</b></h1>
    <hr style="width:50px;border:5px solid red" class="w3-round">
    <p>Мы - служба дизайна интерьера, которая сосредоточена на том, что лучше для вашего дома и что лучше для вас!</p>
    <p>Some text about our services - what we do and what we offer. We are lorem ipsum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
  </div>
  
  
  <div class="w3-container" id="designers" style="margin-top:75px">
    <h1 class="w3-xxxlarge w3-text-red"><b>Модельеры.</b></h1>
    <hr style="width:50px;border:5px solid red" class="w3-round">
    <p>Лучшая команда в мире.</p>
    <p>We are lorem ipsum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor
    incididunt ut labore et quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
    <p><b>Our designers are thoughtfully chosen</b>:</p>
  </div>

<div class="w3-row-padding w3-grayscale">
    <div class="w3-col m4 w3-margin-bottom">
      <div class="w3-light-grey">
        <img src="/w3images/team2.jpg" alt="Джон" style="width:100%">
        <div class="w3-container">
          <h3>Джон Доу</h3>
          <p class="w3-opacity">Генеральный директор и Основатель</p>
          <p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.</p>
        </div>
      </div>
    </div>
    <div class="w3-col m4 w3-margin-bottom">
      <div class="w3-light-grey">
        <img src="/w3images/team1.jpg" alt="Джейн" style="width:100%">
        <div class="w3-container">
          <h3>Джейн Доу</h3>
          <p class="w3-opacity">Дизайнер</p>
          <p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.</p>
        </div>
      </div>
    </div>
    <div class="w3-col m4 w3-margin-bottom">
      <div class="w3-light-grey">
        <img src="/w3images/team3.jpg" alt="Майк" style="width:100%">
        <div class="w3-container">
          <h3>Майк Росс</h3>
          <p class="w3-opacity">Архитектор</p>
          <p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.</p>
        </div>
      </div>
    </div>
  </div>

<div class="w3-container" id="packages" style="margin-top:75px">
    <h1 class="w3-xxxlarge w3-text-red"><b>Пакеты.</b></h1>
    <hr style="width:50px;border:5px solid red" class="w3-round">
    <p>Некоторые текст наши цены. Lorem ipsum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure</p>
  </div>

<div class="w3-row-padding">
    <div class="w3-half w3-margin-bottom">
      <ul class="w3-ul w3-light-grey w3-center">
        <li class="w3-dark-grey w3-xlarge w3-padding-32">Базовый</li>
        <li class="w3-padding-16">Приведены</li>
        <li class="w3-padding-16">10 часы поддержки</li>
        <li class="w3-padding-16">Фотография</li>
        <li class="w3-padding-16">20% скидка на мебель</li>
        <li class="w3-padding-16">Good сделка</li>
        <li class="w3-padding-16">
          <h2>$ 199</h2>
          <span class="w3-opacity">за номер</span>
        </li>
        <li class="w3-light-grey w3-padding-24">
          <button class="w3-button w3-white w3-padding-large w3-hover-black">Записаться</button>
        </li>
      </ul>
    </div>
        
    <div class="w3-half">
      <ul class="w3-ul w3-light-grey w3-center">
        <li class="w3-red w3-xlarge w3-padding-32">Профессиональный</li>
        <li class="w3-padding-16">Приведены</li>
        <li class="w3-padding-16">50 часы поддержки</li>
        <li class="w3-padding-16">Фотография</li>
        <li class="w3-padding-16">50% скидка на мебель</li>
        <li class="w3-padding-16">GREAT сделка</li>
        <li class="w3-padding-16">
          <h2>$ 249</h2>
          <span class="w3-opacity">за номер</span>
        </li>
        <li class="w3-light-grey w3-padding-24">
          <button class="w3-button w3-red w3-padding-large w3-hover-black">Записаться</button>
        </li>
      </ul>
    </div>
  </div>
  
  
  <div class="w3-container" id="contact" style="margin-top:75px">
    <h1 class="w3-xxxlarge w3-text-red"><b>Контакты.</b></h1>
    <hr style="width:50px;border:5px solid red" class="w3-round">
    <p>Вы хотите, чтобы мы стиль вашего дома? Заполните форму и заполните меня деталями:) мы любим знакомиться с новыми людьми!</p>
    <form action="/action_page.html" target="_blank">
      <div class="w3-section">
        <label>Имя</label>
        <input class="w3-input w3-border" type="text" name="Name" required>
      </div>
      <div class="w3-section">
        <label>Почта</label>
        <input class="w3-input w3-border" type="text" name="Email" required>
      </div>
      <div class="w3-section">
        <label>Сообщение</label>
        <input class="w3-input w3-border" type="text" name="Message" required>
      </div>
      <button type="submit" class="w3-button w3-block w3-padding-large w3-red w3-margin-bottom">Отправить Сообщение</button>
    </form>  
  </div>

</div>

<div class="w3-light-grey w3-container w3-padding-32" style="margin-top:75px;padding-right:58px"><p class="w3-right">Работает на <a href="https://schoolsw3.com/w3css/index.html" title="W3.CSS" target="_blank" class="w3-hover-opacity">w3.css</a></p></div>

// Модель Галерея Изображений
function onClick(element) {
  document.getElementById("img01").src = element.src;
  document.getElementById("modal01").style.display = "block";
  var captionText = document.getElementById("caption");
  captionText.innerHTML = element.alt;
}
</script>

</body>
</html>

Сохраните ваш код

Не удалось сохранить код

Ваш код был сохранен

Сохранить на Google диске

Открыть файл из Google диска

Сообщить об ошибке: