Make header text responsive
parent
3d4d53ab3c
commit
eb3beb1994
|
@ -8,7 +8,7 @@
|
|||
</head>
|
||||
<body class="h-full">
|
||||
<header class="bg-livingstone-500 p-5 h-32 hover:h-56 transition-all duration-500 w-full fixed group">
|
||||
<h1 class="text-center text-5xl text-white p-7 font-bevan">David Livingstone</h1>
|
||||
<h1 class="text-center text-3xl sm:text-5xl text-white p-7 font-bevan">David Livingstone</h1>
|
||||
<ul class="flex place-content-center place-items-center p-8 invisible group-hover:visible opacity-0 group-hover:opacity-100 transition-opacity duration-300 group-hover:duration-1000">
|
||||
<li><a href="/" class="text-white bg-livingstone-400 p-5 mx-1 hover:bg-livingstone-100 hover:text-xl transition-all duration-500 rounded-full font-mplus2">Home</a></li>
|
||||
<li><a href="/blog" class="text-white bg-livingstone-400 p-5 mx-1 hover:bg-livingstone-100 hover:text-xl transition-all duration-500 rounded-full font-mplus2">Blog</a></li>
|
||||
|
|
|
@ -8,7 +8,7 @@
|
|||
</head>
|
||||
<body class="h-full">
|
||||
<header class="bg-livingstone-500 p-5 h-32 hover:h-56 transition-all duration-500 opacity-80 hover:opacity-100 w-full fixed group">
|
||||
<h1 class="text-center text-5xl text-white p-7 font-bevan">David Livingstone</h1>
|
||||
<h1 class="text-center text-3xl sm:text-5xl text-white p-7 font-bevan">David Livingstone</h1>
|
||||
<ul class="flex place-content-center place-items-center p-8 invisible group-hover:visible opacity-0 group-hover:opacity-100 transition-opacity duration-300 group-hover:duration-1000">
|
||||
<li><a href="/" class="text-white bg-livingstone-400 p-5 mx-1 hover:bg-livingstone-100 hover:text-xl transition-all duration-500 rounded-full font-mplus2">Home</a></li>
|
||||
<li><a href="/blog" class="text-white bg-livingstone-400 p-5 mx-1 hover:bg-livingstone-100 hover:text-xl transition-all duration-500 rounded-full font-mplus2">Blog</a></li>
|
||||
|
@ -16,7 +16,7 @@
|
|||
</ul>
|
||||
</header>
|
||||
<div class="bg-cover bg-fixed bg-[url('/assets/img/canyon.jpg')] h-3/4 flex flex-col place-content-center place-items-center">
|
||||
<h1 class="text-5xl text-white font-bevan p-10">Africa's greatest missionary</h1>
|
||||
<h1 class="text-5xl text-center text-white font-bevan p-10">Africa's greatest missionary</h1>
|
||||
<h2 class="text-xl text-white font-baskerville"></h2>
|
||||
</div>
|
||||
<main class="min-h-[83.333333%] max-w-5xl m-auto">
|
||||
|
|
|
@ -8,7 +8,7 @@
|
|||
</head>
|
||||
<body class="h-full">
|
||||
<header class="bg-livingstone-500 p-5 h-32 hover:h-56 transition-all duration-500 w-full fixed group">
|
||||
<h1 class="text-center text-5xl text-white p-7 font-bevan">David Livingstone</h1>
|
||||
<h1 class="text-center text-3xl sm:text-5xl text-white p-7 font-bevan">David Livingstone</h1>
|
||||
<ul class="flex place-content-center place-items-center p-8 invisible group-hover:visible opacity-0 group-hover:opacity-100 transition-opacity duration-300 group-hover:duration-1000">
|
||||
<li><a href="/" class="text-white bg-livingstone-400 p-5 mx-1 hover:bg-livingstone-100 hover:text-xl transition-all duration-500 rounded-full font-mplus2">Home</a></li>
|
||||
<li><a href="/blog" class="text-white bg-livingstone-400 p-5 mx-1 hover:bg-livingstone-100 hover:text-xl transition-all duration-500 rounded-full font-mplus2">Blog</a></li>
|
||||
|
|
|
@ -8,7 +8,7 @@
|
|||
</head>
|
||||
<body class="h-full">
|
||||
<header class="bg-livingstone-500 p-5 h-32 hover:h-56 transition-all duration-500 w-full fixed group">
|
||||
<h1 class="text-center text-5xl text-white p-7 font-bevan">David Livingstone</h1>
|
||||
<h1 class="text-center text-3xl sm:text-5xl text-white p-7 font-bevan">David Livingstone</h1>
|
||||
<ul class="flex place-content-center place-items-center p-8 invisible group-hover:visible opacity-0 group-hover:opacity-100 transition-opacity duration-300 group-hover:duration-1000">
|
||||
<li><a href="/" class="text-white bg-livingstone-400 p-5 mx-1 hover:bg-livingstone-100 hover:text-xl transition-all duration-500 rounded-full font-mplus2">Home</a></li>
|
||||
<li><a href="/blog" class="text-white bg-livingstone-400 p-5 mx-1 hover:bg-livingstone-100 hover:text-xl transition-all duration-500 rounded-full font-mplus2">Blog</a></li>
|
||||
|
|
Loading…
Reference in New Issue