تست برای چاپ: تفاوت میان نسخهها
بدون خلاصۀ ویرایش |
بدون خلاصۀ ویرایش |
||
| (۲۳ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد) | |||
| خط ۱: | خط ۱: | ||
<html lang="fa" dir="rtl"> | <html lang="fa" dir="rtl"> | ||
<head> | <head> | ||
/* | <meta charset="UTF-8"> | ||
# | |||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |||
<title> | |||
ساخت دستگاه صنعتی | طراحی و تولید ماشین آلات صنعتی سفارشی | |||
</title> | |||
<meta name="description" | |||
content=" | |||
طراحی و ساخت دستگاه صنعتی سفارشی، ماشین آلات صنعتی، | |||
تجهیزات خطوط تولید، اتوماسیون صنعتی و ساخت تجهیزات کارخانه با کیفیت مهندسی. | |||
"> | |||
<link rel="stylesheet" | |||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"> | |||
<style> | |||
/* =============================== | |||
FONT | |||
================================ */ | |||
@font-face{ | |||
font-family:IRANSans; | |||
src:url("fonts/IRANSans.woff2"); | |||
} | |||
*{ | |||
box-sizing:border-box; | |||
margin:0; | |||
padding:0; | |||
} | |||
body{ | |||
font-family:IRANSans,Tahoma,sans-serif; | |||
direction:rtl; | |||
background:#fff; | |||
color:#222; | |||
} | |||
img{ | |||
max-width:100%; | |||
display:block; | |||
} | |||
a{ | |||
text-decoration:none; | |||
color:inherit; | |||
} | |||
.container{ | |||
width:92%; | |||
max-width:1200px; | |||
margin:auto; | |||
} | |||
/* =============================== | |||
HEADER | |||
================================ */ | |||
.header{ | |||
position:absolute; | |||
top:0; | |||
right:0; | |||
width:100%; | |||
z-index:20; | |||
color:white; | |||
} | |||
.header-box{ | |||
height:75px; | |||
display:flex; | |||
align-items:center; | |||
justify-content:space-between; | |||
} | |||
.logo{ | |||
font-size:24px; | |||
font-weight:bold; | |||
} | |||
.logo span{ | |||
color:#f32845; | |||
} | |||
.menu-btn{ | |||
background:none; | |||
border:none; | |||
color:white; | |||
font-size:25px; | |||
cursor:pointer; | |||
} | |||
.nav{ | |||
display:none; | |||
} | |||
.nav a{ | |||
font-size:13px; | |||
padding:10px; | |||
} | |||
.header-contact{ | |||
display:none; | |||
background:white; | |||
color:#222; | |||
padding:8px 20px; | |||
border-radius:5px; | |||
font-size:12px; | |||
} | |||
/* =============================== | |||
HERO | |||
================================ */ | |||
.hero{ | |||
height:540px; | |||
position:relative; | |||
background: | |||
linear-gradient( | |||
rgba(0,0,0,.75), | |||
rgba(0,0,0,.75) | |||
), | |||
url("images/industrial-bg.jpg"); | |||
background-size:cover; | |||
background-position:center; | |||
display:flex; | |||
align-items:center; | |||
justify-content:center; | |||
text-align:center; | |||
color:white; | |||
overflow:hidden; | |||
} | |||
.hero:after{ | |||
content:""; | |||
position:absolute; | |||
bottom:-45px; | |||
right:-5%; | |||
width:110%; | |||
height:90px; | |||
background:#fff; | |||
border-radius:50% 50% 0 0; | |||
} | |||
.hero-content{ | |||
width:90%; | |||
max-width:700px; | |||
} | |||
.hero-small{ | |||
font-size:14px; | |||
margin-bottom:15px; | |||
} | |||
.hero h1{ | |||
font-size:36px; | |||
line-height:1.6; | |||
margin-bottom:15px; | |||
} | |||
.hero p{ | |||
font-size:13px; | |||
line-height:2; | |||
color:#ddd; | |||
margin-bottom:25px; | |||
} | |||
.main-btn{ | |||
display:inline-flex; | |||
background:white; | |||
color:#222; | |||
padding:12px 30px; | |||
border-radius:4px; | |||
font-size:13px; | |||
font-weight:bold; | |||
} | |||
/* =============================== | |||
SERVICES | |||
================================ */ | |||
.services{ | |||
padding:45px 0 30px; | |||
} | |||
.services-grid{ | |||
display:grid; | |||
grid-template-columns:repeat(2,1fr); | |||
gap:35px 15px; | |||
} | |||
.service{ | |||
text-align:center; | |||
} | |||
.service-icon{ | |||
width:70px; | |||
height:70px; | |||
border-radius:50%; | |||
margin:auto; | |||
background:#111; | |||
color:white; | |||
display:flex; | |||
align-items:center; | |||
justify-content:center; | |||
font-size:28px; | |||
border:3px solid white; | |||
outline:2px solid #ff9aaa; | |||
} | |||
.service h3{ | |||
font-size:13px; | |||
margin-top:15px; | |||
font-weight:normal; | |||
} | |||
/* =============================== | |||
ABOUT | |||
================================ */ | |||
.about{ | |||
color: #FFF8C9; | |||
text-align:center; | |||
padding:45px 0; | |||
} | |||
.my-div { | |||
position: relative; | |||
width: 100%; | |||
min-height: 220px; | |||
background: | |||
url("https://dl.faraghaib.ir/m/260023-01/260023-01-13.png") | |||
center / cover | |||
no-repeat; | |||
} | |||
/* لایه خاکستری شفاف */ | |||
.my-div::before { | |||
content: ""; | |||
position: absolute; | |||
inset: 0; | |||
background: rgba(80, 80, 80, 0.5); | |||
} | |||
/* محتوای روی تصویر */ | |||
.my-div > * { | |||
position: relative; | |||
z-index: 1; | |||
} | |||
/* تبلت */ | |||
@media (min-width: 768px) { | |||
.my-div { | |||
min-height: 300px; | |||
} | |||
} | |||
/* دسکتاپ */ | |||
@media (min-width: 1024px) { | |||
.my-div { | |||
min-height: 400px; | |||
} | |||
} | |||
.about p{ | |||
font-size:13px; | |||
line-height:2.3; | |||
margin-bottom:15px; | |||
} | |||
.about .main-btn{ | |||
margin-top:15px; | |||
} | |||
/* =============================== | |||
TABLET | |||
================================ */ | |||
@media(min-width:768px){ | |||
.services-grid{ | |||
grid-template-columns:repeat(4,1fr); | |||
} | } | ||
.hero h1{ | |||
font-size:55px; | |||
} | |||
} | |||
</style> | |||
</head> | </head> | ||
<body> | <body> | ||
<header > | |||
<div > | |||
</html> | </html> | ||
<big>نمونه ای برای صفحات صنعتی(صفحه آقای علیزضایی فرق دارد این نیست)!!</big> | |||
{{منوی اصلی/اقای علیرضایی}} | |||
{{هدر منحنی/علیرضایی}} | |||
{{محصولات دایره ای/علیرضایی}} | |||
<html> | |||
</div> | |||
</header> | |||
<section class="my-div about"> | |||
<div class="container"> | |||
<h2> | |||
درباره ما | |||
</h2> | |||
<p> | |||
شرکت ما با تجربه در زمینه طراحی و ساخت دستگاههای صنعتی، | |||
ماشینآلات سفارشی و تجهیزات کارخانه، | |||
راهکارهای مهندسی اختصاصی برای صنایع مختلف ارائه میدهد. | |||
</p> | |||
<p> | |||
از طراحی اولیه و نقشهکشی صنعتی تا ساخت، | |||
مونتاژ و راهاندازی دستگاه، | |||
تمام مراحل پروژه توسط تیم مهندسی انجام میشود. | |||
</p> | |||
<a href="#" class="main-btn"> | |||
دریافت مشاوره | |||
</a> | |||
</div> | |||
</section> | |||
<!-- ========================================== | |||
PROJECTS | |||
========================================== --> | |||
<section class="projects"> | |||
<div class="container"> | |||
<div class="section-title"> | |||
<h2> | |||
جدیدترین پروژههای ما | |||
</h2> | |||
</div> | |||
<div class="project-grid"> | |||
<article class="project-item"> | |||
<img src="https://dl.faraghaib.ir/m/260023-01/260023-01-11.jpg" | |||
alt="ساخت دستگاه صنعتی سفارشی"> | |||
</article> | |||
<article class="project-item"> | |||
<img src="https://dl.faraghaib.ir/m/260023-01/260023-01-12.jpg" | |||
alt="طراحی ماشین آلات صنعتی"> | |||
</article> | |||
<article class="project-item"> | |||
<img src="https://dl.faraghaib.ir/m/260023-01/260023-01-07.jpg" | |||
alt="ساخت تجهیزات خطوط تولید"> | |||
</article> | |||
<article class="project-item"> | |||
<img src="https://dl.faraghaib.ir/m/260023-01/260023-01-01.jpg" | |||
alt="تولید دستگاه صنعتی کارخانه"> | |||
</article> | |||
</div> | |||
</div> | |||
</section> | |||
<!-- ========================================== | |||
STATISTICS | |||
========================================== --> | |||
<section class="statistics"> | |||
<div class="container"> | |||
<h2> | |||
تجربهای جدید از خدمات ساخت صنعتی! | |||
</h2> | |||
<div class="stat-grid"> | |||
<div class="stat"> | |||
<strong> | |||
10+ | |||
</strong> | |||
<span> | |||
سال تجربه صنعتی | |||
</span> | |||
</div> | |||
<div class="stat"> | |||
<strong> | |||
110 | |||
</strong> | |||
<span> | |||
پروژه انجام شده | |||
</span> | |||
</div> | |||
<div class="stat"> | |||
<strong> | |||
98% | |||
</strong> | |||
<span> | |||
رضایت مشتریان | |||
</span> | |||
</div> | |||
<div class="stat"> | |||
<strong> | |||
350+ | |||
</strong> | |||
<span> | |||
دستگاه ساخته شده | |||
</span> | |||
</div> | |||
</div> | |||
</div> | |||
</section> | |||
<!-- ========================================== | |||
ADVANTAGES | |||
========================================== --> | |||
<section class="advantages"> | |||
<div class="container"> | |||
<div class="section-title"> | |||
<h2> | |||
خدمات تخصصی ما | |||
</h2> | |||
</div> | |||
<div class="adv-grid"> | |||
<div class="adv-box"> | |||
<div class="adv-icon"> | |||
<i class="fa-solid fa-compass-drafting"></i> | |||
</div> | |||
<h3> | |||
طراحی مهندسی | |||
</h3> | |||
<p> | |||
طراحی سه بعدی و نقشهکشی صنعتی | |||
براساس نیاز خط تولید مشتری. | |||
</p> | |||
</div> | |||
<div class="adv-box"> | |||
<div class="adv-icon"> | |||
<i class="fa-solid fa-award"></i> | |||
</div> | |||
<h3> | |||
کنترل کیفیت نهایی | |||
</h3> | |||
<p> | |||
بررسی عملکرد دستگاه قبل از تحویل | |||
برای تضمین کیفیت و دوام. | |||
</p> | |||
</div> | |||
<div class="adv-box"> | |||
<div class="adv-icon"> | |||
<i class="fa-solid fa-truck-fast"></i> | |||
</div> | |||
<h3> | |||
تحویل و نصب دستگاه | |||
</h3> | |||
<p> | |||
ارسال، نصب و راهاندازی تجهیزات | |||
در محل کارخانه مشتری. | |||
</p> | |||
</div> | |||
<div class="adv-box"> | |||
<div class="adv-icon"> | |||
<i class="fa-solid fa-clock"></i> | |||
</div> | |||
<h3> | |||
زمانبندی دقیق | |||
</h3> | |||
<p> | |||
اجرای پروژه طبق برنامه مشخص | |||
و کاهش زمان توقف تولید. | |||
</p> | |||
</div> | |||
</div> | |||
</div> | |||
</section> | |||
<!-- ========================================== | |||
ARTICLES | |||
========================================== --> | |||
<section class="articles"> | |||
<div class="container"> | |||
<div class="section-title"> | |||
<h2> | |||
جدیدترین مطالب صنعتی | |||
</h2> | |||
</div> | |||
<div class="article-grid"> | |||
<article class="article-card"> | |||
<img src="https://dl.faraghaib.ir/m/260023-01/260023-01-23.jpg" | |||
alt="راهنمای خرید دستگاه صنعتی"> | |||
<div class="article-overlay"> | |||
<h3> | |||
راهنمای انتخاب دستگاه صنعتی مناسب خط تولید | |||
</h3> | |||
</div> | |||
</article> | |||
<article class="article-card"> | |||
<img src="https://dl.faraghaib.ir/m/260023-01/260023-01-24.jpg" | |||
alt="مهندسی معکوس دستگاه صنعتی"> | |||
<div class="article-overlay"> | |||
<h3> | |||
مهندسی معکوس و ساخت دستگاه صنعتی سفارشی | |||
</h3> | |||
</div> | |||
</article> | |||
<article class="article-card"> | |||
<img src="https://dl.faraghaib.ir/m/260023-01/260023-01-03.jpeg" | |||
alt="مراحل ساخت ماشین آلات صنعتی"> | |||
<div class="article-overlay"> | |||
<h3> | |||
مراحل طراحی و ساخت ماشین آلات صنعتی | |||
</h3> | |||
</div> | |||
</article> | |||
<article class="article-card"> | |||
<img src="https://dl.faraghaib.ir/m/260023-01/260023-01-16.jpg" | |||
alt="قیمت ساخت دستگاه صنعتی"> | |||
<div class="article-overlay"> | |||
<h3> | |||
عوامل موثر بر قیمت ساخت دستگاه صنعتی | |||
</h3> | |||
</div> | |||
</article> | |||
</div> | |||
</div> | |||
</section> | |||
<style> | |||
/* ====================================== | |||
PROJECTS STYLE | |||
====================================== */ | |||
.projects{ | |||
padding:45px 0; | |||
} | |||
.section-title{ | |||
text-align:center; | |||
margin-bottom:30px; | |||
} | |||
.section-title h2{ | |||
font-size:24px; | |||
font-weight:bold; | |||
} | |||
.dots{ | |||
display:flex; | |||
justify-content:center; | |||
gap:5px; | |||
margin-top:10px; | |||
} | |||
.dots span{ | |||
width:8px; | |||
height:8px; | |||
background:#f52d48; | |||
border-radius:50%; | |||
} | |||
.project-grid{ | |||
display:grid; | |||
grid-template-columns:repeat(2,1fr); | |||
gap:20px; | |||
} | |||
.project-item{ | |||
overflow:hidden; | |||
height:170px; | |||
} | |||
.project-item img{ | |||
width:100%; | |||
height:100%; | |||
object-fit:cover; | |||
transition:.3s; | |||
} | |||
.project-item:hover img{ | |||
transform:scale(1.08); | |||
} | |||
/* ====================================== | |||
STATISTICS | |||
====================================== */ | |||
.statistics{ | |||
padding:55px 0 70px; | |||
color:#fff; | |||
text-align:center; | |||
background: | |||
linear-gradient( | |||
rgba(0,0,0,.7), | |||
rgba(0,0,0,.7) | |||
), | |||
url("images/stat-bg.jpg"); | |||
background-size:cover; | |||
background-position:center; | |||
} | |||
.statistics h2{ | |||
font-size:22px; | |||
margin-bottom:35px; | |||
} | |||
.stat-grid{ | |||
display:grid; | |||
grid-template-columns:repeat(2,1fr); | |||
gap:30px 10px; | |||
} | |||
.stat strong{ | |||
display:block; | |||
font-size:38px; | |||
color:#f52d48; | |||
line-height:1; | |||
} | |||
.stat span{ | |||
font-size:12px; | |||
} | |||
/* ====================================== | |||
ADVANTAGES | |||
====================================== */ | |||
.advantages{ | |||
padding:45px 0; | |||
} | |||
.adv-grid{ | |||
display:grid; | |||
grid-template-columns:1fr; | |||
gap:20px; | |||
} | |||
.adv-box{ | |||
background:#f5f5f5; | |||
padding:25px 15px; | |||
text-align:center; | |||
} | |||
.adv-icon{ | |||
width:60px; | |||
height:60px; | |||
background:#151515; | |||
color:#fff; | |||
display:flex; | |||
align-items:center; | |||
justify-content:center; | |||
border-radius:50%; | |||
margin:auto; | |||
font-size:22px; | |||
border:3px solid white; | |||
outline:2px solid #f59aaa; | |||
} | |||
.adv-box h3{ | |||
font-size:15px; | |||
margin:12px 0; | |||
} | |||
.adv-box p{ | |||
font-size:12px; | |||
line-height:2; | |||
color:#777; | |||
} | |||
/* ====================================== | |||
ARTICLES | |||
====================================== */ | |||
.articles{ | |||
padding:30px 0 60px; | |||
} | |||
.article-grid{ | |||
display:grid; | |||
grid-template-columns:1fr; | |||
gap:20px; | |||
} | |||
.article-card{ | |||
height:230px; | |||
position:relative; | |||
overflow:hidden; | |||
} | |||
.article-card img{ | |||
width:100%; | |||
height:100%; | |||
object-fit:cover; | |||
} | |||
.article-overlay{ | |||
position:absolute; | |||
right:0; | |||
bottom:0; | |||
left:0; | |||
padding:15px; | |||
background: | |||
linear-gradient( | |||
transparent, | |||
rgba(0,0,0,.85) | |||
); | |||
height:100%; | |||
display:flex; | |||
align-items:flex-end; | |||
} | |||
.article-overlay h3{ | |||
color:white; | |||
font-size:14px; | |||
line-height:2; | |||
} | |||
/* ====================================== | |||
TABLET | |||
====================================== */ | |||
@media(min-width:768px){ | |||
.project-grid{ | |||
grid-template-columns:repeat(4,1fr); | |||
} | |||
.project-item{ | |||
height:120px; | |||
} | |||
.stat-grid{ | |||
grid-template-columns:repeat(4,1fr); | |||
} | |||
.adv-grid{ | |||
grid-template-columns:repeat(4,1fr); | |||
} | |||
.article-grid{ | |||
grid-template-columns:repeat(4,1fr); | |||
} | |||
.article-card{ | |||
height:200px; | |||
} | |||
} | |||
</style> | |||
<!-- ========================================== | |||
CLIENT LOGOS | |||
========================================== --> | |||
<section class="clients"> | |||
<div class="container"> | |||
<div class="section-title"> | |||
<h2> | |||
برخی از ماشین آلات ما | |||
</h2> | |||
<p> | |||
همکاری با مجموعههای صنعتی معتبر | |||
</p> | |||
</div> | |||
<div class="client-grid"> | |||
<div class="client-logo"> | |||
<img src="https://dl.faraghaib.ir/m/260023-01/260023-01-08.jpg" | |||
alt="لوگوی مشتری صنعتی"> | |||
</div> | |||
<div class="client-logo"> | |||
<img src="https://dl.faraghaib.ir/m/260023-01/260023-01-10.png" | |||
alt="لوگوی کارخانه"> | |||
</div> | |||
<div class="client-logo"> | |||
<img src="https://dl.faraghaib.ir/m/260023-01/260023-01-13.png" | |||
alt="لوگوی شرکت تولیدی"> | |||
</div> | |||
<div class="client-logo"> | |||
<img src="https://dl.faraghaib.ir/m/260023-01/260023-01-14.jpg" | |||
alt="لوگوی مجموعه صنعتی"> | |||
</div> | |||
<div class="client-logo"> | |||
<img src="https://dl.faraghaib.ir/m/260023-01/260023-01-25.jpg" | |||
alt="لوگوی مشتری"> | |||
</div> | |||
</div> | |||
</div> | |||
</section> | |||
<!-- ========================================== | |||
CTA | |||
========================================== --> | |||
<section class="cta"> | |||
<div class="container"> | |||
<h2> | |||
دستگاه صنعتی مورد نیاز خود را سفارش دهید | |||
</h2> | |||
<p> | |||
طراحی و ساخت دستگاههای صنعتی سفارشی | |||
براساس نیاز کارخانه و خط تولید شما. | |||
</p> | |||
<a href="#" class="main-btn red"> | |||
دریافت مشاوره رایگان | |||
</a> | |||
</div> | |||
</section> | |||
<!-- ========================================== | |||
FOOTER | |||
========================================== --> | |||
<footer class="footer"> | |||
<div class="container"> | |||
<div class="footer-grid"> | |||
<div class="footer-about"> | |||
<h3> | |||
درباره شرکت | |||
</h3> | |||
<p> | |||
مجموعه ما با تخصص در طراحی و ساخت دستگاه صنعتی، | |||
تولید ماشینآلات سفارشی و اجرای پروژههای صنعتی، | |||
راهکارهای مهندسی برای صنایع مختلف ارائه میدهد. | |||
</p> | |||
<div class="social"> | |||
<a href="#"> | |||
<i class="fa-brands fa-instagram"></i> | |||
</a> | |||
<a href="#"> | |||
<i class="fa-brands fa-whatsapp"></i> | |||
</a> | |||
<a href="#"> | |||
<i class="fa-brands fa-telegram"></i> | |||
</a> | |||
</div> | |||
</div> | |||
<div class="footer-links"> | |||
<h3> | |||
خدمات ما | |||
</h3> | |||
<ul> | |||
<li> | |||
<a href="#"> | |||
ساخت دستگاه صنعتی | |||
</a> | |||
</li> | |||
<li> | |||
<a href="#"> | |||
طراحی ماشین آلات صنعتی | |||
</a> | |||
</li> | |||
<li> | |||
<a href="#"> | |||
تجهیزات خطوط تولید | |||
</a> | |||
</li> | |||
<li> | |||
<a href="#"> | |||
اتوماسیون صنعتی | |||
</a> | |||
</li> | |||
<li> | |||
<a href="#"> | |||
مهندسی معکوس | |||
</a> | |||
</li> | |||
</ul> | |||
</div> | |||
<div class="footer-contact"> | |||
<h3> | |||
تماس با ما | |||
</h3> | |||
<p> | |||
<i class="fa-solid fa-location-dot"></i> | |||
تهران، شهرک صنعتی | |||
</p> | |||
<p> | |||
<i class="fa-solid fa-phone"></i> | |||
021-12345678 | |||
</p> | |||
<p> | |||
<i class="fa-solid fa-mobile"></i> | |||
09121234567 | |||
</p> | |||
<p> | |||
<i class="fa-solid fa-envelope"></i> | |||
info@example.com | |||
</p> | |||
</div> | |||
</div> | |||
<div class="copyright"> | |||
تمامی حقوق این سایت متعلق به شرکت طراحی و ساخت دستگاههای صنعتی است. | |||
</div> | |||
</div> | |||
</footer> | |||
<!-- ========================================== | |||
BACK TO TOP | |||
========================================== --> | |||
<button class="top-btn" | |||
onclick="window.scrollTo({top:0,behavior:'smooth'})"> | |||
<i class="fa-solid fa-angle-up"></i> | |||
</button> | |||
<style> | |||
/* ====================================== | |||
CLIENTS | |||
====================================== */ | |||
.clients{ | |||
padding:45px 0; | |||
background:#fff; | |||
} | |||
.client-grid{ | |||
display:grid; | |||
grid-template-columns:repeat(2,1fr); | |||
gap:20px; | |||
} | |||
.client-logo{ | |||
height:90px; | |||
display:flex; | |||
align-items:center; | |||
justify-content:center; | |||
background:#fafafa; | |||
} | |||
.client-logo img{ | |||
max-width:130px; | |||
max-height:60px; | |||
filter:grayscale(100%); | |||
opacity:.7; | |||
transition:.3s; | |||
} | |||
.client-logo:hover img{ | |||
filter:none; | |||
opacity:1; | |||
} | |||
/* ====================================== | |||
CTA | |||
====================================== */ | |||
.cta{ | |||
padding:45px 0; | |||
text-align:center; | |||
background:#f6f6f6; | |||
} | |||
.cta h2{ | |||
font-size:24px; | |||
margin-bottom:15px; | |||
} | |||
.cta p{ | |||
font-size:13px; | |||
color:#777; | |||
margin-bottom:25px; | |||
} | |||
.main-btn.red{ | |||
background:#f52d48; | |||
color:white; | |||
} | |||
/* ====================================== | |||
FOOTER | |||
====================================== */ | |||
.footer{ | |||
background: | |||
linear-gradient( | |||
rgba(20,20,20,.96), | |||
rgba(20,20,20,.96) | |||
), | |||
url("images/footer-bg.jpg"); | |||
background-size:cover; | |||
color:white; | |||
padding:55px 0 20px; | |||
} | |||
.footer-grid{ | |||
display:grid; | |||
grid-template-columns:1fr; | |||
gap:35px; | |||
} | |||
.footer h3{ | |||
font-size:17px; | |||
margin-bottom:18px; | |||
} | |||
.footer p, | |||
.footer li, | |||
.footer a{ | |||
font-size:12px; | |||
color:#bbb; | |||
line-height:2.2; | |||
} | |||
.footer ul{ | |||
list-style:none; | |||
padding:0; | |||
} | |||
.footer li{ | |||
margin-bottom:5px; | |||
} | |||
.footer a:hover{ | |||
color:#f52d48; | |||
} | |||
.social{ | |||
display:flex; | |||
gap:10px; | |||
margin-top:20px; | |||
} | |||
.social a{ | |||
width:38px; | |||
height:38px; | |||
display:flex; | |||
align-items:center; | |||
justify-content:center; | |||
background:#292929; | |||
border-radius:50%; | |||
font-size:18px; | |||
} | |||
.copyright{ | |||
margin-top:35px; | |||
padding-top:20px; | |||
border-top:1px solid #333; | |||
text-align:center; | |||
font-size:11px; | |||
color:#888; | |||
} | |||
/* ====================================== | |||
TOP BUTTON | |||
====================================== */ | |||
.top-btn{ | |||
position:fixed; | |||
bottom:20px; | |||
left:20px; | |||
width:40px; | |||
height:40px; | |||
border:none; | |||
border-radius:5px; | |||
background:#f52d48; | |||
color:white; | |||
cursor:pointer; | |||
z-index:100; | |||
} | |||
/* ====================================== | |||
MOBILE MENU | |||
====================================== */ | |||
@media(max-width:767px){ | |||
.nav{ | |||
position:absolute; | |||
top:70px; | |||
right:4%; | |||
left:4%; | |||
background:#111; | |||
padding:15px; | |||
border-radius:5px; | |||
flex-direction:column; | |||
} | |||
.nav.show{ | |||
display:flex; | |||
} | |||
.nav a{ | |||
border-bottom:1px solid #333; | |||
padding:12px; | |||
} | |||
} | |||
/* ====================================== | |||
DESKTOP | |||
====================================== */ | |||
@media(min-width:768px){ | |||
.menu-btn{ | |||
display:none; | |||
} | |||
.nav{ | |||
display:flex; | |||
align-items:center; | |||
gap:18px; | |||
} | |||
.header-contact{ | |||
display:block; | |||
} | |||
.client-grid{ | |||
grid-template-columns:repeat(5,1fr); | |||
} | |||
.footer-grid{ | |||
grid-template-columns:2fr 1fr 1fr; | |||
} | |||
.footer-about p{ | |||
max-width:350px; | |||
} | |||
} | |||
</style> | |||
<script> | |||
const menuButton = | |||
document.querySelector(".menu-btn"); | |||
const nav = | |||
document.querySelector(".nav"); | |||
menuButton.addEventListener("click",()=>{ | |||
nav.classList.toggle("show"); | |||
}); | |||
</ | </script> | ||
</ | </HTML> | ||