landing-discord-red

index.pug

.container.d-flex.flex-column
            .header.d-flex.flex-column.justify-content-between.align-items-center
                nav.topmenu.d-flex.justify-content-center
                    a(href="#about") About
                    .line.align-self-center
                    a(href="#rules") Rules
                    .line.align-self-center
                    a(href="https://discord.gg/red") Join
                .server-info.d-flex.align-items-center.flex-column.text-center
                    h1 Red - Discord Bot
                    a.links-suppressor.join-btn.btn-pill.white(href="https://discord.gg/red") Join Server
                    
            .inner.d-flex.flex-column
                section#about.d-flex.justify-content-between.flex-lg-nowrap.flex-wrap
                    .image.image1(style="flex-grow: 1")
                    .text
                        h2 About
                        p
                            b Red
                            |  is a fully modular bot which comes with sets of features/commands that can be enabled/disabled to your liking, making it customizable exactly how you want. You can turn Red into a trivia bot, an admin bot, a music bot (...) or all of these together
                            br
                            br
                            b The default set of modules includes and it's not limited to:
                            br
                        ul
                            li Moderation features (kick/ban/softban, filters, mod-log...)
                            li Trivia (lists included and you can make new ones!)
                            li Music features (playlists, youtube, soundcloud, queues...)
                            li Stream alerts (twitch/hitbox)
                            li Slot machines (yes, really!)
                            li Custom commands
                            li Imgur/gif search
                            li And much much more
                section.discord-widget
                    iframe.d-flex(src="https://discordapp.com/widget?id=279193513806135296&theme=dark",
                        allowtransparency="true",
                        frameborder="0")
                    
                section#rules.d-flex.justify-content-between.flex-lg-nowrap.flex-wrap.flex-row-reverse
                    .image.image2(style="flex-grow: 1")
                    .text
                        h2 Rules
                        p
                            b Red
                            |  is a fully modular bot which comes with sets of features/commands that can be enabled/disabled to your liking, making it customizable exactly how you want. You can turn Red into a trivia bot, an admin bot, a music bot (...) or all of these together
                            br
                            br
                            b The default set of modules includes and it's not limited to:
                            br
                        ul
                            li Moderation features (kick/ban/softban, filters, mod-log...)
                            li Trivia (lists included and you can make new ones!)
                            li Music features (playlists, youtube, soundcloud, queues...)
                            li Stream alerts (twitch/hitbox)
                            li Slot machines (yes, really!)
                            li Custom commands
                            li Imgur/gif search
                            li And much much more
                            
                section.join.d-flex.justify-content-center
                    .line.align-self-center(style="flex-grow: 1")
                    a.links-suppressor.btn-pill.white(href="https://discord.gg/red") Join Server
                    .line.align-self-center(style="flex-grow: 1")
                            
            .footer.d-flex.justify-content-between.flex-lg-nowrap.flex-wrap
                .d-flex
                    .block.d-flex.flex-column.justify-content-between
                        h3.d-flex Staff
                        span Twentysix26#2152
                        span JennJenn#4953
                        span Will#0234
                        span irdumb#9823
                        span Kowlin#8251
                    .block.d-flex.flex-column.justify-content-between
                        h3.d-flex Moderators
                        span Twentysix26#2152
                        span JennJenn#4953
                        span Will#0234
                        span irdumb#9823
                        span Kowlin#8251
                    
                p.align-self-end Red is a fully modular bot which comes with sets of features/commands that can be enabled/disabled to your liking, making it customizable exactly how you want. You can turn Red into a trivia bot, an admin bot, a music bot (...) or all of these together

landing-discord-red.markdown

landing-discord-red

A Pen by Anton on CodePen.

License.

style.sass

// Fonts
@import 'https://fonts.googleapis.com/css?family=Lato:300,400,700,900'

// Images
$background: url('../img/bg-main.jpg')
$intro: url('../img/top.jpg')
$image1: url('../img/example.jpg')
$image2: url('../img/example-2.jpg')

body, html
  min-height: 100%
  
body
  background-image: $background
  background-size: cover
  background-position: center center
  position: relative
  font-family: 'Lato', sans-serif
  
  &:before
    content: ''
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
    background: rgba(0,0,0,0.8)
    
.container
  background: #25272C
  min-height: 100%
  padding: 0
  
.header
  height: 550px
  width: 100%
  background: $intro
  background-size: cover
  background-position: center center
  position: relative
  
  &:before
    content: ''
    position: absolute
    z-index: 10
    top: 0
    left: 0
    width: 100%
    height: 550px
    background-image: linear-gradient(45deg, rgba(101,128,233,0.73) 0%, #1E6DB6 100%)
    
.topmenu
  position: relative
  z-index: 20
  margin-top: 20px
  
  a
    color: #fff
    text-transform: uppercase
    font-size: 16px
    line-height: 28px
    padding: 0 27px
    text-decoration: none
    
  .line
    display: block
    width: 45px
    border-bottom: 1px solid #fff
    
.server-info
  margin-bottom: 150px
  position: relative
  z-index: 20
  
.inner
  padding: 40px
  
section
  
  .image
    width: 300px
    min-height: 480px
    margin: 40px
    background-position: center center
    background-size: cover
    
    &.image1
      background-image: $image1
      
    &.image2
      background-image: $image2
  
  .text
    padding: 40px
    max-width: 700px
    
    p
      font-size: 18px
      line-height: 26px
      color: rgba(255,255,255,0.5)
      
      b
        color: #fff
        font-weight: 700
      
    ul
      color: #fff
      margin: 0
      padding: 0 0 0 20px
      
      li
        font-size: 18px
        line-height: 26px
        color: rgba(255,255,255,0.5)
        margin: 0
        padding: 0
        
        b
          color: #fff
          font-weight: 700
        
  &.discord-widget
    padding: 40px
    width: 100%
    
    iframe
      height: 500px
      width: 100%
      
  &.join
    padding: 40px
    
    .btn-pill
      margin: 30px
      
    .line
      border-bottom: 1px solid #fff
      
.footer
  padding: 40px
  background-color: #25272C
  background-image: linear-gradient(45deg, rgba(101,128,233,0.66) 0%, #1E3FB6 100%)
  line-height: 24px
  font-size: 20px
  color: #fff
  font-weight: 300
  
  .block
    min-height: 200px
    margin-right: 80px

  p
    max-width: 500px
    padding-top: 40px
    margin-bottom: 0
  
// Headers
h1
  font-size: 68px
  color: #fff
  text-transform: uppercase
  font-weight: 900
  line-height: 86px
  margin: 0 0 35px 0
  padding: 0
  
h2
  font-size: 48px
  line-height: 57px
  font-weight: 900
  color: #fff
  text-transform: uppercase
  margin: 0 0 40px 0
  padding: 0
  
h3
  font-size: 36px
  line-height: 44px
  color: #fff
  font-weight: 900
  padding: 0
  margin-bottom: 6px

// Buttons
.btn-pill
  height: 50px
  padding: 0 100px
  box-shadow: 0 2px 10px 0 rgba(0,0,0,0.28)
  border-radius: 100px
  text-align: center
  line-height: 50px
  font-size: 24px
  position: relative
  transition: all 300ms ease
  bottom: 0
  
  &:hover
    bottom: 10px
    box-shadow: 0 12px 15px 0 rgba(0,0,0,0.28)
  
  &.white
    background: #fff
    color: #4360AE
    
// Links suppressor
a.links-suppressor, .links-suppressor a
  text-decoration: none
  
  

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />