INTERACTIVE DESIGN - PROJECT 2 : Working Web Page
2.10.2023 - 16.10.2023/Week 6-Week 8
Lim Jun Teng / 0362890
Interactive Design / Bachelor of Design (Hon) in Creative Media
Project 2 : Working Web Page
INSTRUCTION
Working Web Page:
The objective of this assignment is to transform your static prototype from Project 1 into a fully functional and interactive web page. You will apply your knowledge of web layout class to create a working website that closely aligns with your original prototype.
Review your static prototype from Project 1 and analyze its layout, typography, color 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
HTML code :
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<title>LIM JUN TENG</title>
</head>
<body>
<div class="main">
<img src="image.jpeg" width="15%" height="" alt=""/>
<div class="aside-right">
<h1>LIM JUN TENG</h1>
<div class="about"><p>I am a student who is passionate about graphic design, and with my cheerful and optimistic personality, I am full of curiosity about the world, continually extending my knowledge and perspective. I hope to learn brand design within the field of graphic design, as I believe it's a captivating area that can help shape the unique identity of businesses and products, which is something I'm eager to pursue</p></div>
</div>
</div>
<div class="row">
<div class="column">
<img src="business-card.png" width="150" height="150" alt=""/>
<h2>PERSONAL DETAILS</h2>
<p>Age : 19
<br>Race : Chinese
<br>Gender : Female</p>
</div>
<div class="column">
<img src="contact-us.png" width="150" height="150" alt=""/>
<h2>CONTACT INFORMATION</h2>
<p>Phone num : 012-546 1208
<br>Email : junteng0623@gmail.com
<br>Address : 109,Taman Petani Jaya,08000 Sungai Petani, Kedah</p>
</div>
<hr>
<br>
<div class="column">
<img src="scholarship.png" width="150" height="150" alt=""/>
<h2>EDUCATION</h2>
<p>- Chung Private High School , 2017-2023
<br>- Taylor's University Bachelor of Design (Hons) Creative Media , Present </p>
</div>
<div>
<div class="column">
<img src="suitcase.png" width="150" height="150" alt=""/>
<h2>WORKING EXPERIENCE</h2>
<p>E-commerce :
<br>In 2023, I actively participated in a part-time job, focusing on the field of e-commerce,
with a specialization in sales and promotion of skincare products.
During this period, I also had the privilege of becoming a member of our brand's materials
department, contributing my creativity and talent to the team.</p></div>
</div>
</div>
<div>
<div class="row">
<div class="column">
<img src="idea.png" width="150" height="150" alt=""/>
<h2>Project:</h2>
<p>
Typography:<br> Task 1 <br>
Task 2 <br>
Task 3 <br>
Final Project <br>
<br>
Illustration and Visual Narractive:<br> Project 1 <br>
Project 2 <br>
Project 3 <br>Final Project</p>
<p>Digital Photography:<br>Project 1 <br>
Project 2 <br>
Project 3 <br>
Final Project<br>
</p>
<br>
</div>
<div class="column">
<img src="competence.png" width="150" height="150" alt=""/>
<h2>Skills:</h2>
<p>
<br>Adobe After Effects
<br>Adobe Dreamweavwe
<br>Adobe Illustrator
<br>Adobe Indesign
<br>Adobe Photoshop</p>
</div>
</div>
</div>
<br>
<div2 class="flex-container">
<div2 class="flex-child magenta">
<img src="mental-health.png" width="150" height="150" alt=""/>
<h3>HOBBY</h3>
<p2>Swimming Drawing
<br>Yoga Travel Gaming</p2>
</div2>
<div2 class="flex-child green">
<img src="languages.png" width="150" height="150" alt=""/>
<h3>LANGUAGE</h3>
<p2>Chinese English
<br>Malay Hainanese</p2>
</div2>
</div2>
</body>
</html>
CSS style :
@charset "utf-8";
/* CSS Document */
.main{
display: flex;
text-align: justify;
background-color: white;
}
.column{
width: 50%;
min-height: 200px;
padding: 5%;
box-sizing: border-box
}
.row{
display: flex;
box-sizing: border-box;
background-color: white
}
body {
background-color: white;
}
h1 {
font-family: "Lucida Console", "Courier New", monospace;
color: black;
font-weight: bold;
font-size: 40px;
}
h2 {
font-family: "Lucida Console", "Courier New", monospace;
font-size: 25px;
color: White;
font-weight: bold;
}
h3 {
font-family: "Lucida Console", "Courier New", monospace;
font-size: 25px;
color: Black;
font-weight: bold;
}
p {
font-family: "Lucida Console", "Courier New", monospace;
font-size: 17px;
color: white;
}
p2 {
font-family: "Lucida Console", "Courier New", monospace;
font-size: 17px;
color: black;
}
div{
background-color: rgba(197,146,190,1.00);
color: white;
padding:20px;
}
div1{
padding:20px;
}
.flex-container {
display: flex;
}
.flex-child {
flex: 1;
border: 10px solid rgba(197,146,190,1.00);
}
.flex-child:first-child {
margin-right: 20px;
}
Comments
Post a Comment