Scribd
Upload
11 views8 pages

NAMA

Uploaded by

Kandaa 29
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
11 views8 pages

NAMA

Uploaded by

Kandaa 29
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 8

NAMA : NUR ISKANDAR

KELAS : KA

NRP :13722698

Tugas menyelesaikan slicing figma

TAMPILAN CODING INDEX.HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Portofolio</title>
<link rel="stylesheet" href="style/style.css" />
</head>
<body>
<header>
<nav class="container-fluid">
<div class="container py-16">
<div class="logo-menu">
<img src="assets/Logo.png" alt="Portofolio" />
<ul>
<li><a href="#" class="link-item">Home</a></li>
<li><a href="#" class="link-item">About</a></li>
<li><a href="#" class="link-item">Award</a></li>
</ul>
</div>
<a href="#" class="btn-primary">Contact Me</a>
</div>
</nav>
<section class="container-fluid hero">
<div class="container py-96">
<div class="hero-text">
<h1>Hi, I am Rizzky <br> Frontend Web Developer</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis
magna rhoncus, efficitur dolor nec, luctus nunc.</p>
<a href="#" class="btn-primary">Contact Me</a>
</div>
<img src="assets/image-hero.png" alt="Rizzky photo" />
<!-- export image -->
</div>
</section>
</header>
<main>
<div class="patner">
<div class="fram7">
<ul>
<li><img src="assets/redhat.png" alt=""></li>
<li><img src="assets/boer.png" alt=""></li>
<li><img src="assets/comptia.png" alt=""></li>
</ul>
</div>

</div>

</main>
<footer>
<div></div>
</footer>
</body>
</html>

TAMPILAN STYLE.CSS

@import url("https://fonts.googleapis.com/css2?
family=Inter:[email protected]&display=swap");

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Inter;
}

body {
background-color: #fff;
}

li {
list-style: none;
}

.btn-primary {
display: inline-block;
border-radius: 4px;
padding: 10px 20px;
background-color: #4D94FF;
font-size: 16px;
font-weight: 600;
color: #FFF;
text-decoration: none;
}
.btn-primary:hover {
text-decoration: underline;
background-color: #153566;
}
.link-item {
font-weight: 500;
font-size: 16px;
color: #1F2937;
text-decoration: none;
}

.link-item:hover {
font-weight: 600;
}
.py-16 {
padding: 16px 0;
}
.py-96 {
padding: 96px 0;
}
header {
width: 100%;
}
.container-fluid {
width: 100%;
display: flex;
justify-content: center;
}

.container {
width: 100%;
max-width: 1200px;
}

/* ============================= */
/* Nav Container */
nav.container-fluid .container{
display: flex;
justify-content: space-between;
align-items: center;
}

nav.container-fluid .container .logo-menu {


display: flex;
align-items: center;
gap: 48px;
}
nav.container-fluid .container .logo-menu ul {
display: flex;
align-items: center;
gap: 16px;
}

/* ============================= */
/* Hero Section */
section.hero .container {
display: flex;
justify-content: space-between;
align-items: center;
}

section.hero .container .hero-text {


max-width: 489px;
}

section.hero .container .hero-text h1 {


margin-bottom: 8px;
font-size: 36px;
font-weight: 600;
letter-spacing: 1px;
color: #1F2937;
}
/* ============================= */
/* home*/

div.patner {
width: auto;
height: 128.87px;
display: flex;
background-color: #DBEAFE;
justify-content: center;
align-items: center;
}

div.patner .fram7 {
display: flex;
align-items: center;
}

div.patner .fram7 ul {
display: flex;
align-items: center;
justify-content: center;
gap: 48px;
list-style-type: none;
padding: 0;
margin: 0;
}

div.patner .fram7 ul li {
display: flex;
align-items: center;
}
/* ============================= */
/* Nav Container */
footer{
padding-top: 200px;
}
/* ============================= =============================
============================= ============================= */
/*hp*/
@media(max-Width:430px){
/* ============================= */
/* Nav Container */
nav.container-fluid .container {
flex-direction: column;
align-items: center;
}

nav.container-fluid .container .logo-menu {


flex-direction: column;
align-items: center;
gap: 24px;
}

nav.container-fluid .container .logo-menu .menu {


flex-direction: column;
align-items: center;
gap: 16px;
}
/* ============================= */

section.hero .container {
flex-direction: column;
align-items: center;
text-align: center;
}

section.hero .container img {


width: 366px; /* Gunakan huruf kecil */
height: 245px; /* Gunakan huruf kecil */
order: -1;
max-width: 100%;
height: auto;
border-radius: 32px;
margin-bottom: 10px; /* gap tidak berlaku pada elemen non-flex
container, gunakan margin */
}

section.hero .container .hero-text {


font-size: 16px;
font-weight: 400;
line-height: 27.2px; /* Gunakan titik desimal */
order: 1;
max-width: 100%;
padding: 96px 0px; /* Gunakan spasi, bukan koma */
}

section.hero .container .hero-text h1 {


font-size: 28px;
line-height: 42px;
}

section.hero .container .btn-primary {


order: 2;
margin-top: 16px;
}
/* ============================= */
div.patner {
width: auto;
height: auto;

flex-direction: column;
align-items: center;
padding: 10px;
}

div.patner .fram7 ul {
padding-top: 9px;
flex-direction: column;
align-items: center;
gap: 16px;
background-color: #DBEAFE;
}

}
ICON YANG DIGUNAKAN PADA CODING DIAMBIL DARI FIGMA
TAMPILAN SETELAH DILAKUKAN CODING DAN STYLING PADA CSS

You might also like