Created
August 1, 2022 01:34
-
-
Save PeijinDu/57e44b81b0cfccbb0b400fbadae4d312 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| html5doctor.com Reset Stylesheet | |
| v1.6.1 | |
| Last Updated: 2010-09-17 | |
| Author: Richard Clark - http://richclarkdesign.com | |
| Twitter: @rich_clark | |
| */ | |
| html, body, div, span, object, iframe, | |
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |
| abbr, address, cite, code, | |
| del, dfn, em, img, ins, kbd, q, samp, | |
| small, strong, sub, sup, var, | |
| b, i, | |
| dl, dt, dd, ol, ul, li, | |
| fieldset, form, label, legend, | |
| table, caption, tbody, tfoot, thead, tr, th, td, | |
| article, aside, canvas, details, figcaption, figure, | |
| footer, header, hgroup, menu, nav, section, summary, | |
| time, mark, audio, video { | |
| margin:0; | |
| padding:0; | |
| border:0; | |
| outline:0; | |
| font-size:100%; | |
| vertical-align:baseline; | |
| background:transparent; | |
| } | |
| body { | |
| line-height:1; | |
| } | |
| article,aside,details,figcaption,figure, | |
| footer,header,hgroup,menu,nav,section { | |
| display:block; | |
| } | |
| nav ul { | |
| list-style:none; | |
| } | |
| blockquote, q { | |
| quotes:none; | |
| } | |
| blockquote:before, blockquote:after, | |
| q:before, q:after { | |
| content:''; | |
| content:none; | |
| } | |
| a { | |
| margin:0; | |
| padding:0; | |
| font-size:100%; | |
| vertical-align:baseline; | |
| background:transparent; | |
| } | |
| /* change colours to suit your needs */ | |
| ins { | |
| background-color:#ff9; | |
| color:#000; | |
| text-decoration:none; | |
| } | |
| /* change colours to suit your needs */ | |
| mark { | |
| background-color:#ff9; | |
| color:#000; | |
| font-style:italic; | |
| font-weight:bold; | |
| } | |
| del { | |
| text-decoration: line-through; | |
| } | |
| abbr[title], dfn[title] { | |
| border-bottom:1px dotted; | |
| cursor:help; | |
| } | |
| table { | |
| border-collapse:collapse; | |
| border-spacing:0; | |
| } | |
| /* change border colour to suit your needs */ | |
| hr { | |
| display:block; | |
| height:1px; | |
| border:0; | |
| border-top:1px solid #cccccc; | |
| margin:1em 0; | |
| padding:0; | |
| } | |
| input, select { | |
| vertical-align:middle; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <title>My Portfolio-iam</title> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com"> | |
| <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com"> | |
| <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" type="text/css" href="css/html5reset.css"> | |
| <link rel="stylesheet" type="text/css" href="css/style.css"> | |
| </head> | |
| <body> | |
| <div class="skip"><a href="#main">Skip to Main Content</a></div> | |
| <header> | |
| <h1>Peggy Du</h1> | |
| <nav id="navigation"> | |
| <ul class="nav_link"> | |
| <li><a href = "index.html">I design</a></li> | |
| <li><a class="current" href = "iam.html">I am</a></li> | |
| <li><a href = "idraw.html">I draw</a></li> | |
| </ul> | |
| </nav> | |
| </header> | |
| <main class="iam_container"> | |
| <div class="me" alt="my photo"></div> | |
| <div id="main"><h2 id="hello">Hello.</h2></div> | |
| <div class="iam_content"> | |
| <p>I’m Peggy. 1st-year M.S student @ UM School of Information. <br><br> | |
| A former Architecture Designer. Current UX Designer who love to solve problems with the research-driven method.<br><br> | |
| Have strong responsibility for my work and eager to advocate for my users. Try to bring up the most delightful solutions for both my users and the clients.</p> | |
| </div> | |
| <div class="Button"><a href="Contact me.html"><button class="button">Contact Me</button></a></div> | |
| <div class="resume"> | |
| <a class="resume" href="https://drive.google.com/file/d/1JijjMVLKKcosSrXp1fAtikmeHcWXDDio/view">- Click here to see my resume -</a> | |
| </div> | |
| </main> | |
| <footer> | |
| <p>Peggy Du. All Rights Reserved.© 2021</p> | |
| </footer> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| *{ | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding:0; | |
| } | |
| header>h1{ | |
| font-family: 'Open Sans', sans-serif; | |
| padding-top: 50px; | |
| padding-bottom: 20px; | |
| } | |
| header{ | |
| padding-left:37px; | |
| } | |
| h1{ | |
| font-style: bold; | |
| font-size: 24px; | |
| color: #666565; | |
| letter-spacing: 0px; | |
| text-align: left; | |
| text-transform: capitalize; | |
| line-height: 34px; | |
| } | |
| h2{ | |
| font-family: 'Open Sans', sans-serif; | |
| font-style:bold; | |
| font-size: 20px; | |
| color: #434242; | |
| padding-top: 25px; | |
| padding-left: 37px; | |
| padding-bottom: 10px; | |
| } | |
| h3{ | |
| font-family: 'Open Sans', sans-serif; | |
| font-style:normal; | |
| font-size: 16px; | |
| color: #434242; | |
| padding-top: 25px; | |
| padding-bottom: 10px; | |
| padding-left: 37px; | |
| } | |
| h4{ | |
| font-family: 'Noto Sans', sans-serif; | |
| font-weight:normal; | |
| color:#3D3D3D; | |
| font-size: 16px; | |
| line-height: 22px; | |
| padding: 44px 36px 16px 37px; | |
| text-align: center; | |
| } | |
| h5{ | |
| font-family: 'Noto Sans', sans-serif; | |
| font-weight:900; | |
| color:#3D3D3D; | |
| font-size: 28px; | |
| line-height: 36px; | |
| padding: 10px 36px 16px 37px; | |
| } | |
| nav a{ | |
| display: flex; | |
| flex-direction: column; | |
| font-family: 'Noto Sans', sans-serif; | |
| font-size: 16px; | |
| color: rgb(0, 0, 0); | |
| line-height: 22px; | |
| padding-left: 37px; | |
| padding-right: 36px; | |
| } | |
| main>p{ | |
| font-family: 'Open San', sans-serif; | |
| font-weight: normal; | |
| color:#3D3D3D; | |
| font-size: 16px; | |
| line-height: 18px; | |
| padding: 20px 36px 20px 37px; | |
| } | |
| #navigation a{ | |
| display: flex; | |
| flex-direction: column; | |
| font-family: 'Noto Sans', sans-serif; | |
| padding-left:10px; | |
| text-decoration: none; | |
| border:2px solid black; | |
| margin-bottom:10px; | |
| margin-right: 36px; | |
| } | |
| #navigation a:hover { | |
| color: white; | |
| background-color: #3E3E3E;} | |
| .current{ | |
| color: white; | |
| background-color: #3E3E3E;} | |
| .peggy{ | |
| display: grid; | |
| grid-template-columns: 1px 1fr 1px; | |
| row-gap: 20px; | |
| } | |
| .project1{ | |
| grid-column:2/3; | |
| background-image: url("../images/potfolio.png"); | |
| width: 100%; | |
| height: 248px; | |
| background-size: cover; | |
| } | |
| .project2{ | |
| grid-column: 2/3; | |
| background-image: url("../images/potfolio2.png"); | |
| width: 100%; | |
| height: 248px; | |
| background-size: cover; | |
| } | |
| .project3{ | |
| grid-column: 2/3; | |
| background-image: url("../images/potfolio3.png"); | |
| width: 100%; | |
| height: 248px; | |
| background-size: cover; | |
| } | |
| .project4{ | |
| grid-column: 2/3; | |
| background-image: url("../images/potfolio4.png"); | |
| width: 100%; | |
| height: 248px; | |
| background-size: cover; | |
| } | |
| .iam_container{ | |
| display: grid; | |
| grid-template-columns:36px 1fr 37px; | |
| margin-top: 20px; | |
| margin-bottom: 30px; | |
| } | |
| main>div>h2{ | |
| padding-left: 37px; | |
| position: absolute; | |
| } | |
| .me{ | |
| grid-column: 2/3; | |
| background-image: url("../images/iam.jpg"); | |
| width: 100%; | |
| height: 300px; | |
| background-size: cover; | |
| padding-bottom: 20px; | |
| } | |
| .iam_content{ | |
| grid-column: 2/3; | |
| font-family: 'Roboto', sans-serif; | |
| color:#737373; | |
| font-size: 16px; | |
| line-height: 20px; | |
| padding-top: 20px; | |
| padding-bottom: 20px; | |
| } | |
| .Button{ | |
| display: none; | |
| } | |
| .resume{ | |
| grid-column: 2/3; | |
| grid-row: 4/5; | |
| font-family: 'Open Sans', sans-serif; | |
| font-style:bold; | |
| text-decoration: none; | |
| font-size: 16px; | |
| color: #0336a4; | |
| padding-top: 20px; | |
| } | |
| #social{ | |
| display: block; | |
| margin: 82px auto 82px auto; | |
| } | |
| .container1, .container2, .container3{ | |
| display: grid; | |
| grid-template-columns:37px 1fr 36px; | |
| grid-row-gap: 20px; | |
| } | |
| .item1{ | |
| grid-column:2/3; | |
| background-image: url("../images/1.png"); | |
| width: 100%; | |
| height: 216px; | |
| background-size: cover; | |
| } | |
| .item2{ | |
| grid-column:2/3; | |
| background-image: url("../images/2.png"); | |
| width: 100%; | |
| height: 216px; | |
| background-size: cover; | |
| } | |
| .item3{ | |
| grid-column:2/3; | |
| background-image: url("../images/3.png"); | |
| width: 100%; | |
| height: 216px; | |
| background-size: cover; | |
| } | |
| .item_a{ | |
| grid-column:2/3; | |
| background-image: url("../images/sketch1.png"); | |
| width: 100%; | |
| height: 216px; | |
| background-size: cover; | |
| } | |
| .item_b{ | |
| grid-column:2/3; | |
| background-image: url("../images/sketch2.png"); | |
| width: 100%; | |
| height: 216px; | |
| background-size: cover; | |
| } | |
| .item_1{ | |
| grid-column:2/3; | |
| background-image: url("../images/PHOTO1.png"); | |
| width: 100%; | |
| height: 216px; | |
| background-size: cover; | |
| } | |
| .item_2{ | |
| grid-column:2/3; | |
| background-image: url("../images/PHOTO2.png"); | |
| width: 100%; | |
| height: 216px; | |
| background-size: cover; | |
| } | |
| .item_3{ | |
| grid-column:2/3; | |
| background-image: url("../images/PHOTO3.jpg"); | |
| width: 100%; | |
| height: 216px; | |
| background-size: cover; | |
| } | |
| .item_4{ | |
| grid-column:2/3; | |
| background-image: url("../images/PHOTO4.png"); | |
| width: 100%; | |
| height: 216px; | |
| background-size: cover; | |
| } | |
| .item4, .item5{ | |
| display: none; | |
| } | |
| footer{ | |
| background-color: #EBEBEB; | |
| height: 80px; | |
| margin-top: 50px; | |
| } | |
| footer > p { | |
| font-family: 'Roboto', sans-serif; | |
| text-align: center; | |
| color:#000000; | |
| font-size: 15px; | |
| padding-top: 30px; | |
| } | |
| .work{ | |
| width: 100%; | |
| height: auto; | |
| margin-top: 32px; | |
| } | |
| #description{ | |
| font-family: 'Roboto', sans-serif; | |
| color:#737373; | |
| font-size: 16px; | |
| line-height: 24px; | |
| padding: 20px 36px 30px 37px; | |
| } | |
| .skip a{ | |
| background: white; | |
| left: 0; | |
| padding: 7px; | |
| -webkit-transition: top 1s ease-out; | |
| transition: top 1s ease-out; | |
| z-index: 1; | |
| position: absolute; | |
| top: -30px; | |
| } | |
| .skip :focus{ | |
| color: black; | |
| text-decoration: none; | |
| position: absolute; | |
| top: 5px; | |
| } | |
| *:focus{ | |
| color: black; | |
| text-decoration: none; | |
| background: hsla(172, 20%, 65%, 0.98); | |
| } | |
| @media screen and (min-width: 850px){ | |
| header>h1{ | |
| font-size: 24px; | |
| padding-left: 100px; | |
| padding-top: 100px; | |
| } | |
| nav a{ | |
| font-family: 'Noto Sans', sans-serif; | |
| font-size: 16px; | |
| color: rgb(0, 0, 0); | |
| line-height: 30px; | |
| line-height: 22px; | |
| padding-right:10px; | |
| } | |
| #navigation a{ | |
| border:0px solid black; | |
| font-family: 'Noto Sans', sans-serif; | |
| margin-bottom:10px; | |
| } | |
| #navigation a:hover { | |
| color: white; | |
| background-color: #3E3E3E; | |
| border-radius: 10px; | |
| } | |
| .current{ | |
| color: white; | |
| background-color: #3E3E3E; | |
| border-radius: 10px;} | |
| header{ | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding-right: 100px; | |
| padding-bottom: 50px; | |
| } | |
| .nav_link li{ | |
| display: inline-block; | |
| padding-top: 100px; | |
| } | |
| main > p{ | |
| font-family: 'Open San', sans-serif; | |
| font-weight: lighter; | |
| color: #3E3E3E; | |
| font-size: 30px; | |
| line-height: 40px; | |
| text-align: center; | |
| padding: 60px 120px 60px 100px; | |
| animation-duration: 4s; | |
| animation-name: slidein; | |
| } | |
| /* #animation{ | |
| font-family: 'Open San', sans-serif; | |
| font-weight: lighter; | |
| color: #3E3E3E; | |
| font-size: 30px; | |
| line-height: 40px; | |
| text-align: center; | |
| padding: 60px 120px 60px 100px; | |
| animation-duration: 4s; | |
| animation-name: slidein; | |
| } */ | |
| @keyframes slidein { | |
| from { | |
| margin-right: 100%; | |
| width: 300%; | |
| } | |
| to { | |
| margin-right: 0%; | |
| width: 100%; | |
| } | |
| } | |
| .project{ | |
| /* padding-left: 37px; */ | |
| display: flex; | |
| max-width: 100%; | |
| height: auto; | |
| margin-bottom: 20px; | |
| } | |
| .peggy{ | |
| display: grid; | |
| grid-template-columns: 100px 1fr 1fr 100px; | |
| row-gap: 30px; | |
| column-gap: 30px; | |
| } | |
| .project1{ | |
| grid-column:2/3; | |
| grid-row: 1/2; | |
| background-image: url("../images/potfolio.png"); | |
| width: 100%; | |
| height: 450px; | |
| background-size: cover; | |
| } | |
| .project2{ | |
| grid-column: 3/4; | |
| grid-row: 1/2; | |
| background-image: url("../images/potfolio2.png"); | |
| width: 100%; | |
| height: 450px; | |
| background-size: cover; | |
| } | |
| .project3{ | |
| grid-column: 2/3; | |
| grid-row: 2/3; | |
| background-image: url("../images/potfolio3.png"); | |
| width: 100%; | |
| height: 450px; | |
| background-size: cover; | |
| } | |
| .project4{ | |
| grid-column: 3/4; | |
| grid-row: 2/3; | |
| background-image: url("../images/potfolio4.png"); | |
| width: 100%; | |
| height: 450px; | |
| background-size: cover; | |
| } | |
| /* main{ | |
| display: inline-block; | |
| } */ | |
| .iam_container{ | |
| display: grid; | |
| grid-template-columns:140px 1.2fr 150px 1fr 140px; | |
| /* column-gap: 60px; */ | |
| } | |
| .me{ | |
| grid-column: 4/5; | |
| grid-row: 1/3; | |
| background-image: url("../images/iam.jpg"); | |
| width: 100%; | |
| min-height: 600px; | |
| background-size: cover; | |
| } | |
| #hello{ | |
| grid-column: 2/3; | |
| grid-row: 1/2; | |
| font-size: 36px; | |
| } | |
| main>div>h2{ | |
| padding-left: 140px; | |
| } | |
| main> h2{ | |
| padding-top: 20px; | |
| } | |
| .iam_content{ | |
| grid-column: 2/3; | |
| grid-row: 1/2; | |
| font-family: 'Roboto', sans-serif; | |
| color:#505050; | |
| font-size: 18px; | |
| line-height: 20px; | |
| padding-top: 20%; | |
| } | |
| .resume{ | |
| grid-column: 2/3; | |
| grid-row: 2/3; | |
| font-family: 'Open Sans', sans-serif; | |
| font-style:bold; | |
| text-decoration: none; | |
| font-weight: 400; | |
| font-size: 24px; | |
| color: hsla(172, 12%, 46%, 0.98); | |
| } | |
| .Button{ | |
| display: block; | |
| grid-column: 2/3; | |
| grid-row: 1/2; | |
| max-width: 200px; | |
| max-height: 50px; | |
| padding-top: 320px; | |
| } | |
| .button{ | |
| display: block; | |
| background-color: hsla(172, 15%, 28%, 0.98); | |
| border: none; | |
| color: white; | |
| padding: 16px 32px; | |
| text-align: center; | |
| text-decoration: none; | |
| display: inline-block; | |
| font-size: 20px; | |
| margin: 4px 2px; | |
| cursor: pointer; | |
| } | |
| .work{ | |
| padding-left: 140px; | |
| padding-right: 140px; | |
| } | |
| h4{ | |
| font-size: 20px; | |
| text-align:left; | |
| padding-left: 23%; | |
| padding-top: 50px; | |
| } | |
| h5{ | |
| font-size: 36px; | |
| text-align:left; | |
| line-height: 45px; | |
| font-weight: 700; | |
| padding-left: 23%; | |
| padding-right: 23%; | |
| } | |
| #description{ | |
| font-size: 16px; | |
| padding-left: 23%; | |
| padding-right: 23%; | |
| text-align: left; | |
| } | |
| .container1{ | |
| display: grid; | |
| grid-template-columns:130px 2fr 0.15fr 0.85fr 130px; | |
| grid-gap: 10px; | |
| } | |
| .item1{ | |
| grid-column: 2/4; | |
| grid-row: 1/3; | |
| width: 100%; | |
| height: 600px; | |
| background-size: cover; | |
| } | |
| .item2{ | |
| grid-column: 2/3; | |
| grid-row: 3/4; | |
| width: 100%; | |
| height: 300px; | |
| background-size: cover; | |
| } | |
| .item3{ | |
| grid-column: 4/5; | |
| grid-row: 1/2; | |
| width: 100%; | |
| min-height: 300px; | |
| background-size: cover; | |
| } | |
| .item4{ | |
| display: block; | |
| background-image: url("../images/4.png"); | |
| grid-column: 4/5; | |
| grid-row: 2/3; | |
| width: 100%; | |
| height: 290px; | |
| background-size: cover; | |
| } | |
| .item5{ | |
| display: block; | |
| background-image: url("../images/5.png"); | |
| grid-column: 3/5; | |
| grid-row: 3/4; | |
| width: 100%; | |
| height: 300px; | |
| background-size: cover; | |
| } | |
| .container2{ | |
| display: grid; | |
| grid-template-columns:130px 1fr 1fr 130px; | |
| grid-gap: 10px; | |
| } | |
| .item_a{ | |
| grid-column: 2/3; | |
| width: 100%; | |
| min-height: 400px; | |
| background-size: cover; | |
| } | |
| .item_b{ | |
| grid-column: 3/4; | |
| width: 100%; | |
| min-height: 400px; | |
| background-size: cover; | |
| } | |
| main>h2{ | |
| padding:70px 140px 30px 140px; | |
| } | |
| .container3{ | |
| display: grid; | |
| grid-template-columns:130px 1fr 1fr 130px; | |
| grid-gap: 10px; | |
| } | |
| .item_1{ | |
| grid-column:2/4; | |
| width: 100%; | |
| min-height: 700px; | |
| background-size: cover; | |
| } | |
| .item_2{ | |
| grid-column:2/3; | |
| grid-row: 2/3; | |
| width: 100%; | |
| min-height: 400px; | |
| background-size: cover; | |
| } | |
| .item_3{ | |
| grid-column:3/4; | |
| grid-row: 2/3; | |
| width: 100%; | |
| min-height: 400px; | |
| background-size: cover; | |
| } | |
| .item_4{ | |
| grid-column:2/4; | |
| grid-row: 3/4; | |
| width: 100%; | |
| min-height: 600px; | |
| background-size: cover; | |
| } | |
| .parallax { | |
| background-image: url("../images/parallax.jpeg"); | |
| width: 100%; | |
| min-height: 400px; | |
| background-attachment: fixed; | |
| background-position: center; | |
| background-repeat: no-repeat; | |
| background-size:100% 60vh; | |
| } | |
| #contact{ | |
| font-family: 'Open Sans', sans-serif; | |
| font-size: 24px; | |
| font-style: bold; | |
| text-transform: uppercase; | |
| text-align: center; | |
| color: hsla(172, 20%, 65%, 0.98); | |
| } | |
| .container_contact{ | |
| font-family: 'Open Sans', sans-serif; | |
| font-style: bold; | |
| padding: 50px 100px; | |
| margin-left: 140px; | |
| margin-right: 140px; | |
| border-radius: 10px; | |
| background-color:hsla(0, 0%, 95%, 0.98); | |
| } | |
| input[type=text], select, textarea { | |
| width: 100%; | |
| padding: 12px; | |
| border: 1px solid #ccc; | |
| border-radius: 4px; | |
| box-sizing: border-box; | |
| margin-top: 6px; | |
| margin-bottom: 16px; | |
| resize: vertical; | |
| } | |
| input[type=submit] { | |
| background-color:hsla(171, 15%, 42%, 0.98); | |
| color: white; | |
| padding: 12px 20px; | |
| border: none; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| } | |
| input[type=submit]:hover { | |
| background-color: hsla(172, 15%, 28%, 0.98); | |
| } | |
| .container { | |
| border-radius: 5px; | |
| background-color: #f2f2f2; | |
| padding: 20px; | |
| } | |
| @media screen and (prefers-reduced-motion: reduce){ | |
| html{ | |
| scroll-behavior: auto; | |
| } | |
| .parallax{ | |
| -webkit-transition: none; | |
| transition: none; | |
| } | |
| .parallax{ | |
| background-attachment: initial; | |
| } | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <title>Project for SPH</title> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com"> | |
| <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com"> | |
| <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" type="text/css" href="css/html5reset.css"> | |
| <link rel="stylesheet" type="text/css" href="css/style.css"> | |
| </head> | |
| <body> | |
| <div class="skip"><a href="#main">Skip to Main Content</a></div> | |
| <header> | |
| <h1>Peggy Du</h1> | |
| <nav id="navigation"> | |
| <ul class="nav_link"> | |
| <li><a class="current" href = "index.html">I design</a></li> | |
| <li><a href = "iam.html">I am</a></li> | |
| <li><a href = "idraw.html">I draw</a></li> | |
| </ul> | |
| </nav> | |
| </header> | |
| <main> | |
| <div> | |
| <img class="work" src="images/Course+Planner.png" alt="SPH students"/> | |
| </div> | |
| <div> | |
| <img class="work" src="images/team.png" alt="team member:Peggy, Kara, Mansi, and Timothy"/> | |
| </div> | |
| <h4 id="main"> Course Planner for SPH | Mar 9, 2021</h4> | |
| <h5>Help biostatistics students to create a sample of courses schedule</h5> | |
| <p id="description">This project aims to help our client: the University of Michigan School of Public Health to build a course planner application to help students to schedule their classes. And even attract more prospective students with this interactive tool which helps them to see what a semester or year might look like at the School of Public Health.<br><br> | |
| Our goal is to help our client to define the problem, decide related features, wireframe the UX layout on the various portal of their website, prototype hi-fi UI design, and finally build it with engineers and data scientists.<br><br> | |
| Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<br><br> | |
| Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. | |
| Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. <br><br> | |
| Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. | |
| Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. <br><br> | |
| Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. | |
| </p> | |
| </main> | |
| <footer> | |
| <p>Peggy Du. All Rights Reserved.© 2021</p> | |
| </footer> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment