From bb64db756c0df21d73c036ece2cd0e04a30a4513 Mon Sep 17 00:00:00 2001 From: A Farzat Date: Sun, 24 Nov 2024 17:05:45 +0900 Subject: Add a few buttons --- sass/Components/_buttons.scss | 16 ++++++++++++++++ sass/_main.scss | 9 ++++++++- sass/style.scss | 2 ++ templates/base.html | 2 +- templates/index.html | 9 ++++++++- 5 files changed, 35 insertions(+), 3 deletions(-) create mode 100644 sass/Components/_buttons.scss diff --git a/sass/Components/_buttons.scss b/sass/Components/_buttons.scss new file mode 100644 index 0000000..27a7f07 --- /dev/null +++ b/sass/Components/_buttons.scss @@ -0,0 +1,16 @@ +.btn { + text-decoration: none; + display: inline-block; + line-height: 2.25; + padding: 8*$px 32*$px; + border-radius: 8*$px; + white-space: nowrap; + &--primary { + color: var(--color-background); + background-color: var(--color-primary); + } + &--secondary { + color: var(--color-text); + background-color: var(--color-secondary); + } +} diff --git a/sass/_main.scss b/sass/_main.scss index 2630b74..a8cc99f 100644 --- a/sass/_main.scss +++ b/sass/_main.scss @@ -9,8 +9,15 @@ flex-wrap: wrap-reverse; row-gap: 20*$px; column-gap: 40*$px; - &__title { + &__text { margin: auto; + display: flex; + flex-direction: column; + } + &__cta { + display: flex; + justify-content: space-around; + flex-wrap: wrap; } &__img { flex: 1; diff --git a/sass/style.scss b/sass/style.scss index fb6a659..a74be39 100644 --- a/sass/style.scss +++ b/sass/style.scss @@ -1,4 +1,5 @@ @import "variables"; +@import "Components/buttons"; @import "footer"; @import "header"; @import "main"; @@ -30,4 +31,5 @@ body { padding: 0; margin: 0; position: relative; + min-height: 100vh; } diff --git a/templates/base.html b/templates/base.html index 889026c..5318fa7 100644 --- a/templates/base.html +++ b/templates/base.html @@ -21,7 +21,7 @@ {% block content %} {% endblock %}