281 lines
8.3 KiB
HTML
281 lines
8.3 KiB
HTML
<!-- Made with ♥ by Xargana -->
|
||
<!DOCTYPE html>
|
||
<html lang="en-US">
|
||
<head>
|
||
<title>2boyut Digital</title>
|
||
<meta name="title" content="2boyut.com.tr" />
|
||
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
|
||
<meta name="description" content="2boyut Digital" />
|
||
<meta name="theme-color" content="#ffffff" />
|
||
<meta source="https://git.xargana.tr/Xargana/2boyut" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<meta charset="utf-8" />
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
<link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet" />
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
html, body {
|
||
margin: 0;
|
||
padding: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-image: url("/assets/fabric_of_squares_gray.jpg");
|
||
}
|
||
:root {
|
||
--bg-color: #fff;
|
||
--text-color: #333;
|
||
--accent-color: rgba(31, 59, 94, 0.884);
|
||
--accent-hover: rgb(14, 33, 58);
|
||
--card-bg: #1a1a1a;
|
||
--card-border: #2a2a2a;
|
||
}
|
||
.hero-section {
|
||
position: relative;
|
||
display: inline-block;
|
||
width: 100%;
|
||
}
|
||
.text-overlay {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
background-color: rgba(255, 255, 255, 0.95);
|
||
padding: 3rem;
|
||
border-radius: 15px;
|
||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
|
||
max-width: 80%;
|
||
max-height: 80%;
|
||
overflow-y: auto;
|
||
z-index: 5;
|
||
}
|
||
.text-overlay h1 {
|
||
color: var(--accent-color);
|
||
font-family: "Comfortaa", sans-serif;
|
||
font-size: 1.8rem;
|
||
font-weight: 700;
|
||
margin-bottom: 1.5rem;
|
||
text-align: center;
|
||
}
|
||
.text-overlay p {
|
||
color: var(--text-color);
|
||
font-family: "Roboto", sans-serif;
|
||
font-size: 1rem;
|
||
line-height: 1.6;
|
||
margin-bottom: 1.2rem;
|
||
text-align: justify;
|
||
}
|
||
.mission-section {
|
||
background-color: rgba(31, 59, 94, 0.1);
|
||
padding: 1.5rem;
|
||
border-radius: 10px;
|
||
margin: 1.5rem 0;
|
||
}
|
||
.mission-section h2 {
|
||
color: var(--accent-color);
|
||
font-family: "Comfortaa", sans-serif;
|
||
font-size: 1.3rem;
|
||
font-weight: 600;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.text-overlay {
|
||
max-width: 95%;
|
||
max-height: 85%;
|
||
padding: 2rem;
|
||
top: 45%;
|
||
}
|
||
.text-overlay h1 {
|
||
font-size: 1.5rem;
|
||
}
|
||
.text-overlay p {
|
||
font-size: 0.9rem;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<header>
|
||
<style>
|
||
header {
|
||
background-image: url("/assets/fabric_of_squares_gray.jpg");
|
||
display: flex;
|
||
position: relative;
|
||
z-index: 10;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 0.7rem 2rem;
|
||
border-bottom: 1px solid #333;
|
||
box-shadow: 0 0 12px rgba(0, 0, 0, 0.60);
|
||
}
|
||
.logo {
|
||
font-size: 2rem;
|
||
font-weight: 900;
|
||
}
|
||
nav {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
nav ul {
|
||
display: flex;
|
||
list-style: none;
|
||
gap: 1.5rem;
|
||
align-items: center;
|
||
}
|
||
a {
|
||
color: var(--accent-color);
|
||
text-decoration: none;
|
||
transition: color 0.3s ease;
|
||
font-family: "Roboto";
|
||
font-weight: 600;
|
||
font-size: larger;
|
||
}
|
||
a:hover {
|
||
color: var(--accent-hover);
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.language-dropdown {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.language-button {
|
||
background: none;
|
||
border: none;
|
||
color: var(--accent-color);
|
||
font-family: "Roboto";
|
||
font-weight: 600;
|
||
font-size: larger;
|
||
cursor: pointer;
|
||
padding: 0.5rem;
|
||
border-radius: 5px;
|
||
transition: all 0.3s ease;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.language-button:hover {
|
||
color: var(--accent-hover);
|
||
background-color: rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
.dropdown-content {
|
||
display: none;
|
||
position: absolute;
|
||
top: 100%;
|
||
right: 0;
|
||
background-color: white;
|
||
min-width: 160px;
|
||
box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
|
||
border-radius: 8px;
|
||
z-index: 1000;
|
||
margin-top: 0;
|
||
}
|
||
|
||
.dropdown-content a {
|
||
color: #333;
|
||
padding: 12px 16px;
|
||
text-decoration: none;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
font-size: 1rem;
|
||
transition: background-color 0.3s ease;
|
||
}
|
||
|
||
.dropdown-content a:hover {
|
||
background-color: #f1f1f1;
|
||
color: var(--accent-color);
|
||
text-decoration: none;
|
||
}
|
||
|
||
.language-dropdown:hover .dropdown-content {
|
||
display: block;
|
||
}
|
||
|
||
.dropdown-arrow {
|
||
font-size: 0.8rem;
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.language-dropdown:hover .dropdown-arrow {
|
||
transform: rotate(180deg);
|
||
}
|
||
</style>
|
||
<div class="logo">
|
||
<a href="/index.html">
|
||
<img src="/assets/2boyutlogo_w250.png" alt="2boyut" style="max-width: 80%;" />
|
||
</a>
|
||
</div>
|
||
<nav>
|
||
<ul>
|
||
<li><a href="/">Services</a></li>
|
||
<li><a href="/">Reference</a></li>
|
||
<li><a href="/en-us/about/">About Us</a></li>
|
||
<li><a href="/">Contact</a></li>
|
||
<li class="language-dropdown">
|
||
<button class="language-button">
|
||
🌐
|
||
<span class="dropdown-arrow">▼</span>
|
||
</button>
|
||
<div class="dropdown-content">
|
||
<a href="/">Türkçe</a>
|
||
<a href="/en-us/">English</a>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
</header>
|
||
<div class="hero-section">
|
||
<img src="/assets/2boyut_blueprint.jpg" alt="2boyut" style="width: 100%; display: block;" />
|
||
|
||
<div class="text-overlay">
|
||
<h1>2Boyut Digital Design</h1>
|
||
|
||
<p>Our services, which began in 2007 as a young entrepreneurial venture, have always prioritized customer satisfaction with a boutique approach, while aiming for corporate-level quality within the scope of our areas of expertise.</p>
|
||
|
||
<p>In the early years, we focused on Web Design and IT Consulting services. Over time, based on customer demand, we expanded into graphic design, digital printing services, corporate identity work, and also project-based wholesale of Computer and Electronic equipment.</p>
|
||
|
||
<p>Since 2013, as part of the HP Partner program, we have been offering our valued customers product supply and consulting services through the added-value products of this global brand — such as servers, workstations, and network equipment, all delivered at a universal quality standard.</p>
|
||
|
||
<p>As we move forward confidently, we continue to improve ourselves to meet our customers’ needs quickly, with high quality and within reasonable budgets — while also keeping our technology up-to-date.</p>
|
||
|
||
<div class="mission-section">
|
||
<h2>Our Mission as a Team:</h2>
|
||
<p>To be customer-focused, combining our expertise and experience to meet the expectations and needs of our clients by providing high-quality service.</p>
|
||
</div>
|
||
|
||
<p>With an awareness of the rapid pace of visual and informational content in our era, we aim to offer products and services that keep the people and institutions we work with one step ahead in their fields — by continuously tracking the triangle of art, design, and technology with a modern vision, creating a unique style in our designs, and quickly adapting to innovation.</p>
|
||
|
||
<p>We blend universal values with what we create, and with this vision in mind, we look to the future with hope.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<footer>
|
||
<style>
|
||
footer {
|
||
align-content: center;
|
||
font-family: "Roboto";
|
||
text-align: center;
|
||
color: #555555;
|
||
}
|
||
.footer-bottom {
|
||
font-style: italic;
|
||
}
|
||
</style>
|
||
<p>2boyut.com.tr - All Rights Reserved</p>
|
||
<div class="footer-bottom">
|
||
<p>2boyut - 2025©</p>
|
||
</div>
|
||
</footer>
|
||
</body>
|
||
</html>
|