doggobot.fun

doggobot-fun.markdown

doggobot.fun

A Pen by sheawn on CodePen.

License.

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="#premium") Premium
                    .line.align-self-center
                    a(href="https://doggobot.fun/support/") Join
                .server-info.d-flex.align-items-center.flex-column.text-center
                    h1 Doggo Bot
                    a.links-suppressor.join-btn.btn-pill.white(href="https://doggobot.fun/invite/") Invite Bot
                    
            .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 Doggo
                        p
                            b Doggo
                            |  is a simple yet versatile Discord bot to assist you in server management. Making professional and high-quality Discord servers takes lots of time and effort. Hours of creating roles, channels, and informational texts. But what if you could do all that in less than 30 seconds? Introducing: Doggo. Doggo is a very simple yet powerful Discord bot built to assist in creating and maintaining Discord servers. With tools such as channel and role creation, as well as announcements and informational text templates, making a Discord server has never been easier. Additionally, Doggo provides moderator commands to help ensure the safety of your servers. Fun commands and additions such as leveling, currency, image manipulation, and more will help keep your server members engaged and active. With incredibly fast speed and performance, what's there not to be excited for?
                            br
                            br
                            b Doggo has many unique and useful features available for use:
                            br
                        ul
                            li Server Setup (channels, categories, etc.)
                            li Moderation features (warn, kick, ban, mod-logs, etc.)
                            li Informational Texts (rules, announcements, welcome, etc.)
                            li Currency and Leveling System
                            li User Informational Cards
                            li Image Manipulation
                            li And many more useful commands!
                section.discord-widget
                    iframe.d-flex(src="https://discordapp.com/widget?id=451459061280669700&theme=dark",
                        allowtransparency="true",
                        frameborder="0")
                    
                section#premium.d-flex.justify-content-between.flex-lg-nowrap.flex-wrap.flex-row-reverse
                    .image.image2(style="flex-grow: 1")
                    .text
                        h2 Doggo Premium
                        p
                            b Doggo Premium
                            |   is much more feature-packed and exclusive than the free version of Doggo. Since hosting Doggo isn't free, we've created a premium version with exclusive features that can be purchased. When obtained, you'll gain access to our exclusive donator-only commands, as well as recognition in our official Discord server. Your support is greatly appreciated!
                            br
                            br
                            b Doggo Premium includes many exclusive features such as
                            br
                        ul
                            li Music Compatability
                            li Exclusive Server Templates & Informational Texts
                            li Premium 24/7 Support
                            li Access to Beta features
                            li Exclusive Recognition and Rank
                            li And more coming soon...
                            
                section.join.d-flex.justify-content-center
                    .line.align-self-center(style="flex-grow: 1")
                    a.links-suppressor.btn-pill.white(href="https://doggobot.fun/support") Support 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 Developers
                        span DogV2#0001
                        span shaan#3734
                    .block.d-flex.flex-column.justify-content-between
                        h3.d-flex Support
                        span DogV2#0001
                        span shaan#3734
                    
                p.align-self-end Doggo is a simple yet versatile Discord bot made to help manage your Discord server. From server setup to moderation and fun commands, what's there not to be excited about? Doggo provides the best for you and your Discord server. Built by Dog#0001 and shaan#3734.

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" />