- правильные геометрические фигуры в дизайне
- без пестроты и буйства красок, три основных цвета
задник можно черный, но подложка светлая, текст тёмный на светлом фоне и должен легко читаться (!)
- окно цитаты с четырёх сторон в рамочке и чуть другим цветом, чем основной фон
- по шапке, которая картинка в верхней части - на Ваших дизайнах они на многих очень больше, на 2/3 экрана, но пусть она будет поменьше. как на концепте, не больше.
Техническое задание на DEEP SPACE
Страница: 1
Сообщений 1 страница 14 из 14
Поделиться12017-03-03 22:34:25
Поделиться22017-03-05 17:33:25
Свернутый текст
Поделиться32017-03-05 19:25:32
Код:
html, body {
background: url("http://sf.uploads.ru/hu5x0.jpg") repeat-x top left, url("http://sf.uploads.ru/2YCZB.jpg") center; background-color: #06060b;}
body {margin: 0 auto; overflow-x: hidden;}
#pun {background-color: #06060b; background-image: url(http://s7.uploads.ru/Tbap5.jpg); }
Поделиться42017-03-05 23:28:01
Код:
<script><!--Своя картинка или Слово в Панель навигации -->
var Img_Word=0; //0-Картинка;1-Cлово /Ставим картинку или Слово ?
navlinks=new Array(
"navextra1","Слово или ссылка на картинку", // Дополнительный пункт меню 1
"navextra2","Слово или ссылка на картинку", // Дополнительный пункт меню 2
"navextra3","Слово или ссылка на картинку", // Дополнительный пункт меню 3
"navindex","Слово или ссылка на картинку", // Форум
"navuserlist","Слово или ссылка на картинку",// Участники
"navrules","Слово или ссылка на картинку", // Правила
"navsearch","Слово или ссылка на картинку", // Поиск
"navprofile","Слово или ссылка на картинку", // Профиль
"navpm","Слово или ссылка на картинку", // Сообщения
"navadmin","Слово или ссылка на картинку", // Администрирование
"navregister","Слово или ссылка на картинку",// Регистрация
"navlogin","Слово или ссылка на картинку", // Войти
"navlogout","Слово или ссылка на картинку" // Выход - !ПОСЛЕДНИЙ элемент без запятой
)
var s,i;for (i=0; i < navlinks.length; i++){s=navlinks[i+1];
if(!Img_Word){s='<img class="navlinks" src="'+s+'" border="0" />'}
$("#"+navlinks[i]+" a").html("<span>"+s+"</span>");i++;}
</script>Поделиться52017-03-05 23:43:08
Код:
<noedit><div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
$(document).ready(function(){
new google.translate.TranslateElement({
pageLanguage: 'ru'
}, 'google_translate_element');
});
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit">
</script>Поделиться62017-03-06 20:57:03
Код:
<script><!--Своя картинка или Слово в Панель навигации -->
var Img_Word=1; //0-Картинка;1-Cлово /Ставим картинку или Слово ?
navlinks=new Array(
"navindex","HOME", // Форум
"navuserlist","USERS",// Участники
"navsearch","SEARCH", // Поиск
"navprofile","ROFILE", // Профиль
"navpm","MAIL", // Сообщения
"navadmin","TOOLS", // Администрирование
"navregister","JOIN US",// Регистрация
"navlogin","ENTER", // Войти
"navlogout","OUT" // Выход - !ПОСЛЕДНИЙ элемент без запятой
)
var s,i;for (i=0; i < navlinks.length; i++){s=navlinks[i+1];
if(!Img_Word){s='<img class="navlinks" src="'+s+'" border="0" />'}
$("#"+navlinks[i]+" a").html("<span>"+s+"</span>");i++;}
</script>Поделиться72017-03-07 10:24:04
Код:
/* D1 Logo and description
-------------------------------------------------------------*/
/* D1.1 */
#pun-title {
margin: 0;
border-style: none none none none;
border-width: 1px 1px 0 1px;
}
/* D1.2 */
#pun-title h1 {
display : block;
height : 40px;
padding: 2em 1em 0 1em;
}
/* D1.3 */
#pun-title .container {
border-style: none none none none;
}
/* D1.4 */
#pun-title h1 span {
font-size: 1.5em;
}
/* D1.4 */
#pun-title h1 span {
font-size: 1.5em;
}
#pun-title table {
border: none;
height: 339px!important;
width: 1600px!important;
overflow: hidden;
}
#pun-title td.title-logo-tdl {
border: none;
width: 100%;
}
#pun-title td.title-logo-tdr {
border: none;
width: 420px;
}
/* D2 Page navigation
-------------------------------------------------------------*/
/* D2.1 */
#pun-pagelinks {
position: absolute;
top: -15px;
left: 0;
margin: 0;
border: none;
padding: 0;
width: 100%;
}
/* D2.2 */
#pun-pagelinks .container {
background: transparent;
border: none;
padding: 0}
/* D2.3 */
#pun-pagelinks .container li {
display: inline
}
/* D2.4 */
#pun-pagelinks li a, #pun-pagelinks a:link, #pun-pagelinks a:hover {
height: 2em;
line-height: 2em;
padding: 0;
font-size: 1.1em;
margin-left: -9999px;
display: block;
float:left;
width: 100%;
}
/* D2.5 */
#pun-pagelinks a:active, #pun-pagelinks a:focus {
position:relative;
margin: 0;
}
#pun-pagelinks li a span {
display:block;
margin: 0 1em
}
/* D3 Forum navigation
-------------------------------------------------------------*/
/* D3.1 */
#pun-navlinks, #pun-navlinks .container {
border-style: none;
border-width: 0;
position: top center
}
/* D3.2 */
#pun-navlinks .container {
width: 100%;
margin-top: -282px;
/* margin-left: 18px; */
text-align: center;
position: absolute;
}
/* D.3 */
#pun-navlinks li {
display: inline;
padding-right: 1em;
}
/* D3.4 */
#pun-navlinks li a {
font-style: normal!important;
color: #68221c!important;
text-transform: uppercase;
display: inline-block!important;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 16px!important;
font-weight: 400!important;
height: 18px!important;
line-height: 19px!important;
min-width: 40px!important;
padding: 0px 8px!important;
position: relative!important;
font-variant: uppercase !important;
text-shadow: 1px 1px 1px #000000!important;
}
#pun-navlinks li a:hover, #pun-navlinks li a:focus, #pun-navlinks li a:active {
text-shadow:3px 3px 3px #143800,-3px -3px -3px #5B0000!important;
color:#9a7e7b!important
}
/* D4 User links
-------------------------------------------------------------*/
/* D4.1 */
#pun-ulinks {
margin: -5px!important;
background-color: transparent!important;
font-family: "Arial"!important;
font-variant: small-caps !important!important;
margin-left: 160px!important;
font-size: 11px!important;
}
/* D4.2 */
#pun-ulinks .container {
position: absolute!important;
top: 512px!important;
margin: -170px -142px auto!important;
padding: 0.3em!important;
border: none!important;
background-color: transparent!important;
width: 900px!important;
font-weight: normal!important;
text-align: center!important;
/* text-shadow: 0.5px 0.5px 0.5px #5ea8bc!important; */
}
/* D4.3 */
#pun-ulinks li, #pun-ulinks li a {
display: inline!important;
font-family: sans-serif;
border-left-style: none!important;
border-left-width: 0px!important;
color: #442b26!important;
font-size: 13px;
}
#pun-ulinks li a:hover {
color: #8c2b19!important;
}
/* D4.4 */
#pun-ulinks li a {
padding: 0 0.3em 0 0.6em
}
/* D4.5 */
#pun-ulinks li.item1, #pun-ulinks li.item1 a {
border-left-style: none;
border-left-width: 0;
padding-left: 0
}
/* D5 Welcome box and Top Breadcrumbs
-------------------------------------------------------------*/
/* D5.1 */
#pun-status, #pun-status .container {
border-bottom: none;
margin-bottom: 0;
}
/* D5.2 */
#pun-status .container {
padding: 0.8em 1em 1em 1em;
}
/* D5.3 */
#pun-status span {
white-space: nowrap;
margin-right: 0.5em;
}
/* D5.4 */
#pun-crumbs1 {
font-weight: bold;
overflow: hidden;
margin-top: 0;
}
/* D5.5 */
#pun-crumbs1 p.container {
border-top: none;
padding: 1em 1em 0.8em 1em;
font-size: 1.1em;
}
/* D5.6 */
#pun-break1 {
margin: 0 1em;
border-style: solid none;
border-width: 1px 0;
height: 0;
margin: -2px 1em;
position: relative;
z-index: 1;
}
/* D6 Announcement
-------------------------------------------------------------*/
/* D6.1 */
#pun-announcement h2 {
padding: 0;
margin: 0 1em -3.5em 1em;
border-style: none none solid none;
border-width: 0 0 1px 0;
position: center;
font-weight: bold;
}
/* D6.2 */
#pun-announcement h2 span {
display: block;
padding: 1em 0 0.8em 0;
border-bottom-style: solid;
border-bottom-width: 1px;
}
/* D6.3 */
#pun-announcement .container {
padding: 4.3em 1em 1em 1em;
}
Поделиться82017-03-07 10:24:25
Код:
/* D1 Logo and description
-------------------------------------------------------------*/
/* D1.1 */
#pun-title {
margin: 0;
border-style: none none none none;
border-width: 1px 1px 0 1px;
}
/* D1.2 */
#pun-title h1 {
display : block;
height : 450px;
padding: 2em 1em 0 1em;
}
/* D1.3 */
#pun-title .container {
border-style: none none none none;
}
/* D1.4 */
#pun-title h1 span {
font-size: 1.5em;
display: none;
}
#pun-title table {
border: none;
height: 450px;
width: 100%;
}
#pun-title td.title-logo-tdl {
border: none;
width: 100%;
}
#pun-title td.title-logo-tdr {
border: none;
width: 468px;
}
/* D2 Page navigation
-------------------------------------------------------------*/
/* D2.1 */
#pun-pagelinks {
position: absolute;
top: -15px;
left: 0;
margin: 0;
border: none;
padding: 0;
width: 100%;
}
/* D2.2 */
#pun-pagelinks .container {
background: transparent;
border: none;
padding: 0}
/* D2.3 */
#pun-pagelinks .container li {
display: inline
}
/* D2.4 */
#pun-pagelinks li a, #pun-pagelinks a:link, #pun-pagelinks a:hover {
height: 2em;
line-height: 2em;
padding: 0;
font-size: 1.2em;
margin-left: -9999px;
display: block;
float:left;
width: 100%;
}
/* D2.5 */
#pun-pagelinks a:active, #pun-pagelinks a:focus {
position:relative;
margin: 0;
}
#pun-pagelinks li a span {
display:block;
margin: 0 1em
}
/* D3 Forum navigation
-------------------------------------------------------------*/
/* D3.1 */
#pun-navlinks, #pun-navlinks .container {
border-style: none;
border-width: 0;
}
/* D3.2 */
#pun-navlinks .container {
width: 100%;
margin-top: -455px;
margin-left: 90px;
text-align: left;
position: absolute;
}
/* D.3 */
#pun-navlinks li {
display: inline;
padding-right: 1em;
}
/* D3.4 */
#pun-navlinks li a {
font-size: 1.1em;
font-family: 'Furore';
position: relative!important;
}
/* D4 User links
-------------------------------------------------------------*/
/* D4.1 */
#pun-ulinks {
margin: 0px;
}
/* D4.2 */
#pun-ulinks .container {
border-top: none;
padding: 0px 0px;
text-align: center;
margin-top: -51px;
}
/* D4.3 */
#pun-ulinks li, #pun-ulinks li a {
display: inline;
border-left-style: none;
border-left-width: 1px;
white-space: nowrap;
}
/* D4.4 */
#pun-ulinks li a {
padding: 0 0.3em 0 0.6em
}
/* D4.5 */
#pun-ulinks li.item1, #pun-ulinks li.item1 a {
border-left-style: none;
border-left-width: 0;
padding-left: 0
}
/* D5 Welcome box and Top Breadcrumbs
-------------------------------------------------------------*/
/* D5.1 */
#pun-status, #pun-status .container {
border-bottom: none;
margin-bottom: 0;
}
/* D5.2 */
#pun-status .container {
padding: 0.8em 1em 1em 1em;
}
/* D5.3 */
#pun-status span {
white-space: nowrap;
margin-right: 0.5em;
}
/* D5.4 */
#pun-crumbs1 {
font-weight: bold;
overflow: hidden;
margin-top: 0;
}
/* D5.5 */
#pun-crumbs1 p.container {
border-top: none;
padding: 1em 1em 0.8em 1em;
font-size: 1.1em;
}
/* D5.6 */
#pun-break1 {
margin: 0 1em;
border-style: none none;
border-width: 1px 0;
height: 0;
margin: -2px 1em;
position: relative;
z-index: 1;
}
/* D6 Announcement
-------------------------------------------------------------*/
/* D6.1 */
#pun-announcement h2 {
padding: 0;
margin: 0 1em -3.5em 1em;
border-style: none none none none;
border-width: 0 0 1px 0;
position: relative;
font-weight: bold;
}
/* D6.2 */
#pun-announcement h2 span {
display: block;
padding: 1em 0 0.8em 0;
border-bottom-style: none;
border-bottom-width: 1px;
}
/* D6.3 */
#pun-announcement .container {
padding-left: 10px;
margin-top: -300px;
}Поделиться112017-03-07 18:02:59
Код:
/* Вертикальное меню в профиле и сообщениях */
#profile > .container {
padding: 1em 1em 1em 0 !important;
}
#profilenav {
float: left;
display: inline-block;
width: 42px;
margin: 0 1em 0;
z-index: 10;
}
#profilenav ul, #profilenav li {
padding: 0;
margin: 0;
}
#profilenav h2 {
display: none;
}
#profilenav ul {
border: 1px solid #dbdbdb;
background: #ebebeb;
margin-bottom: 1em;
}
#profilenav ul li {
border-bottom: 1px solid #dbdbdb;
}
#profilenav ul li:last-child {
border-bottom: 0;
}
#profilenav li a {
display: block;
height: 0;
width: 0;
padding: 20px;
color: transparent;
text-decoration: none !important;
text-indent: -9999px;
z-index: 1;
border-radius: 0;
box-shadow: none;
}
#profilenav li a:hover {
line-height: 0;
padding-left: 60px;
}
#profilenav li a:hover, #nav-standard li a:hover, #pun-adnav li a:hover {
text-decoration: none !important;
}
#profilenav ul li a:hover {
position: relative;
padding-right: 140px;
color: #fff;
text-indent: 0;
}
#pun-profile #profilenav ul li a, #pun-messages #profilenav ul li a {
background-repeat: no-repeat;
}
/* Цвет при наведении и активного пункта */
#profilenav li.isactive a, #profilenav ul li a:hover {
background-color: #4c9b72;
}
/* Спрайт для Профиль */
#pun-profile #profilenav ul li a {
background-image: url(https://forumstatic.ru/files/0007/af/57/65555.png);
}
/* Спрайт для Сообщения */
#pun-messages #profilenav ul li a {
background-image: url(https://forumstatic.ru/files/0007/af/57/55565.png);
}
/* Входящие / Основной */
#pun-messages #profilenav ul .item1 a {
background-position: 0 0;
}
#pun-profile #profilenav ul .item1 a:hover, #pun-profile #profilenav ul .item1.isactive a, #pun-messages #profilenav ul .item1.isactive a, #pun-messages #profilenav ul .item1 a:hover {
background-position: -42px 0;
}
/* -- */
/* Отправленные / Персональный */
#pun-profile #profilenav ul .item2 a, #pun-messages #profilenav ul .item2 a {
background-position: 0 -42px;
}
#pun-profile #profilenav ul .item2 a:hover, #pun-profile #profilenav ul .item2.isactive a, #pun-messages #profilenav ul .item2.isactive a, #pun-messages #profilenav ul .item2 a:hover {
background-position: -42px -42px;
}
/* -- */
/* Новое сообщение / Общение */
#pun-profile #profilenav ul .item3 a, #pun-messages #profilenav ul:last-child .item1 a {
background-position: 0 -84px;
}
#pun-profile #profilenav ul .item3 a:hover, #pun-profile #profilenav ul .item3.isactive a, #pun-messages #profilenav ul:last-child .item1.isactive a, #pun-messages #profilenav ul:last-child .item1 a:hover {
background-position: -42px -84px;
}
/* -- */
/* Статус / Аватар */
#pun-profile #profilenav ul .item4 a, #pun-messages #profilenav ul:last-child .item2 a {
background-position: 0 -126px;
}
#pun-profile #profilenav ul .item4 a:hover, #pun-profile #profilenav ul .item4.isactive a, #pun-messages #profilenav ul:last-child .item2.isactive a, #pun-messages #profilenav ul:last-child .item2 a:hover {
background-position: -42px -126px;
}
/* -- */
/* Всё прочитано / Подпись */
#pun-profile #profilenav ul .item5 a, #pun-messages #profilenav ul:last-child .item3 a {
background-position: 0 -168px;
}
#pun-profile #profilenav ul .item5 a:hover, #pun-profile #profilenav ul .item5.isactive a, #pun-messages #profilenav ul:last-child .item3.isactive a, #pun-messages #profilenav ul:last-child .item3 a:hover {
background-position: -42px -168px;
}
/* -- */
/* Очистить папку / Отображение */
#pun-profile #profilenav ul .item6 a, #pun-messages #profilenav ul:last-child .item4 a {
background-position: 0 -210px;
}
#pun-profile #profilenav ul .item6 a:hover, #pun-profile #profilenav ul .item6.isactive a, #pun-messages #profilenav ul:last-child .item4.isactive a, #pun-messages #profilenav ul:last-child .item4 a:hover {
background-position: -42px -210px;
}
/* -- */
/* Приватность */
#pun-profile #profilenav ul .item7 a {
background-position: 0 -252px;
}
#pun-profile #profilenav ul .item7 a:hover, #pun-profile #profilenav ul .item7.isactive a {
background-position: -42px -252px;
}
/* -- */
/* Дополнительно */
#pun-profile #profilenav ul .item8 a {
background-position: 0 -294px;
}
#pun-profile #profilenav ul .item8 a:hover, #pun-profile #profilenav ul .item8.isactive a {
background-position: -42px -294px;
}
/* -- */
/* Приглашения */
#pun-profile #profilenav ul .item9 a {
background-position: 0 -336px;
}
#pun-profile #profilenav ul .item9 a:hover, #pun-profile #profilenav ul .item9.isactive a {
background-position: -42px -336px;
}
/* -- */
/* Загрузки */
#pun-profile #profilenav ul .item10 a {
background-position: 0 -378px;
}
#pun-profile #profilenav ul .item10 a:hover, #pun-profile #profilenav ul .item10.isactive a {
background-position: -42px -378px;
}
/* -- */
/* Управление */
#pun-profile #profilenav ul .item11 a {
background-position: 0 -420px;
}
#pun-profile #profilenav ul .item11 a:hover, #pun-profile #profilenav ul .item11.isactive a {
background-position: -42px -420px;
}
/* -- */Поделиться122017-03-07 20:35:21
Код:
.bestpara {
border-image: url("http://imgdepo.com/id/i10213252") 5 5 5 5 round round;
border-style: solid;
border-width: 5px;
height: 46px;
opacity: 0.5;
overflow: hidden;
position: relative;
transition: all 0.5s ease-in-out 0s;
width: 105px;
}
.bestparaname {
background-color: rgba(15, 15, 15, 0.9);
color: #85683d;
font-family: pt sans narrow;
font-size: 10px;
margin-top: -42px !important;
padding: 1px 4px 3px;
position: absolute;
text-align: center;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 1);
text-transform: lowercase;
transform: translate(-110px, 0px);
transition: all 0.5s ease-in-out 0s;
width: 97px;
}
.bestparaname2 {
background-color: rgba(15, 15, 15, 0.9);
color: #85683d;
font-family: pt sans narrow;
font-size: 10px;
margin-top: -25px !important;
padding: 1px 4px 3px;
position: absolute;
text-align: center;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 1);
text-transform: lowercase;
transform: translate(110px, 0px);
transition: all 0.5s ease-in-out 0s;
width: 97px;
}
.bestpara:hover {
opacity: 1;
}
.bestpara:hover .bestparaname {
opacity: 1;
transform: translate(0px, 0px);
}
.bestpara:hover .bestparaname2 {
opacity: 1;
transform: translate(0px, 0px);
}
Страница: 1




























