Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <main class="resume">
	<h1 data-aos="fade-lfet">Joanne <br> Chen</h1>
	<img src="https://raw.githubusercontent.com/hexschool/webLayoutTraining1st/master/week1/photo.png" alt="" class="profile-photo">

	<section class="profile">
		<h2 data-aos="fade-left">個人資料<span>PROFILE</span></h2>

		<ul data-aos="fade-left">
			<li class="has-list-style">
				<p>陳久安 Joanne Chen</p>
				<p>1997-</p>
				<p>應屆畢業生/接案設計師/UI 設計實習生</p>
			</li>

			<li>
				<p>UI 設計修行中/立志當斜槓青年</p>
				<p>獨立接案,內容涵蓋:</p>
				<p>品牌規劃、視覺設計、編輯設計、標準字、物件及印刷品設計等。</p>
			</li>
		</ul>
	</section>

	<section class="education">
		<h2 data-aos="fade-left">學歷<span>EDUCATION</span></h2>

		<ul class="education__list">
			<li data-aos="fade-left" class="education__list--item has-list-style">國立六角師範大學 視覺設計學系 學士學位 | 2016-2020</li>
			<li data-aos="fade-left" class="education__list--item has-list-style">國立六腳高級中學 美術班 | 2013-2016</li>
		</ul>
	</section>

	<section class="skills">
		<h2 data-aos="flip-left" class="skills__title">技能<span>SKILLS</span></h2>

		<ul class="skills__list" data-aos="flip-left">
			<li class="skills__list--item">Adobe Photoshop</li>
			<li class="skills__list--item">Adobe Illustrator</li>
			<li class="skills__list--item">Adobe XD</li>
			<li class="skills__list--item">Adobe Indesign</li>
			<li class="skills__list--item">C4D</li>
			<li class="skills__list--item">Adobe Premiere</li>
			<li class="skills__list--item">語言:中文、英文</li>
		</ul>
	</section>

	<section class="experience">
		<h2 data-aos="flip-left">工作經驗<span>WORK EXPERIENCE</span></h2>

		<ul class="experience__list">
			<li data-aos="fade-left" class="experience__list--item">六角學院 視覺設計實習生 | 2019/07-2020/06
				<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4OS41IiBoZWln%0D%0AaHQ9IjY2Ljg1MSIgdmlld0JveD0iMCAwIDg5LjUgNjYuODUxIj48ZGVmcz48c3R5bGU+LmF7Zmls%0D%0AbDojNzZiYjhhO308L3N0eWxlPjwvZGVmcz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTA4LjQy%0D%0ANyAtMTM4LjA4NikiPjxwYXRoIGNsYXNzPSJhIiBkPSJNMjAwLjYsMTU5LjA2NCwxOTIuMTUsMTcz%0D%0ALjgzYTIuMTIxLDIuMTIxLDAsMCwxLTEuMzI1Ljc3M0gxNzMuOTNhMi4xMjIsMi4xMjIsMCwwLDEt%0D%0AMS4zMjYtLjc3M2wtOC40NDctMTQuNzY2YTIuMTY2LDIuMTY2LDAsMCwxLDAtMS41NDZsOC40NDct%0D%0AMTQuNzY3YTIuMTIzLDIuMTIzLDAsMCwxLDEuMzI2LS43NzJoMTYuODk0YTIuMTIyLDIuMTIyLDAs%0D%0AMCwxLDEuMzI1Ljc3Mmw4LjQ0NywxNC43NjdhMi4xNjYsMi4xNjYsMCwwLDEsMCwxLjU0Nm0zLjYw%0D%0AOC0zLjAyNC04Ljk4Mi0xNS43YTQuOTQxLDQuOTQxLDAsMCwwLTMuODYzLTIuMjUySDE3My40YTQu%0D%0AOTM5LDQuOTM5LDAsMCwwLTMuODYzLDIuMjUybC04Ljk4MiwxNS43YTUuMDMzLDUuMDMzLDAsMCww%0D%0ALDAsNC41bDguOTgyLDE1LjdBNC45NCw0Ljk0LDAsMCwwLDE3My40LDE3OC41SDE5MS4zNmE0Ljk0%0D%0AMSw0Ljk0MSwwLDAsMCwzLjg2My0yLjI1MWw4Ljk4Mi0xNS43YTUuMDM4LDUuMDM4LDAsMCwwLDAt%0D%0ANC41IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjkuNjYyIDApIi8+PHJlY3QgY2xhc3M9ImEiIHdp%0D%0AZHRoPSIxMy4zNDgiIGhlaWdodD0iMi44NTkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEzOS4zNjcg%0D%0AMTU4LjU1NCkiLz48cmVjdCBjbGFzcz0iYSIgd2lkdGg9IjEwLjczMSIgaGVpZ2h0PSIyLjg2IiB0%0D%0AcmFuc2Zvcm09InRyYW5zbGF0ZSgxNDEuOTg0IDE2My42ODIpIi8+PHJlY3QgY2xhc3M9ImEiIHdp%0D%0AZHRoPSI4LjExMyIgaGVpZ2h0PSIyLjg2IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNDQuNjAxIDE2%0D%0AOC44MSkiLz48cGF0aCBjbGFzcz0iYSIgZD0iTTEyMC44MTcsMjYxYTgxLjYxLDgxLjYxLDAsMCwx%0D%0ALDQuMzEsOC41MTguNS41LDAsMCwxLS4yNzkuNzI1bC0uOC4zNDJhLjQ4MS40ODEsMCwwLDEtLjct%0D%0ALjMsODIuMTkzLDgyLjE5MywwLDAsMC00LjA5LTguNDE4LjQ4Ny40ODcsMCwwLDEsLjItLjc0NGwu%0D%0ANjM4LS4zNDNhLjQ4My40ODMsMCwwLDEsLjcxOC4yMjFtLTYuMjQ0Ljc4NWEzMi4wODMsMzIuMDgz%0D%0ALDAsMCwxLTQuMDcsOC41MTkuNS41LDAsMCwxLS43MzguMTYxbC0uNjE4LS4zNDJhLjQ2OC40Njgs%0D%0AMCwwLDEtLjE4LS43NDUsMzIuNTk0LDMyLjU5NCwwLDAsMCwzLjcxMS04LjIxNi40NjcuNDY3LDAs%0D%0AMCwxLC42NzktLjM0MmwuODc3LjNhLjQ3OS40NzksMCwwLDEsLjMzOS42NjRtMTAuODkzLTQuMTA3%0D%0Adi4wNGEuNDc4LjQ3OCwwLDAsMS0uNTM5LjU0NEgxMDguOTY2YS40NzkuNDc5LDAsMCwxLS41Mzkt%0D%0ALjU0NHYtLjA0YS40NzkuNDc5LDAsMCwxLC41MzktLjU0NGg2Ljk2M3YtMy4yYS40NzguNDc4LDAs%0D%0AMCwxLC41MzktLjU0NGguOTU4YS40NzguNDc4LDAsMCwxLC41MzkuNTQ0djMuMmg2Ljk2M2EuNDc4%0D%0ALjQ3OCwwLDAsMSwuNTM5LjU0NCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAtNjYuMjkyKSIvPjxw%0D%0AYXRoIGNsYXNzPSJhIiBkPSJNMTc0LjI4MSwyNjQuNTg0aDQuNjY5di0zaC00LjY2OVptMC0zLjk2%0D%0AN2g0LjY2OXYtMi44NTloLTQuNjY5Wm0tNS45MjUtMy44ODZoNC41NjlhMjcuMiwyNy4yLDAsMCww%0D%0ALDIuMTc0LTIuMjc2aC01LjEyN2ExOC45MjEsMTguOTIxLDAsMCwxLTEuNjE2LDIuMjc2bS0uMSwz%0D%0ALjg4Nmg0LjA3di0yLjg1OWgtNC4wN1ptLS4yLDMuOTY3aDQuMjd2LTNoLTQuMDdhMjcuNzIzLDI3%0D%0ALjcyMywwLDAsMS0uMiwzbTIuNzU0LTExLjcxOWMtLjA4LjE2MS0uMTU5LjM2Mi0uMjguNmg2LjAy%0D%0ANWEuNDc4LjQ3OCwwLDAsMSwuNTM5LjU0NHYuMDRhMS4wNDMsMS4wNDMsMCwwLDEtLjIxOS42ODQs%0D%0AMjMuMTM5LDIzLjEzOSwwLDAsMS0xLjksMS45OTRoNS40MDZhLjQ3OC40NzgsMCwwLDEsLjUzOS41%0D%0ANDR2MTAuNTUyYzAsMi4xMzQtLjI1OSwyLjQxNi0yLjYzMywyLjQxNi0uMjQsMC0xLjA1OC0uMDM5%0D%0ALTIuNDE0LS4wOC0uMzU5LS4wMi0uNTU5LS4yLS41NTktLjU0NC0uMDItLjM0My4xOC0uNTI0LjU1%0D%0AOS0uNSwxLjI3Ni4wNCwyLC4xLDIuMTk1LjEuODU4LDAsLjg3OC0uMDIuODc4LTEuMzI5di0yLjMx%0D%0ANkgxNjcuOWExMS40OTEsMTEuNDkxLDAsMCwxLTEuODM2LDQuNjExLjQ2OS40NjksMCwwLDEtLjc1%0D%0AOC4xMjFsLS41NzktLjQ4M2EuNTMyLjUzMiwwLDAsMS0uMTM5LS43NDVjMS4yMTctMi4wMTQsMS43%0D%0ALTQuNDEsMS43LTguNTU4di0xLjYzMWwtLjgzNy42ODRhLjQyOS40MjksMCwwLDEtLjczOC0uMTYx%0D%0AbC0uMi0uNGEuNTUzLjU1MywwLDAsMSwuMTU5LS43NDYsMTYuNSwxNi41LDAsMCwwLDQuMzctNS44%0D%0ANzkuNTUyLjU1MiwwLDAsMSwuNjc4LS4zNDNsLjczOC4xNDFhLjQ0NS40NDUsMCwwLDEsLjM2LjY4%0D%0ANSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTMyLjE5NiAtNjUuNTA3KSIvPjxwYXRoIGNsYXNzPSJh%0D%0AIiBkPSJNMjI2Ljk0NiwyNTYuNDE2Yy45MTguNDIzLDEuNjM2LjgyNiwyLjE1NSwxLjEyOGE5Ljgs%0D%0AOS44LDAsMCwwLDEuMzE2LTEuMzA5Yy0uMzU4LS4yNDEtLjc1Ny0uNTQ0LTEuMjU2LS44ODZhMTQu%0D%0ANDg4LDE0LjQ4OCwwLDAsMS0yLjIxNSwxLjA2N200LjM1LTIuNzU5YTEyLjIyMywxMi4yMjMsMCww%0D%0ALDEtMS4xMTcuOTg3bDEuMDc3Ljc0NWEuNDY4LjQ2OCwwLDAsMSwuMS43NjVsLS4yNC4zLjAyLjAy%0D%0AYy4zNzkuMTQxLjQ1OS40NDMuMTc5LjcyNWExMC4xNDcsMTAuMTQ3LDAsMCwxLTEuMTM3LDEuMDA3%0D%0AbDEuMDc3Ljc0NWEuNDc3LjQ3NywwLDAsMSwuMS43NjVsLS4wNi4wOGEuNS41LDAsMCwxLS43Nzku%0D%0AMDgxYy0uNi0uNDQzLTEuMDU3LS43NjUtMS4zNTYtLjk4N2ExNC4xLDE0LjEsMCwwLDEtMi4wNTUs%0D%0AMS4wMDcuNjMuNjMsMCwwLDEtLjczOC0uMTQyYy0uMjYtLjI0MS0uMTgtLjUuMi0uNjY0YTE1LjM4%0D%0ALDE1LjM4LDAsMCwwLDEuNTU2LS44NDZjLS41NzktLjM0Mi0xLjA1OC0uNjI0LTEuNDM3LS44MDUt%0D%0ALjMzOS0uMTgyLS40MTktLjQ0My0uMTgtLjc0NWwuMTYtLjItLjI0LS4yMjFjLS4zLS4yODEtLjI0%0D%0ALS41ODQuMTQtLjc0NWExMC4xNjUsMTAuMTY1LDAsMCwwLDEuNTU2LS44NDVjLS41NzktLjM0My0x%0D%0ALjA1OC0uNjI0LTEuNDM3LS44MDVhLjQ1LjQ1LDAsMCwxLS4xOC0uNzQ1LjQ4NS40ODUsMCwwLDEs%0D%0ALjY3OC0uMTIxLDE4Ljc0NCwxOC43NDQsMCwwLDEsMS45MTUuOTY3LDEwLjcxNCwxMC43MTQsMCww%0D%0ALDAsMS4wMzgtLjk2Ny41ODMuNTgzLDAsMCwxLC43MzgtLjE4MWwuMjM5LjFjLjM3OS4xNjEuNDU5%0D%0ALjQ0My4xOC43MjVtLTkuOS40NDNjMS4xMzctLjEyMSwyLjQ3NC0uMzYzLDQuMDEtLjY2NWEuNTE0%0D%0ALjUxNCwwLDEsMSwuMiwxLjAwN2MtLjkuMTgxLTEuODE2LjMyMi0yLjY5NC40NjNsLjA0LDEuMDg4%0D%0AaDIuNDkzYS40NzguNDc4LDAsMCwxLC41MzkuNTQzYzAsLjE2MS0uMTc5LjI0MS0uNTM5LjI0MUgy%0D%0AMjNsLjA2LDEuNDdoMi4zOTNhLjQ3OS40NzksMCwwLDEsLjUzOS41NDRjMCwuMTYxLS4xNzkuMjYx%0D%0ALS41MzkuMjYxSDIyMy4xbC4wNiwxLjUzMWgxMS41MzJsLjA0LTEuNTMxaC0yLjMzNGEuNDc4LjQ3%0D%0AOCwwLDAsMS0uNTM5LS41NDNjMC0uMTYyLjE3OS0uMjYyLjUzOS0uMjYyaDIuMzc0bC4wNC0xLjQ3%0D%0AaC0yLjQxNGEuNDc4LjQ3OCwwLDAsMS0uNTM5LS41NDRxMC0uMjQyLjUzOS0uMjQxaDIuNDUzbC4w%0D%0ANi0xLjQxaC0yLjYzNGEuNDc4LjQ3OCwwLDAsMS0uNTM4LS41NDRjMC0uMjYxLjE3OS0uNC41Mzgt%0D%0ALjRoNC4xM2EuNDg1LjQ4NSwwLDAsMSwuNTM5LjU2NGwtLjI3OSw2LjM4M2guNjM4YS40NzguNDc4%0D%0ALDAsMCwxLC41MzkuNTQ0djIuMjE1YS40NzguNDc4LDAsMCwxLS41MzkuNTQzaC0uOWEuNDc4LjQ3%0D%0AOCwwLDAsMS0uNTM5LS41NDN2LTEuODMzSDIyMS45Nzh2MS44MzNhLjQ3OC40NzgsMCwwLDEtLjUz%0D%0AOS41NDNoLS45YS40NzguNDc4LDAsMCwxLS41MzktLjU0M3YtMi4yMTVhLjQ3OC40NzgsMCwwLDEs%0D%0ALjUzOS0uNTQ0aC42MTlsLS4yNTktNS45YS41MDYuNTA2LDAsMCwxLC41LS41ODRtMTMuMzg3LDku%0D%0AM2EuNjcuNjcsMCwwLDEtLjM1OS42NDUsMzIuMDcxLDMyLjA3MSwwLDAsMS00Ljc2OCwyLjRIMjM3%0D%0ALjRhLjQ3OC40NzgsMCwwLDEsLjUzOS41NDRjMCwuMy0uMTc5LjQ2My0uNTM5LjQ2M2gtNy4xNjJ2%0D%0AMi4wNTNjMCwxLjE2OC0uMywxLjM3LTIuNjEzLDEuMzctLjgsMC0xLjcxNi0uMDItMi43NzQtLjA4%0D%0AMWEuNTI2LjUyNiwwLDAsMS0uNTM4LS41NDRjLS4wMi0uMzQyLjE3OS0uNTI0LjU1OS0uNSwxLjMu%0D%0AMDQsMi4xMzUuMSwyLjUzNC4xLjg3OCwwLC43NzguMS43NzgtLjgyNnYtMS41N2gtNy43NDFhLjQ3%0D%0AOC40NzgsMCwwLDEtLjUzOS0uNTQ0YzAtLjMuMTc5LS40NjMuNTM5LS40NjNoNy43NDF2LS4zODNh%0D%0ALjQ3OC40NzgsMCwwLDEsLjUzOS0uNTQ0aC41NTlhMzcuMjcxLDM3LjI3MSwwLDAsMCwzLjM3Mi0x%0D%0ALjYzMWgtOS4wNThhLjQ3OC40NzgsMCwwLDEtLjUzOC0uNTQzYzAtLjI0Mi4xNzktLjM4My41Mzgt%0D%0ALjM4M2gxMC42NTRjLjM2LDAsLjUzOS4xNjEuNTM5LjQ0MyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUo%0D%0ALTY0LjA5MyAtNjUuOTM4KSIvPjxwYXRoIGNsYXNzPSJhIiBkPSJNMjkyLjI0NCwyNTguNzEzYS40%0D%0ANzIuNDcyLDAsMCwxLS41MzkuNTIzaC01LjUyN2EuNDc5LjQ3OSwwLDAsMS0uNTM5LS41NDNjMC0u%0D%0AMzIyLjE4LS40ODMuNTM5LS40ODNIMjkxLjdjLjM1OSwwLC41MzkuMTgxLjUzOS41bTIuMzM0LTMu%0D%0AMDJ2Mi43YS40NzguNDc4LDAsMCwxLS41MzkuNTQzaC0uOTE4YS40NzguNDc4LDAsMCwxLS41Mzkt%0D%0ALjU0M3YtMi4yMTVoLTcuMzIydjIuMjE1YS40NzguNDc4LDAsMCwxLS41MzkuNTQzaC0uODU4YS40%0D%0ANzguNDc4LDAsMCwxLS41MzktLjU0M3YtMi43YS40NzkuNDc5LDAsMCwxLC41MzktLjU0NGgzLjg1%0D%0AMXYtMS42OTFhLjQ3OC40NzgsMCwwLDEsLjUzOS0uNTQ0aC45NThhLjQ3OC40NzgsMCwwLDEsLjUz%0D%0AOS41NDR2MS42OTFoNC4yODlhLjQ3OS40NzksMCwwLDEsLjUzOS41NDRtLS4yOCw2LjcyNmEuNDc4%0D%0ALjQ3OCwwLDAsMS0uNTM4LjU0M2gtMi43MzN2NS42MThjMCwuOTI2LS4xMzkuOTA2Ljk3OC45MDYu%0D%0ANjM4LDAsLjczOCwwLC45MzgtLjU0NGExNC4xMzIsMTQuMTMyLDAsMCwwLC4yLTIuNTU4Yy4wMi0u%0D%0AMzgzLjIyLS41NjQuNTc5LS41MjNsLjc3OC4wOGEuNTA4LjUwOCwwLDAsMSwuNS41ODRjLS4wMi42%0D%0ALS4wMi45NjYtLjA4LDEuNTdhMi42NzUsMi42NzUsMCwwLDEtLjcxOCwyLjExNSwyLjEzMSwyLjEz%0D%0AMSwwLDAsMS0uOS4yODIsMTMuNTM3LDEzLjUzNywwLDAsMS0xLjM1Ny4wNmMtMi40OTQsMC0yLjg5%0D%0AMy0uMjQyLTIuODkzLTEuNDd2LTYuMTIyaC0xLjE1N2MtLjA0LDQuMjA5LTEuMzM3LDYuMTYyLTUu%0D%0ANDI3LDcuNzMzYS41MzYuNTM2LDAsMCwxLS43MTgtLjI0MmwtLjA2LS4xMjFhLjQ0OS40NDksMCww%0D%0ALDEsLjI0LS43MjVjMi45MzMtMS4xODgsMy45NS0yLjg3OSw0LjAzLTYuNjQ1SDI4NC4xYS40Nzgu%0D%0ANDc4LDAsMCwxLS41MzktLjU0My40NzIuNDcyLDAsMCwxLC41MzktLjUyNGg5LjY1NmEuNDcyLjQ3%0D%0AMiwwLDAsMSwuNTM4LjUyNG0tMTEuMjUyLTcuMTY5Yy0xLjA1OCwyLjcxOS0xLjUzNiwzLjY4NS0x%0D%0ALjkxNSw0LjY1MmE2LjIzLDYuMjMsMCwwLDEsMS44LDQuNDdjMCwxLjY5Mi0uOCwyLjU1OC0yLjc5%0D%0AMywyLjU1OGEuNTExLjUxMSwwLDAsMS0uNTM5LS40ODNjLS4wNi0uMzIyLjEyLS41MjQuNS0uNTI0%0D%0AaC0uMTZjLjg1OSwwLDEuMi0uMzYyLDEuMi0xLjg1MmE1LjczLDUuNzMsMCwwLDAtMS40NTYtMy44%0D%0AMDYuNjQ0LjY0NCwwLDAsMS0uMS0uNzQ1LDM4LjE1NCwzOC4xNTQsMCwwLDAsMS44MTUtNC43NzJo%0D%0ALTIuMzc0djE1LjUyNmEuNDc4LjQ3OCwwLDAsMS0uNTM5LjU0M0gyNzcuOGEuNDc4LjQ3OCwwLDAs%0D%0AMS0uNTM5LS41NDNWMjU0LjMyM2EuNDc5LjQ3OSwwLDAsMSwuNTM5LS41NDRoNC44NDhhLjQ3OC40%0D%0ANzgsMCwwLDEsLjUzOS41NDR2LjI0MWExLjc0OCwxLjc0OCwwLDAsMS0uMTQuNjg1IiB0cmFuc2Zv%0D%0Acm09InRyYW5zbGF0ZSgtOTcuMDcgLTY2LjAyKSIvPjwvZz48L3N2Zz4=" alt="">
				<p>在六角學院長達一年的實習中,前期藉由公司課程掌握 HTML, CSS, Adobe XD,設計給學員使用的名片設計教材,並參與六角週年活動,設計各式周邊商品及活動網路宣傳圖。後期進入 UI 設計範疇,設計六角共筆部落格 - W3HexSchool、六角發案服務網介面設計、供給學員的教 案- RWD官方網站設計,並設計各式網頁活動宣傳圖。</p>
			</li>
			<li data-aos="fade-left" class="experience__list--item">獨立接案 Hao Jun 酒標設計 | 2019</li>
			<li data-aos="fade-left" class="experience__list--item">獨立接案 Exulans 酒標設計 | 2019</li>
			<li data-aos="fade-left" class="experience__list--item">獨立接案 桃園平鎮市民健走活動提案 | 2019</li>
			<li data-aos="fade-left" class="experience__list--item">Simtree 興趣咖啡 工讀生 | 2018-2019
				<img src="https://raw.githubusercontent.com/hexschool/webLayoutTraining1st/master/week1/simtree.png" alt="">
				<p>擔任外場及吧台服務生,學習咖啡相關知識。</p>
			</li>
		</ul>
	</section>
</main>

<footer class="footer">
	<h2 data-aos="fade-left" class="footer__title">聯絡方式<span>CONTACT METHOD</span></h2>

	<ul data-aos="fade-left" class="footer__list">
		<li class="footer__list--item">Mail:<a href="mailto:xxxd@hexschool.com">xxxd@hexschool.com</a></li>
		<li class="footer__list--item">Phone:<a href="tel:0910123456">0910123456</a></li>
		<li class="footer__list--item">Kaohsiung, Taiwan</li>
		<li class="footer__list--item">作品連結:<a href="#">https://www.behance.net/xxxdddddd</a></li>
	</ul>

	<div class="footer__social">
		<a href="#" class="footer__social--link">
			<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
				<defs>
					<style>
						.a {
							fill: #fff;
						}
					</style>
				</defs>
				<path class="a" d="M47.36,2H4.64A2.64,2.64,0,0,0,2,4.64V47.36A2.64,2.64,0,0,0,4.64,50H27.632V31.4h-6.24V24.2h6.24V18.8a8.736,8.736,0,0,1,9.312-9.6,48.625,48.625,0,0,1,5.592.288v6.48H38.72c-3.024,0-3.6,1.44-3.6,3.528v4.632h7.2l-.936,7.2H35.12V50H47.36A2.64,2.64,0,0,0,50,47.36V4.64A2.64,2.64,0,0,0,47.36,2Z" transform="translate(-2 -2)" />
			</svg>
		</a>
		<a href="#" class="footer__social--link">
			<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
				<defs>
					<style>
						.a {
							fill: #fff;
						}
					</style>
				</defs>
				<path class="a" d="M26,20.048A5.952,5.952,0,1,0,31.952,26,5.952,5.952,0,0,0,26,20.048Zm23.832-5.88a15.672,15.672,0,0,0-1.008-5.424,9.6,9.6,0,0,0-5.568-5.568,15.672,15.672,0,0,0-5.424-1.008C34.736,2,33.824,2,26,2s-8.736,0-11.832.168A15.672,15.672,0,0,0,8.744,3.176,9.6,9.6,0,0,0,3.176,8.744a15.672,15.672,0,0,0-1.008,5.424C2,17.264,2,18.176,2,26s0,8.736.168,11.832A16.464,16.464,0,0,0,3.176,43.28,9.456,9.456,0,0,0,5.36,46.64a9.336,9.336,0,0,0,3.384,2.184,15.672,15.672,0,0,0,5.424,1.008C17.264,50,18.176,50,26,50s8.736,0,11.832-.168a15.672,15.672,0,0,0,5.424-1.008A9.336,9.336,0,0,0,46.64,46.64a9.456,9.456,0,0,0,2.184-3.36,15.84,15.84,0,0,0,1.008-5.448C50,34.736,50,33.824,50,26s0-8.736-.168-11.832Zm-6.1,19.2a13.752,13.752,0,0,1-.936,4.32A9.264,9.264,0,0,1,37.688,42.8a13.752,13.752,0,0,1-4.344.84H18.656a13.752,13.752,0,0,1-4.344-.84A8.934,8.934,0,0,1,9.2,37.688a13.176,13.176,0,0,1-.816-4.344c0-1.9,0-2.4,0-7.344V18.656A13.176,13.176,0,0,1,9.2,14.312a8.424,8.424,0,0,1,2.064-3.144A8.616,8.616,0,0,1,14.312,9.2a13.752,13.752,0,0,1,4.344-.84H33.344a13.752,13.752,0,0,1,4.344.84A8.934,8.934,0,0,1,42.8,14.312a13.752,13.752,0,0,1,.84,4.344c0,1.9,0,2.4,0,7.344s.168,5.448.1,7.344ZM39.9,15.512a5.712,5.712,0,0,0-3.384-3.384A9.6,9.6,0,0,0,33.2,11.6H18.8a9.6,9.6,0,0,0-3.312.624A5.712,5.712,0,0,0,12.1,15.488a10.248,10.248,0,0,0-.5,3.312V33.2a10.248,10.248,0,0,0,.624,3.312A5.712,5.712,0,0,0,15.608,39.9a10.248,10.248,0,0,0,3.192.624H33.2a9.6,9.6,0,0,0,3.312-.624A5.712,5.712,0,0,0,39.9,36.512,9.6,9.6,0,0,0,40.52,33.2V18.8a9.072,9.072,0,0,0-.624-3.312ZM26,35.168A9.144,9.144,0,0,1,16.856,26h0A9.168,9.168,0,1,1,26,35.168Zm9.6-16.536a2.16,2.16,0,0,1,0-4.3h0a2.16,2.16,0,0,1,0,4.3Z" transform="translate(-2 -2)" />
			</svg>
		</a>
		<a href="#" class="footer__social--link">
			<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
				<defs>
					<style>
						.a {
							fill: #fff;
						}
					</style>
				</defs>
				<path class="a" d="M30.272,19.9h0a.912.912,0,0,0-.912.912v4.008L26,20.36a.96.96,0,0,0-.792-.456h0a.912.912,0,0,0-.912.912v6.816a.912.912,0,0,0,.912.912h0a.912.912,0,0,0,.912-.912V23.6l3.336,4.584h0a.648.648,0,0,0,.36.264.768.768,0,0,0,.336,0h0A.792.792,0,0,0,30.8,28.4l.24-.168h0a.936.936,0,0,0,.264-.648V20.816a.912.912,0,0,0-1.032-.912ZM19.28,26.648H16.736V20.816a.912.912,0,0,0-.912-.912h0a.912.912,0,0,0-.912.912v6.816a.912.912,0,0,0,.912.912H19.28a.936.936,0,0,0,.936-.912h0a.936.936,0,0,0-.936-.984ZM21.944,19.9h0a.936.936,0,0,0-.936.912v6.816a.936.936,0,0,0,.936.912h0a.912.912,0,0,0,.912-.912V20.816a.912.912,0,0,0-.912-.912ZM40.184,2H11.816A9.84,9.84,0,0,0,2,11.816V40.184A9.84,9.84,0,0,0,11.816,50H40.184A9.84,9.84,0,0,0,50,40.184V11.816A9.84,9.84,0,0,0,40.184,2Zm.744,29.472a3.719,3.719,0,0,1-.312.408h0A13.2,13.2,0,0,1,38.7,33.8c-4.8,4.488-12.864,9.864-13.944,9.024s1.536-4.224-1.272-4.8a2.4,2.4,0,0,1-.6,0h0c-8.256-1.152-14.4-6.936-14.4-13.872,0-7.8,7.9-14.112,17.616-14.112s17.616,6.312,17.616,14.112a12,12,0,0,1-2.784,7.32Zm-4.1-11.544H33.2a.912.912,0,0,0-.912.912v6.816a.912.912,0,0,0,.912.912h3.552a.912.912,0,0,0,.912-.912h0a.912.912,0,0,0-.912-.912H34.28V25.3h2.544a.936.936,0,0,0,.912-.936h0a.912.912,0,0,0-.912-.912H34.28V21.992h2.544a.912.912,0,0,0,.912-.912h0a.912.912,0,0,0-.912-1.152Z" transform="translate(-2 -2)" />
			</svg>
		</a>
	</div>
</footer>

<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
	AOS.init({
		once: true,
	});
</script>
              
            
!

CSS

              
                $spacing-xs: 0.8rem;
$spacing-s: 1.6rem;
$spacing-m: 2.4rem;
$spacing-l: 3.2rem;
$spacing-xl: 4.8rem;
$spacing-xxl: 7.2rem;

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	font-size: 62.5%;
	font-family: "PingFang TC", sans-serif;

	@media only screen and (max-width: 40em) {
		font-size: 50%;
	}
}

html,
body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background-color: #fff;
}

img {
	display: block;
}

ul {
	list-style: none;
	margin: 0;
}

.resume {
	max-width: 120rem;
	// width: 100%;
	margin: 0 auto;
	padding-top: $spacing-xl;

	section {
		margin-bottom: $spacing-xxl;
	}
}

h1 {
	font: normal 8rem / 9rem "Andale Mono";
	margin-bottom: $spacing-xl;
	border-bottom: 2px solid #000;
	padding-bottom: $spacing-m;
}

.profile-photo {
	height: 32.4rem;
	margin-bottom: $spacing-xl;
}

h2 {
	display: flex;
	align-items: center;
	margin-bottom: $spacing-s;
	border-bottom: 1px solid #000;
	padding-bottom: $spacing-xs;
	font-weight: 500;
	font-size: 3.2rem;
	line-height: 4.5rem;

	span {
		margin-left: $spacing-s;
		font: 500 2.4rem / 3.2rem "Roboto";
		color: #a00404;
	}
}

.profile,
.education {
	ul {
		padding-left: $spacing-xl;
	}

	li {
		position: relative;
		font-weight: 300;
		font-size: 2.4rem;
		line-height: 1.5;

		&:not(:last-child) {
			margin-bottom: 2.4rem;
		}

		&.has-list-style {
			&::before {
				content: "";
				position: absolute;
				top: 1rem;
				left: -3.2rem;
				width: 1.6rem;
				height: 1.6rem;
				background-color: #96a9c4;
				border-radius: 50%;
			}
		}
	}
}

.education {
	&__list {
		position: relative;

		&::before {
			content: "";
			position: absolute;
			top: 1.8rem;
			left: 2.4rem;
			width: 1px;
			height: calc(100% - 3.6rem);
			background-color: #96a9c4;
		}

		&--item {
			&:not(:last-child) {
				margin-bottom: $spacing-l;
			}
		}
	}
}

.skills {
	position: relative;
	padding: $spacing-m 8.5% 5.6rem;
	background-color: #415165;

	&::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 100vw;
		height: calc(100% - (7rem + 5.6rem));
		background-color: #96a9c4;
		z-index: -1;
	}

	&__title {
		justify-content: center;
		margin-bottom: 4rem;
		border-color: #fff;
		color: #fff;

		span {
			color: #fff;
		}
	}

	&__list {
		width: fit-content;
		margin: 0 auto;
		border-left: 1px solid #96a9c4;
		padding-left: $spacing-m;

		&--item {
			color: #fff;
			font: 300 2.4rem / 1.5 "Roboto", "PingFang TC";

			&:not(:last-child) {
				margin-bottom: $spacing-s;
			}
		}
	}
}

.experience {
	h2 {
		margin-bottom: 2.2rem;
	}

	&__list {
		margin-left: $spacing-m;
		border-left: 1px solid #96a9c4;
		padding-left: $spacing-m;

		&--item {
			font-weight: 500;
			font-size: 2.4rem;
			line-height: 1.5;

			&:not(:last-child) {
				margin-bottom: $spacing-l;
			}

			p {
				max-width: 64.2rem;
				font-weight: 300;
				font-size: 2rem;
				line-height: 1.5;
			}

			img {
				height: 7.3rem;
				margin: $spacing-xs 0;
			}
		}
	}
}

.footer {
	width: 100%;
	padding: $spacing-m 0 $spacing-xl;
	background-color: #415165;

	&__title {
		justify-content: center;
		max-width: 120rem;
		margin: 0 auto $spacing-l;
		border-color: #fff;
		color: #fff;

		span {
			color: #fff;
		}
	}

	&__list {
		width: fit-content;
		margin: 0 auto;
		text-align: center;

		&--item {
			margin-bottom: $spacing-s;
			color: #fff;
			font-weight: 300;
			font-size: 2.4rem;
			line-height: 1.5;

			a {
				text-decoration: none;
				color: currentcolor;

				&:hover {
					text-decoration: underline;
				}
			}
		}
	}

	&__social {
		display: grid;
		grid-template-columns: repeat(3, max-content);
		column-gap: $spacing-m;
		justify-content: center;
	}
}

              
            
!

JS

              
                
              
            
!
999px

Console