The web-yasser from zabkasirna

Werk thumbnails, different looks on mouse hover

Maybe different background-color? or border-color?

Fluid layout for werk thumbnails

magic numbers scattered all over the place. Please clean up.

next run

page-navigations subnav
page-infos
script for thumbs slider
Modify page-navigations for neu pages
Prepare pages for werk-detail
Change connect's contacts & texts width (max/min width)

Dynamic color for werk thumbnail texts

Worth to try

Randomize thumbnail text/image position

make random script. run on page load

Dynamically load background images and videos.

.background size sometimes do not scaled on page load. Maybe this happen because the image or video not loaded yet but the rescale function was already called.

Revision October

All Page

Semua element tidak boleh sejajar dengan logo
Recolor: Delete?
Bug di FF

Landing

Main nav: Button width diperkecil (mungkin setengah dari yg sekarang)
Hero Bg, Transparent
Hero: Add border bottom

Who

Wordings: Max width dan relayout utk large media
Wording footer: Letter space expand, font size smaller

Neu

Container: Fixed width, responsive
Wording footer: Letter space expand, font size smaller

Werk detail

Text utk paragraph: Font weight regular, Letter space expand
Image: Full container width

?

New UI, ikut dari design lama

Title

Titit lucu

code-review

Untuk mempermudah development, panggil juga css asli di /public/styles/main.css

<head>
    ...
    <link rel="stylesheet" type="text/css" href="[path ke folder public]/styles/main.css" />
    ...
</head>

body
Hapus #body: Tidak butuh id karena body cuma ada satu di semua page.
hapus font-size & line-height: gunakan default font-size / line-height saja. mengubah body font-size sangat berbahaya. karena satuan "em" dan "rem" tergantung dari body font-size.
.page-navigation-project
ubah class name: usahakan tidak terlalu spesifik namun tetap semantic

.page-navigation-project {...} // diubah menjadi
.page-navigations {...} // simple and semantic

huruf "s" di akhir menandakan kalau element ini adalah container
untuk menghemat jumlah class, identitas halaman ada di "parent" dari element ini

<div id="page" class="werk"> // ini parent nya
    ...
    <div class="page-navigations"> // ini container nya
        ...
        <div class="page-navigation"> // ini element nya
            ...
        </div>
        ...
    </div>
    ...
</div>

gunakan satuan "rem" untuk semua box-model

.page-navigations {
    ...
    width: ...rem;
    height: ...rem;
    padding: ...rem;
    margin: ...rem;
    line-height: ...rem;
    ...
}

position untuk ".page-navigations" harus relative, dan harus di clearfix, agar layout tidak dirusak children nya

.page-navigations {
    ...
    position: relative;
    ...
}
// Ini clearfix nya
.page-navigations:before,
.page-navigations:after {
    content: ""; // Biarkan kosong
    display: table;
}
.page-navigations:after {
    clear: both;
}

Googling tentang css float problem dan solusinya (clearfix)
Tambahkan class untuk css positioning

<!-- markup nya -->
<div class="page-navigations">
    ...
    <div class="page-navigation left">...</div>
    ...
</div>

.page-navigations.left { float: left; margin: 0; }        // float ke kiri
.page-navigations.center { float: left; margin: 0 auto; } // no float, center horizontally
.page-navigations.left { float: right; margin: 0; }       // float ke kanan

.info-project.pull-left
Ubah class name

.info-project {...} // prefix -project terlalu spesifik, kurang menjelaskan maksud nya
a.info-btn {...} // prefix -btn menjelaskan kalau element ini menerima interaksi user (button)

Gunakan <a>, dan display nya harus block, agar element a bisa menerima height dan width

a.info-btn {
    ...
    display: block;
    height: ...rem; // tanpa display block <a> height dan width tidak berfungsi
}

.show
Gunakan <p> dan ubah class name

<div class="page-navigations">
    <div class="page-navigation">
        <a class="info-btn">
            <p class="info-btn-text"> show info </p>
        </a>
    </div>
</div>

reset a.info-btn dan p.info-btn-text agar tidak memiliki margin, sehingga layout bisa dijaga

.info-btn {
    ...
    margin: 0;
    ...
}

.info-btn-text {
    ...
    margin: 0;
    ...
}

Gunakan img untuk semua icon, agar css tidak memanggil file image

Final Run

Recolor sometime not workings

ada homo beli eskrim malem2

zabkasirna / web-yasser Goto Github PK

web-yasser's Introduction

web yasser

web-yasser's People

Contributors

Stargazers

Watchers

Forkers

web-yasser's Issues

All Page

Landing

Who

Neu

Werk detail

?

Title

Recommend Projects

Recommend Topics

Recommend Org