- var glob =
- [
- {
- l:"#home",
- n: "Home"
- },
- {
- l:"#about",
- n: "Team"
- },
- {
- l:"#services",
- n: "Services"
- },
- {
- l:"#testimonials",
- n: "Testimonials"
- },
- {
- l:"#news",
- n: "News"
- }
- ]
- var fig_url = 'https://source.unsplash.com/user/erondu/'
- var slider_one = [
- {
- s: "b_on",
- name: "Team lead",
- fig: "200x200?1"
- },
- {
- s: "b_tw",
- name: "Web Designer",
- fig: "200x200?2"
- },
- {
- s: "b_th",
- name: "Frontend developer",
- fig: "200x200?3"
- },
- {
- s: "b_fo",
- name: "Backend developer",
- fig: "200x200?4"
- },
- {
- s: "b_fi",
- name: "SEO marketer",
- fig: "200x200?5"
- }
- ]
- var bars = [
- {
- n: "Comunity",
- v: "77"
- },
- {
- n: "Team and Developers",
- v: "65"
- },
- {
- n: "Marketing",
- v: "88"
- },
- {
- n: "Design",
- v: "80"
- }
- ]
- var news = [
- {
- h: "News Company",
- d: "October 09, 2019",
- t: "Update"
- },
- {
- h: "News Company",
- d: "August 28, 2018",
- t: "Design"
- },
- {
- h: "News Company",
- d: "April 30, 2018",
- t: "Development"
- },
- {
- h: "News Company",
- d: "October 30, 2018",
- t: "Tricks"
- },
- {
- h: "News Company",
- d: "January 26, 2012",
- t: "Frontend"
- },
- {
- h: "News Company",
- d: "September 5, 2011",
- t: "Marketing"
- }
- ]
- var w_1 = [
- {
- icon: "fa fa-behance",
- link: "https://www.behance.net/gallery/86619879/Landing-Page-IOGO-MEDIA-(Concept-Update)",
- text: "Behance"
- },
- {
- icon: "fa fa-dribbble",
- link: "https://dribbble.com/andrejsharapov",
- text: "Dribbble"
- },
- {
- icon: "fa fa-codepen",
- link: "https://codepen.io/andrejsharapov",
- text: "CodePen"
- },
- {
- icon: "fa fa-twitter",
- link: "https://twitter.com/andrejsharapov",
- text: "Twitter"
- },
- {
- icon: "fa fa-github",
- link: "https://github.com/madeas",
- text: "GitHub"
- }
- ]
- var w_2 = [
- {
- h: "Heading",
- list: ["Forums", "License", "Guest Posting", "Advertise"]
- }
- ]
- var w_3 = [
- {
- h: "Heading",
- list: ["Subscribe", "Customers", "FAQ", "Support"]
- }
- ]
- var w_4 = [
- {
- icon: "fa fa-map-o",
- text: "County, Street name - number"
- },
- {
- icon: "fa fa-phone",
- text: "+7 999 999 00 00"
- },
- {
- icon: "fa fa-envelope-o",
- text: "compa[email protected]"
- },
- {
- icon: "fa fa-clock-o",
- text: "Mon.-Fri.: 10-20 Sun.: 12-16"
- }
- ]
.smooth
header#top
h3 iOGO
nav
ul
each val in glob
li
a(href= val.l title= val.n) #{val.n}
main
section#home(style="background-image: url(https://source.unsplash.com/collection/190727/1600x1200?1)")
.content
div
h1 iOGO MEDiA
svg.title
text(x="0" y="40") iOGO MEDiA
path(d="M 0 66 50 61")
p.lead
| If you click on navigation links, smooth scrolling does not work, perhaps the functions are not supported by your browser. You can check the support on the
|
a(class="leadlink" href="https://caniuse.com/#search=scroll-behavior" target="_blank") Can I use
| site.
p.lead
| And also added a parallax effect and logo animation, a sample of which you
|
a(href="https://codepen.io/andrejsharapov/pen/PVJrLO" target="blank" class="leadlink") can find here.
.blur
form
input(type="text", name="" placeholder="Email:")
input(type="text", name="" placeholder="Password:")
a(class="button" title="Behance" target="_blank" rel="noopener noreferrer" href="https://www.behance.net/gallery/86619879/Landing-Page-IOGO-MEDIA-(Concept-Update)") Click here
section#about
h2 TEAM OF EXPERTS
p Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore nam fugit quis qui possimus eos asperiores laudantium, dicta nisi velit non culpa animi inventore necessitatibus a repudiandae! Cupiditate, nisi voluptates?
.slider.autoplay
each f in slider_one
.block(class= f.s)
figure
img(src=fig_url + f.fig, alt="")
figcaption Name Surname
p= f.name
p Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, impedit, aut blanditiis officiis quisquam atque consequuntur laborum odit necessitatibus doloribus ab nam accusantium molestiae id veniam aspernatur nihil fugit eius.
section#services
.grid.g_two
div
h2 Services
p Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore nam fugit quis qui possimus eos asperiores laudantium, dicta nisi velit non culpa animi inventore necessitatibus a repudiandae! Cupiditate, nisi voluptates?
p Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rem, odio. Consequatur ipsam eligendi debitis accusamus iure veniam aut eius maiores, obcaecati, recusandae fuga nostrum! Sint iure doloremque ipsum adipisci consequuntur.
p Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, impedit, aut blanditiis officiis quisquam atque consequuntur laborum odit necessitatibus doloribus ab nam accusantium molestiae id veniam aspernatur nihil fugit eius.
.flex.column
each v in bars
.flex.column
.flex.bar_val
h3= v.n
span= v.v + '%'
progress(value=v.v max="100")
section#testimonials
h2 Testimonials
p Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rem, odio. Consequatur ipsam eligendi debitis accusamus iure veniam aut eius maiores, obcaecati, recusandae fuga nostrum! Sint iure doloremque ipsum adipisci consequuntur.
.slider.tes
each f in slider_one
div.blockquote
img(src=fig_url + f.fig, alt="")
.author Name Surname
.pos Position
blockquote
p Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita dolorum ea dolore adipisci.
section#news
h2 Market News
.grid.g_three.news
each b in news
.post
h3= b.h
.date= b.d
p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet cum mollitia autem ut, optio nisi nemo officia voluptatum corrupti doloremque accusamus ab impedit odit quod neque corporis deserunt magni incidunt!
.tags
a(href="#")= b.t
section#letter
h2 Subscribe to always be up to date in our latest news!
p Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium reprehenderit nihil eligendi ad nostrum! Necessitatibus impedit perferendis explicabo adipisci debitis fugiat quisquam aliquam non maiores aliquid, error, hic rem dolorem!Ducimus accusamus et id excepturi ad nemo, hic dolor, mollitia expedita tempora nulla quasi rerum voluptates ipsum sint distinctio, perferendis quis. Placeat nam et cumque aut odio id possimus! Tempore.
form.flex(action="")
input(type="text", name="" placeholder="Enter your email...")
input.button(type="submit", value="Subscribe")
footer#bottom
.widgets
div.f_logo
h3.foo_logo iOGO
.widget
h5 Follow me
ul
each w in w_1
li
i(class= w.icon aria-hidden="true")
a(href= w.link title= w.text target="_blank" rel="noopener noreferrer") #{w.text}
.widget
each w in w_2
h5= w.h
ul
li= w.list[0]
li= w.list[1]
li= w.list[2]
li= w.list[3]
.widget
each w in w_3
h5= w.h
ul
li= w.list[0]
li= w.list[1]
li= w.list[2]
li= w.list[3]
.widget
h5 Contacts
ul
each w in w_4
li
i(class= w.icon aria-hidden="true")
| #{w.text}
.copy
p © 2019 with
span.heart ♥
a(href="https://twitter.com/andrejsharapov" target="_blank" rel="noopener noreferrer") Andrej Sharapov
p
a(href="#home") Back ↑ to top
View Compiled
colone = #191a1d
coltwo = #1d1e22
heart = #df2359
light = #ffffff
bdr = #312d3c
.str-style
stroke-dasharray 700
stroke-dashoffset 1000
animation dash 4s linear forwards
.cur
cursor move
cursor grab
cursor -moz-grab
cursor -webkit-grab
// @extend .cur
.cur-act
cursor -webkit-grabbing
cursor -moz-grabbing
cursor -o-grabbing
cursor grabbing
// @extend .cur-act
.before-style
position absolute
top calc(100% + 4px)
left 0
content ''
width 20px
height 2px
background-color light
transform-origin 0 100%
transform rotate(-5deg)
transition all 0.2s ease-out
*,
::before,
::after
box-sizing border-box
margin 0
::-webkit-scrollbar
width 8px
height 6px
::-webkit-scrollbar-track
background-color colone
::-webkit-scrollbar-thumb
border-radius 1em
background-color bdr
&:hover
background-color heart
body
height 100vh
overflow hidden
margin 0
line-height 1.5
font-family 'Inconsolata', monospace
color light
background-color colone
.smooth
scroll-behavior smooth
overflow-y scroll
margin 0 auto
width calc(100% - 1em)
padding 0 1em
height 100%
a
text-decoration none
color light
&:hover,
&.active
color heart
ul
list-style-type none
margin 0
padding 0
header,
footer
position relative
padding 2em 3em
display flex
align-items center
font-size 1rem
header
position sticky
top 0
z-index 4
padding 1em
min-height 10vh
justify-content space-between
background-color colone
@media (max-width: 768px)
flex-direction column
h3
position relative
margin 0
font-family 'Montserrat', sans-serif
font-size 2rem
color heart
&::before
@extend .before-style
background-color heart
width 30px
ul
margin 1em 0
display flex
width 100%
justify-content flex-end
align-items center
li
position relative
margin 0 1em
&::before
@extend .before-style
a
text-transform uppercase
font-family 'Montserrat', sans-serif
font-weight 500
&:hover
&::before
width 100%
background-color heart
@media (max-width: 576px) {
nav {
display none
}
}
input
margin-bottom 1em
min-height 3em
width 45%
font-size 1rem
color light
border 0
border-bottom 2px solid light
background none
&::placeholder
position relative
top 0
color inherit
transition all 0.2s linear
&:focus
outline none
&::placeholder
top -1.25em
font-size 0.825rem
.button
position relative
margin-top 1em
padding 1em 3em
text-transform uppercase
display block
font-size 1rem
cursor pointer
font-weight 600
color light
border 3px solid heart
border-radius 0.35em
background heart
box-shadow 0 6px 40px rgba(colone, 0.25)
&:hover
color light
section
position relative
padding 1.25em 1em
display flex
width 100%
min-height 100vh
flex-direction column
justify-content center
align-items center
border-radius 1em
background-color colone
&:nth-child(odd)
background-color coltwo
h2
position relative
text-transform uppercase
margin-bottom 1em
font-family 'Montserrat', sans-serif
&::before
@extend .before-style
width 50px
&#home
background-position center center
background-repeat no-repeat
background-size cover
&::before
position absolute
content ''
top 0
left 0
z-index 0
width 100%
height 100%
background-color colone
opacity .5
h1
display none
.content
z-index 1
@media (min-width: 991px)
display grid
grid-template-columns 1fr minmax(40%, auto)
grid-gap 1em
.title
display block
width 100%
height 100px
font-family 'Montserrat', sans-serif
transform scale(0.9)
font-size 2.5rem
@media (min-width: 480px)
font-size 3rem
font-weight 600
text
fill none
stroke light
stroke-width 2
stroke-linecap round
stroke-dasharray 700
stroke-dashoffset 1000
animation dash 3s linear forwards
path
stroke light
stroke-width 4
stroke-dasharray 700
stroke-dashoffset 1000
animation dash 4s ease-in forwards
.lead
font-size 1.25rem
a
color heart
.blur
position relative
margin 1em auto
padding 1em
overflow hidden
width 100%
border-radius 0.35em
background-color rgba(white, .25)
backdrop-filter blur(10px)
form
position relative
margin auto
padding 1em
display flex
width 100%
height 100%
flex-direction column
align-items center
border 2px solid light
border-radius 0.35em
&#services
min-height 50vh
&#about
.block
position relative
margin 0.5em auto
padding 50px
overflow hidden
display flex !important
width 100%
height 100%
flex-direction column
justify-content center
align-items center
text-align center
border 4px solid bdr
border-radius 0.75em
transition all 0.2s linear
will-change transform
figure
position relative
z-index 1
min-height 75px
img
margin auto
border-radius .5em
figcaption
position relative
padding-top 1em
font-weight 700
color heart
p
margin 0
&.active,
&:hover
background-color bdr
transform translateY(-10px)
&#letter
min-height 50vh
form
margin-top 1em
width 80%
flex-direction column
justify-content space-around
@media (min-width: 768px)
flex-direction row
align-items center
justify-content space-between
input
margin .5em auto
width 100%
@media (min-width: 768px)
width auto
input[type='text']
padding 1em 0.5em
width 100%
border 2px solid light
border-radius .35em
@media (min-width: 768px)
width 45%
&#testimonials
.slick-slide
text-align center
&:focus
outline none
div
div
display flex
flex-direction column
justify-content center
img
margin 0 auto 1em
border-radius .5em
.blockquote
position relative
overflow hidden
margin-top 1.5em
padding 1em 2em
border-radius 1em
border 4px solid bdr
transition all 0.2s linear
&::before
position absolute
top -20px
right 10px
z-index 0
content '\f10d'
font-family 'FontAwesome'
font-size 5rem
color coltwo
opacity 0.8
.author
position relative
z-index 1
display block
font-size 1.25rem
color heart
font-weight 600
.pos
position relative
z-index 1
padding-bottom 0.25em
display block
font-size 1.25rem
border-bottom 1px solid coltwo
&:hover
background-color bdr
&#news
.post
padding: 0.25em 0.5em
display: flex
width: 100%
flex-direction: column
justify-content: space-between
border: 4px solid transparent
border-radius: 0.35em
transition: transform 0.2s linear
h3
margin: 0
&:hover
color: heart
.date
color: darken(light, 60%)
.tags
position: relative
padding: 0.5em 0
padding-left: 30px
border-top: 1px solid bdr
color: darken(light, 60%)
a
color: darken(light, 60%)
&::before
position: absolute
left: 0
content: '\f02c'
font-family: 'FontAwesome'
p
margin: 0
&:hover
transform: scale(0.98)
background-color: colone
&:hover
h3
color: heart
.grid
display grid
grid-gap 2em
&.g_three
@media (min-width: 991px)
grid-template-columns repeat(3, 1fr)
&.g_four
@media (min-width: 991px)
grid-template-columns repeat(4, 1fr)
&.g_two
@media (min-width: 991px)
grid-template-columns 1fr minmax(300px, auto)
.flex
display flex
width 100%
align-items center
&.column
flex-flow column wrap
justify-content space-between
.bar_val
justify-content flex-end
h3
margin-right 1em
@media (min-width: 768px)
justify-content space-between
progress
position relative
margin 1em 0
&[value]
-webkit-appearance none
appearance none
width 100%
max-width 360px
height 1px
&::-webkit-progress-bar
background-color darken(light, 60%)
border-radius 1em
&::-webkit-progress-value
position absolute
top -2px
left 0
background-color heart
border-radius 1em
height 5px
.slider
width 90%
.slick-track
display flex
align-items center
justify-content center
.slick-arrow
width 40px
height 100%
text-align center
&::before
width inherit
height inherit
font-size 36px
color bdr
transition color 200ms linear
&:hover
&::before
color heart
.slick-slide
display flex
padding 15px
@extend .cur
&:focus
outline none
div
text-align center
display flex
width 100%
align-items stretch
.block
position relative
white-space nowrap
&::before
position absolute
top -25%
right -25%
z-index 0
width 100%
height 100%
content '\f219'
font-family 'FontAwesome'
font-size 12rem
color coltwo
opacity 0.05
&.b_tw
&::before
content '\f121'
&.b_th
&::before
content '\f05b'
&.b_fo
&::before
content '\f25b'
&.b_fi
&:before
content '\f201'
&:focus
outline none
&:active
@extend .cur-act
.slick-dots
position relative
margin-top 0.5em
li
position relative
margin 0 .5em 1.5em
width 20px
height 20px
cursor pointer
border 2px solid bdr
border-radius 50%
background-color coltwo
&:hover,
&.slick-active
background-color bdr
transform scale(1.2)
button
&::before
display none
footer
padding-bottom 1em
width 100%
min-height 35vh
flex-direction column
justify-content space-around
border-top 2px solid bdr
background-color colone
.widgets
@media (min-width: 480px)
display grid
width 100%
grid-gap 1em
grid-template-areas 'l l' 'w1 w2' 'w3 w4'
@media (min-width: 768px)
grid-template-areas 'l w1 w2' 'w3 w4 w4'
@media (min-width: 1024px)
grid-template-areas 'l w1 w2 w3 w4'
.f_logo
grid-area l
margin-bottom 1em
display flex
justify-content center
align-items center
.widget
margin-bottom 1.5em
&:nth-of-type(2)
grid-area w1
&:nth-of-type(3)
grid-area w2
&:nth-of-type(4)
grid-area w3
&:last-child
grid-area w4
.copy
display flex
width 100%
justify-content space-between
align-items center
@media (max-width: 576px)
flex-direction column
text-align center
a
display block
.foo_logo
position relative
font-family 'Montserrat', sans-serif
color heart
&::before
@extend .before-style
background-color heart
h5
margin-bottom 1em
text-transform uppercase
font-family 'Montserrat', sans-serif
&.follow
color heart
li
will-change transform
transition transform 200ms ease-in
i
opacity 0.5
&:hover,
&.active
transform translateX(5px)
.copy
margin-top 1em
border-top 2px solid bdr
p
margin 0.75em 0 0
.heart
position relative
display inline-block
color heart
animation hearts 0.6s cubic-bezier(0.18, 0.89, 0.29, 1.05) infinite
@keyframes dash
to
stroke-dashoffset 0
fill white
@keyframes hearts
50%
transform scale(1.4)
View Compiled
function scrollh() {
$(".smooth").on("scroll", function() {
let scrollPos = $(this).scrollTop();
$(".content").css({
opacity: 1 - scrollPos / 400
});
});
}
scrollh();
$(".autoplay").on("init", function(slick) {
$(".slick-dots").on("click", function() {
$(".autoplay").slick("slickPause");
});
}).slick({
slidesToShow: 3,
slidesToScroll: 3,
dots: true,
autoplay: true,
autoplaySpeed: 2000,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 768,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
$(".tes").on("init", function(slick) {
$(".slick-dots").on("click", function() {
$(".tes").slick("slickPause");
});
}).slick({
slidesToShow: 2,
slidesToScroll: 2,
dots: true,
autoplay: true,
autoplaySpeed: 2000,
responsive: [
{
breakpoint: 991,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
$('.widget:first > ul > li:first').addClass('active');
$('.widget:first > ul > li > a:first').addClass('active');
View Compiled
