diff options
| -rw-r--r-- | sass/Components/_buttons.scss | 16 | ||||
| -rw-r--r-- | sass/_main.scss | 9 | ||||
| -rw-r--r-- | sass/style.scss | 2 | ||||
| -rw-r--r-- | templates/base.html | 2 | ||||
| -rw-r--r-- | templates/index.html | 9 |
5 files changed, 35 insertions, 3 deletions
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 %} </section> <footer> - <div class="footer"> + <div id="contact-info" class="footer"> <h3> Connect with me, @farzat on </h3> <div class="social-icons"> <a href="https://www.linkedin.com/in/farzat/"> diff --git a/templates/index.html b/templates/index.html index 09fb8e3..ae485ba 100644 --- a/templates/index.html +++ b/templates/index.html @@ -4,12 +4,19 @@ {% block content %} <div class="hero"> - <div class="hero__title"> + <div class="hero__text"> <h1> <span class="--main">Hi! I am <span class="color-primary">Farzat</span>,</span> <span class="--sub">a <span class="color-gradient">software developer</span></span> <span class="--sub-sub">and <span class="text-stroke color-accent">computer enthusiast</span></span> </h1> + <p> + Learn more about me from the links below ⇓ + </p> + <div class="hero__cta"> + <a href="#" class="btn btn--secondary">Still a dummy link</a> + <a href="#contact-info" class="btn btn--primary">Contact me</a> + </div> </div> <div class="hero__img"> <img src="/img/profile-pic.jpg" alt="Profile pic" class="profile-pic"> |