Tugas 1 PWEB E
Nama : Moh. Rizky Rahmadian Makkani
NRP : 5025231035
Kelas : PWEB E
Tugas Pertemuan 1 : Pengantar Web
Code HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta charset="UTF-8">
<meta name="author" content="Rizky Rahmadian">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Pribadi Moh. Rizky Rahmadian Makkani</title>
</head>
<body>
<nav>
<h1>Rizky Rahmadian</h1>
<ul>
<li>
<a href="#home"><b>Home</b></a>
</li>
<li>
<a href="#about"><b>About</b></a>
</li>
<li>
<a href="#profile"><b>Profile</b></a>
</li>
<li>
<a href="#education"><b>Education</b></a>
</li>
</ul>
</nav>
<section class="home" id="home">
<h1>Welcome Traveller!</h1>
<br>
<p>Hi, it's Rizky's first website! Please enjoy your time here!! </p>
</section>
<section class="about" id="about">
<h1>About Me</h1>
<p>A student who is currently pursuing a Bachelor's
degree. Has an interest in programming
languages and has an interest in cutting edge
technology. In the future, he wants to be
someone who can be the spearhead of
technological developments in the field of
programming.
</p>
</section>
<section class="profile" id="profile">
<img class="avatar" src="src/IMG_6167.JPG" alt="avatar">
<div class="container">
<h1>Profile.</h1>
<br>
<table class="data-profile">
<tbody>
<tr>
<td>Fullname</td>
<td>:</td>
<td>Moh. Rizky Rahmadian Makkani</td>
</tr>
<tr>
<td>Age</td>
<td>:</td>
<td>20</td>
</tr>
<tr>
<td>Address</td>
<td>:</td>
<td>Teknik Elektro Street, ITS Student Dormitory</td>
</tr>
<tr>
<td>Hobby</td>
<td>:</td>
<td>Listening Music, Reading Manga</td>
</tr>
<tr>
<td>LinkedIn</td>
<td>:</td>
<td><a href="https://www.linkedin.com/in/rizkyrahmadian137/"><i>LinkedIn</i></a></td>
</tr>
<tr>
<td>Instagram</td>
<td>:</td>
<td><a href="https://www.instagram.com/rzkyrhmdian_/"><i>Instagram</i></a></td>
</tr>
</tbody>
</table>
</div>
</section>
<section class="education" id="education">
<h1><b>Education.</b></h1>
<div class="pile">
<div class="sekolah">
<div class="logo"><img src="src/sd.jpg"></div>
<div class="school">SDN Gunung Sekar 1 Sampang</div>
</div>
<br>
<div class="sekolah">
<div class="logo"><img src="src/smp.jpeg"></div>
<div class="school">SMPN 1 Sampang</div>
</div>
</div>
<div class="pile">
<div class="sekolah">
<div class="logo"><img src="src/man.png"></div>
<div class="school">MAN 2 Kota Malang</div>
</div>
<br>
<div class="sekolah">
<div class="logo"><img src="src/its.png"></div>
<div class="school">Institut Teknologi Sepuluh Nopember</div>
</div>
</div>
</section>
</body>
</html>
Code CSS :
* {
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
margin: 0;
padding: 0;
}
body {
background-color: #E8DDBF;
margin: 0;
height: 100%;
justify-content: center; /* Centers horizontally */
align-items: center; /* Centers vertically */
}
nav {
display: flex;
justify-content: space-evenly;
background-color: #412F21;
padding: 10px;
font-family: sans-serif;
align-items: center;
opacity: 70%;
}
nav h1{
margin-right: 20%;
}
ul {
display: flex;
justify-content: space-between;
list-style: none;
margin-left: 25%;
margin-right: 10%;
}
nav li {
margin-left: 30px;
}
nav a {
text-decoration: none;
color: #AEEDED;
}
nav a:hover,
td a:hover {
text-decoration: none;
color:aqua;
border-bottom: 2px solid white;
}
nav h1 {
color: #AEEDED;
}
.home {
background-image: url('../src/bg2.jpg');
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
height: 100vh;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column; /* Centers the elements vertically */
}
.home h1,
.about h1{
font-size: 4rem;
font-family: sans-serif;
font-weight: 700;
color:#E8DDBF;
}
.home p,
.about p{
font-size: 1rem;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
color:#E8DDBF;
margin-left: 30vh;
margin-right: 30vh;
}
.about p {
color: #412F21;
}
.about {
background-color: #42AA84;
height: 100vh;
padding: 25px;
width: 70%;
margin: auto;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column; /* Centers the elements vertically */
}
.profile {
/* background-color: #BADFD7; */
display: flex;
align-items: flex-start; /* Menyelaraskan konten di bagian atas */
height: 100vh;
padding: 25px;
width: 70%;
margin-top: 10px;
margin: auto;
font-size: 25px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
background-color:#AEEDED;
color: #412F21;
/* text-align: center; */
justify-content: center;
align-items: center;
/* flex-direction: column; */
}
.avatar {
border-radius: 100%;
width: 300px;
height: 300px;
object-fit: cover;
border: 8px solid #FDB7B9;
box-shadow: 0 0px 0px 0px;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 30px;
margin-right: 20px;
}
.profile h1
{
font-family: monospace;
margin-top: 0px;
font-size: 35px;
font-weight: bolder;
}
.container table{
font-size: large;
}
.education {
background-color:#469380;
width: 70%;
margin: auto;
padding: 25px;
height: 100vh;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.education h1 {
font-size: 4rem;
font-weight: bolder;
color: #412F21;
font-family: sans-serif;
margin-bottom: 5%;
}
.pile {
display: flex;
align-items: center; /* Menyelaraskan konten di bagian atas */
margin-top: 5%;
}
.sekolah {
display: flex;
align-items: center; /* Menyelaraskan konten di bagian atas */
font-family: monospace;
font-size: 20px;
}
.logo {
background-color: #ffffff;
padding: 30px;
height: 90px;
display: flex;
flex-direction: column;
justify-content: center;
opacity: 90%;
border-radius: 15px 0 0 15px;
}
.school {
background-color:#60bfc1;
padding: 30px;
height: 90px;
width: 150px;
display: flex;
flex-direction: column;
justify-content: center;
border-radius: 0 15px 15px 0;
margin-right: 10%;
font-weight: bold;
color:#e8ddbfef;
}
.education img {
width: 90px;
height: 90px;
object-fit: cover;
}
Komentar
Posting Komentar