CSS<\/strong><\/p>\n\n\n\n\/* CSS Reset *\/<\/p>\n\n\n\n
* {<\/p>\n\n\n\n
margin: 0;<\/p>\n\n\n\n
padding: 0;<\/p>\n\n\n\n
box-sizing: border-box;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
\/* Typography (Match PSD exactly) *\/<\/p>\n\n\n\n
body {<\/p>\n\n\n\n
font-family: ‘Inter’, sans-serif;<\/p>\n\n\n\n
font-size: 16px;<\/p>\n\n\n\n
line-height: 1.6;<\/p>\n\n\n\n
color: #333333;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
h1 {<\/p>\n\n\n\n
font-size: 48px;<\/p>\n\n\n\n
font-weight: 700;<\/p>\n\n\n\n
line-height: 1.2;<\/p>\n\n\n\n
letter-spacing: -0.5px;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
\/* Layout with Flexbox *\/<\/p>\n\n\n\n
.container {<\/p>\n\n\n\n
max-width: 1200px;<\/p>\n\n\n\n
margin: 0 auto;<\/p>\n\n\n\n
padding: 0 20px;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.navbar {<\/p>\n\n\n\n
display: flex;<\/p>\n\n\n\n
justify-content: space-between;<\/p>\n\n\n\n
align-items: center;<\/p>\n\n\n\n
padding: 20px 0;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.nav-menu {<\/p>\n\n\n\n
display: flex;<\/p>\n\n\n\n
gap: 32px;<\/p>\n\n\n\n
list-style: none;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
\/* Hero Section *\/<\/p>\n\n\n\n
.hero-section {<\/p>\n\n\n\n
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);<\/p>\n\n\n\n
padding: 120px 0;<\/p>\n\n\n\n
text-align: center;<\/p>\n\n\n\n
color: white;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.cta-button {<\/p>\n\n\n\n
display: inline-block;<\/p>\n\n\n\n
padding: 16px 40px;<\/p>\n\n\n\n
background: #ff6b6b;<\/p>\n\n\n\n
color: white;<\/p>\n\n\n\n
text-decoration: none;<\/p>\n\n\n\n
border-radius: 8px;<\/p>\n\n\n\n
font-weight: 600;<\/p>\n\n\n\n
transition: transform 0.3s ease;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.cta-button:hover {<\/p>\n\n\n\n
transform: translateY(-2px);<\/p>\n\n\n\n
box-shadow: 0 8px 20px rgba(255, 107, 107, 0.4);<\/p>\n\n\n\n
}<\/p>\n\n\n\n
\/* Grid Layout (CSS Grid for modern browsers) *\/<\/p>\n\n\n\n
.feature-grid {<\/p>\n\n\n\n
display: grid;<\/p>\n\n\n\n
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));<\/p>\n\n\n\n
gap: 32px;<\/p>\n\n\n\n
margin-top: 48px;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.feature-card {<\/p>\n\n\n\n
padding: 32px;<\/p>\n\n\n\n
background: white;<\/p>\n\n\n\n
border-radius: 12px;<\/p>\n\n\n\n
box-shadow: 0 4px 16px rgba(0,0,0,0.1);<\/p>\n\n\n\n
transition: transform 0.3s ease;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.feature-card:hover {<\/p>\n\n\n\n
transform: translateY(-8px);<\/p>\n\n\n\n
}<\/p>\n\n\n\n
Pro techniques for accurate conversion:<\/strong><\/p>\n\n\n\n\n- Use Chrome DevTools to inspect PSD measurements<\/li>\n\n\n\n
- Match exact hex colors: #667eea not approximate values<\/li>\n\n\n\n
- Preserve letter-spacing and line-height ratios<\/li>\n\n\n\n
- Use rem units for scalability (1rem = 16px default)<\/li>\n<\/ul>\n\n\n\n
Step 6: Make It Responsive (PSD to Responsive HTML)<\/strong><\/h3>\n\n\n\nMobile-first approach (start with mobile styles, enhance for desktop):<\/p>\n\n\n\n
CSS<\/strong><\/p>\n\n\n\n\/* Mobile-First Base Styles (320px+) *\/<\/p>\n\n\n\n
.hero-section {<\/p>\n\n\n\n
padding: 60px 20px;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
h1 {<\/p>\n\n\n\n
font-size: 32px;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.nav-menu {<\/p>\n\n\n\n
display: none; \/* Hidden on mobile, toggle with JS *\/<\/p>\n\n\n\n
}<\/p>\n\n\n\n
\/* Tablet (768px+) *\/<\/p>\n\n\n\n
@media screen and (min-width: 768px) {<\/p>\n\n\n\n
.hero-section {<\/p>\n\n\n\n
padding: 90px 40px;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
h1 {<\/p>\n\n\n\n
font-size: 40px;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.feature-grid {<\/p>\n\n\n\n
grid-template-columns: repeat(2, 1fr);<\/p>\n\n\n\n
}<\/p>\n\n\n\n
}<\/p>\n\n\n\n
\/* Desktop (1024px+) *\/<\/p>\n\n\n\n
@media screen and (min-width: 1024px) {<\/p>\n\n\n\n
.hero-section {<\/p>\n\n\n\n
padding: 120px 0;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
h1 {<\/p>\n\n\n\n
font-size: 48px;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.nav-menu {<\/p>\n\n\n\n
display: flex;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.feature-grid {<\/p>\n\n\n\n
grid-template-columns: repeat(3, 1fr);<\/p>\n\n\n\n
}<\/p>\n\n\n\n
}<\/p>\n\n\n\n
\/* Large Desktop (1440px+) *\/<\/p>\n\n\n\n
@media screen and (min-width: 1440px) {<\/p>\n\n\n\n
.container {<\/p>\n\n\n\n
max-width: 1320px;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
}<\/p>\n\n\n\n
Breakpoint strategy:<\/strong><\/p>\n\n\n\n\n- 320px<\/strong> \u2013 Small phones<\/li>\n\n\n\n
- 768px<\/strong> \u2013 Tablets<\/li>\n\n\n\n
- 1024px<\/strong> \u2013 Small laptops<\/li>\n\n\n\n
- 1440px<\/strong> \u2013 Desktop monitors<\/li>\n<\/ul>\n\n\n\n
Step 7: Add Interactions & Animations<\/strong><\/h3>\n\n\n\nEnhance user experience with micro-interactions:<\/p>\n\n\n\n
CSS<\/strong><\/p>\n\n\n\n\/* Smooth Transitions *\/<\/p>\n\n\n\n
.cta-button, .feature-card, .nav-menu a {<\/p>\n\n\n\n
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);<\/p>\n\n\n\n
}<\/p>\n\n\n\n
\/* Hover Effects *\/<\/p>\n\n\n\n
.nav-menu a:hover {<\/p>\n\n\n\n
color: #667eea;<\/p>\n\n\n\n
transform: translateY(-2px);<\/p>\n\n\n\n
}<\/p>\n\n\n\n
\/* CSS Animations *\/<\/p>\n\n\n\n
@keyframes fadeInUp {<\/p>\n\n\n\n
from {<\/p>\n\n\n\n
opacity: 0;<\/p>\n\n\n\n
transform: translateY(30px);<\/p>\n\n\n\n
}<\/p>\n\n\n\n
to {<\/p>\n\n\n\n
opacity: 1;<\/p>\n\n\n\n
transform: translateY(0);<\/p>\n\n\n\n
}<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.hero-section h1 {<\/p>\n\n\n\n
animation: fadeInUp 0.8s ease-out;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.feature-card {<\/p>\n\n\n\n
animation: fadeInUp 0.8s ease-out;<\/p>\n\n\n\n
animation-fill-mode: both;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.feature-card:nth-child(1) { animation-delay: 0.1s; }<\/p>\n\n\n\n
.feature-card:nth-child(2) { animation-delay: 0.2s; }<\/p>\n\n\n\n
.feature-card:nth-child(3) { animation-delay: 0.3s; }<\/p>\n\n\n\n
JavaScript for interactive elements:<\/strong><\/p>\n\n\n\nJavaScript<\/strong><\/p>\n\n\n\n\/\/ Mobile Menu Toggle<\/p>\n\n\n\n
const menuToggle = document.querySelector(‘.menu-toggle’);<\/p>\n\n\n\n
const navMenu = document.querySelector(‘.nav-menu’);<\/p>\n\n\n\n
menuToggle.addEventListener(‘click’, () => {<\/p>\n\n\n\n
navMenu.classList.toggle(‘active’);<\/p>\n\n\n\n
});<\/p>\n\n\n\n
\/\/ Smooth Scroll<\/p>\n\n\n\n
document.querySelectorAll(‘a[href^=”#”]’).forEach(anchor => {<\/p>\n\n\n\n
anchor.addEventListener(‘click’, function (e) {<\/p>\n\n\n\n
e.preventDefault();<\/p>\n\n\n\n
const target = document.querySelector(this.getAttribute(‘href’));<\/p>\n\n\n\n
target.scrollIntoView({ behavior: ‘smooth’, block: ‘start’ });<\/p>\n\n\n\n
});<\/p>\n\n\n\n
});<\/p>\n\n\n\n