3. CSS
Tags: aws, css
Published: 2020-12-31 09:25:42

After creating the framework in HTML, it was time for some basic styling for my [bio](http://blog.komlalebu.com/). 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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/phhvqeklnd2owd7yy65o.gif) 

#[Structure](https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured)
[styles.css](https://github.com/jicoing/git-komlalebu/blob/master/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. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/gml64iy5f8clu012ghdf.PNG)

>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](https://www.google.com/intl/en/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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/i9yzdy1sj0g2k2k4drqe.PNG) 

#[Buttons](https://www.w3schools.com/tags/tag_button.asp)
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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9jnjl7t29ko0uhkvl537.jpg)

#[Accordion](https://www.w3schools.com/howto/howto_js_accordion.asp)

* The [div tag](https://www.w3schools.com/Tags/tag_div.asp) `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.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0vobgcej8t0ytnl5d9l4.gif)