Back to About
Left Image
<section id="ui-content-01">
<div class="ui-content-01-container ui-container">
<div class="ui-content-01-content">
<div class="ui-content-01-image">
<img src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="BG1" class="ui-content-01-image">
</div>
<div class="ui-content-01-text">
<h2 class="ui-content-01-title">Family Owned Company. Family Values.</h2>
<p class="ui-content-01-description">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque totam sapiente quibusdam reprehenderit enim tempore sed quidem magnam, vero, voluptatum, eligendi officia officiis ab ut a. Minus distinctio voluptatum, facilis dolores eos quas dignissimos similique nesciunt molestias reiciendis explicabo fugit culpa? Assumenda, quo eius? Ab illo at distinctio quam, voluptatem excepturi laboriosam eius nemo accusamus hic incidunt dolor impedit architecto inventore </p>
</div>
</div>
</div>
</section>#ui-content-01 {
position: relative;
background-color: var(--ui-color-primary);
color: var(--ui-color-white);
background-image: url('/assets/images/bg1.jpg');
background-size: cover;
}
#ui-content-01::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.75);
z-index: 1;
}
#ui-content-01 .ui-content-01-container {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
padding: var(--ui-spacing-4xl) var(--ui-spacing-xl);
}
#ui-content-01 .ui-content-01-content {
display: flex;
align-items: center;
justify-content: center;
gap: var(--ui-spacing-4xl);
flex-wrap: wrap;
}
#ui-content-01 .ui-content-01-image {
width: 100%;
object-fit: cover;
height: 400px;
flex: 1;
}
#ui-content-01 .ui-content-01-text {
display: flex;
flex-direction: column;
justify-content: center;
flex: 1;
}
#ui-content-01 .ui-content-01-title {
font-size: 2.7rem;
font-weight: 700;
text-align: center;
line-height: 1.2;
font-family: "Noto Sans", sans-serif;
text-align: left;
}
#ui-content-01 .ui-content-01-description {
font-size: 1rem;
text-align: left;
}
@media (max-width: 1024px) {
#ui-content-01 .ui-content-01-content {
gap: var(--ui-spacing-2xl);
}
#ui-content-01 .ui-content-01-title {
font-size: 2rem;
font-weight: 700;
text-align: center;
line-height: 1.2;
font-family: "Noto Sans", sans-serif;
text-align: left;
}
#ui-content-01 .ui-content-01-description {
font-size: .9rem;
text-align: left;
}
}
@media (max-width: 768px) {
#ui-content-01 .ui-content-01-title {
font-size: 1.5rem;
}
#ui-content-01 .ui-content-01-content {
flex-direction: column;
}
#ui-content-01 .ui-content-01-title {
font-size: 2rem;
}
#ui-content-01 .ui-content-01-description {
font-size: 1rem;
}
#ui-content-01 .ui-content-01-container {
padding: var(--ui-spacing-xl) var(--ui-spacing-xl);
}
}
@media (max-width: 480px) {
#ui-content-01 .ui-content-01-title {
font-size: 1.2rem;
}
#ui-content-01 .ui-content-01-title {
font-size: 1.8rem;
}
#ui-content-01 .ui-content-01-description {
font-size: .9rem;
}
}
@media (max-width: 320px) {
#ui-content-01 .ui-content-01-title {
font-size: 1rem;
}
}
/* uiplugins-root.css */
/* Updated: 2025-05-26 */
/* ------------- */
/* CSS RESET */
/* ------------- */
/* Box sizing */
*, *::before, *::after {
box-sizing: border-box;
}
/* Remove default margin */
* {
margin: 0;
padding: 0;
}
/* Set up the body */
body {
line-height: 1.5;
-webkit-font-smoothing: antialiased;
font-family: var(--ui-font-family, system-ui, sans-serif);
background-color: #f9fafb;
color: #111827;
}
/* Remove list styles on ul, ol elements with a class */
ul[class], ol[class] {
list-style: none;
padding: 0;
}
/* Reset anchor */
a {
text-decoration: none;
color: inherit;
}
/* Set core root defaults */
html:focus-within {
scroll-behavior: smooth;
}
/* Improve media defaults */
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
height: auto;
}
/* Remove built-in form typography styles */
input, button, textarea, select {
font: inherit;
}
/* Avoid text overflow */
p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}
/* Create a root stacking context */
#root, #__next {
isolation: isolate;
}
/* ------------- */
/* DESIGN TOKENS */
/* ------------- */
:root {
--ui-font-family: 'Inter', sans-serif;
/* Colors */
--ui-color-primary: #d8621d;
--ui-color-secondary: #9333ea;
--ui-color-dark: #111827;
--ui-color-light: #f3f4f6;
--ui-color-white: #ffffff;
/* Typography */
--ui-font-size-base: 1rem;
--ui-font-size-sm: 0.875rem;
--ui-font-size-md: 1rem;
--ui-font-size-lg: 1.25rem;
--ui-font-size-xl: 1.5rem;
--ui-font-size-2xl: 2rem;
--ui-font-size-3xl: 2.5rem;
--ui-font-size-4xl: 3rem;
--ui-font-size-5xl: 3.5rem;
--ui-font-size-6xl: 4rem;
--ui-font-size-7xl: 4.5rem;
--ui-font-size-8xl: 5rem;
/* Font Weight */
--ui-font-weight-thin: 100;
--ui-font-weight-extralight: 200;
--ui-font-weight-light: 300;
--ui-font-weight-normal: 400;
--ui-font-weight-medium: 500;
--ui-font-weight-semibold: 600;
--ui-font-weight-bold: 700;
--ui-font-weight-extrabold: 800;
--ui-font-weight-black: 900;
/* Spacing */
--ui-spacing-xs: 0.25rem;
--ui-spacing-sm: 0.5rem;
--ui-spacing-md: 1rem;
--ui-spacing-lg: 1.5rem;
--ui-spacing-xl: 2rem;
--ui-spacing-2xl: 3rem;
--ui-spacing-3xl: 4rem;
--ui-spacing-4xl: 5rem;
--ui-spacing-5xl: 6rem;
--ui-spacing-6xl: 7rem;
--ui-spacing-7xl: 8rem;
--ui-spacing-8xl: 9rem;
--ui-spacing-9xl: 10rem;
/* Layout */
--ui-max-width: 1200px;
--ui-max-width-lg: 1400px;
--ui-max-width-xl: 1600px;
--ui-max-width-2xl: 1800px;
--ui-max-width-3xl: 2000px;
--ui-max-width-4xl: 2200px;
--ui-max-width-5xl: 2400px;
--ui-max-width-6xl: 2600px;
--ui-max-width-7xl: 2800px;
--ui-max-width-8xl: 3000px;
--ui-max-width-9xl: 3200px;
/* Radius */
--ui-radius-base: 0.5rem;
--ui-radius-lg: 1rem;
--ui-radius-xl: 2rem;
--ui-radius-2xl: 3rem;
--ui-radius-3xl: 4rem;
--ui-radius-4xl: 5rem;
--ui-radius-5xl: 6rem;
--ui-radius-6xl: 7rem;
/* Line Height and Font Weight */
--ui-line-height-base: 1.5;
--ui-font-weight-normal: 400;
--ui-font-weight-bold: 700;
/* Transitions */
--ui-transition-fast: 150ms ease-in-out;
--ui-transition-medium: 300ms ease-in-out;
--ui-transition-slow: 500ms ease-in-out;
/* Z-index */
--ui-z-dropdown: 1000;
--ui-z-modal: 1050;
--ui-z-tooltip: 1100;
/* Shadows */
--ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--ui-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
}
[data-theme="dark"] {
--ui-color-light: #181f25;
--ui-color-dark: #f3f4f6;
--ui-color-white: #181f25;
--ui-color-primary: #d8621d;
--ui-color-secondary: #9333ea;
--ui-color-bg-dark: #181f25;
--ui-color-bg-darker: #11161a;
--ui-color-text-dark: #f3f4f6;
}
/* ------------- */
/* UTILITIES */
/* ------------- */
.ui-container {
max-width: var(--ui-max-width);
margin-left: auto;
margin-right: auto;
padding-left: var(--ui-spacing-md);
padding-right: var(--ui-spacing-md);
}
/* Spacing utilities */
.ui-mb-1 { margin-bottom: var(--ui-spacing-xs); }
.ui-mb-2 { margin-bottom: var(--ui-spacing-sm); }
.ui-mb-3 { margin-bottom: var(--ui-spacing-md); }
.ui-mb-4 { margin-bottom: var(--ui-spacing-lg); }
.ui-p-1 { padding: var(--ui-spacing-xs); }
.ui-p-2 { padding: var(--ui-spacing-sm); }
.ui-p-3 { padding: var(--ui-spacing-md); }
.ui-p-4 { padding: var(--ui-spacing-lg); }
.ui-rounded { border-radius: var(--ui-radius-base); }
.ui-text-center { text-align: center; }
/* Headings */
.ui-heading-xl {
font-size: var(--ui-font-size-2xl);
font-weight: 700;
}
.ui-heading-lg {
font-size: var(--ui-font-size-xl);
font-weight: 600;
}
.ui-heading-md {
font-size: var(--ui-font-size-lg);
font-weight: 500;
}
/* Layout for test environment */
main {
padding: var(--ui-spacing-xl) 0;
}
section h2 {
font-size: var(--ui-font-size-lg);
font-weight: 600;
margin-bottom: var(--ui-spacing-md);
}
footer.ui-container {
text-align: center;
padding: var(--ui-spacing-xl) 0;
}