diff --git a/pass/public/styles/base.less b/pass/public/styles/base.less index cd631a91ce2b5e70088e2f3197e2d5cb97ff4d52..fd3cc29c27623829cc684dd5dd7434444a84a773 100644 --- a/pass/public/styles/base.less +++ b/pass/public/styles/base.less @@ -53,6 +53,16 @@ button { cursor: pointer; } +.button { + display: block; + border: 1px solid #777; + padding: 1rem; + color: white; + text-decoration: none; + background-color: #3a3af9; + width: max-content; +} + nav { @logo-break-point: 720px; // Breakpoint when nav items won't fit besides logo @nav-items-break-point: 560px; // Breakpoint when nav items won't fit into their own row diff --git a/pass/public/styles/index.less b/pass/public/styles/index.less index daaf8206dcfb84b8a2ab74bc8b53593633abdf3f..fb875f15f20dc576f5622a862a620406ec73fa35 100644 --- a/pass/public/styles/index.less +++ b/pass/public/styles/index.less @@ -91,12 +91,6 @@ html { grid-area: call-to-action; align-self: center; justify-self: end; - display: block; - border: 1px solid #777; - padding: 1rem; - color: white; - text-decoration: none; - background-color: #3a3af9; margin: 1rem 0 1rem 1rem; } @@ -154,7 +148,7 @@ html { #advantages { @advantages-breakpoint: 750px; - max-width: 1500px; + max-width: 1200px; display: grid; margin: 4rem auto; gap: 4rem; @@ -218,9 +212,10 @@ html { } } - #no-logging { + #no-logging, + #no-tradeoff { > img { - max-width: 10em; + width: 10em; } } } @@ -287,6 +282,12 @@ html { } } } + + > #how-it-works-action { + display: flex; + justify-content: center; + padding-top: 4rem; + } } #offers, diff --git a/pass/views/index.ejs b/pass/views/index.ejs index 57edcfc6bdd235cc32ad2088cba83153131f19c7..9ebc36e58cf05323596b51a1a838e5871f716290 100644 --- a/pass/views/index.ejs +++ b/pass/views/index.ejs @@ -21,7 +21,7 @@ </button> </div> </div> - <a class="call-to-action" href="#how-it-works">So funktioniert es</a> + <a class="call-to-action button" href="#how-it-works">So funktioniert es</a> </div> </div> <div id="advantages"> @@ -79,6 +79,9 @@ </div> </li> </ol> + <div id="how-it-works-action"> + <a href="#" class="button">Los geht's</a> + </div> </div> <div id="offers"> <form class="offer" action="/checkout">