Skip to content 
WhatsApp
Email
- Hire on:
- Dribbble
Menu
Design Guide
๐ Hero Section
| Device | Padding (All Sides) | Inner Section Padding | Gap | Sub Inner Section Padding | Sub Inner Gap |
|---|---|---|---|---|---|
| Desktop | 40px | 0px | 42px | 10px | 20px |
| Tablet | 30px | 0px | 42px | 10px | 20px |
| Mobile | 25px, 15px | 0px | 42px | 10px | 20px |
๐ Normal Section
| Device | Padding (All Sides) | Inner Section Padding | Gap | Sub Inner Section Padding | Sub Inner Gap |
|---|---|---|---|---|---|
| Desktop | 40px | 0px | 42px | 10px | 20px |
| Tablet | 30px | 0px | 42px | 10px | 20px |
| Mobile | 25px, 15px | 0px | 42px | 10px | 20px |
๐ Colored Hero Section
| Device | Padding (Top/Bottom) | Padding (Left/Right) | Inner Section Padding | Gap | Sub Inner Section Padding | Sub Inner Gap | Margin (Bottom) |
|---|---|---|---|---|---|---|---|
| Desktop | 60px | 40px | 0px | 42px | 10px | 20px | 40px |
| Tablet | 60px | 30px | 0px | 42px | 10px | 20px | 40px |
| Mobile | 42px | 15px | 0px | 42px | 10px | 20px | 20px |
๐ Colored Section
| Device | Padding (All Sides) | Inner Section Padding | Gap | Sub Inner Section Padding | Sub Inner Gap | Margin (Top/Bottom) |
|---|---|---|---|---|---|---|
| Desktop | 40px | 0px | 42px | 10px | 20px | 40px |
| Tablet | 30px | 0px | 42px | 10px | 20px | 30px |
| Mobile | 25px, 15px | 0px | 42px | 10px | 20px | 25px |
๐ Special Boxes
| Device | Padding (All Sides) | Inner Section Padding | Gap | Sub Inner Section Padding | Sub Inner Gap | Margin (Top/Bottom) |
|---|---|---|---|---|---|---|
| Desktop | 40px | 60px | 42px | 10px | 20px | 40px |
| Tablet | 30px | 60px , 72px | 42px | 10px | 20px | 30px |
| Mobile | 25px, 15px | 36px, 46px | 42px | 10px | 20px | 25px |
๐ Normal Boxes
| Device | Padding (All Sides) |
|---|---|
| Desktop | 68px |
| Tablet | 36px |
| Mobile | 36px |
๐ Font Sizes
| Text Type | Desktop & Tablet | Mobile |
|---|---|---|
| Headlines | 36px | 26px |
| Text Body | 16px | 14px |
| Subtitles | 18px | 16px |
:root {
--padding-desktop: 40px;
--padding-tablet: 30px;
--padding-mobile: 25px 15px;
--inner-padding: 0px;
--gap: 42px;
--sub-inner-padding: 10px;
--sub-inner-gap: 20px;
--colored-padding-top-bottom-desktop: 60px;
--colored-padding-left-right-desktop: 40px;
--colored-padding-top-bottom-tablet: 60px;
--colored-padding-left-right-tablet: 30px;
--colored-padding-top-bottom-mobile: 42px;
--colored-padding-left-right-mobile: 15px;
--margin-bottom-desktop: 40px;
--margin-bottom-tablet: 40px;
--margin-bottom-mobile: 20px;
--special-box-padding-desktop: 40px 60px;
--special-box-padding-tablet: 30px 60px;
--special-box-padding-mobile: 25px 15px;
--normal-box-padding-desktop: 68px;
--normal-box-padding-tablet: 36px;
--normal-box-padding-mobile: 36px;
--font-headline-desktop: 36px;
--font-headline-mobile: 26px;
--font-body-desktop: 16px;
--font-body-mobile: 14px;
--font-subtitle-desktop: 18px;
--font-subtitle-mobile: 16px;
/* Colors */
--primary-color: #007bff;
--secondary-color: #6c757d;
--background-light: #f8f9fa;
--background-dark: #343a40;
--text-color-light: #ffffff;
--text-color-dark: #212529;
--border-color: #dee2e6;
}
/* Hero Section */
.hero-section {
padding: var(--padding-desktop);
background-color: var(--background-light);
color: var(--text-color-dark);
}
.hero-section .inner {
padding: var(--inner-padding);
gap: var(--gap);
}
.hero-section .sub-inner {
padding: var(--sub-inner-padding);
gap: var(--sub-inner-gap);
}
/* Normal Section */
.normal-section {
padding: var(--padding-desktop);
background-color: var(--background-light);
color: var(--text-color-dark);
}
/* Colored Hero Section */
.colored-hero-section {
padding: var(--colored-padding-top-bottom-desktop) var(--colored-padding-left-right-desktop);
margin-bottom: var(--margin-bottom-desktop);
background-color: var(--primary-color);
color: var(--text-color-light);
}
/* Colored Section */
.colored-section {
padding: var(--padding-desktop);
margin: var(--margin-bottom-desktop) 0;
background-color: var(--secondary-color);
color: var(--text-color-light);
}
/* Special Boxes */
.special-boxes {
padding: var(--special-box-padding-desktop);
margin: var(--margin-bottom-desktop) 0;
background-color: var(--background-dark);
color: var(--text-color-light);
border: 1px solid var(--border-color);
}
/* Normal Boxes */
.normal-boxes {
padding: var(--normal-box-padding-desktop);
background-color: var(--background-light);
color: var(--text-color-dark);
}
/* Font Sizes */
h1, h2, h3 {
font-size: var(--font-headline-desktop);
color: var(--text-color-dark);
}
p {
font-size: var(--font-body-desktop);
color: var(--text-color-dark);
}
.subtitle {
font-size: var(--font-subtitle-desktop);
color: var(--text-color-dark);
}
/* Tablet Styles */
@media (max-width: 1024px) {
.hero-section, .normal-section, .colored-section {
padding: var(--padding-tablet);
}
.colored-hero-section {
padding: var(--colored-padding-top-bottom-tablet) var(--colored-padding-left-right-tablet);
}
.special-boxes {
padding: var(--special-box-padding-tablet);
margin: var(--margin-bottom-tablet) 0;
}
.normal-boxes {
padding: var(--normal-box-padding-tablet);
}
}
/* Mobile Styles */
@media (max-width: 768px) {
.hero-section, .normal-section, .colored-section {
padding: var(--padding-mobile);
}
.colored-hero-section {
padding: var(--colored-padding-top-bottom-mobile) var(--colored-padding-left-right-mobile);
margin-bottom: var(--margin-bottom-mobile);
}
.special-boxes {
padding: var(--special-box-padding-mobile);
margin: var(--margin-bottom-mobile) 0;
}
.normal-boxes {
padding: var(--normal-box-padding-mobile);
}
}
Looking for custom web development ?
When you choose Keystone Themes, youโre partnering with a team thatโs genuinely committed to helping you succeed online, with flexible, high-quality solutions tailored to your goals.
+91 6001817997
support@keystonethemes.com
Company
Help & Support
Services
resources
Language
Copyright 2024 ยฉ Keystone Themes. All right reserved.
