VK.Com » Pawno-Info.Ru ::: V. 2 :::

KenJoker · 10 Янв 2012

Здравствуйте,сегодня доделал свой дизайн XD Который почти скопировал с ВК. Оцениваем,комментируем,ставим "Пасипа".

Время работы: В общем взять около 1-2ч.
Что добавлено во 2 Версии: Добавил свою менбшку вверху,писал сам,могут быть ошибки,говорите - исправлю. Добавил во круг текста рамку оттенка свело-голубово цвета. К рамкам добавил чу-чуть тени,её почти не видно,такая уж задумка

Добавил картинку,не надо - уберёте сами. Смотрите сами,на мой взгляд получилось,ну не то что идеал,но приятно смотрится.

Работа:

Чтобы видеть скрытое содержание Зарегистрируйтесь на форуме!

Все работы:

Чтобы видеть скрытое содержание Зарегистрируйтесь на форуме!

PHP:

<html>
<head>
<title> ВК </title>
<style>
body { 
background-attachment: scroll;
background-clip: border-box;
background-color: rgb(255, 255, 255);
background-image: none;
background-origin: padding-box;
background-position: 0% 0%;
background-repeat: repeat;
background-size: auto;
direction: ltr;
font-family: "tahoma", "arial", "verdana", sans-serif, "Lucida Sans";
font-size: 11px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
 }

body a {
color: #7295b2;
text-decoration: none;
font-family: "Tahoma";
font-size: 13px;
font-weight: 700;
}

body a:hover {
color: #5e86a4;
}

.scroll_fix_wrap { 
direction: ltr;
text-align: left;
 }
#global_prg { 
position: absolute;
z-index: 400;
 }

#page_layout { 
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: relative;
width: 791px;
z-index: 6;
 }

#page_header { 
height: 40px;
 }
#side_bar { 
float: right;
margin-right: 5px;
padding-bottom: 10px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
width: 126px;
border-right-color: rgb(217, 224, 231);
border-right-style: solid;
border-right-width: 1px;
border-left-color: rgb(217, 224, 231);
border-left-style: solid;
border-left-width: 1px;
border-bottom-color: rgb(217, 224, 231);
border-bottom-style: solid;
border-bottom-width: 1px;
 }

#page_header.p_head1 .back { 
background-attachment: scroll;
background-clip: border-box;
background-color: rgb(78, 114, 154);
background-image: url("http://s011.radikal.ru/i317/1201/68/3e9606562469.gif");
background-origin: padding-box;
background-position: 0px -43px;
background-repeat: repeat-x;
background-size: auto;
 }

#page_header .back { 
background-attachment: scroll;
background-clip: border-box;
background-color: rgb(78, 114, 154);
background-image: url("http://vk.com/images/hat.gif");
background-origin: padding-box;
background-position: 0px -43px;
background-repeat: repeat-x;
background-size: auto;
height: 40px;
position: absolute;
width: 100%;
 }

#page_header.p_head1 .left { 
background-attachment: scroll;
background-clip: border-box;
background-color: rgb(78, 114, 154);
background-image: url("http://s011.radikal.ru/i317/1201/68/3e9606562469.gif");
background-origin: padding-box;
background-position: 0px -1px;
background-repeat: repeat;
background-size: auto;
width: 150px;
 }

#page_header .left { 
background-attachment: scroll;
background-clip: border-box;
background-color: rgb(78, 114, 154);
background-image: url("http://vk.com/images/hat.gif");
background-origin: padding-box;
background-position: 0px -1px;
background-repeat: repeat;
background-size: auto;
height: 40px;
left: 0px;
position: absolute;
width: 134px;
 }

#page_header.p_head1 .right { 
background-attachment: scroll;
background-clip: border-box;
background-color: rgb(78, 114, 154);
background-image: url("http://vk.com/images/hatvk3.gif");
background-origin: padding-box;
background-position: 100% -1px;
background-repeat: repeat;
background-size: auto;
 }

#page_header .right { 
background-attachment: scroll;
background-clip: border-box;
background-color: rgb(78, 114, 154);
background-image: url("http://vk.com/images/hat.gif");
background-origin: padding-box;
background-position: 100% -1px;
background-repeat: repeat;
background-size: auto;
height: 40px;
position: absolute;
right: 0px;
width: 10px;
 }

#page_body { 
float: left;
font-size: 11px;
margin-left: 10px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 15px;
padding-top: 0px;
width: 631px;
 }
#header_wrap1 { 
border-bottom-color: rgb(243, 243, 243);
border-bottom-style: solid;
border-bottom-width: 0px;
border-left-color: rgb(243, 243, 243);
border-left-style: solid;
border-left-width: 1px;
border-right-color: rgb(243, 243, 243);
border-right-style: solid;
border-right-width: 1px;
border-top-color: rgb(243, 243, 243);
border-top-style: solid;
border-top-width: 0px;
 }

#header { 
background-attachment: scroll;
background-clip: border-box;
background-color: rgb(233, 237, 241);
background-image: none;
background-origin: padding-box;
background-position: 0% 0%;
background-repeat: repeat;
background-size: auto;
border-bottom-color: rgb(217, 224, 231);
border-bottom-style: solid;
border-bottom-width: 0px;
border-left-color: rgb(217, 224, 231);
border-left-style: solid;
border-left-width: 1px;
border-right-color: rgb(217, 224, 231);
border-right-style: solid;
border-right-width: 1px;
border-top-color: rgb(217, 224, 231);
border-top-style: solid;
border-top-width: 0px;
color: rgb(96, 115, 135);
font-size: 11px;
font-weight: 700;
line-height: 140%;
padding-bottom: 7px;
padding-left: 10px;
padding-right: 10px;
padding-top: 7px;
position: relative;
 }

#header1 { 
background-attachment: scroll;
background-clip: border-box;
background-color: rgb(233, 237, 241);
background-image: none;
background-origin: padding-box;
background-position: 0% 0%;
background-repeat: repeat;
background-size: auto;
border-bottom-color: rgb(217, 224, 231);
border-bottom-style: solid;
border-bottom-width: 0px;
border-top-color: rgb(217, 224, 231);
border-top-style: solid;
border-top-width: 0px;
color: rgb(96, 115, 135);
font-size: 11px;
font-weight: 700;
line-height: 140%;
padding-bottom: 7px;
padding-left: 10px;
padding-right: 10px;
padding-top: 7px;
position: relative;
 }

#header h1 { 
font-size: 11px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
overflow-x: hidden;
overflow-y: hidden;
 }

#header1 h1 { 
font-size: 11px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
overflow-x: hidden;
overflow-y: hidden;
 }

#wrap_between { 
height: 0px;
overflow-x: hidden;
overflow-y: hidden;
 }

#wrap2 { 
border-bottom-color: rgba(100, 100, 100, 0.07843);
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: rgba(100, 100, 100, 0.07843);
border-left-style: solid;
border-left-width: 1px;
border-right-color: rgba(100, 100, 100, 0.07843);
border-right-style: solid;
border-right-width: 1px;
border-top-color: rgba(100, 100, 100, 0.07843);
border-top-style: solid;
border-top-width: 0px;
 }

#wrap1 { 
border-bottom-color: rgb(217, 224, 231);
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: rgb(217, 224, 231);
border-left-style: solid;
border-left-width: 1px;
border-right-color: rgb(217, 224, 231);
border-right-style: solid;
border-right-width: 1px;
border-top-color: rgb(217, 224, 231);
border-top-style: solid;
border-top-width: 0px;
 }

#index, #ij_block { 
line-height: 160%;
 }

#index .content, #ij_block .content { 
padding-bottom: 10px;
padding-left: 30px;
padding-right: 30px;
padding-top: 5px;
 }

#side_bar ol { 
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin-bottom: 10px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
 }

#side_bar ol li a { 
background-attachment: scroll;
background-clip: border-box;
background-image: none;
background-origin: padding-box;
background-position: 0% 0%;
background-repeat: repeat;
background-size: auto;
border-bottom-color: currentColor;
border-bottom-style: none;
border-bottom-width: 0px;
border-left-color: currentColor;
border-left-style: none;
border-left-width: 0px;
border-right-color: currentColor;
border-right-style: none;
border-right-width: 0px;
border-top-color: currentColor;
border-top-style: none;
border-top-width: 0px;
display: block;
padding-bottom: 4px;
padding-left: 6px;
padding-right: 3px;
padding-top: 4px;
 }

#side_bar ol li a:hover { 
background-attachment: scroll;
background-clip: border-box;
background-color: #e6ecfa;
background-image: none;
background-origin: padding-box;
background-position: 0% 0%;
background-repeat: repeat;
background-size: auto;
text-decoration: none;
text-shadow: 0px 1px 1px #FFF;
 }

h2 { 
border-bottom-color: rgb(218, 225, 232);
border-bottom-style: solid;
border-bottom-width: 1px;
color: rgb(69, 102, 142);
font-size: 13px;
margin-bottom: 10px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 3px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
 }
</style>
</head>
<body>
<div class="scroll_fix_wrap" id="page_wrap">
  <div>
    <div class="scroll_fix" style="width: 1262px">
      <div id="page_layout" style="width: 791px;">
        <div id="page_header" class="p_head1 p_head_l0">
          <div class="back"></div>
          <div class="left"></div>
          <div class="right"></div>
          <div class="content">
            <div id="top_nav" class="head_nav">
              <a id="top_home_link" class="top_home_link fl_l" href="/"></a>
              <div id="top_links">
                <div class="fl_r" id="top_menu_wrap" style="display: none">
                  <a id="top_reg_link" class="fl_r top_nav_link" href="/join" style="display: none" onclick="return !showBox('join.php', {act: 'box', from: nav.strLoc}, {}, event)">регистрация</a>
                </div>
                <a class="fl_l top_nav_link" href="" id="top_back_link" onclick="return nav.go(this, event, {back: true})"></a>
              </div>
            </div>
          </div>
        </div>
        <div id="side_bar" class="fl_l">
          <div id="header1">
  <h1 id="title">Меню</h1></div>
<br>
<ol>
<li>
<a href="">» Главная</a>
<a href="">» Форум </a><br><br>
<h2 style="padding-left: 6px">Моддинг</h2>
<a href=""> » Map </a>
<a href=""> » Mode </a>
<a href=""> » Scripts </a>
<a href=""> » Cmd </a>
</li>
</ol>

        </div>
        <div id="page_body" class="fl_r" style="width: 631px;">
          <div id="header_wrap2">
            <div id="header_wrap1">
              <div id="header">
                <h1 id="title">Добро пожаловать</h1>
              </div>
            </div>
          </div>
          <div id="wrap_between"></div>
          <div id="wrap3">
            <div id="wrap2">
              <div id="wrap1">
                <div id="content">
                  <div id="index">
                   
<style>
.new_bar {
width: 500px;
margin-left: 50px;
background-color: rgb(236, 240, 247);padding: 10px;border-left: 1px solid #768fac;border-right: 1px solid #768fac;border-top: 1px solid #768fac;border-bottom: 1px solid #768fac;
}

.new_bar ol { 
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin-bottom: 10px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 11px;
 }

.new_bar ol li a:hover { 
background-attachment: scroll;
background-clip: border-box;
background-color: #f1f5f9;
background-image: none;
background-origin: padding-box;
background-position: 0% 0%;
background-repeat: repeat;
background-size: auto;
text-decoration: none;
border-left-color: #9ab1cc;
border-left-style: solid;
border-left-width: 1px;
border-right-color: #9ab1cc;
border-right-style: solid;
border-right-width: 1px;
 }

.new_bar ol li a { 
background-attachment: scroll;
background-clip: border-box;
background-image: none;
background-origin: padding-box;
background-position: 0% 0%;
background-repeat: repeat;
background-size: auto;
border-bottom-color: #9ab1cc;
border-bottom-style: none;
border-bottom-width: 0px;
border-left-color: #9ab1cc;
border-left-style: none;
border-left-width: 1px;
border-right-color: #9ab1cc;
border-right-style: none;
border-right-width: 1px;
border-top-color: #9ab1cc;
border-top-style: none;
border-top-width: 0px;
margin-left: 10px;
display: inline;
padding-bottom: 21px;
padding-left: 10px;
padding-right: 10px;
padding-top: 21px;
 }

.new_bar ol li a:focus { 
background-attachment: scroll;
background-clip: border-box;
background-color: #c9d8e6;
background-image: none;
background-origin: padding-box;
background-position: 0% 0%;
background-repeat: repeat;
background-size: auto;
text-decoration: none;
 }
</style><br>
  <div class="new_bar">
    <ol>
      <li>
<center>
<b style="color: #5e86a4;text-shadow: 1px 1px 1px #FFFFFF"> Pawno-Info.Ru </b>
        <a href="">Зарегистрироваться</a>
        <a href="">Войти</a>
        </center>
      </li>
    </ol>
  </div>
<br>
<center><img src="http://s017.radikal.ru/i434/1201/1a/7f1e609f0bb0.gif" style=""></center>

                    <div class="content" style="padding-top: 0px;">
                      <div style="font-size: 14px;">
                       

<br><br>
<h2> Почему мы всегда впереди,перед другим сайтами?</h2>
 	<div style="color: #768fac;color: rgb(118, 143, 172); background-color: rgb(236, 240, 247);padding: 10px;border-left: 1px solid #768fac;border-right: 1px solid #768fac;border-top: 1px solid #768fac;border-bottom: 1px solid #768fac;box-shadow: 2px 2px 2px #e9eff6;"><b style="color: #5e86a4">»</b> Вежливый,адекватный персонал. <br>
 	<b style="color: #5e86a4">»</b> Большой выбор работ как и для сервера,так и для сайта. <br>
 	<b style="color: #5e86a4">»</b> У нас на <b>Pawno-Info</b> Проводятся различные конкурсы,с денежными призами. </div>
<br><br><br><br>
<h2> На Pawno-Info Можно найти:</h2>
<div style="color: #768fac;color: rgb(118, 143, 172); background-color: rgb(236, 240, 247);padding: 10px;border-left: 1px solid #768fac;border-right: 1px solid #768fac;border-top: 1px solid #768fac;border-bottom: 1px solid #768fac;box-shadow: 2px 2px 2px #e9eff6;"><b style="color: #5e86a4">»</b>  Графику сделанную в программе PhotoShop.<br>
<b style="color: #5e86a4;">»</b> Web Дизайны,популярные движки для сайтов;форумов;блогов.<br>
<b style="color: #5e86a4;">»</b> Интересные модификации для серверов Sa:Mp.<br>
<b style="color: #5e86a4">»</b> Красивые работы по Map'ингу.<br>
<b style="color: #5e86a4;">»</b> Скрипты для сервера,которые будут привлекать игроков.<br>
<b style="color: #5e86a4;">»</b> Также на нашем проекте имеются Читы/Хаки/Баги разных серверов.<br></div><br>
<b style="color: #5e86a4;text-shadow: 1px 1px 1px #F2F2F2;color: #5e86a4;text-shadow: 0px 1px 1px #989898">Всё что выше перечисленно вы найдете в нашем <a href="pawno-ifo.ru">сайте</a>.</b>
<br><br><br><br><br>
<b style="font-size: 10px"> Дизайн VK.com  <div style="color: #00bbff;text-shadow: 1px 1px 1px #e6e6e6"><marquee>Отредактированно KenJoker for Pawno-Info.Ru (c)</marquee></div> <br></b>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="clear"></div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

P.s. Извените что засоряю форум.

Переход в группу "Пользователь"

VK.Com » Pawno-Info.Ru ::: V. 2 :::

KenJoker

Компетентный