Black Bird Clothing PDF

BlackBirdClothing
Index.html
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="utf8">
<title>BlackBirdCo.</title>
<metaname="description"content="">
<metaname="author"content="">
<metaname="viewport"content="width=devicewidth,initialscale=1">
<linkrel="stylesheet"href="css/style.css">
<linkrel="icon"type="image/png"href="images/favicon.png">
</head>
<body>
<headerclass="birdbox">
<divclass="backbird"></div>
<divclass="logo"></div>
<divclass="forebird"></div>
</header>
<sectionclass="content">
<article>
<h1>UniqueStyle</h1>
<hr>
<p>Loremipsumdolorsitamet,consecteturadipisicingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagna
aliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.Duisaute
iruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariatur.Excepteursintoccaecatcupidatatnon
proident,suntinculpa.</p>
<hr>
<divclass="clothespics">
<divclass="rowimgrow">
<figureclass="columnsfour"><imgsrc="images/model1.jpg">
<figcaption>BlackBirdSweater<strong>$135</strong></figcaption>
</figure>
<figcaption>BlackBirdTrousers<strong>$135</strong></figcaption>
</figure>
<figcaption>BlackBirdJacket<strong>$135</strong></figcaption>
</figure>
</div>
</figure>
</figure>
</figure>
</div>
</figure>
</figure>
</figure>
</div>
</div>
<h1>FineTayloring</h1>
<hr>
<hr>
<divclass="largewindow">
<divclass="windowtint">
<divclass="promotext">FallSuits<strong><span>from</span>$99</strong><ahref=""class="windowcta">Shop
Now</a></div>
</div>
</div>
<h1>RichHistory</h1>
<hr>
<hr>
<divclass="blogpostsrow">
<divclass="postcolumnsfourpost1">
<h5>PostTitle</h5><imgsrc="images/posts/one.jpg">
<p>Incididuntutlaboreetdoloremagna.</p>
<p><ahref=""class="button">ReadMore</a></p>
</div>
<h5>PostTitle</h5><imgsrc="images/posts/two.jpg">
<p>Loremipsumdolorsitamet.</p>
</div>
<h5>PostTitle</h5><imgsrc="images/posts/three.jpg">
<p>Duisauteiruredolorinreprehenderit.</p>
</div>
</div>
</article>
</section>
<footer>
<divclass="rowfooterstuff">
<divclass="columnsthree"><strong>FINDUSON</strong>
<ul>
<li><ahref="">Twitter</a></li>
<li><ahref="">Facebook</a></li>
<li><ahref="">Pinterest</a></li>
<li><ahref="">Instagram</a></li>
</ul>
</div>
<divclass="columnsthree"><strong>OTHERSHOPS</strong>
<ul>
<li><ahref="">RedRobin</a></li>
<li><ahref="">EmeraldEagle</a></li>
<li><ahref="">CrimsonCrane</a></li>
<li><ahref="">AuburnAbbot</a></li>
</ul>
</div>
<divclass="columnssix">
<p><strong>SignUpforthenewsletter</strong>Loremipsumdolorsitamet,consecteturadipisicingelit.</p>
<formclass="row">
<divclass="columnseight">
<inputtype="email"placeholder="YourEmail"class="ufullwidth">
</div>
<divclass="columnsfour">
<inputtype="submit"class="buttonprimary">
</div>
</form>
</div>
</div>
</footer>
<scriptsrc="js/jquery2.1.3.min.js"></script>
<scriptsrc="js/functions.js"></script>
</body>
</html>
Functions.js
varpContainerHeight=$('.birdbox').height();
$(window).scroll(function(){
varwScroll=$(this).scrollTop();
if(wScroll<=pContainerHeight){
$('.logo').css({
'transform':'translate(0px,'+wScroll/2+'%)'
});
$('.backbird').css({
});
$('.forebird').css({
});
//LandingElements
if(wScroll>$('.clothespics').offset().top($(window).height()/1.2)){

$('.clothespicsfigure').each(function(i){
setTimeout(function(){
$('.clothespicsfigure').eq(i).addClass('isshowing');
},(700*(Math.exp(i*0.14)))700);
});
//Promoscope
if(wScroll>$('.largewindow').offset().top$(window).height()){
$('.largewindow').css({'backgroundposition':'center'+(wScroll$('.largewindow').offset().top)+'px'});
varopacity=(wScroll$('.largewindow').offset().top+400)/(wScroll/5);
$('.windowtint').css({'opacity':opacity});
//FloatingElements
if(wScroll>$('.blogposts').offset().top$(window).height()){
varoffset=(Math.min(0,wScroll$('.blogposts').offset().top+$(window).height()350)).toFixed();
$('.post1').css({'transform':'translate('+offset+'px,'+Math.abs(offset*0.2)+'px)'});
$('.post3').css({'transform':'translate('+Math.abs(offset)+'px,'+Math.abs(offset*0.2)+'px)'});
}
});
Layout1.sass
//BaseStyles
body
fontfamily:"OpenSans",sansserif
h1
color:#ccc
weight:300
figure
margin:auto
.content
position:relative
background:white
marginbottom:400px
overflow:hidden

article
padding:100px0
maxwidth:640px
margin:0auto
textalign:center
img
maxwidth:100%
//Parallax
.birdbox
position:relative
height:600px
background:
image:url(../images/birdbg.jpg)
size:auto600px
position:topcenter
attachment:fixed
overflow:hidden
.logo
height:100px
width:100%
background:
image:url(../images/blackbirdlogo.svg)
position:center
repeat:norepeat
position:absolute
top:50%
margintop:50px
.forebird
width:960px
height:733px
background:
image:url(../images/forebird.png)
repeat:norepeat
position:rightbottom
position:absolute
left:50%
marginleft:480px
top:380px
.backbird
width:960px
height:298px
background:
image:url(../images/backbird.png)
repeat:norepeat
position:topleft
position:absolute
left:50%
marginleft:480px
//ModelGrid
.clothespics
marginbottom:100px
figure
marginbottom:20px
position:relative
opacity:0
transform:translateX(30px)
transition:all0.4seaseinout
overflow:hidden
cursor:pointer
&.isshowing
opacity:1
transform:translateX(0px)
img
display:block
transform:scale(1)
&:hover
figcaption
left:0%
img
transform:scale(1.1)
figcaption
position:absolute
bottom:10px
left:100%
background:black
color:white
padding:2px8px
fontsize:11px
//largewindow
.largewindow
height:640px
background:
image:url(../images/model2.jpg)
position:center0px
repeat:repeaty
attachment:fixed
margintop:100px
marginbottom:100px
borderradius:50%
position:relative

.windowtint
backgroundcolor:rgba(0,0,0,0.5)
position:absolute
top:0
left:0
right:0
bottom:0
borderradius:50%
display:flex
justifycontent:center
alignitems:center
opacity:0
.promotext
color:white
fontweight:100
fontsize:50px
lineheight:1.2
strong
display:block
fontsize:30px
span
font:
weight:300
size:18px
style:italic
color:rgba(255,255,255,0.6)
.windowcta
fontsize:20px
textdecoration:none
color:white
border:1pxsolidwhite
padding:10px20px
&:hover
background:white
color:black
//posts
.blogposts
margintop:100px
.post
border:1pxsolid#e1e1e1
padding:20px20px0
background:white
position:relative
.post1
transform:translate(100px,20px)

.post2
zindex:2
.post3
transform:translate(100px,20px)
//footer
footer
background:black
color:white
padding:40px0
position:fixed
bottom:0
width:100%
zindex:1
.footerstuff
maxwidth:640px
margin:0auto
a
color:white
input
color:#666

Black Bird Clothing PDF

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Black Bird Clothing PDF

Încărcat de

Drepturi de autor:

Formate disponibile

BlackBirdClothing

S-ar putea să vă placă și