Introduction

Previous article-Qiita dominated the taste, so I tried coloring only the chot with CSS.

Completion screen

Last reflection

`err.or`


app.rb:2:in `require': cannot load such file -- sinatra/reloader (LoadError)

It was just that sinatra-contrib became group: development. CSS It's not cool to line up in a row, so I decided to display only the company name and click the route name to display it.

`style.css`


.btm {
    transition: 0.2s;
    height: 0;
    overflow: hidden;
    padding: 0 10px;
}
.container input:checked + .btm {
    height: auto;
    padding: 0 10px 10px 10px;
    background-color: lightsalmon;
}

I think it's hidden because height is 0 ~~ Result all right ~~

Summary

First app fix
Become familiar with CSS

Referenced site

[CSS] Show / hide block elements with CSS only *
[For beginners] How to get Ruby delayed railway line name --Qiita *

[RUBY] Decorate your Sinatra app with CSS