portofolio

HTML
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Web | Portofolio</title> </head> <body> <div class="container"> <div class="sidebar"> <nav> <ul> <li><a href="home.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="portofolio.html">Portofolio</a></li> <li><a href="contact.html">Contact</a></li> <li><a href="blog.html">Blog</a></li> <li><a href="team.html">Team</a></li> </ul> </nav> </div> <main class="content"> <section class="hero"> <img src="abah.jpg" alt="Jika tulisan ini muncul maka gambar gagal ditampilkan."> <div class="hero-content"> <h1>Amrullah SE</h1><br> <h2>Financial Accounting Analyst</h2><br> <p> Jakarta, 19 September 1964. Male, as moslem.<br> I graduated from the College of Economics with a Bachelor's degree in Economics in 2005. At the same time and after graduation, I often attended workshops related to the work that I was currently working on, it's accounting. </p> <a href="index.html" class="action-btn">My Profile</a> </div> </section> </div> </div> </body> </html>
CSS
{ margin: 0; padding: 0; } body { background-color: #eff1f2; font-family: sans-serif; } .content { grid-area: content; } .sidebar{ grid-area: sidebar; background: linear-gradient(to right, rgba(200,107,142,1), rgba(218,105,250,1), rgba(110,125,253,1)) ; justify-content: center; } .footer { grid-area: footer; background: white; } .container { font-size: 1.5em; width: 100%; height: 100; height: 100vh; display: grid; grid-template-areas: "sidebar" "content" "footer"; grid-template-columns: 1fr; grid-template-rows: 130px 800px 250px; } .content, .sidebar, .footer{ padding: 1em; } nav ul { margin: 0; padding: 0; display: flex; justify-content: space-between; text-align: center; } nav li{ list-style: none; padding: 1em 0; } nav li a { color: white; font-weight: 700; opacity: 0.6; text-decoration: none; transition: 0.3s; } nav li a:hover { opacity: 1; } .hero { max-width: 90 px; margin: 0 auto; text-align: center; } .hero img { width: 300px; } .hero h1 { font-size: 3em; font-weight: 300; color: #110957; } .hero p { font-weight: 300; line-height: 1.5em; color: #0532d4; } .action-btn { display: inline-block; text-decoration: none; color: white; font-weight: 700; background: #567bfb; padding: 0.5em 2em; border-radius: 60px; margin: 1em 0; transition: 0.3s; } footer ul { max-width: 640px; margin: 2em auto; padding: 0; text-align: center; display: flex; flex-direction: row; } footer ul li { list-style: none; align-self: flex-end; } footer ul li a{ text-decoration: none; color: #c1c6ce; } footer ul li img { width: 30%; } footer p { font-size: 0.8em; } @media (min-width: 1040px){ .container { grid-template-areas:"sidebar content" "sidebar footer" ; grid-template-rows: 1fr auto ; grid-template-columns: 300px 1f; } nav ul{ display: flex; justify-content: space-between; flex-direction: column; } .sidebar{ background: linear-gradient( rgb(179, 29, 3), rgb(241, 62, 62), rgb(252, 214, 1)) ; padding-top: 10em; } .hero{ text-align: left; margin: 7em 0; } .hero img { width: 200px; float: right; } .hero h1{ font-size: 3em; } .hero p{ width: 60%; } footer ul { max-width: 900px; margin: 0 auto; padding: 1em 0; } footer ul li a img { width: 20%; } }footer
Javascript