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;

.satria

max-width: 90 px;

margin: 0 auto;

text-align: center;

.pendekar img

width: 200px;

.satria h1

font-size: 2em;

font-weight: 300;

color: #373046;

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

.pahlawan

text-align: left;

margin: 7em 0;

.pendekar img

width: 200px;

float: right;

.jagoan h1

font-size: 3em;

.pahlawan 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 mirip ikon sosial media ataupun avatar, maka bisa menemukannya di website lain.

Anda juga mampu coba juga apakah website tersebut responsif atau tidak dengan cara kerjakan zoom in dan zoom out atau perbesar dan perkecil penampilan web browser.

Selain itu, Anda juga mampu mengembangkannya kembali, misalnya dari sisi rancangan atau penampilan, posisi layout, teks, foto dan yang lain.

Baca juga : Cara Membuat Website Gratis Sendiri

Akhir Kata

Demikian cara yang mampu dipraktekkan, jika ingin menciptakan website dengan coding memakai HTML.

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

Dengan begitu, pemahaman Anda ihwal cara membuat dan mengurus website semoga lebih singkat berubah menjadi lebih terasah.

Itulah seluruh isi postingan kami kali ini perihal cara membuat situs web dengan coding 2022. Semoga berfaedah dan selamat mencoba.

1000111

Cara Membuat Situs Web Dengan Coding 2022

Profesi

Akhir Kata

Posting Komentar untuk "Cara Membuat Situs Web Dengan Coding 2022"