Color code for programming

• Full width:
  • 1200px
  • 848px
• Accent color means a color used to highlight or emphasize important parts of a design. A color used to draw attention. 
• Color:
  • Dark Charcoal      #141414
  • Charcoal Gray      #54595F
  • Neutral Gray      #8A8A8A

  ---

  • Ash Gray      #686868
  • Blue 600      #3182CE
  • Blue 700      #2B6CB0
  • Bright Blue      #417BFF
  • Bright Golden Yellow      #FFCD1B
  • Bright Golden Yellow:hover      #E4B200
  • Dark Black      #020101
  • Dark Blue      #0C105C
  • Dark Blue Gray      #2D3748
  • Light Gray      #B4B4B4
  • Light Gray 2      #EAEAEA
  • Light Periwinkle      #DBE2F5
  • Pinkish-red      #FF006E
  • Pinkish-red:hover/Deep pink      #FF006E
  • Red Orange      #FF3300
  • Red Orange Vidid      #F04C00
  • Vivid blue      #0045e6
  • Vivid green      #00e431
  • White Smoke      #F5F5F5;
  • White      #FFFFFF;
  • Transparent Dark Gray বা Gray with 10% opacity      rgba(20, 20, 20, 0.1)
  • Transparent Dark Gray বা Gray with 50% opacity      rgba(20, 20, 20, 0.05)
  • Transparent White বা White with 25% opacity      rgba(255, 255, 255, 0.25)
  • Transparent White      #FFFFFF00
• Font:
  • Inter Tight
  • Poppins
  • Roboto Flex
  • Playball
  • Manrope
• Style:
  • Entire Page Style CSS

  • 
    <style>
    p {
        margin: 0;
    }
    
    a {
        text-decoration: none;
    }
    
    .elementor-icon {
        line-height: 0;
    }
    
    .elementor-icon-wrapper {
        display: flex;
    }
    
    .elementor-icon-list-icon svg {
        margin: 0;
    }
    
    .elementor-icon-list-item .elementor-icon-list-text {
        padding: 0;
    }
    
    .elementor-widget-image a {
        display: inline-block;
    }
    
    .elementor-widget:not(:last-child) {
        margin-bottom: 0;
    }
    
    .elementor img {
        max-width: 100%;
        height: auto;
    }
    
    .elementor-column,
    .elementor-widget-wrap {
        display: flex;
        flex-direction: column;
    }
    
    .elementor-button-wrapper {
        display: flex;
    }
    
    svg {
        max-width: 100%;
        height: auto;
    }
    </style>
    
      

  • Button Style CSS

  • 
    <style>
    .btn .elementor-button-icon {
        background: #fff;
        padding: 8px;
        border-radius: 50%;
        transition: transform 0.9s ease;
    }
    
    .btn .elementor-button-icon svg path {
        stroke: var(--e-global-color-primary);
    }
    
    .btn .elementor-button-content-wrapper {
        align-items: center;
        display: flex;
    }
    
    .btn:hover .elementor-button-icon {
        transform: rotate(360deg);
    }
    </style>
    
      

  • CSS Class: btn
  • Playball
• -
• Site Setting [Different effect on Desktop, tablet, mobile mode] 
• Back-grournd 
• Layout Setting 
• Content Width - Set the width. Mobile Mode: 460px
• Padding and Gap - 0 
• Default Page Layout - Elementor Full Width 
• Typography 
• H2
• Desktop: Font-size: 60px; Line Height: 72px; Letter Spacing: 0.02px;
• Mobile: Font-size: 60px; Line Height: 50px; Letter Spacing: 0.02px;