Halkali merkez neighborhood fatih st ozgur apt no 46 , Kucukcekmece , Istanbul , 34303 , TR
this page EkaSunucu It is designed to test the central CSS file created by . All the key components will be shown on the page.
In this example hero section, contents, content cards and frequently asked questions You can see components such as.
Manage all design elements in a single file
Provides flawless appearance on all devices
Fast page development with ready-made components
Refresh entire site with single file update
Content cards allow you to present information in an organized and aesthetic way. Each card can focus on a specific topic and highlight important information.
Content cards have the following features:
Alert boxes are designed to convey important information to your users. You can use different colors for different types of alerts.
Step-by-step guides are used to make complex processes more understandable. Each step is numbered and visually highlighted.
Add the following code to the header section of your page:
Turkey (Turkish)
Germany (German)
Worldwide (English)
<link rel="stylesheet" href="/templates/website/EkaSunucu/css/pages.css">This code will include the central CSS file in your page.
When creating the structure of your page, use the classes defined in this CSS file:
.hero-section use class.contents-card use class.content-section use class.content-card use classFont Awesome is used for all icons. Example usage:
<i class="fas fa-info-circle"></i>Check the Font Awesome documentation for the correct icon classes.
You can use CSS variables for custom color schemes or styling. Example:
<body style="--primary-color: #FF5500; --secondary-color: #FF8844;">This way you can easily change the color scheme of your page.
The CSS file defines a set of variables for consistent color usage throughout the site. The basic color variables are:
--primary-color: Ana renk--secondary-color: Secondary color--accent-color: Highlight color--text-color: Main text color--text-secondary: Secondary text color--light-bg: Light background color--card-bg: Card background colorUsing these variables, you can change the color scheme of your entire site from one place.
The CSS file defines font families and sizes for consistent typography:
--font-primary: Main font (Inter)--font-secondary: Secondary font (Poppins)For titles font-family: var(--font-secondary) For text when using font-family: var(--font-primary) is used.
The CSS file contains comprehensive media queries for different screen sizes. In this way, your site looks perfect on all devices.
Optimized for devices with a screen width of 1200px and above.
Optimized for devices with screen widths between 768px and 1199px.
Optimized for devices with screen widths of 767px and below.
Most frequently asked questions and answers about using CSS files
<link rel="stylesheet" href="/templates/website/EkaSunucu/css/pages.css"> You can include the CSS file by adding the code. This will apply all style definitions to your page. <body style="--primary-color: #FF0000; --secondary-color: #FF5555;">
<body style="--font-primary: 'Roboto', sans-serif; --font-secondary: 'Montserrat', sans-serif;"> However, remember that these fonts must be installed on your page.