Skip to content

Commit

Permalink
Small fix;
Browse files Browse the repository at this point in the history
  • Loading branch information
Kudinov Fedor committed Jan 16, 2019
1 parent 6f0da87 commit a83ea60
Show file tree
Hide file tree
Showing 6 changed files with 71 additions and 287 deletions.
306 changes: 49 additions & 257 deletions demo/css/style.css
View file
Original file line number Diff line number Diff line change
@@ -1,268 +1,60 @@
html, body, div, p, input, ul, ol, h1 {
margin: 0;
padding: 0;
}

body {
background: url('../img/bg.gif');
font-family: Arial, sans-serif;
}

table {
border-collapse: collapse;
}

a {
color: #294c7f;
text-decoration: underline;
position: relative;
}

a:active {
top: 1px;
}

.bg {
width: 100%;
height: 100%;
background: url('../img/bg.gif');
position: fixed;
z-index: 0;
}

.wrap {
position: relative;
width: 1000px;
height: auto;
margin: 0 auto;
background: url('../img/bg_cont.png');
padding: 25px 0;
z-index: 1;
}

.header {
margin-bottom: 43px;
position: relative;
}

.logo {
display: block;
width: 257px;
height: 59px;
background: url('../img/logo.png') no-repeat;
margin: -2px 0 0 -2px;
}

.language {
color: #9DC8F2;
font-size: 16px;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
font-weight: bold;
}

.fl {
float: left;
}

.fr {
float: right;
}

.clear {
clear: both
}

.float_link {
position: absolute;
top: 8px;
right: 8px;
}

.download_shine {
background: url('../img/button_download_shine.png') no-repeat;
width: 304px;
height: 309px;
position: absolute;
right: -50px;
top: -60px;
z-index: -1;
}

.download_button {
display: block;
background: url('../img/button_download.png') no-repeat;
cursor: pointer;
width: 204px;
height: 204px;
margin-right: -2px;
margin-top: -2px;
}

.model_shine {
width: 585px;
height: 585px;
background: url('../img/model_shine.png') no-repeat;
top: -80px;
left: -160px;
position: absolute;
z-index: -1;
}

.model {
width: 400px;
height: 400px;
background: url('../img/model.png') 0 5px no-repeat;
}

.model.ru {
background: url('../img/model_ru.png') 0 5px no-repeat;
width: 300px;
}

.video {
margin-top: 58px;
}
html, body, div, p, input, ul, ol, h1 {margin:0;padding:0;}
body {background:url(../img/bg.gif);font-family:Arial;}
table {border-collapse: collapse;}

a {color:#294c7f;text-decoration:underline;position:relative;}
a:active {top:1px;}

div.bg {width:100%;height:100%;background:url(../img/bg.gif);position:fixed;z-index:0;}
div.wrap {position:relative;width:1000px;height:auto;margin:0 auto;background:url(../img/bg_cont.png);padding:25px 0px;z-index:1;}
.header {margin-bottom:43px;position:relative;}
a.logo {display:block;width:257px;height:59px;background:url(../img/logo.png) no-repeat;margin: -2px 0 0 -2px;}
.language {color:#9DC8F2;font-size:16px;position:absolute;top:0;right:0;cursor:pointer;font-weight:bold;}
.fl {float:left;}
.fr {float:right;}
.clear {clear:both}
.float_link {position:absolute;top:8px;right:8px;}
div.download_shine {background: url(../img/button_download_shine.png) no-repeat;width:304px;height:309px;position:absolute;right:-50px;top:-60px;z-index:-1;}
a.download_button {display:block;background: url(../img/button_download.png) no-repeat;cursor:pointer;width:204px;height:204px;margin-right:-2px;margin-top:-2px;}
div.model_shine {width:585px;height:585px;background: url(../img/model_shine.png) no-repeat;top:-80px;left:-160px;position:absolute;z-index:-1;}
div.model {width:400px;height:400px;background: url(../img/model.png) 0px 5px no-repeat;}
div.model.ru {background: url(../img/model_ru.png) 0px 5px no-repeat;width:300px;}
div.video {margin-top:58px;}

/* block */
.section {
margin-bottom: 50px;
position: relative;
display: none
}

.block {
background-color: #9dc8f2;
color: #111;
font-size: 12px;
font-weight: normal;
padding: 0 10px 10px 10px;
}

.block h1 {
font-size: 14px;
font-weight: bold;
margin-top: 8px;
margin-bottom: 15px;
}

.block p {
line-height: 16px;
}

.block ol, .block ul {
line-height: 16px;
margin-left: 16px;
}

.block ol span {
color: #1b672b;
margin-left: 8px;
}

.block .bold {
font-weight: bold;
}

.block .bold span {
color: #111;
font-weight: normal;
margin-left: 0;
}
.section {margin-bottom:50px;position:relative;display:none}
.block {background-color:#9dc8f2;color:#111;font-size:12px;font-weight:normal;padding:0px 10px 10px 10px;}
.block h1 {font-size:14px;font-weight:bold;margin-top:8px;margin-bottom:15px;}
.block p {line-height:16px;}
.block ol, .block ul {line-height:16px;margin-left:16px;}
.block ol span {color:#1b672b;margin-left:8px;}
.block ol.bold {font-weight:bold;}
.block ol.bold span {color:#111;font-weight:normal;margin-left:0;}

/* metrics */
.w1000 {
width: 980px;
}

.w750 {
width: 730px;
}

.w600 {
width: 580px;
}

.w400 {
width: 380px;
}

.w475 {
width: 455px;
}
.w1000 {width:980px;}
.w750 {width:730px;}
.w600 {width:580px;}
.w400 {width:380px;}
.w475 {width:455px;}

.h200 {
height: 190px;
}

.h400 {
height: 390px;
}

.h450 {
height: 430px;
}
.h200 {height:190px;}
.h400 {height:390px;}
.h450 {height:470px;}

/* table */
.parameters {
color: #9dc8f2;
font-size: 12px;
width: 100%
}

.parameters .odd td {
background: url('../img/bg_cont.png');
}

.parameters td, .parameters th {
border: 1px solid #9dc8f2;
padding-left: 5px;
text-align: left;
}

.parameters .number {
width: 21px;
}

.parameters .param {
width: 200px;
}

.parameters .type {
width: 50px;
}

.parameters .values {
width: 150px;
}
.parameters {color:#9dc8f2;font-size:12px;width:100%}
.parameters tr.odd td{background:url(../img/bg_cont.png);}
.parameters td, .parameters th {border:1px solid #9dc8f2;padding-left:5px;text-align:left;}
.parameters th.number {width:21px;}
.parameters th.param {width:200px;}
.parameters th.type {width:50px;}
.parameters th.values {width:150px;}

/* footer */
.footer {
width: auto;
text-align: center;
font-size: 12px;
color: #9DC8F2;
margin-top: 25px;
}

.footer a {
color: #9DC8F2;
}
.footer {width:auto;text-align:center;font-size:12px;color:#9DC8F2;margin-top:25px;}
.footer a {color:#9DC8F2;}

/* test */
.test {
position: relative;
display: block;
top: 150px;
margin: 0 auto;
width: 333px;
height: 374px;
}

.test_text {
color: #9dc8f2;
width: 960px;
margin: 200px auto;
}
img.test {position:relative;display:block;top:150px;margin:0 auto;width:333px;height:374px;}
.test_text {color:#9dc8f2; width:960px;margin:200px auto;}
44 changes: 18 additions & 26 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,34 +111,28 @@ <h1>How to start?</h1>
<a href="js/jquery.pixlayout.min.js">jQuery.pixlayout v. 0.9.8 pack</a>
</p>
</div>
<p>
</p>
<pre>
&ltscript type="text/javascript" src="jquery.js"&gt&lt/script&gt
&ltscript type="text/javascript" src="jquery.pixlayout.js"&gt&lt/script&gt
&ltscript type="text/javascript"&gt
$(function(){
$.pixlayout("/path_to_picture/picture.ext");
});
&lt/script&gt
&ltscript type="text/javascript" src="jquery.js"&gt&lt/script&gt
&ltscript type="text/javascript" src="jquery.pixlayout.js"&gt&lt/script&gt
&ltscript type="text/javascript"&gt
$(function(){
$.pixlayout("/path_to_picture/picture.ext");
});
&lt/script&gt
</pre>
<p></p>
<h1 class="lang_wrap" id="start_2">Some parameters transmission and context example:</h1>
<p>
</p>
<pre>
$(function(){
$.pixlayout({
src: "/img/layout.jpg",
opacity: 0.8,
top: 50,
center: true,
clip: true,
show: true
}, ".wrapper");
});
$(function(){
$.pixlayout({
src: "/img/layout.jpg",
opacity: 0.8,
top: 50,
center: true,
clip: true,
show: true
}, ".wrapper");
});
</pre>
<p></p>
</div>
<div class="clear"></div>
</div>
Expand Down Expand Up @@ -231,9 +225,7 @@ <h1>Context:</h1>
Example:
</p>
</div>
<pre>
$.pixlayout("img/picture.png", "div.wrapper");
</pre>
<pre>$.pixlayout("img/picture.png", "div.wrapper");</pre>
<div class="lang_wrap" id="context_2">
<h1>Displacement:</h1>
<ol>
Expand Down
Loading

0 comments on commit a83ea60

Please sign in to comment.