Footer with content in right
Category: Footers
Below is the component for your context <!DOCTYPE html><html lang="en"><head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Atlas Studio Footer</title>
<link href="https://api.fontshare.com/v2/css?f[]=general-sans@500,600&display=swap" rel="stylesheet">
<style>
/* Mimic the specific 'New Title' font sizing and behavior */
.font-atlas-display {
font-family: 'General Sans', sans-serif; /* Fallback */
letter-spacing: -0.02em;
}
</style>
<style type="text/tailwindcss">@tailwind base;
@tailwind components;
@tailwind utilities;
@font-face {
font-family: 'General Sans';
src: url('https://api.fontshare.com/v2/css?f[]=general-sans@600&display=swap');
}
@font-face {
font-family: 'New Title';
src: url('https://fonts.cdnfonts.com/css/new-title');
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}</style><script src="https://cdn.tailwindcss.com"></script><script>tailwind.config = {
important: '#app-root',
theme: {
extend: {
colors: {
'brand-primary': 'rgb(255, 64, 23)',
'neutral-background': 'rgb(255, 255, 255)',
'neutral-surface': 'rgb(248, 247, 247)',
'text-primary': 'rgb(37, 27, 24)',
'text-secondary': 'rgb(117, 117, 117)',
'text-onPrimary': 'rgb(255, 255, 255)',
},
fontFamily: {
'primary': ['General Sans', 'sans-serif'],
'display': ['New Title', 'sans-serif'],
},
borderRadius: {
'footer': '32px',
}
}
}
}</script></head>
<body id="app-root" class="bg-black">
<main><footer class="w-full flex justify-center items-center pt-1 px-0 pb-0 overflow-visible">
<div class="w-full max-w-[1520px] bg-white rounded-t-[32px] flex flex-col lg:flex-row justify-center items-start gap-16 lg:gap-[100px] px-10 lg:px-20 py-20 lg:py-32 overflow-hidden">
<!-- Left Column: Big Brand Text -->
<div class="w-full lg:w-1/2">
<h2 class="text-[clamp(80px,20vw,200px)] font-medium leading-[0.9em] tracking-tighter text-black">
<a href="./" class="hover:opacity-80 transition-opacity">Atlas</a>
</h2>
</div>
<!-- Right Column: Navigation Links -->
<div class="w-full lg:w-1/2 flex flex-col gap-10">
<!-- Contact Link -->
<div class="mb-10 lg:mb-20">
<h3 class="text-[clamp(40px,8vw,200px)] font-medium leading-[0.92em] text-black break-words">
<a href="mailto:hello@atlas.com" class="hover:opacity-80 transition-opacity">hello@atlas.com</a>
</h3>
</div>
<!-- Links Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-10 gap-y-12">
<!-- Pillar 1: Pages -->
<div class="flex flex-col gap-5">
<div class="h-[1px] w-full bg-black"></div>
<nav class="flex flex-col gap-4">
<a href="./" class="font-primary text-[14px] font-semibold tracking-tight text-black hover:opacity-60 transition-opacity">Home</a>
<a href="./work" class="font-primary text-[14px] font-semibold tracking-tight text-black hover:opacity-60 transition-opacity">Work</a>
<a href="./services" class="font-primary text-[14px] font-semibold tracking-tight text-black hover:opacity-60 transition-opacity">Services</a>
<a href="./blog" class="font-primary text-[14px] font-semibold tracking-tight text-black hover:opacity-60 transition-opacity">Blog</a>
<a href="./about" class="font-primary text-[14px] font-semibold tracking-tight text-black hover:opacity-60 transition-opacity">About</a>
<a href="./contact" class="font-primary text-[14px] font-semibold tracking-tight text-black hover:opacity-60 transition-opacity">Hire us</a>
</nav>
</div>
<!-- Pillar 2: Socials -->
<div class="flex flex-col gap-5">
<div class="h-[1px] w-full bg-black"></div>
<nav class="flex flex-col gap-4">
<a href="https://x.com/" class="font-primary text-[14px] font-semibold tracking-tight text-black hover:opacity-60 transition-opacity">X (Twitter)</a>
<a href="https://www.linkedin.com/in/" class="font-primary text-[14px] font-semibold tracking-tight text-black hover:opacity-60 transition-opacity">LinkedIn</a>
<a href="https://www.facebook.com/" class="font-primary text-[14px] font-semibold tracking-tight text-black hover:opacity-60 transition-opacity">Facebook</a>
<a href="https://www.instagram.com/" class="font-primary text-[14px] font-semibold tracking-tight text-black hover:opacity-60 transition-opacity">Instagram</a>
<a href="mailto:hi@email.com" class="font-primary text-[14px] font-semibold tracking-tight text-black hover:opacity-60 transition-opacity">Email us</a>
</nav>
</div>
<!-- Pillar 3: Templates -->
<div class="flex flex-col gap-5">
<div class="h-[1px] w-full bg-black"></div>
<nav class="flex flex-col gap-4">
<a href="#" class="font-primary text-[14px] font-semibold tracking-tight text-black hover:opacity-60 transition-opacity">Buy template</a>
<a href="#" class="font-primary text-[14px] font-semibold tracking-tight text-black hover:opacity-60 transition-opacity">More templates</a>
<a href="#" class="font-primary text-[14px] font-semibold tracking-tight text-black hover:opacity-60 transition-opacity">Unlimited Access bundle</a>
<a href="#" class="font-primary text-[14px] font-semibold tracking-tight text-black hover:opacity-60 transition-opacity">Made in Framer</a>
<a href="#" class="font-primary text-[14px] font-semibold tracking-tight text-black hover:opacity-60 transition-opacity">Built by Bryn</a>
</nav>
</div>
<!-- Pillar 4: Legal & Copyright -->
<div class="flex flex-col gap-5">
<div class="h-[1px] w-full bg-black"></div>
<nav class="flex flex-col gap-4">
<a href="./legal/privacy-policy" class="font-primary text-[14px] font-semibold tracking-tight text-black hover:opacity-60 transition-opacity">Privacy policy</a>
<a href="./legal/terms" class="font-primary text-[14px] font-semibold tracking-tight text-black hover:opacity-60 transition-opacity">Terms & conditions</a>
<span class="font-primary text-[14px] font-semibold tracking-tight text-[#757575]">© 2025</span>
</nav>
</div>
</div>
</div>
</div>
</footer></main>
</body></html>
change the textual content
Created by: LandingHero
