Skip to content

Commit

Permalink
Change web design #3
Browse files Browse the repository at this point in the history
  • Loading branch information
@pryter
pryter committed Jan 16, 2021
1 parent cee6aed commit 3175375
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 47 deletions.
2 changes: 1 addition & 1 deletion .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ npm-debug.log*
yarn-debug.log*
yarn-error.log*

# local env files
# local .env files
.env.local
.env.development.local
.env.test.local
Expand Down
80 changes: 34 additions & 46 deletions src/components/index/Highlights/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,70 +12,58 @@ import {
export const Highlights = () => (
<div>
<div>
<h1 className="hidden font-black text-center text-blue-400 md:block mt-52 text-7xl ">
<h1 className="font-black text-center text-blue-400 mt-32 md:mt-52 text-3xl md:text-7xl">
Highlights
</h1>
<div className="flex flex-wrap mt-2 md:justify-center md:mt-12 font-display">
<div className="flex flex-row items-center w-full mt-16 md:flex-col md:ml-14 md:mr-28 md:w-1/4">
<div className="relative w-80">
<div className="hidden rounded-full md:block bg-gradient-to-b from-pink-100 to-pink-0 w-80 h-80" />
<div className="inline-block md:hidden">
<CirclePink />
</div>
<div className="absolute left-8 top-10 md:top-20 md:left-12">
<Live className="w-44 md:w-auto" />
<div className="flex flex-wrap justify-center mt-8 md:mt-12 font-display">
<div className="flex flex-col items-center mt-0 md:mt-16 ml-4 md:ml-8 mr-4 inline-block">
<div className="bg-white rounded-3xl shadow-lg px-12 py-8 md:px-24 md:py-14 mb-6">
<div className="relative w-52 md:w-80">
<div className="rounded-full bg-gradient-to-b from-pink-100 to-pink-0 w-40 h-40 md:w-56 md:h-56"/>
<div className="absolute top-2 left-12 md:top-12 md:left-14">
<Live className="w-44 md:w-64"/>
</div>
</div>
</div>
<div className="flex flex-col h-full text-right md:items-center md:justify-center">
<div className="hidden text-base font-normal text-right text-gray-500 md:block md:text-center md:text-2xl md:leading-normal md:w-80">
<div className="flex flex-col h-full text-right items-center justify-center">
<div
className="hidden md:block text-base font-normal text-gray-500 text-center md:text-2xl md:leading-normal md:w-80">
<p>Live แนะนำสายการเรียน</p>
<p>สัมภาษณ์รุ่นพี่ และคอนเทนต์น่าสนใจอื่น ๆ อีกมากมาย</p>
</div>
<div className="absolute right-0 text-base font-normal text-right text-gray-500 md:hidden md:text-center md:text-2xl md:leading-normal w-72">
<div className="absolute -top-6">
<h1 className="block pb-1 text-xl font-black text-right text-blue-400 md:hidden">
Highlights
</h1>
<p>Live แนะนำสายการเรียน สัมภาษณ์รุ่นพี่</p>
<p>และคอนเทนต์น่าสนใจอื่น ๆ อีกมากมาย</p>
</div>
<div
className="block md:hidden text-base font-normal text-gray-500 text-center md:text-2xl md:leading-normal md:w-80">
<p className="w-64 md:w-auto">Live แนะนำสายการเรียน สัมภาษณ์รุ่นพี่ และคอนเทนต์น่าสนใจอื่น ๆ อีกมากมาย</p>
</div>
</div>
</div>
<div className="flex flex-row-reverse w-full -mt-10 md:flex-col md:items-center md:justify-center md:mt-12 md:mx-14 md:w-1/4">
<div className="relative text-right w-80">
<div className="hidden rounded-full md:block bg-gradient-to-b from-yellow-100 to-yellow-0 w-80 h-80" />
<div className="inline-block md:hidden">
<CircleYellow />
</div>
<div className="absolute top-0 right-10 md:top-12 md:-left-4">
<Clip className="w-48 md:w-auto" />
<div className="flex flex-col items-center mt-16 mx-4 inline-block">
<div className="bg-white rounded-3xl shadow-lg px-12 py-8 md:px-24 md:py-14 mb-6">
<div className="flex justify-center items-center relative w-52 md:w-80">
<div className="rounded-full bg-gradient-to-b from-yellow-100 to-yellow-0 w-40 h-40 md:w-56 md:h-56"/>
<div className="absolute -top-6 left-1 md:top-12 md:-left-4">
<Clip className="w-48 md:w-72"/>
</div>
</div>
</div>
<div className="flex text-right sm:items-center sm:justify-center">
<div className="mt-6 text-base font-normal text-left text-gray-500 w-58 ml-7 sm:ml-0 md:ml-0 sm:mt-0 md:mt-0 md:text-center md:text-2xl md:leading-normal md:w-64">
<div className="flex flex-col h-full text-right md:items-center md:justify-center">
<div
className="mt-2 md:mt-6 text-base font-normal text-center text-gray-500 w-44 md:text-center md:text-2xl md:leading-normal md:w-64">
<p>คลิป/บทความที่น่าสนใจ จากรุ่นพี่เตรียมอุดมฯ</p>
</div>
</div>
</div>
<div className="flex flex-row w-full -mt-10 md:flex-col md:items-center md:justify-center md:mt-12 md:mx-14 md:w-1/4">
<div className="relative w-80">
<div className="hidden rounded-full md:block bg-gradient-to-b from-purple-100 to-purple-0 w-80 h-80" />
<div className="inline-block md:hidden">
<CirclePurple />
</div>
<div className="absolute left-8 -top-10 md:-top-4 md:left-4">
<Giveaway className="w-44 md:w-auto" />
<div className="flex flex-col items-center mt-16 ml-4 mr-4 md:mr-8 inline-block">
<div className="bg-white rounded-3xl shadow-lg px-12 py-8 md:px-24 md:py-14 mb-6">
<div className="flex flex-row-reverse relative w-52 md:w-80">
<div className="rounded-full bg-gradient-to-b from-purple-100 to-purple-0 w-40 h-40 md:w-56 md:h-56"/>
<div className="absolute -top-14 right-11 md:-top-10 md:left-2">
<Giveaway className="w-40 md:w-64"/>
</div>
</div>
</div>
<div className="flex text-right sm:items-center sm:justify-center">
<div className="hidden w-64 mt-0 ml-0 text-2xl font-normal leading-normal text-center text-gray-500 sm:hidden md:block">
<p>Giveaway ปฏิทินสอบเข้า และ sticker สุดน่ารัก</p>
</div>
<div className="absolute mt-8 text-base font-normal text-right text-gray-500 sm:hidden md:hidden right-10 w-44 ml-9">
<p>Giveaway ปฏิทินสอบเข้า และ sticker สุดน่ารัก</p>
</div>
<div className="hidden w-full mt-0 ml-0 text-base font-normal leading-normal text-center text-gray-500 sm:block md:hidden">
<div className="flex flex-col h-full text-right md:items-center md:justify-center">
<div className="mt-2 md:mt-6 text-base font-normal text-center text-gray-500 w-40 text-center md:text-2xl leading-normal md:w-64">
<p>Giveaway ปฏิทินสอบเข้า และ sticker สุดน่ารัก</p>
</div>
</div>
Expand Down

0 comments on commit 3175375

Please sign in to comment.