#Hello World!
##Hai, guys!
Trust me, learning and coding in Hacktiv8: so hard! >_<
I will complete these lessons!
Now, i will always use github: Go GitHub!
###Wish me luck! Thank you!
All the best,
Isumi Karina
#Hello World!
##Hai, guys!
Trust me, learning and coding in Hacktiv8: so hard! >_<
I will complete these lessons!
Now, i will always use github: Go GitHub!
###Wish me luck! Thank you!
All the best,
Isumi Karina
<!--Tugas_Phase0_Week1_Thursday--> | |
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Tugas Menghias HTML dengan CSS Part 3</title> | |
<link href="style.css" rel="stylesheet" type="text/css"> | |
</head> | |
<body> | |
<div class="header"> | |
<h1> | |
Isumi Webpage | |
<p id="p"> | |
Welcome everyone! | |
</p> | |
</h1> | |
</div> | |
<div class="body"> | |
<img id="myprofile" src="me.jpg" alt="My Picture"> | |
<p id="pb1"> | |
Hi, I am Isumi and this is my first webpage. Let's be a fullstack developer with Hacktiv8.<br> | |
</p> | |
<p id="pb2"> | |
This is my target list:<br> | |
</p> | |
<ul> | |
<li>Being fullstack developer</li> | |
<li>Create a wonderful website</li> | |
</ul> | |
<p id="pb3"> | |
Here is my contact:<br> | |
</p> | |
<ol> | |
<li>Email: [email protected]</li> | |
<li>Phone: 62 815 9070289</li> | |
</ol> | |
<p id="pb4"> | |
My daily routine:<br> | |
</p> | |
<table class="tabel" border="1"> | |
<tr> | |
<td></td> | |
<td> | |
Morning | |
</td> | |
<td> | |
Afternoon | |
</td> | |
<td> | |
Evening | |
</td> | |
<td> | |
Night | |
</td> | |
</tr> | |
<tr> | |
<td> | |
Monday | |
</td> | |
<td id="act" colspan="4" rowspan="7"> | |
Eat, Coding, & Sleep | |
</td> | |
</tr> | |
<tr> | |
<td> | |
Tuesday | |
</td> | |
</tr> | |
<tr> | |
<td> | |
Wednesday | |
</td> | |
</tr> | |
<tr> | |
<td> | |
Thursday | |
</td> | |
</tr> | |
<tr> | |
<td> | |
Friday | |
</td> | |
</tr> | |
<tr> | |
<td> | |
Saturday | |
</td> | |
</tr> | |
<tr> | |
<td> | |
Sunday | |
</td> | |
</tr> | |
</table> | |
</div> | |
<div class="comment"> | |
<h3 id="h3"> | |
Leave your comment below | |
</h3> | |
<form action="#" method="post"> | |
First name:<br> | |
<input type="text" name="firstname"><br> | |
Last name:<br> | |
<input type="text" name="lastname"><br> | |
Gender:<br> | |
<input type="radio" name="gender" id="male" value="male" checked> | |
<label for="male">Male</label><br> | |
<input type="radio" name="gender" id="female" value="female"> | |
<label for="female">Female</label><br> | |
<input type="radio" name="gender" id="other" value="other"> | |
<label for="other">Other</label><br> | |
Favorite Cars:<br> | |
<select name="cars"> | |
<option value="volvo">Volvo</option> | |
<option value="jeep">Jeep</option> | |
<option value="bmw">BMW</option> | |
<option value="jaguar">Jaguar</option> | |
</select><br> | |
Language spoken:<br> | |
<input type="checkbox" name="language" value="bahasaindonesia"> | |
<label for="check1">Bahasa Indonesia</label><br> | |
<input type="checkbox" name="language" value="english"> | |
<label for="check2">English</label><br> | |
<input type="checkbox" name="language" value="other"> | |
<label for="check3">Other</label><br> | |
Bio:<br> | |
<textarea name="message" rows="10" cols="30"></textarea><br> | |
<input type="submit" value="Submit"> | |
</form> | |
</div> | |
</body> | |
</html> |
**_Hi, I am Isumi and this is my first webpage. Let's be a fullstack developer with Hacktiv8._**
_This is my target list:_
_Here is my contact:_
_My daily routine:_
Morning | Afternoon | Evening | Night | |
Monday | Eat, Coding, & Sleep | |||
Tuesday | ||||
Wednesday | ||||
Thursday | ||||
Friday | ||||
Saturday | ||||
Sunday |
/*style body*/ | |
body { | |
font-family: serif, Arial, Courier; | |
background-image: url("sakura.gif"); | |
background-repeat: no-repeat; | |
background-size: cover; | |
background-attachment: fixed; | |
display: block; | |
margin: 0; | |
padding: 0; | |
} | |
/*style class=header*/ | |
.header { | |
background-color: rgb(255, 204, 0); | |
color: rgb(220, 20, 60); | |
line-height: 50px; | |
margin: 0; | |
padding: 0; | |
border-style: dashed; | |
border-color: black; | |
border-width: thick; | |
box-sizing: border-box; | |
position: relative; | |
} | |
/*style h1*/ | |
h1 { | |
font-family: sans-serif; | |
font-size: 40px; | |
text-align: center; | |
text-transform: uppercase; | |
letter-spacing: 0.2em; | |
word-spacing: 0.03em; | |
} | |
/*style id=p*/ | |
#p { | |
font-size: 30px; | |
text-align: center; | |
text-transform: uppercase; | |
font-style: italic; | |
letter-spacing: 0em; | |
} | |
/*style class=body*/ | |
.body { | |
background-color: rgb(255, 255, 255); | |
} | |
/*style div body*/ | |
div.body{ | |
border: 1px solid #000; | |
box-sizing: border-box; | |
margin: 40px; | |
padding: 40px; | |
} | |
/*style id=myprofile*/ | |
#myprofile { | |
width: 300px; | |
height: 300px; | |
border: 3px solid black; | |
border-radius: 500px; | |
margin-left: 400px; | |
margin-right: 400px; | |
} | |
/*style id=pb*/ | |
#pb1, #pb2, #pb3, #pb4 { | |
font-weight: bold; | |
} | |
/*style class=tabel*/ | |
.tabel { | |
border: 1px solid; | |
} | |
/*style id=act*/ | |
#act { | |
color: rgb(175, 8, 8); | |
font-size: 30px; | |
text-align: center; | |
font-style: bold; | |
} | |
/*style class=comment*/ | |
.comment { | |
font-family: Courier, Arial, serif; | |
color: rgb(220, 20, 60); | |
text-transform: capitalize; | |
background: -webkit-linear-gradient(yellow, lightgreen); | |
} | |
/*style div comment*/ | |
div.comment { | |
border-style: none none none outset; | |
border-radius: 50px 0px 0px 50px; | |
border-width: 10px; | |
border-color: #000; | |
box-sizing: border-box; | |
width: 50%; | |
height: auto; | |
float: right; | |
clear: right; | |
margin-right: -70px; | |
padding: 30px 40px; | |
} | |
/*style id=h3*/ | |
#h3 { | |
text-align: center; | |
word-spacing: 3px; | |
font-weight: bold; | |
font-size: 23px; | |
font-family: Courier, serif, Arial; | |
} |