Оцените css файл

ar00 · October 5, 2012

/*-->>Designed by OctoberStudio, do not modify<<--*/
@import url(http://fonts.googleapis.com/css?family=PT+Sans:400,700|PT+Sans+Narrow:400,700|Istok+Web:400,700,400italic&subset=cyrillic,latin);
*{	
	margin:0 0;
	padding:0 0;
	font-size:100.01%
}

* img{border:0px}
* a:active{background:#f94c9b; color: #fff !important}

body, html{min-height:320px; color: #fff}
body a{color: #fff}

header{
	position:absolute;
	padding:20px 00px 0;
	z-index:1
}

header img, .logo-mp{
	width:175px;
	height:60px
}

header a:active{background: none}

#wrap{
	min-height:100%;
	height:auto !important;
	height:100%;
	position:relative;
	overflow:auto
}

#backstretch{background-color:#111}

.inner-page a{
	color:#fff !important;
	background:#450828
}

.inner-page a:hover{color:#000 !important}

/*———————general properties———————*/
body, html, .index, .wrapper, #blog-container, #contacts, #page404{
	width:100%;
	height:100%
}
.wrapper, #humb-tray-wrap, #thumb-tray, ul#thumb-list li, .carousel .preview, #blog-container article, .comment p, #about-wrap, #contacts, #feedback .row, footer menu{
	overflow:hidden
}
body, html, #humb-tray-wrap, footer{
	min-width:480px;
}
#blog-container article, .comment p, #about p{
	font:0.75em/1.25em 'Calibri', sans-serif
}
#photo-nav, #about-nav{
	font:0.6875em 'Arial', sans-serif
}
/*———————index———————*/
.index{
	margin:0 auto;
    position:fixed
}

.index .child{
	position:relative;
	width:210px;
	height:210px;
	margin:50px auto;
	z-index:1 !important;
	border:1px solid rgba(255,255,255,.45)
}

.logo-mp{
	position:absolute;
	right:0px;
	bottom:50px;
	z-index:100
}

.wrapper{
	position:relative;
	display:block
}

.wrapper  span{
	position:absolute;
	width:100%;
	display:block;
	z-index:1;
	margin:190px 0 0 -20px;
	padding:0px 8px 2px 0;
	direction:rtl;
	font:18px 'PT Sans Narrow', sans-serif;
	background:#000
}

.wrapper img{
	height:305px;
	width:305px;
	position:absolute;
	margin:-50px 0 0 -50px;
	z-index:0
}

.child > a{text-decoration:none}

/*different bg for each category*/
.about{background:url(../images/index/about-bg.png) repeat-x !important}
.resources{background:url(../images/index/resources-bg.png) repeat-x !important}
.blog{background:url(../images/index/blog-bg.png) repeat-x !important}
.photo-bg{background:url(../images/index/photo-bg.png) repeat-x !important}
.video-bg{background:url(../images/index/video-bg.png) repeat-x !important}
/*end different bg for each category*/

.index .child:nth-child(1), .index .child:nth-child(14), .index .child:nth-child(27){left:-898px;top:-5px}
.index .child:nth-child(2),.index .child:nth-child(15),.index .child:nth-child(28){left:-599px;top:-267px}
.index .child:nth-child(3),.index .child:nth-child(16),.index .child:nth-child(29){left:-301px;top:-529px}
.index .child:nth-child(4),.index .child:nth-child(17),.index .child:nth-child(30){left:-3px;top:-791px}
.index .child:nth-child(5),.index .child:nth-child(18),.index .child:nth-child(31){left:295px;top:-1053px}
.index .child:nth-child(6),.index .child:nth-child(19),.index .child:nth-child(32){left:593px;top:-1315px}
.index .child:nth-child(7),.index .child:nth-child(20),.index .child:nth-child(33){left:891px;top:-1577px}
.index .child:nth-child(8),.index .child:nth-child(21),.index .child:nth-child(34){left:-749px;top:-1690px}
.index .child:nth-child(9),.index .child:nth-child(22),.index .child:nth-child(35){left:-450px;top:-1952px}
.index .child:nth-child(10),.index .child:nth-child(23),.index .child:nth-child(36){left:-152px;top:-2214px}
.index .child:nth-child(11),.index .child:nth-child(24),.index .child:nth-child(37){left:146px;top:-2476px}
.index .child:nth-child(12),.index .child:nth-child(25),.index .child:nth-child(38){left:444px;top:-2738px}
.index .child:nth-child(13),.index .child:nth-child(26),.index .child:nth-child(39){left:742px;top:-3000px}
.index .child:nth-child(14){top:-3113px}
.index .child:nth-child(15){top:-3375px}
.index .child:nth-child(16){top:-3637px}
.index .child:nth-child(17){top:-3899px}
.index .child:nth-child(18){top:-4161px}
.index .child:nth-child(19){top:-4423px}
.index .child:nth-child(20){top:-4685px}
.index .child:nth-child(21){top:-4797px}
.index .child:nth-child(22){top:-5060px}
.index .child:nth-child(23){top:-5322px}
.index .child:nth-child(24){top:-5584px}
.index .child:nth-child(25){top:-5846px}
.index .child:nth-child(26){top:-6108px}
.index .child:nth-child(27){top:-6220px}
.index .child:nth-child(28){top:-6483px}
.index .child:nth-child(29){top:-6745px}
.index .child:nth-child(30){top:-7007px}
.index .child:nth-child(31){top:-7269px}
.index .child:nth-child(32){top:-7531px}
.index .child:nth-child(33){top:-7793px}
.index .child:nth-child(34){top:-7905px}
.index .child:nth-child(35){top:-8168px}
.index .child:nth-child(36){top:-8430px}
.index .child:nth-child(37){top:-8692px}
.index .child:nth-child(38){top:-8954px}
.index .child:nth-child(39){top:-9216px}
.index .child:nth-child(40){top:-9478px; left:1040px}
.index .child:nth-child(41){top:-9590px; left:-898px}


/*———————photo & portfolio———————*/
/*photo navigation*/
#prevslide, #nextslide{
	position:fixed;
	height:43px;
	width:43px;
	top:45%;
	margin-top:-21px;
	z-index:1000
}

#prevslide{left:15px; background:url(../images/back.png)}
#nextslide{right:15px; background:url(../images/forward.png)}
#prevslide:active, #nextslide:active{margin-top:-19px}
#prevslide:hover, #nextslide:hover{cursor:pointer}
#slidecounter{font-size:48px}
#photo-nav  menu li, #about-nav li{margin:0 1em 0 0}
#photo-nav  a:hover, #about-nav a:hover{text-decoration:underline}
#photo-nav  menu li:last-child:after, #about-nav li:last-child:after{content:''!important} 

#photo-nav{
	width:100%;
	position:fixed;
	bottom:30px;
	z-index:2
}

#photo-nav  menu, #slidecounter{margin:0 15px 5px}

#photo-nav  menu li, #about-nav li, footer menu  li{
	display:inline-block;
	text-transform:uppercase
}

#photo-nav  a, #about-nav a{text-decoration:none}

#photo-nav  menu li:after{
	content:url(../images/disk.png);
	margin-left:0.85em;
	display:inline-block
}

#humb-tray-wrap{
	width:100%;
	background:url(../images/photo-bg.png) repeat;
	padding:10px 0;
	text-align:center;
	line-height:1px
}

#thumb-tray{
	max-width:70%;
	margin:0 auto;
	display:inline-block
}

.button-left, .button-right{
	width:26px;
	height:80px;
	display:inline-block;
	vertical-align:top
}

.button-left{
	background: url(../images/left.png) no-repeat  50%;
	margin:10px 20px 0 0
}
.button-right{
	background: url(../images/right.png) no-repeat 50%;
	margin:10px 0 0 20px
}

.button-left:hover, .button-right:hover{cursor:pointer}

#show-hide{
	position:absolute;
	font-size:16px;
	cursor:pointer;
	margin:10px 0 0;
	right:15px;
	z-index:500
}

ul#thumb-list{
	display:block;
	list-style:none;
	position:relative;
	left:0px;
	padding:0 0px;
	height:90px
}

ul#thumb-list li{
	list-style:none;
	display:block;
	margin-right:15px;
	float:left;
	max-height:90px;
	width:150px
}

ul#thumb-list li img{
	width:150px;
	height:auto;
}

ul#thumb-list li:hover{cursor:pointer}

.portfolio-humb-tray{background:url(../images/portfolio--bg.png) repeat !important; }


/*—————————video————————*/
#video{
	max-width:640px;
	margin:120px auto 0;
	padding:0 20px 250px;
	position:relative

}

#video h1{
	color:#efdddd;
	text-transform:uppercase;
	letter-spacing:1px;
	font:24px 'PT Sans Narrow', sans-serif
}

#video iframe{
	width:100%;
	height:360px
}

#video #comments{padding:80px 0 0 0 !important}
.video-humb-tray{background:url(../images/video-bg.png) repeat !important}

.carousel{
	max-width:70%;
	margin:0 auto;
	display:inline-block
}

.carousel li{
	width:140px;
	margin:0 25px 0 0;
	text-align:left;
	padding:5px
}

.carousel img{
	height:95px;
	display:inline-block
}

.carousel span{
	margin:5px 0 0;
	display:block;
	line-height:12px
}
.carousel .preview{
	width:140px;
	height:95px;
	background:#000;
	text-align:center;
}

.carousel .current-video{
	background:#fff;
	color: #000
}


/*—————————resources————————*/
#resources{
	position:relative;
	margin:120px 0 0;
	padding:0 0 0 10px
}

#resources{max-width:800px}

#resources span{
	font:1.5em 'PT Sans';
	background:#fff;
	line-height:2em
}

#resources a{
	color:#000;
	text-decoration:none;
	margin-right:30px;
	padding:0 0.3125em
}

.facebook:hover{background:#141c5d}
.vkcom:hover{background:#597DA3}
.youtube:hover{background:#c4302b}
.geo:hover{background:#58999b}
.google:hover{background:#C3553C}
.twitter:hover{background:#6ECFEF}
.spring:hover{background:#3f88cb}

.facebook:hover , .vkcom:hover, .youtube:hover, .geo:hover, .google:hover, .twitter:hover, .spring:hover{color:#fff !important}


/*—————————blog————————*/
#blog-container{
	position:relative;
	margin:120px 0 0;
	padding-bottom:80px;
	overflow:auto
}
#blog-container > div:first-child{border-top:1px solid #000}

#blog-container > div, #pagination{
	position:relative;
	padding:25px 0 25px 20px;
	border-bottom:1px solid #000;
	text-transform:uppercase
}

#blog-container > div:hover{cursor:pointer}
#blog-container div, #pagination, #blog-container div h2, .comment > .name, #comments .form{font:1em 'PT Sans Narrow', sans-serif}
#blog-container div h2, .comment > .name, .comment > p{margin:0 0 0 50px}

.date{font:.625em 'PT Sans Narrow', sans-serif; margin:.56em 0 0; position:absolute}

#blog-container article, .comment p{
	max-width:760px;
	text-transform:none !important;
	margin:10px 0 0 50px;
	padding:0 20px 0 0;
	display:block
}

#blog-container > div article{display:none}
#blog-container article  p{margin:10px 0 0} 

.show-more, #comments  .button{
	display:block;
	float:right;
	margin:20px 0 0;
	text-decoration:none;
	background:url(../images/show-more.png) repeat-x;
	padding:12px 15px 12px 15px;
	border:1px solid #011a21
}

a.show-more:active{
	background:url(../images/show-more-h.png) repeat-x;
	border: 1px solid #011116
}

.current-article, .current-article:hover{cursor:pointer !important}

#pagination{padding:25px 0 25px 70px}

#pagination  li{
	display:inline-block;
	margin:0 10px 0 0	
}

#pagination > li a{
	padding:3px 12px 5px;
	display:block;
	text-decoration:none
}

#pagination > .first{margin:0 0px 0 25px !important}

/*blog-inner*/
#blog-article{
	float:left;
	padding:0 15px
}

#blog-article article{margin:0.5em 0 0 !important}
#blog-article p{margin:1em 0 0}

#blog-article h1{
	font:28px 'PT Sans Narrow', sans-serif;
	text-transform:uppercase
}

.blog-nav, .comments-title{
	list-style:none;
	font:1.125em PT Sans Narrow, sans-serif
}

.blog-nav{float:left}

.blog-nav li{
	display:inline-block;
	margin:50px 35px 0 0
} 

.blog-nav a{text-decoration:none} 

.blog-nav a:hover{text-decoration:underline}

.date-big{
	font:100px Arial, sans-serif;
	display:block;
	float:right
}


/*—————————about————————*/
#about{
	margin:12% 0 0;
	position:relative;
	padding:0 0 50px 15px
}

#about p{margin:1em 0 0}

#about p:first-of-type{margin-top:25px !important}

#about-nav{
	width:100%;
	z-index:2;
	margin-top: 135px;
	color:#f46924

}

#about-wrap{
	width:5000px;/*——————————————————————————-*/

}

.about-text{
	position:relative;
	width:790px;
	height:400px;
	float:left;
	margin:5px 20px 0 0;
	padding:20px 40px 20px 20px;
	overflow:auto
}

.about-text h1{font:28px 'PT Sans Narrow', sans-serif}

#about-nav li:after{
	content:url(../images/disk-about.png);
	margin-left:0.85em;
	display:inline-block
}


/*—————————contacts————————*/
#contacts{
	margin:120px 0 0px 15px;
	position:relative;
	color: #000;
}

#contacts section{
	font:bold 0.75em  'calibri', sans-serif;
	float:none;
	margin:0px auto;
	letter-spacing:0px
}

#contacts-photo{
	position:absolute;
	bottom:0;
	max-width:30%;
	max-height:30%
}

#links{
	float:left;
	position:absolute
}

#links ul{
	width:160px;
	list-style:none;
	text-transform:uppercase;
	margin:0 0 50px 0
}

#links ul li:first-of-type, .feedback-title{
	border-bottom:1px solid #000;
	margin-bottom:10px
}

#links a{
	color:#000;
	text-decoration:none
}

#links a:hover{text-decoration:underline}
#links #facebook:hover a{color:#141c5d !important}
#links #vkcom:hover a{color:#597DA3 !important}
#links #twitter:hover a{color:#6ECFEF !important}

#feedback{
	position:relative;
	width:35%;
	max-width:400px;
	right:0px;
	padding:0 0 0 20px 
}

#feedback .row{
	margin:0 0 10px 0;
	padding:0 1px 0 0
}

#feedback .feedback-title{text-transform:uppercase}

#feedback input , #feedback textarea{
	display:block;
	width:99%;
	padding:7px 0px;
	border:1px solid #000;
	font:12px 'Arial', sans-serif;
	min-width:150px
}

#feedback textarea{
	resize:none;
	min-height:70px
}

#feedback .button{
	width:130px !important;
	margin-top:20px;
	font:normal 1em 'Calibri', sans-serif;
	float:right;
	background:#000;
	color:#fff;
	text-transform:none
}

#feedback .button:hover, #comments .button:hover{
	cursor:pointer;
	border:1px solid #000;
	background:#fff;
	color:#000
}

#feedback .button:active, #comments .button:active{
	cursor:pointer;
	background:#fff;
	color:#000;
	border:1px solid #000;
	margin:21px 0 0
}

.error{border:1px solid #ff0000 !important}
label.error{border:none !important}
label.error,.errorMessage{color:#ff0000}
.errorMessage{font:italic 1em 'Calibri', sans-serif}


/*—————————footer————————*/

footer{
	background:#000;
	position:fixed;
	left:0px; /*For correct position*/
	bottom:0px; /*For correct position*/
	width:100%;
	z-index:3;
	height:30px;
	margin-top:-30px;
	font:9px 'Arial', sans-serif;
	letter-spacing:0px !important
}

footer a, footer{text-decoration:none}
footer a{display:block}

footer img{
	width:26px;
	height:26px;
	display:block;
	float:left
}

#copy{
	float:left;
	position:absolute;
	margin:4px 0 0 15px
}

#copy span{margin-left:6px}
#copy a:hover{text-decoration:underline}
footer menu{
	text-align:center;
	height:30px;
	min-width:500px
}

footer menu  li{
	height:100%;
	margin:0 1px 0
}

footer li a:hover, .current{
	color:#000;
	background:#fff
}

footer li a:active{background:#f94c9b}

.current, footer li a{
	padding:10px 10px 5px;
	height:100%;
}


/*——————-404 page—————*/
#page404{
	font:16px 'Arial', sans-serif; 
	position:absolute;
	background:#333
}

#page404 div{
	margin:150px auto 0 auto;
	padding:0 0 50px;
	width:400px
}

#page404 div span{font-size:200px}
#page404 a{color:#d94207}


/*—————————comments————————*/

#comments{
	padding:80px 0 0 15px !important;
	clear:both;
	max-width: 760px
}

#comments  div:hover{background:none !important}

#comments > .form{
	margin: 50px 0 0;
}

.comment{
	margin: 20px 0 0;
	padding: 0 0 25px 0	
}

.comment, .comments-title{border-bottom: 2px solid rgba(255, 255, 255, 0.1)}
.comments-title{padding: 0 0 10px 0}
#comments .row{margin: 15px 0 0}
#comments .form .comments-title{border-bottom: none !important}

#comments input, #comments textarea{
	display: block;
	background: rgba(255, 255, 255, 0.25);
	padding: 7px 3px;
	border: none !important;
	font: 12px 'Arial', sans-serif;
	color: #fff;
	min-width: 300px
}

#comments textarea{
	width: 100%;
	height: 100px;
	resize: none
}

#comments .button{
	font-size: 11px;
	min-width: 80px !important;
	cursor: pointer;
	float: right;
	background: #000
}


/*—————————preloader————————*/
#container{width:960px; margin:0px auto; }
.preloader{  
    background: url(../images/89.gif) center center no-repeat #ffffff;   
    display: block !important;
}

Svatov · October 5, 2012

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

.show-more, #comments  .button{
        display:block;
        float:right;

.index .child:nth-child(2),.index .child:nth-child(15),.index .child:nth-child(28){left:-599px;top:-267px}
.index .child:nth-child(3),.index .child:nth-child(16),.index .child:nth-child(29){left:-301px;top:-529px}

Вот пару моментов, которые сразу бросились в глаза...нужно немного поучиться еще

code_monster · October 5, 2012

В общем ..оценил 2, только из-за того, что используются сокращения и выкладывали здесь работы и похуже).
.show-more, #comments  .button{
        display:block;
        float:right;
.index .child:nth-child(2),.index .child:nth-child(15),.index .child:nth-child(28){left:-599px;top:-267px}
.index .child:nth-child(3),.index .child:nth-child(16),.index .child:nth-child(29){left:-301px;top:-529px}
Вот пару моментов, которые сразу бросились в глаза...нужно немного поучиться еще

Что за сокращения?

amelice · October 5, 2012

что ожидаете от поведения этих блоков?

#copy{
        float:left;
        position:absolute;
        margin:4px 0 0 15px
}

#links{
        float:left;
        position:absolute
}

на что влияет количество нулей?

*{      
        margin:0 0;
        padding:0 0;
        font-size:100.01%
}

Viper · October 5, 2012

Плохо:

*

,

!important

,

header img

,

разный стиль написания

Бессмысленно:

:0 0;

0px

#ffffff

Не читабельно:

/*———————index———————*/

img{border:0px}

(отсутствие пробелов)

.wrapper, #humb-tray-wrap, #thumb-tray, ul#thumb-list li, .carousel .preview, #blog-container article, .comment p, #about-wrap, #contacts, #feedback .row, footer menu{

...z-index:0
}

Edited October 5, 2012 by Viper

Catherine · October 5, 2012

Уверены, что это работает?

.index{
    margin:0 auto;
    position:fixed
}

Прежде чем выкладывать css на обсуждение, подумайте над назначением каждой строки.

code_monster · October 6, 2012

что ожидаете от поведения этих блоков?

#copy{
        float:left;
        position:absolute;
        margin:4px 0 0 15px
}

#links{
        float:left;
        position:absolute
}

на что влияет количество нулей?

*{      
        margin:0 0;
        padding:0 0;
        font-size:100.01%
}

Ахахах... Сам понять не могу. Зачем абсолют и флоат одновременно? Ладно. Буду автора сего творения пытать в воскресенье по этому поводу)

Sign In

Оцените css файл

11 members have voted

Recommended Posts

ar00

Link to comment

Share on other sites

Svatov

Link to comment

Share on other sites

code_monster

Link to comment

Share on other sites

amelice

Link to comment

Share on other sites

Viper

Link to comment

Share on other sites

Catherine

Link to comment

Share on other sites

code_monster

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information