3 mins read
2025 NL Home
:root{
–bg:#ffffff;
–text:#222;
–muted:#666;
–primary:#0b72ff; /* replace with PSD main color */
–accent:#ff6600; /* replace with PSD accent color */
–maxw:1200px;
–radius:8px;
–font: “Poppins”, system-ui, -apple-system, “Segoe UI”, Roboto, “Helvetica Neue”, Arial;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0;
font-family:var(–font);
color:var(–text);
background:var(–bg);
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
line-height:1.5;
}
/* WRAP */
.wrap{
width:90%;
max-width:var(–maxw);
margin:0 auto;
}
/* HEADER */
.site-header{
background: #fff;
border-bottom:1px solid #eee;
position:sticky;
top:0;
z-index:50;
}
.site-header .wrap{
display:flex;
align-items:center;
gap:20px;
padding:18px 0;
}
.logo img{height:52px; display:block}
.main-nav{margin-left:auto}
.main-nav ul{list-style:none; display:flex; gap:26px; margin:0; padding:0; align-items:center}
.main-nav a{color:var(–text); text-decoration:none; font-weight:600}
.nav-toggle{display:none; background:none; border:0; cursor:pointer}
.nav-toggle span{display:block; width:22px; height:2px; background:#333; margin:4px 0; transition:all .2s}
/* HERO */
.hero{
position:relative;
background-image: url(‘images/hero-bg.jpg’); /* replace */
background-size:cover;
background-position:center;
color:#fff;
padding:80px 0;
overflow:hidden;
}
.hero-overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,114,255,0.75), rgba(0,0,0,0.2)); mix-blend-mode:multiply}
.hero-content{position:relative; display:flex; gap:30px; align-items:center; justify-content:space-between}
.hero-left{flex:1; max-width:650px}
.hero-title{font-size:42px; line-height:1.05; margin:0 0 16px; font-weight:700}
.hero-sub{font-size:18px; margin-bottom:20px; color:rgba(255,255,255,0.9)}
.hero-right img{max-width:480px; width:100%; height:auto; display:block; border-radius:12px; box-shadow:0 12px 30px rgba(0,0,0,0.25)}
.hero-cta .btn{margin-right:12px}
/* BUTTONS */
.btn{
display:inline-block;
padding:10px 18px;
border-radius:6px;
text-decoration:none;
font-weight:600;
cursor:pointer;
}
.btn-primary{background:var(–primary); color:#fff}
.btn-outline{border:2px solid rgba(255,255,255,0.9); color:#fff; background:transparent}
.btn-cta{background:var(–accent); color:#fff; padding:12px 20px}
/* FEATURES */
.features{padding:60px 0}
.features-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.feature-card{background:#fff; border-radius:10px; padding:18px; text-align:center; box-shadow:0 6px 18px rgba(12,12,20,0.04)}
.feature-card img{width:100%; height:180px; object-fit:cover; border-radius:8px; margin-bottom:12px}
.feature-card h3{margin:8px 0 10px}
/* TWO-COL */
.two-col{padding:50px 0}
.two-col-inner{display:flex; gap:30px; align-items:center}
.image-col{flex:1}
.text-col{flex:1}
.text-col h2{font-size:28px}
.checklist{margin:16px 0 18px; padding-left:18px}
.checklist li{margin-bottom:8px}
/* CTA */
.cta{background:#0b72ff; color:#fff; padding:28px 0; border-radius:0; margin-top:30px}
.cta-inner{display:flex; align-items:center; justify-content:space-between; gap:20px}
.cta-form input[type=”email”]{padding:12px 14px; border-radius:8px; border:0; margin-right:12px; width:320px; max-width:55%}
.cta-form{display:flex; align-items:center}
/* FOOTER */
.site-footer{background:#111; color:#ddd; padding:28px 0; margin-top:40px}
.footer-inner{display:flex; justify-content:space-between; align-items:center; gap:20px}
.footer-nav ul{display:flex; gap:16px; list-style:none; margin:0; padding:0}
/* RESPONSIVE */
@media (max-width:1000px){
.features-grid{grid-template-columns:repeat(2,1fr)}
.hero-title{font-size:34px}
}
@media (max-width:720px){
.wrap{width:94%}
.main-nav{position:fixed; inset:auto 0 0 0; background:#fff; transform:translateY(100%); transition:transform .25s; padding:20px; display:none}
.main-nav.open{display:block; transform:none}
.nav-toggle{display:block; margin-left:auto}
.hero-content{flex-direction:column; text-align:center}
.hero-right img{max-width:320px}
.features-grid{grid-template-columns:1fr}
.two-col-inner{flex-direction:column}
.cta-inner{flex-direction:column; text-align:center}
}
Main Headline From Your PSD
Sub-heading / one-line summary that mirrors the PSD copy.
Feature One
Short descriptive text matching PSD content block.
Feature Two
Short descriptive text matching PSD content block.
Feature Three
Short descriptive text matching PSD content block.
Section Heading from PSD
Longer paragraph area. Use the PSD copy and spacing. This area will reflect typography and line-height set in CSS to match design.
- Point one that PSD shows
- Point two
- Point three
Read More
Ready to get started?
Short supporting line.
