3. CSS

After creating the framework in HTML, it was time for some basic styling for my bio. I did not want to go overboard with it as I am not a designer. Later revisions may change certain elements as required.

Git: https://github.com/jicoing/git-komlalebu

Structure

styles.css

Most of the styling is done using an external styles.css file, with some inline CSS. The layout for the page is shown below, with the separate div classes for the content.

CSS - for div classes .resume, resume_left, resume_right

                        .resume {
                        width: 800px;
                        height: auto;
                        display: flex;
                        margin: 50px auto;
                        }

                        .resume .resume_left {
                        width: 280px;
                        background: #e1e1e1;
                        }
                        .resume .resume_right {
                        width: 520px;
                        background: #fff; 
                        padding: 25px;
                        }

Chrome

Google Chrome has a useful set of tools that helps in developing for multiple screen sizes easy, which we can access using the F12 key and selecting the device from the dropdown.

Buttons

I have added some button animations to the stylesheet as below.

CSS

                    button {
                    background: none;
                    color: #555555;
                    width: 180px;
                    height: 40px;
                    border: 1px solid #555555;
                    font-size: 15px;
                    border-radius: 4px;
                    transition: .6s;
                    overflow: hidden;
                    }

                    button:focus {
                    outline: none;
                    }



                    button:hover {
                    background: #fba200;
                    cursor: pointer;
                    }

                    button:hover:before {
                    transform: translateX(300px) 
                    skewX(-15deg);
                    opacity: .6;
                    transition: .7s;
                    }

                    button:hover:after {
                    transform: translateX(300px) 
                    skewX(-15deg);
                    opacity: 1;
                    transition: .7s;
                    }

                    }

Resulting in those cool orange buttons.

Reference: https://www.youtube.com/watch?v=gM3IGPFwwvA

Accordion

• The div tag acccordion helped to make the website more compact on mobile that was later styled with CSS. Reference: https://www.w3schools.com/howto/howto_js_accordion.asp

HTML

            <button class="accordion">Section 1</button>
                <div class="panel">
                  <p>Lorem ipsum...</p>
                     </div>

CSS

                   .accordion {
                       background-color: #ccc;
                       color: #555555;
                       cursor: pointer;
                       padding: 0px;
                       width: 100%;
                       border: 2px solid #e1e1e1;
                       text-align: center;
                       outline: none;
                       font-size: 0px;
                       transition: 0.4s;
                        }

                      .active, .accordion:hover {
                       background-color: #e1e1e1;
                       }

                      .panel {
                       padding: 0 0;
                       background-color: #e1e1e1;
                       max-height: 0;
                       overflow: hidden;
                       transition: max-height 0.2s ease-out;                           
                       }

And the basic styling was done.