Project 2: Working web page
28.8.2023 - 27.11.2023 (Week1- Week 14)
Tiffany Tan Xuan / 0362472
Interactive Design / Bachelor of Design (Honours) in Creative
Media
Project 2: Working Web Page
INSRUCTUIONS
Project 2: Working Web Page
The objective of this assignment is to transform our static prototype
from Project 1 into a fully functional and interactive web page. We will
apply our knowledge of web layout class to create a working website that
closely aligns with your original prototype.
Instruction:
Review static prototype from Project 1 and analyse its layout, typography, colour scheme, and imagery.
Use HTML and CSS to translate the design elements into code, ensuring a
faithful representation of the original prototype.
Aim for pixel-perfect precision while maintaining responsive design principles to ensure compatibility across different devices and screen sizes.
Upload the file in Netlify and submit the link here. Update your e-portfolio with all the processes documented in the blog.
Aim for pixel-perfect precision while maintaining responsive design principles to ensure compatibility across different devices and screen sizes.
Upload the file in Netlify and submit the link here. Update your e-portfolio with all the processes documented in the blog.
PROGRESS:
Project 1 resume:
HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="index.css" rel="stylesheet" type="text/css">
</head>
<body>
<div
class="home">
<div class="left">
<div class="top1"></div>
<div class="leftMain">
<div class="one">
<span>TIFFANY</span><br>
<span>TAN</span>
</div>
<div class="two">
<span style="font-size:
18px;font-weight: bold;margin-bottom: 5px;display: block;">PERSONAL
DETAILS</span><br>
<span>Age:19</span><br>
<span>Race:
Chinese</span><br>
<span>Gender: Female</span>
</div>
<div class="three">
<span style="font-size:
18px;font-weight: bold;margin-bottom: 5px;display:
block;">CONTACT</span><br>
<span>011-1065
0092</span><br>
<span>tiffanytan04@gmail.com</span><br>
<span>tiffanyy__04</span>
</div>
<div class="four">
<span style="font-size:
18px;font-weight: bold;margin-bottom: 5px;display: block;">WORKING
EXPERIENCE</span><br>
<span>I've joined and lead
design</span><br>
<span>clubs and organisations
at</span><br>
<span>high
school.</span><br><br>
<span>Next,I've also
organised</span><br>
<span>events,
workshops,and</span><br>
<span>design projects in
high</span><br>
<span>school just to enhance
my</span><br>
<span>leadership and
teamwork</span><br>
<span>skills.</span>
</div>
</div>
<div class="leftBottom1">
<div class="bottom1L"></div>
<div class="bottom1R"></div>
</div>
</div>
<div class="main">
<div class="top2"></div>
<div class="mainM">
<div class="mainImg"></div>
<div class="mainK"></div>
</div>
<div class="mainB1">
<div class="mainB"></div>
</div>
</div>
<div class="right">
<div class="top3">
<div class="top3L"></div>
<div class="top3R"></div>
</div>
<div class="rightMain">
<div class="a">
<span style="font-size:
18px;font-weight: bold;margin-bottom: 5px;display:
block;">LANGUAGES</span><br>
<span>English /
Mandarin</span><br>
<span>Malay /
Cantonese</span><br>
<span>Hokkien</span>
</div>
<div class="b">
<span style="font-size:
18px;font-weight: bold;margin-bottom: 5px;display:
block;">HOBBBY</span><br>
<span>Drawing /
Shooting</span><br>
<span>Hiking /
Eating</span><br>
<span>Driving /
Shopping</span><br>
<span>Play Badminton</span>
</div>
<div class="c">
<span style="font-size:
18px;font-weight: bold;margin-bottom: 5px;display:
block;">EDUCATION</span><br>
<span>Chung Ling
Private</span><br>
<span>Taylor's
University</span>
</div>
<div class="d">
<span style="font-size:
18px;font-weight: bold;margin-bottom: 5px;display:
block;">SKILLS</span><br>
<span>Adobe
I/D</span><br>
<span>Adobe
Photoshop</span><br>
<span>Adobe
A/l</span><br>
<span>Procreate</span>
</div>
</div>
<div class="rightB">
<div class="bottom1L"></div>
<div class="bottom1R"></div>
</div>
</div>
</div>
</body>
</html>
CSS:
@charset "UTF-8";
/* CSS Document */
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
color: #706d71;
}
body .home {
margin: 0 auto;
font-family: "幼圆", Yuanti, "Microsoft YaHei",
"微软雅黑", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.home {
width: 80%;
background-color: white;
display: flex;
border: 1px solid black;
}
.left {
flex: 3;
}
.main {
flex: 2;
}
.right {
flex: 3;
}
.left .top1 {
width: 100%;
height: 150px;
background-color: white;
}
.main .top2 {
width: 100%;
height: 150px;
border-radius: 80px 80px 0 0;
background-color: rgb(210, 146, 146);
}
.right .top3 {
width: 100%;
height: 150px;
background-color: rgb(240, 238, 226);
display: flex;
}
.right .top3 .top3L {
width: 150px;
height: 150px;
border-top-left-radius: 80px;
background-color: white;
}
.right .top3 .top3R {
flex: 1;
height: 100%;
background-color: rgb(240, 238, 226);
position: relative;
}
.right .top3 .top3R::before {
content: "";
position: absolute;
top: 0;
left: 1px;
width: 150px;
height: 150px;
border-radius: 50%;
background-color: rgb(228, 208, 207);
}
.right .top3 .top3R::after {
content: "";
position: absolute;
bottom: 0;
right: 1px;
width: 150px;
height: 150px;
border-radius: 50%;
background-color: rgb(228, 208, 207);
}
.left .leftMain {
width: 100%;
height: 1000px;
background-color: rgb(240, 238, 226);
display: flex;
flex-direction: column;
}
.left .leftMain .one {
flex: 3;
font-size: 76px;
font-weight: 800;
}
.left .leftMain .one span {
margin-left: 50px;
}
.left .leftMain .two {
flex: 2;
font-size: 14px;
}
.left .leftMain .two span {
margin-left: 50px;
}
.left .leftMain .three {
flex: 2;
font-size: 16px;
}
.left .leftMain .three span {
margin-left: 50px;
}
.left .leftMain .four {
flex: 3;
font-size: 14px;
}
.left .leftMain .four span {
margin-left: 50px;
}
.left .leftBottom1 {
width: 100%;
height: 150px;
background-color: rgb(240, 238, 226);
display: flex;
}
.left .leftBottom1 .bottom1R {
width: 150px;
height: 150px;
border-bottom-right-radius: 80px;
background-color: white;
}
.left .leftBottom1 .bottom1L {
flex: 1;
height: 100%;
background-color: rgb(240, 238, 226);
position: relative;
}
.left .leftBottom1 .bottom1L::before {
content: "";
position: absolute;
top: 0;
left: 1px;
width: 150px;
height: 150px;
border-radius: 50%;
background-color: rgb(228, 208, 207);
}
.left .leftBottom1 .bottom1L::after {
content: "";
position: absolute;
bottom: 0;
right: 1px;
width: 150px;
height: 150px;
border-radius: 50%;
background-color: rgb(228, 208, 207);
}
.mainM {
width: 100%;
height: calc(100vh - 124px);
background-color: rgb(210, 146, 146);
display: flex;
flex-direction: column;
}
.mainM .mainImg {
flex: 3;
height: 60px;
background-size: 100% 120%;
/* 头像 */
background-image: url("img/11.jpg");
background-repeat: no-repeat;
}
.mainM .mainK {
flex: 7;
}
.main .mainB1 {
width: 100%;
height: 150px;
background-color: #f0eee2;
}
.main .mainB1 .mainB {
width: 100%;
height: 150px;
border-radius: 0 0 0 80px;
background-color: white;
}
.right .rightMain {
width: 100%;
height: 1000px;
background-color: rgb(240, 238, 226);
display: flex;
flex-direction: column;
}
.right .rightMain .a {
flex: 3;
font-size: 14px;
padding-left: 50px;
}
.right .rightMain .a span {
margin-left: 20px;
padding-top: 60px;
}
.right .rightMain .b {
flex: 2;
font-size: 14px;
padding-left: 50px;
}
.right .rightMain .b {
margin-left: 20px;
}
.right .rightMain .c {
flex: 2;
font-size: 14px;
padding-left: 50px;
}
.right .rightMain .c {
margin-left: 20px;
padding-left: 50px;
}
.right .rightMain .d {
flex: 3;
font-size: 14px;
padding-left: 50px;
}
.right .rightMain .d {
margin-left: 20px;
}
.right .rightB {
width: 100%;
height: 150px;
background-color: rgb(240, 238, 226);
display: flex;
}
.right .rightB .bottom1R {
width: 150px;
height: 150px;
border-top-left-radius: 150px;
background-color: rgb(228, 208, 207);
}
.right .rightB .bottom1L {
flex: 1;
height: 100%;
background-color: white;
}
.mainM {
height: 1000px;
}
</style>
</head>
<body>
<div class="home">
<div class="left">
<div class="top1"></div>
<div class="leftMain">
<div class="one">
<span>TIFFANY</span><br>
<span>TAN</span>
</div>
<div class="two">
<span style="font-size:
18px;font-weight: bold;margin-bottom: 5px;display: block;">PERSONAL
DETAILS</span><br>
<span>Age:19</span><br>
<span>Race:
Chinese</span><br>
<span>Gender: Female</span>
</div>
<div class="three">
<span style="font-size:
18px;font-weight: bold;margin-bottom: 5px;display:
block;">CONTACT</span><br>
<span>011-1065
0092</span><br>
<span>tiffanytan04@gmail.com</span><br>
<span>tiffanyy__04</span>
</div>
<div class="four">
<span style="font-size:
18px;font-weight: bold;margin-bottom: 5px;display: block;">WORKING
EXPERIENCE</span><br>
<span>I've joined and lead
design</span><br>
<span>clubs and organisations
at</span><br>
<span>high
school.</span><br><br>
<span>Next,I've also
organised</span><br>
<span>events,
workshops,and</span><br>
<span>design projects in
high</span><br>
<span>school just to enhance
my</span><br>
<span>leadership and
teamwork</span><br>
<span>skills.</span>
</div>
</div>
<div class="leftBottom1">
<div class="bottom1L"></div>
<div class="bottom1R"></div>
</div>
</div>
<div class="main">
<div class="top2"></div>
<div class="mainM">
<div class="mainImg"></div>
<div class="mainK"></div>
</div>
<div class="mainB1">
<div class="mainB"></div>
</div>
</div>
<div class="right">
<div class="top3">
<div class="top3L"></div>
<div class="top3R"></div>
</div>
<div class="rightMain">
<div class="a">
<span style="font-size:
18px;font-weight: bold;margin-bottom: 5px;display:
block;">LANGUAGES</span><br>
<span>English /
Mandarin</span><br>
<span>Malay /
Cantonese</span><br>
<span>Hokkien</span>
</div>
<div class="b">
<span style="font-size:
18px;font-weight: bold;margin-bottom: 5px;display:
block;">HOBBBY</span><br>
<span>Drawing /
Shooting</span><br>
<span>Hiking /
Eating</span><br>
<span>Driving /
Shopping</span><br>
<span>Play Badminton</span>
</div>
<div class="c">
<span style="font-size:
18px;font-weight: bold;margin-bottom: 5px;display:
block;">EDUCATION</span><br>
<span>Chung Ling
Private</span><br>
<span>Taylor's
University</span>
</div>
<div class="d">
<span style="font-size:
18px;font-weight: bold;margin-bottom: 5px;display:
block;">SKILLS</span><br>
<span>Adobe
I/D</span><br>
<span>Adobe
Photoshop</span><br>
<span>Adobe
A/l</span><br>
<span>Procreate</span>
</div>
</div>
<div class="rightB">
<div class="bottom1L"></div>
<div class="bottom1R"></div>
</div>
</div>
</div>
</body>
Project 2 Final Outcome:
Comments
Post a Comment