Profesi

Junior Content Writer at Dicoding

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, aperiam dolore assumenda velit repellendus recusandae magni consectetur mollitia facere incidunt inventore perspiciatis debitis doloribus ullam minima culpa voluptatem. Repellendus, option.

Profile Saya

Kode Lab: style.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;

.pahlawan

max-width: 90 px;

margin: 0 auto;

text-align: center;

.hero img

width: 200px;

.pahlawan h1

font-size: 2em;

font-weight: 300;

color: #373046;

.hero p

font-weight: 300;

line-height: 1.3em;

color: #98aBad;

.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( rgba(200,107,142,1), rgba(218,105,250,1),

rgba(110,125,253,1)) ;

padding-top: 10em;

.satria

text-align: left;

margin: 7em 0;

.jagoan img

width: 200px;

float: right;

.jagoan 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%;

Bila Anda masih galau dalam mencari gambar seperti ikon sosial media ataupun avatar, maka mampu menemukannya di situs web lain.

Anda juga mampu coba juga apakah situs web tersebut responsif atau tidak dengan cara lakukan zoom in dan zoom out atau perbesar dan perkecil performa web browser.

Selain itu, Anda juga bisa mengembangkannya kembali, contohnya dari segi desain atau tampilan, posisi layout, teks, foto dan yang lain.

Baca juga : Cara Membuat Website Gratis Sendiri

Akhir Kata

Demikian cara yang bisa diterapkan, jikalau ingin membuat situs web dengan coding memakai HTML.

Bila mengharapkan hasil yang lebih baik, kami sarankan supaya Anda mengikuti kelas Belajar Dasar Pemorgraman Web di Dicoding.

Dengan begitu, pengertian Anda perihal cara menciptakan dan mengelola website supaya lebih cepat bermetamorfosis lebih terasah.

Itulah seluruh isi postingan kami kali ini mengenai cara membuat website dengan coding 2022. Semoga berguna dan selamat menjajal .