Skip to content

Commit

Permalink
Copy week1 and week2 tasks to gh-pages.
Browse files Browse the repository at this point in the history
  • Loading branch information
MarkZhangTW committed Aug 11, 2024
1 parent d7ebc37 commit 866281d
Show file tree
Hide file tree
Showing 6 changed files with 874 additions and 0 deletions.
111 changes: 111 additions & 0 deletions task-week1/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Task Week1</title>
<!-- CSS Reset -->
<link rel="stylesheet" href="../css/reset.css">
<!-- Google Font: Castoro -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Castoro:ital@0;1&display=swap" rel="stylesheet">
<!-- My CSS -->
<link rel="stylesheet" href="style.css">
</head>

<body>
<div class="wrap">
<div class="name">
<h1>VITO</h1>
</div>
<div class="banner">
<img src="https://raw.githubusercontent.com/hexschool/2022-web-layout-training/main/2023week1/vito.png"
alt="Banner">
</div>
<div class="title">
<h2>RESUME</h2>
</div>
<div class="intro">
<div class="container">
<p>I'm Vito, a UI Designer with 5+ years of experience. I create visually appealing interfaces for web
and mobile apps. Proficient in Sketch, Adobe XD, Figma, HTML, CSS, and JavaScript. I enjoy
collaborating with others to create high-quality products.</p>
</div>
</div>
<div class="main">
<div class="vito">
<div class="title">
<h3>Vito Evans</h3>
</div>
<p>456 Walnut Avenue, Someville, USA</p>
<p><a href="tel:+1 123 456 7890">+1 123 456 7890</a></p>
<p><a href="mailto:[email protected]">[email protected]</a></p>
<p><a href="www.infohexschool.com">www.infohexschool.com</a></p>
</div>
<div class="education">
<div class="title">
<h3>Education</h3>
</div>
<ul class="list">
<li>
<p class="date">2014-2018</p>
<p class="info">Bachelor of Science in Business Administration, University of California, Los
Angeles</p>
</li>
<li>
<p class="date">2012-2014</p>
<p class="info">Associate of Arts in Graphic Design, San Francisco State University</p>
</li>
<li>
<p class="date">2008-2012</p>
<p class="info">High School Diploma, Lincoln High School</p>
</li>
</ul>
</div>
<div class="work">
<div class="title">
<h3>Work</h3>
</div>
<ul class="list">
<li>
<p class="date">2018-2021</p>
<p class="info">Marketing Manager, ABC Company</p>
</li>
<li>
<p class="date">2016-2018</p>
<p class="info">Sales Associate, XYZ Corporation</p>
</li>
<li>
<p class="date">2014-2016</p>
<p class="info">Customer Service Representative, QRS Inc.</p>
</li>
</ul>
</div>
<div class="awards">
<div class="title">
<h3>Awards</h3>
</div>
<p>Best in Show Award, National Advertising Awards, 2020</p>
<p>Honorable Mention, International Design Competition, 2019</p>
<p>People's Choice Award, Local Art Exhibition, 2018</p>
</div>
</div>
<div class="footer">
<ul class="media">
<li><a href="#"><img
src="https://raw.githubusercontent.com/hexschool/2022-web-layout-training/main/2023week1/fb.png"
alt="Facebook"></a></li>
<li><a href="#"><img
src="https://raw.githubusercontent.com/hexschool/2022-web-layout-training/main/2023week1/instagram.png"
alt="Instagram"></a></li>
<li><a href="#"><img
src="https://raw.githubusercontent.com/hexschool/2022-web-layout-training/main/2023week1/line.png"
alt="LINE"></a></li>
</ul>
</div>
</div>
</body>

</html>
123 changes: 123 additions & 0 deletions task-week1/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
/* common */
body {
font-family: "Castoro", serif;
line-height: 1.5;
}

img {
display: block;
}

a {
text-decoration: none;
}

/* wrap */
.wrap {
padding-top: 160px;
}

.wrap>div {
max-width: 1296px;
margin: 0 auto;
}

/* name */
.wrap>.name h1 {
font-size: 128px;
letter-spacing: 0.12em;
}

/* banner */
.wrap>.banner img {
margin: 0 auto;
}

/* title */
.wrap>.title h2 {
font-size: 128px;
text-align: right;
letter-spacing: 0.12em;
}

/* intro */
.wrap>.intro {
max-width: none;
background-color: #efefef;
}

.wrap>.intro .container {
max-width: 1296px;
margin: 0 auto;
padding: 48px 0;
}

.wrap>.intro p {
width: 636px;
margin-left: auto;
font-size: 32px;
}

/* main */
.wrap>.main {
margin-top: 80px;
margin-bottom: 160px;
}

.wrap>.main>div {
width: 636px;
}

.wrap>.main .title {
border-bottom: 3px solid #ae0000;
margin-bottom: 16px;
}

.wrap>.main .title h3 {
margin-bottom: -3px;
font-size: 40px;
color: #ae0000;
}

.wrap>.main>div {
margin-bottom: 40px;
}

.wrap>.main p {
font-size: 24px;
}

.wrap>.main>.vito p {
margin-bottom: 8px;
}

.wrap>.main p.date {
font-size: 20px;
font-style: italic;
color: #949494;
}

.wrap>.main p.info {
margin-bottom: 16px;
}

.wrap>.main>.awards p {
margin-bottom: 12px;
}

/* footer */
.wrap>.footer {
max-width: none;
background-color: #000000;
padding: 64px 0;
}

.wrap>.footer .media {
text-align: center;
}

.wrap>.footer li {
display: inline-block;
margin: 0 20px;
vertical-align: middle;
}
Loading

0 comments on commit 866281d

Please sign in to comment.