Interactive Design / Task2 Working Web Page
April 24, 2024 -
16.05.2024 – 27.06.2024 / Week4 – Week10
Ryoma Kato / 0365874
Interactive Design / Bachelor of design (Honours) in Creative Media
MIB
WORK
Transform your static prototype from Project 1 into a fully functional and interactive web page.
The link of website that I made for this Task.
(Editing screen html)
(Editing screen css)
Html and css that I wrote is below.
・html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<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=Inter&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link href="style.css" rel="stylesheet" type="text/css">
<title>Task2 Ryoma Kato</title>
</head>
<body>
<div class="container">
<header>
<ul class="navi">
<li><a href="#profile">Profile</a></li>
<li><a href="#education">Education</a></li>
<li><a href="#skill">Skill</a></li>
<li><a href="#project">Project</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</header>
<div class="top">
<h1>RYOMA KATO <br>PORTFOLIO</h1>
</div>
<hr>
<section id="profile">
<div class="row">
<div class="pic">
<img src="images/icon.png" width="640" height="auto" alt="Profile">
</div>
</div>
<div class="row">
<div class="column">
<h3>Hello, I'm Rio</h3>
<p>Im an international student from Japan in Taylor's university. Im studying about design in here.</p>
</div>
</div>
</section>
<section id="education">
<h2>-EDUCATION-</h2>
<div class="column">
<p>2020.03 <br>Junior High School <br>Graduate</p>
<p>2020.04 <br>BunkaGakuen-Suginami High School <br>Admission</p>
<p>2020.07 <br>N High School <br>Transfer</p>
<p>2023.03 <br>N High School <br>Graduate</p>
<p>2023.09 <br>Taylor's University <br>Admission</p>
</div>
</section>
<section id="skill">
<div class="row">
<div class="detaskill">
<h2>SKILL</h2>
<p>Photo Editing</p>
<p>Designing</p>
<p>Composing</p>
<p>Music Mixing</p>
<p>Video Editing</p>
</div>
<div class="detaskill">
<img src="images/skills.png" width="270" height="auto" alt="skill">
</div>
</div>
</section>
<hr>
<section id="project">
<h2>-PROJECT-</h2>
<div class="row">
<div class="column">
<p>2021.07 <br>Commencing the Comission for <br>Wedding Board Design</p>
<p>2022.03 <br>Exhibit My Original Song at <br>the Sakura Forest Museum</p>
<p>2023.04 <br>Participating as Staff in the <br>Management of NicoNico Chokaigi</p>
<p>2023.09 <br>Held 2nd "Sei-in Festa" (Music Fes) <br>in N High School</p>
</div>
<div class="column">
<p>2021.09 <br>Commencing the Comission for <br>Vocal Mixing</p>
<p>2022.03 <br>Held "Sei-in Festa" (Music Fes) <br>in N High School</p>
<p>2023.07 <br>Awarded the Good Idea Prize <br>at Project-N</p>
<p>2024.08 <br>Held "N/S Music Live" (Music Fes) <br>in Tokyo Ko-ka University</p>
</div>
</div>
</section>
<section id="contact">
<h2>-CONTACT-</h2>
<div class="column">
<div class="sns">
<img src="images/twitter.png" height="90" Weight="90" alt="twitter">
<img src="images/instagram.png" height="90" Weight="90" alt="instagram">
<img src="images/wechat.png" height="90" Weight="90" alt="wechat">
<img src="images/whatsapp.png" height="90" Weight="90" alt="whatsapp">
</div>
<p>e-mail : ryomataylorsuniversity@gmail.com</p>
<p>Tell : +60 17 4017139</p>
</div>
</section>
<footer>
<p>© 2024 RYOMA KATO PORTFOLIO</p>
</footer>
</div>
</body>
</html>
・css
@charset "UTF-8";
html{
scroll-padding-top: 100px;
scroll-behavior: smooth;
}
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
body{
font-family: "Poppins", sans-serif;
font-weight: 400;
}
h1{
font-family: "Inter", sans-serif;
font-optical-sizing: auto;
font-size: 100px;
font-weight: 1000;
padding: 2%;
text-align: Left;
}
h2{
font-family: "Inter", sans-serif;
font-optical-sizing: auto;
font-weight: 600;
font-size: 50px;
padding: 2%;
text-align: center;
}
h3{
font-family: "Inter", sans-serif;
font-optical-sizing: auto;
font-weight: 600;
font-size: 60px;
padding: 2%;
text-align: center;
}
p{
font-size: 28px;
line-height: 1.5em;
}
.img-icon{
width: 70%;
height: auto;
}
.container{
width: 100%;
position: relative;
}
header{
min-height: 50px;
position: sticky;
background-color: whitesmoke;
top: 0;
left: 0;
z-index: 100;
}
.navi{
display: flex;
list-style: none;
justify-content: flex-end;
align-content: center;
align-items: center;
padding: 3% 3% 0;
gap: 3%;
}
.navi a:link, a:active{
color: black;
text-decoration: none;
font-size: 1px;
font-family: "Inter", sans-serif;
}
.navi a:hover, a:visited{
color: silver;
border-bottom: 2px solid rgba(208,128,21,1,00);
padding-bottom: 2%;
transition: 0.3s ease;
}
.row{
display: flex;
min-width: 100%;
margin: auto;
gap:1%;
justify-content: center;
align-content: center;
text-align: center;
padding: 20px;
}
#education{
justify-content: center;
text-align: center;
background-color: black;
color: white;
}
#contact{
justify-content: center;
text-align: center;
background-color: whitesmoke;
color: black;
}
.pic{
justify-content: center;
}
footer{
text-align: center;
color: rgba(23,109,192,1,00);
font-family: "Inter", sans-serif;
background-color: whitesmoke;
}
@media only screen and (max-width:996px){
html{
scroll-behavior: smooth;
scroll-padding-top: 120px;
}
.btn_home{
marigin-top: block;
}
.row{
display: block;
}
.navi a:link{
font-size: 1em;
}
h1{
text-align: left;
font-size: 400%;
}
h2{
text-align: center;
font-size: 250%;
}
h3{
text-align: center;
font-size: 300%;
}
.pic img{
width: 100%;
height: auto;
}
.sns img{
width: 10%;
height: auto;
}
p{
text-align: center;
font-size: 100%;
}
}
(The html editing screen1)
In this picture, programing set the font type and header. There was no particularly difficult task here, and the writing went smoothly.
(The html editing screen2)
In this image program set text written on the web site, classing, etc., of web pages. In order to reproduce the web page I wanted to create, I made full use of many divs and set them up while checking the linkage with css one by one. During the process, I had a lot of trouble with errors in classing divs.
(The css editing screen1)
(The css editing screen2)
(The css editing screen3)
Those 3 pictures are css editing screen. In here the programs set font size, font color, background color and rocked headers, etc.
(The css editing screen4)
In this picture program set the site when viewed on a smartphone screen size. Including the css for the three images above, various problems occurred, such as the size of the images and some text did not change when the images were set to smartphone size, and only the header font was not the specified font, which was very difficult to fix.
After creating this website, I understood the fun of programming and the difficulty and lack of knowledge to create my ideal website. I will try to make my ideal website. And this website production also made me interested in the profession of website designer, which I had not given much thought to.
Comments
Post a Comment