[🐛] 화면 반응형
1. 화면 반응형 동작 가능하게 수정
This commit is contained in:
parent
c1fdf2773d
commit
9e2151cbd7
|
@ -37,7 +37,7 @@
|
|||
|
||||
<!-- 본문 컨텐츠 -->
|
||||
@* <main class="flex-1 p-4 sm:p-6 md:p-8"> *@
|
||||
<main class="flex-1">
|
||||
<main class="flex-1 w-full w-max-960 mx-auto">
|
||||
@Body
|
||||
</main>
|
||||
</div>
|
||||
|
|
|
@ -32,14 +32,16 @@
|
|||
@* </head> *@
|
||||
|
||||
@* <body> *@
|
||||
<div class="relative flex size-full min-h-screen flex-col bg-white group/design-root overflow-x-hidden" style='font-family: "Plus Jakarta Sans", "Noto Sans", sans-serif;'>
|
||||
<div class="relative flex size-full w-full min-h-screen flex-col items-center bg-white group/design-root overflow-x-hidden"
|
||||
style='font-family: "Plus Jakarta Sans", "Noto Sans", sans-serif;'>
|
||||
<div class="layout-container flex h-full grow flex-col">
|
||||
<div class="flex flex-1 justify-center">
|
||||
<div class="layout-content-container flex flex-col max-w-[960px] flex-1">
|
||||
<div class="layout-content-container flex flex-col w-full max-w-[960px] flex-1 mx-auto">
|
||||
<div class="container">
|
||||
<div class="[480px]:p-4">
|
||||
@* <div class="[480px]:p-4"> *@
|
||||
<div
|
||||
class="flex min-h-[480px] flex-col gap-6 bg-cover bg-center bg-no-repeat [480px]:gap-8 [480px]:rounded-lg items-start justify-end px-4 pb-10 [480px]:px-10"
|
||||
class="w-full flex min-h-[480px] flex-col gap-6 bg-cover bg-center bg-no-repeat [480px]:gap-8 [480px]:rounded-lg items-start justify-end px-4 pb-10 [480px]:px-10"
|
||||
@* class="flex min-h-[480px] flex-col gap-6 bg-cover bg-center bg-no-repeat [480px]:gap-8 [480px]:rounded-lg items-start justify-end px-4 pb-10 [480px]:px-10" *@
|
||||
style='background-image: linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.4) 100%), url("https://lh3.googleusercontent.com/aida-public/AB6AXuDffY0eohqZnXKdWwIoiHloiYxZ1igyaJWtn7zdpfeze7pDhQuxV3MqvGueO1m-a38SDlXVEZUkd8es8cB8YvKHf8J-FIzTPFEHU4UnTNRBnX0XGv0EoZGrutA0kHnI_IA0k0SLtlU7NUK_7EcLabUHzALRgVZhcP98Bd-2GZl85-6ODqSHpe11pHXpyMz3RDDEzhDuHAwBBfJJaJG7zFC22X8Cc0K_V97Vf7jXfs-WYJ5CCrKAE3JpT2RUbdEJfiJHOkDh9yGWU1TB");'
|
||||
>
|
||||
<div class="flex flex-col gap-2 text-left">
|
||||
|
@ -58,7 +60,7 @@
|
|||
<span class="truncate">Get Started</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@* </div> *@
|
||||
</div>
|
||||
<div class="flex flex-col gap-10 px-4 py-10 container">
|
||||
<div class="flex flex-col gap-4">
|
||||
|
|
|
@ -1,18 +1,27 @@
|
|||
<div class="flex items-center justify-between whitespace-nowrap border-b border-solid border-b-[#f0f2f5] py-4 bg-white">
|
||||
<div class="flex items-center gap-4 text-[#111418] ml-4">
|
||||
<img src="/logo.png" alt="Icon" class="w-8 h-8">
|
||||
<h2 class="text-[#111418] text-lg font-bold leading-tight tracking-[-0.015em]">AcaMate</h2>
|
||||
<h2 class="text-text-title text-lg font-bold leading-tight tracking-[-0.015em]">AcaMate</h2>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-1 justify-end gap-8">
|
||||
<div class="flex items-center gap-9">
|
||||
<a class=" text-text-title font-medium leading-normal hover:text-blue-800" href="#">About</a>
|
||||
<a class="text-text-title font-medium leading-normal hover:text-blue-800" href="#">Join</a>
|
||||
<a class="text-text-title font-medium leading-normal hover:text-blue-800" href="#">What's New</a>
|
||||
<div class="hidden md:flex flex-1 justify-end gap-8">
|
||||
<div class="flex flex-1 justify-end gap-8">
|
||||
<div class="flex items-center gap-9">
|
||||
<a class=" text-text-title font-medium leading-normal hover:text-blue-800" href="#">About</a>
|
||||
<a class="text-text-title font-medium leading-normal hover:text-blue-800" href="#">Join</a>
|
||||
<a class="text-text-title font-medium leading-normal hover:text-blue-800" href="#">What's New</a>
|
||||
</div>
|
||||
<button class="flex min-w-[84px] max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-lg h-10 px-4 bg-blue-500 hover:bg-blue-800 text-white text-sm font-bold leading-normal tracking-[0.015em] mr-4"
|
||||
@onclick= "OnClickLogin">
|
||||
<span class="truncate">Get Started</span>
|
||||
</button>
|
||||
</div>
|
||||
<button class="flex min-w-[84px] max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-lg h-10 px-4 bg-blue-500 hover:bg-blue-800 text-white text-sm font-bold leading-normal tracking-[0.015em] mr-4"
|
||||
@onclick= "OnClickLogin">
|
||||
<span class="truncate">Get Started</span>
|
||||
</button>
|
||||
</div>
|
||||
<button class="md:hidden mr-4">
|
||||
<!-- 햄버거 아이콘 (예시) -->
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user