Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="ru">
<head>
    <link rel="stylesheet" type="text/css" href="normalize.css" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div class="glavniy">
        <header class="top_header">
            <div class="wrap">
              <div class="header__left">
              <h1><span>Н</span>азвание сайта</h1>
              <p>Подзаголовок сайта или какой-нибудь слоган.</p>
              </div>
              <form class="search__form">
               <input type="search" name="q" placeholder="Поиск..."> 
               <input type="submit" value=""></p>
              </form>
            </div>
        </header>
​
        <div class="osnova">
            <div class="header">
                <h1><span>Г</span>лавный заголовок </h1>
                <p>Подзаголовок главного заголовка</p>
            
                <h2>Lorem ipsum dolor...</h2>
                <p class="opis">
                    Lorem ipsum dolor sit amet, consectetur adipisicing 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="menu">
​
            </div>
            </div>
​
        </div>
    </body>
    </html>
 
/* Выделение буквы тёмно-красным цветом */
span {
    color:#ae4b5d;
}
/* Главная сетка для всех блоков */
.glavniy {
    margin:0 auto;
    width:1300px;
    background-color:#e4e2e8;
}
/* Главный хэдер */
.top_header {
    width:1300px;
    margin:0 auto;
    background:#2f343c url(images/bg_header.jpg) repeat;
    height:70px;
}
​
.top_header p {
    color:#656f7a;
    font:bold 12px Arial, sans-serif;
    margin:0;
    padding:0px 0px 0px 0px;
}
​
.top_header input[type="search"] {
    width:197px;
    height:30px;
    padding:5px;
    border:1px solid #875f66;
    border-radius:5px;
    background-color:#24272d;
    color:#5b636e;
    font:14px Arial, sans-serif;
}
.top_header input[type="submit"] {
    border:0;
    border-radius:5px;
    background:#ae4b5d  url(images/search.png) center no-repeat;
    width:34px;
    height:32px;
    cursor:pointer;
​
}
/* Основная сетка после хэдера */
.osnova {
    width:980px;
    height:1300px;
    margin:0 auto;
    background-color:#fff;
}
/* Дополнительный хэдер */
.header {
    background:#282d33 url(images/header.jpg);
    width:980px;
    height:240px;
}
.header h1 {
    font:bold 30px Arial, sans-serif;
    color:#a5adb8;
    margin:0;
    padding:50px 0px 0px 38px;
}
.header h2 {
    font:bold 18px Arial, sans-serif;
    color:#a5adb8;
    margin:0;
    padding:15px 0px 0px 38px;
}
.header .opis {
    color:#fff;
    font: 14px Arial, sans-serif;
    margin:0;
    width:483px;
    padding:5px 0px 0px 38px;
}
.header p {
    color:#2d3339;
    font:bold 18px Arial, sans-serif;
    margin:0;
    padding:0px 0px 0px 38px;
}
/* Меню */
.menu {
    background:#95161f;
    height:40px;
    width:980px;
    
}
​
.header__left {
  float: left;
}
​
.search__form {
  float: right;
}
​
.wrap {
  max-width: 980px;
  width: 100%;
  margin: 0 auto;
}
​
.top_header h1 {
    font:bold 30px Arial, sans-serif;
    text-transform:uppercase;
    color:#f6eee9;
    margin:0;
    padding:10px 0px 0px 0px;
}
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
lime7pro
0viewers