From 8307566636fa2902b2fe7f7599b33ae29023eeea Mon Sep 17 00:00:00 2001
From: Vlatko Jakimoski <jakimoski.vlatko@hotmail.com>
Date: Fri, 28 Jul 2023 01:47:10 +0200
Subject: [PATCH] Added fixes in html and scss
Removed unnececery lines in html and scss, added on hover styles, removed depricated divisions, removed second image in menu (used filter).
---
css/abstracts/_mixins.scss | 8 +-
css/abstracts/_variables.scss | 2 +-
css/components/_about.scss | 17 +--
css/components/_banner.scss | 48 +-------
css/components/_blog.scss | 8 +-
css/components/_footer.scss | 12 +-
css/components/_navigation.scss | 44 ++++---
css/core/_common-elements.scss | 61 +++++++---
css/main.css | 196 +++++++++++++++-----------------
css/main.css.map | 2 +-
index.html | 110 +++++++++---------
11 files changed, 239 insertions(+), 269 deletions(-)
diff --git a/css/abstracts/_mixins.scss b/css/abstracts/_mixins.scss
index 0664cc5..4e9a494 100644
--- a/css/abstracts/_mixins.scss
+++ b/css/abstracts/_mixins.scss
@@ -45,8 +45,8 @@
}
%section {
- padding-top: (var.$gutter-base * 2);
- padding-bottom: (var.$gutter-base * 2);
+ padding-top: (var.$gutter-base * 3);
+ padding-bottom: (var.$gutter-base * 3);
@include tablet-styles {
padding-top: (var.$gutter-base);
@@ -65,3 +65,7 @@
padding-right: math.div(var.$gutter-base, 2);
}
}
+
+@mixin px-rem($value) {
+ px-rem: ($value / 16) + rem;
+}
diff --git a/css/abstracts/_variables.scss b/css/abstracts/_variables.scss
index cc7c218..c2a1dd6 100644
--- a/css/abstracts/_variables.scss
+++ b/css/abstracts/_variables.scss
@@ -31,10 +31,10 @@ $text-color-base: #fff;
$text-color-primary: #a0a0ac;
$text-color-secundary: #e65f78;
$text-color-tertiary: #000000;
-// - dodedena posledna variabla
$background-color-primary: #2e3135;
$background-color-secundary: #26282b;
+$background-color-light: #fff;
$border-color: #3b3e42;
$border: rem-calc(1);
diff --git a/css/components/_about.scss b/css/components/_about.scss
index 979c5e5..ad06856 100644
--- a/css/components/_about.scss
+++ b/css/components/_about.scss
@@ -2,41 +2,32 @@
@use "../abstracts/mixins" as mix;
@use "sass:math";
-// flex-basis: var.$flex-basis-50;
-// justify-content: space-between;
-// border: var$$border-color;
-
.about {
@extend %section;
background-color: var.$background-color-primary;
- flex-basis: var.$flex-basis-50;
- display: flex;
- align-items: center;
- justify-content: space-between;
-
&__inner {
@extend %wrap;
display: flex;
- align-items: center;
justify-content: space-between;
@include mix.tablet-styles {
display: block;
}
}
-
&__img-box {
flex-basis: var.$flex-basis-50;
border: 3px solid var.$text-color-primary;
border-radius: 5px;
+ img {
+ height: 100%;
+ }
@include mix.tablet-styles {
flex-basis: 100%;
+ margin-bottom: var.$gutter-base;
}
}
-
&__text-box {
flex-basis: var.$flex-basis-50;
- line-height: var.$line-height-base * 1.5;
@include mix.tablet-styles {
flex-basis: 100%;
}
diff --git a/css/components/_banner.scss b/css/components/_banner.scss
index 63b3b8b..da02560 100644
--- a/css/components/_banner.scss
+++ b/css/components/_banner.scss
@@ -3,21 +3,10 @@
@use "sass:math";
.banner {
- position: relative;
height: 100vh;
- background-image: url(/img/header-bg.jpg);
- background-position: center;
- background-repeat: no-repeat;
+ background: linear-gradient(rgba(46, 49, 53, 0.5), rgba(46, 49, 53, 0.5)),
+ url(../img/header-bg.jpg) center no-repeat;
background-size: cover;
- &__overlay {
- background-color: rgba(0, 0, 0, 0.5);
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- position: relative;
- z-index: 1;
- }
&__inner {
height: 100vh;
@extend %section;
@@ -32,7 +21,7 @@
font-size: var.$heading-size-bigger;
text-transform: uppercase;
font-weight: var.$font-weight-normal;
- letter-spacing: var.$gutter-base / 4;
+ letter-spacing: math.div(var.$gutter-base, 4);
@include mix.tablet-styles {
font-size: var.$heading-size-big;
letter-spacing: 0;
@@ -45,17 +34,9 @@
font-size: var.$font-size-medium;
}
}
- .btn--primary {
- margin-top: var.$gutter-base;
- text-transform: uppercase;
- font-weight: var.$font-weight-bold;
- padding: var.$gutter-base / 2 var.$gutter-base;
- border-radius: var.$border-radius * 6;
- }
+
p {
- max-width: 70%;
- margin-left: auto;
- margin-right: auto;
+ font-size: var.$font-size-medium;
@include mix.tablet-styles {
font-size: var.$font-size-small;
}
@@ -64,23 +45,4 @@
}
}
}
- .ungle {
- z-index: 3;
- position: absolute;
- bottom: var.$gutter-base / 2;
- right: var.$gutter-base / 2;
- color: var.$text-color-base;
- background-color: var.$text-color-secundary;
- padding: var.$gutter-base / 8 var.$gutter-base / 4;
- border-radius: var.$border-radius;
- @include mix.tablet-styles {
- display: none;
- }
- a {
- color: var.$text-color-base;
- i {
- font-size: var.$font-size-medium;
- }
- }
- }
}
diff --git a/css/components/_blog.scss b/css/components/_blog.scss
index f0f8bb0..92a547a 100644
--- a/css/components/_blog.scss
+++ b/css/components/_blog.scss
@@ -2,10 +2,6 @@
@use "../abstracts/mixins" as mix;
@use "sass:math";
-// flex-basis: var.$flex-basis-33;
-// justify-content: space-between;
-// border: var$$border-color;
-
.blog {
@extend %section;
background-color: var.$background-color-secundary;
@@ -19,6 +15,9 @@
@include mix.mobile-l-styles {
width: 100%;
}
+ h2 {
+ font-size: var.$heading-size-big;
+ }
}
p,
span {
@@ -38,7 +37,6 @@
background-color: var.$background-color-primary;
padding: math.div(var.$gutter-base, 3);
border-radius: var.$border-radius;
- overflow: hidden;
@include mix.tablet-styles {
&:not(:last-child) {
margin-bottom: math.div(var.$gutter-base, 2);
diff --git a/css/components/_footer.scss b/css/components/_footer.scss
index e0aca63..b24674f 100644
--- a/css/components/_footer.scss
+++ b/css/components/_footer.scss
@@ -3,11 +3,13 @@
@use "sass:math";
.footer {
- @extend %section;
+ padding: var.$gutter-base;
background-color: var.$background-color-primary;
text-align: center;
-}
-.paragraph {
- padding-top: var.$gutter-base;
- color: var.$text-color-primary;
+
+ .copy {
+ padding-top: var.$gutter-base;
+ color: var.$text-color-primary;
+ font-size: var.$font-size-small;
+ }
}
diff --git a/css/components/_navigation.scss b/css/components/_navigation.scss
index 760102d..5435b7b 100644
--- a/css/components/_navigation.scss
+++ b/css/components/_navigation.scss
@@ -4,20 +4,25 @@
.header {
z-index: 2;
- position: relative;
- @extend %wrap;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ padding-block: var.$gutter-base;
+ @include mix.tablet-styles {
+ background-color: var.$background-color-light;
+ padding-block: math.div(var.$gutter-base, 2);
+ }
&__navigation {
+ @extend %wrap;
display: flex;
- position: absolute;
justify-content: space-between;
- width: 100%;
- top: var.$gutter-base;
@include mix.tablet-styles {
position: static;
- padding: var.$gutter-base / 4 var.$gutter-base;
+ padding: math.div(var.$gutter-base, 4) var.$gutter-base;
}
@include mix.laptop-l-styles {
- padding: var.$gutter-base / 4 var.$gutter-base / 2;
+ padding: math.div(var.$gutter-base, 4) math.div(var.$gutter-base, 2);
}
}
&__nav {
@@ -44,26 +49,15 @@
&__icon {
display: none;
color: var.$text-color-tertiary;
- font-size: var.$font-size-medium;
+ font-size: var.$heading-size-big;
@include mix.tablet-styles {
- display: flex;
- flex-direction: column;
- justify-content: center;
+ display: block;
}
}
-}
-
-.banner__logo-box {
- max-width: var.$gutter-base * 2.5;
- @include mix.tablet-styles {
- display: none;
- }
-}
-
-.banner__logo-box-dark {
- max-width: var.$gutter-base * 2.5;
- display: none;
- @include mix.tablet-styles {
- display: block;
+ &__logo-box {
+ max-width: var.$gutter-base * 2.5;
+ @include mix.tablet-styles {
+ filter: invert(1);
+ }
}
}
diff --git a/css/core/_common-elements.scss b/css/core/_common-elements.scss
index 725ec96..dea1e60 100644
--- a/css/core/_common-elements.scss
+++ b/css/core/_common-elements.scss
@@ -1,6 +1,12 @@
@use "../abstracts/variables" as var;
+@use "../abstracts/mixins" as mix;
+
@use "sass:math";
+@function rem-calc($size) {
+ @return (math.div($size, 16)) * 1rem;
+}
+
body {
font-family: var.$font-family-base;
font-weight: var.$font-weight-normal;
@@ -21,36 +27,65 @@ h3 {
text-decoration: none;
cursor: pointer;
color: white;
+ &:active {
+ transform: translateY(rem-calc(1));
+ }
&--primary {
- // style za download button
- border: 1px solid white;
+ margin-top: var.$gutter-base;
+ text-transform: uppercase;
+ font-weight: var.$font-weight-bold;
+ padding: math.div(var.$gutter-base, 2) var.$gutter-base;
+ border-radius: var.$border-radius * 6;
+ border: rem-calc(1) solid white;
+ &:hover {
+ background-color: var.$background-color-secundary;
+ }
}
&--secondary {
- // style za read more
-
color: var.$text-color-primary;
font-weight: var.$font-weight-bold;
+ margin-bottom: math.div(var.$gutter-base, 2);
+ &:hover {
+ color: var.$text-color-base;
+ }
+ }
+ &--top {
+ z-index: 3;
+ font-size: var.$font-size-medium;
+ position: fixed;
+ bottom: math.div(var.$gutter-base, 2);
+ right: math.div(var.$gutter-base, 2);
+ color: var.$text-color-base;
+ background-color: var.$text-color-secundary;
+ padding: math.div(var.$gutter-base, 3) math.div(var.$gutter-base, 2);
+ border-radius: var.$border-radius;
+ @include mix.tablet-styles {
+ display: none;
+ }
}
}
.social-icon {
border-radius: 50%;
- width: var.$gutter-base;
- height: var.$gutter-base;
- line-height: var.$gutter-base;
+ width: var.$gutter-base * 1.2;
+ height: var.$gutter-base * 1.2;
+ line-height: var.$gutter-base * 1.2;
color: var.$text-color-primary;
text-align: center;
+ font-size: var.$font-size-medium;
+ display: inline-block;
&:not(:last-child) {
margin-right: math.div(var.$gutter-base, 2);
}
-
- // width, height, padding...
+ &:hover {
+ color: var.$text-color-base;
+ }
&--border {
- border: 1px solid grey;
- // style ovde
+ border: rem-calc(1) solid var.$text-color-primary;
}
-
&--background {
background-color: var.$border-color;
- // style ovde
+ &:hover {
+ color: var.$text-color-base;
+ }
}
}
diff --git a/css/main.css b/css/main.css
index 08f02fb..07dfc19 100644
--- a/css/main.css
+++ b/css/main.css
@@ -21,6 +21,30 @@ img {
max-width: 100%;
}
+.blog, .about, .banner__inner {
+ padding-top: 5.625rem;
+ padding-bottom: 5.625rem;
+}
+@media (max-width: 768px) {
+ .blog, .about, .banner__inner {
+ padding-top: 1.875rem;
+ padding-bottom: 1.875rem;
+ }
+}
+
+.blog__inner, .about__inner, .banner__inner, .header__navigation {
+ width: 80%;
+ margin-left: auto;
+ margin-right: auto;
+}
+@media (max-width: 768px) {
+ .blog__inner, .about__inner, .banner__inner, .header__navigation {
+ width: 100%;
+ padding-left: 0.9375rem;
+ padding-right: 0.9375rem;
+ }
+}
+
body {
font-family: sans-serif;
font-weight: 400;
@@ -43,66 +67,88 @@ h3 {
cursor: pointer;
color: white;
}
+.btn:active {
+ transform: translateY(0.0625rem);
+}
.btn--primary {
- border: 1px solid white;
+ margin-top: 1.875rem;
+ text-transform: uppercase;
+ font-weight: 700;
+ padding: 0.9375rem 1.875rem;
+ border-radius: 1.5rem;
+ border: 0.0625rem solid white;
+}
+.btn--primary:hover {
+ background-color: #26282b;
}
.btn--secondary {
color: #a0a0ac;
font-weight: 700;
+ margin-bottom: 0.9375rem;
+}
+.btn--secondary:hover {
+ color: #fff;
+}
+.btn--top {
+ z-index: 3;
+ font-size: 1.125rem;
+ position: fixed;
+ bottom: 0.9375rem;
+ right: 0.9375rem;
+ color: #fff;
+ background-color: #e65f78;
+ padding: 0.625rem 0.9375rem;
+ border-radius: 0.25rem;
+}
+@media (max-width: 768px) {
+ .btn--top {
+ display: none;
+ }
}
.social-icon {
border-radius: 50%;
- width: 1.875rem;
- height: 1.875rem;
- line-height: 1.875rem;
+ width: 2.25rem;
+ height: 2.25rem;
+ line-height: 2.25rem;
color: #a0a0ac;
text-align: center;
+ font-size: 1.125rem;
+ display: inline-block;
}
.social-icon:not(:last-child) {
margin-right: 0.9375rem;
}
+.social-icon:hover {
+ color: #fff;
+}
.social-icon--border {
- border: 1px solid grey;
+ border: 0.0625rem solid #a0a0ac;
}
.social-icon--background {
background-color: #3b3e42;
}
-
-.footer, .blog, .about, .banner__inner {
- padding-top: 3.75rem;
- padding-bottom: 3.75rem;
-}
-@media (max-width: 768px) {
- .footer, .blog, .about, .banner__inner {
- padding-top: 1.875rem;
- padding-bottom: 1.875rem;
- }
+.social-icon--background:hover {
+ color: #fff;
}
-.blog__inner, .about__inner, .banner__inner, .header {
- width: 80%;
- margin-left: auto;
- margin-right: auto;
+.header {
+ z-index: 2;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ padding-block: 1.875rem;
}
@media (max-width: 768px) {
- .blog__inner, .about__inner, .banner__inner, .header {
- width: 100%;
- padding-left: 0.9375rem;
- padding-right: 0.9375rem;
+ .header {
+ background-color: #fff;
+ padding-block: 0.9375rem;
}
}
-
-.header {
- z-index: 2;
- position: relative;
-}
.header__navigation {
display: flex;
- position: absolute;
justify-content: space-between;
- width: 100%;
- top: 1.875rem;
}
@media (max-width: 768px) {
.header__navigation {
@@ -139,52 +185,27 @@ h3 {
.header__icon {
display: none;
color: #000000;
- font-size: 1.125rem;
+ font-size: 2.0625rem;
}
@media (max-width: 768px) {
.header__icon {
- display: flex;
- flex-direction: column;
- justify-content: center;
- }
-}
-
-.banner__logo-box {
- max-width: 4.6875rem;
-}
-@media (max-width: 768px) {
- .banner__logo-box {
- display: none;
+ display: block;
}
}
-
-.banner__logo-box-dark {
+.header__logo-box {
max-width: 4.6875rem;
- display: none;
}
@media (max-width: 768px) {
- .banner__logo-box-dark {
- display: block;
+ .header__logo-box {
+ filter: invert(1);
}
}
.banner {
- position: relative;
height: 100vh;
- background-image: url(/img/header-bg.jpg);
- background-position: center;
- background-repeat: no-repeat;
+ background: linear-gradient(rgba(46, 49, 53, 0.5), rgba(46, 49, 53, 0.5)), url(../img/header-bg.jpg) center no-repeat;
background-size: cover;
}
-.banner__overlay {
- background-color: rgba(0, 0, 0, 0.5);
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- position: relative;
- z-index: 1;
-}
.banner__inner {
height: 100vh;
display: flex;
@@ -215,17 +236,8 @@ h3 {
font-size: 1.125rem;
}
}
-.banner__text-box .btn--primary {
- margin-top: 1.875rem;
- text-transform: uppercase;
- font-weight: 700;
- padding: 0.9375rem 1.875rem;
- border-radius: 1.5rem;
-}
.banner__text-box p {
- max-width: 70%;
- margin-left: auto;
- margin-right: auto;
+ font-size: 1.125rem;
}
@media (max-width: 768px) {
.banner__text-box p {
@@ -237,38 +249,12 @@ h3 {
max-width: 90%;
}
}
-.banner .ungle {
- z-index: 3;
- position: absolute;
- bottom: 0.9375rem;
- right: 0.9375rem;
- color: #fff;
- background-color: #e65f78;
- padding: 0.234375rem 0.46875rem;
- border-radius: 0.25rem;
-}
-@media (max-width: 768px) {
- .banner .ungle {
- display: none;
- }
-}
-.banner .ungle a {
- color: #fff;
-}
-.banner .ungle a i {
- font-size: 1.125rem;
-}
.about {
background-color: #2e3135;
- flex-basis: calc(50% - 0.9375rem);
- display: flex;
- align-items: center;
- justify-content: space-between;
}
.about__inner {
display: flex;
- align-items: center;
justify-content: space-between;
}
@media (max-width: 768px) {
@@ -281,14 +267,17 @@ h3 {
border: 3px solid #a0a0ac;
border-radius: 5px;
}
+.about__img-box img {
+ height: 100%;
+}
@media (max-width: 768px) {
.about__img-box {
flex-basis: 100%;
+ margin-bottom: 1.875rem;
}
}
.about__text-box {
flex-basis: calc(50% - 0.9375rem);
- line-height: 2.25;
}
@media (max-width: 768px) {
.about__text-box {
@@ -318,6 +307,9 @@ h3 {
width: 100%;
}
}
+.blog__inner > h2 h2, .blog__inner > p h2 {
+ font-size: 2.0625rem;
+}
.blog__inner p,
.blog__inner span {
color: #a0a0ac;
@@ -337,7 +329,6 @@ h3 {
background-color: #2e3135;
padding: 0.625rem;
border-radius: 0.25rem;
- overflow: hidden;
}
@media (max-width: 768px) {
.blog__post-box:not(:last-child) {
@@ -357,11 +348,12 @@ h3 {
}
.footer {
+ padding: 1.875rem;
background-color: #2e3135;
text-align: center;
}
-
-.paragraph {
+.footer .copy {
padding-top: 1.875rem;
color: #a0a0ac;
+ font-size: 0.8125rem;
}/*# sourceMappingURL=main.css.map */
\ No newline at end of file
diff --git a/css/main.css.map b/css/main.css.map
index 3e27f8b..0c9974b 100644
--- a/css/main.css.map
+++ b/css/main.css.map
@@ -1 +1 @@
-{"version":3,"sources":["core/_custom-font.scss","core/_reboot.scss","main.css","core/_common-elements.scss","abstracts/_variables.scss","abstracts/_mixins.scss","components/_navigation.scss","components/_banner.scss","components/_about.scss","components/_blog.scss","components/_footer.scss"],"names":[],"mappings":"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","file":"main.css"}
\ No newline at end of file
+{"version":3,"sources":["core/_custom-font.scss","core/_reboot.scss","main.css","abstracts/_mixins.scss","core/_common-elements.scss","abstracts/_variables.scss","components/_navigation.scss","components/_banner.scss","components/_about.scss","components/_blog.scss","components/_footer.scss"],"names":[],"mappings":"AAAQ,2FAAA;ACAR;EACE,sBAAA;EACA,uBAAA;ACEF;;ADCA;EACE,SAAA;ACEF;;ADCA;;;;;EAKE,aAAA;ACEF;;ADCA;EACE,cAAA;EACA,eAAA;ACEF;;ACyBA;EACE,qBAAA;EACA,wBAAA;ADtBF;ACHE;EAuBF;IAKI,qBAAA;IACA,wBAAA;EDrBF;AACF;;ACwBA;EACE,UAAA;EACA,iBAAA;EACA,kBAAA;ADrBF;ACfE;EAiCF;IAMI,WAAA;IACA,uBAAA;IACA,wBAAA;EDpBF;AACF;;AEpCA;EACE,uBCHiB;EDIjB,gBAAA;EACA,gBCHiB;EDIjB,WCgBgB;AHuBlB;;AEpCA;;;EAGE,wBAAA;EACA,gBCRiB;AH+CnB;;AErCA;EACE,qBAAA;EACA,6BAAA;EACA,YAAA;EACA,qBAAA;EACA,eAAA;EACA,YAAA;AFwCF;AEvCE;EACE,gCAAA;AFyCJ;AEvCE;EACE,oBCVU;EDWV,yBAAA;EACA,gBCvBe;EDwBf,2BAAA;EACA,qBAAA;EACA,6BAAA;AFyCJ;AExCI;EACE,yBCLuB;AH+C7B;AEvCE;EACE,cCdiB;EDejB,gBCjCe;EDkCf,wBAAA;AFyCJ;AExCI;EACE,WCnBY;AH6DlB;AEvCE;EACE,UAAA;EACA,mBCrCe;EDsCf,eAAA;EACA,iBAAA;EACA,gBAAA;EACA,WC5Bc;ED6Bd,yBC3BmB;ED4BnB,2BAAA;EACA,sBCpBY;AH6DhB;AC9EE;EC4BA;IAWI,aAAA;EF2CJ;AACF;;AExCA;EACE,kBAAA;EACA,cAAA;EACA,eAAA;EACA,oBAAA;EACA,cCzCmB;ED0CnB,kBAAA;EACA,mBCzDiB;ED0DjB,qBAAA;AF2CF;AE1CE;EACE,uBAAA;AF4CJ;AE1CE;EACE,WClDc;AH8FlB;AE1CE;EACE,+BAAA;AF4CJ;AE1CE;EACE,yBC/CW;AH2Ff;AE3CI;EACE,WC1DY;AHuGlB;;AIhIA;EACE,UAAA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,QAAA;EACA,uBDaY;AHsHd;ACtHE;EGnBF;IAQI,sBDwBqB;ICvBrB,wBAAA;EJqIF;AACF;AIpIE;EAEE,aAAA;EACA,8BAAA;AJqIJ;AChIE;EGRA;IAKI,gBAAA;IACA,4BAAA;EJuIJ;AACF;AClJE;EGIA;IASI,6BAAA;EJyIJ;AACF;AC3IE;EGIA;IAEI,aAAA;EJyIJ;AACF;AIvIE;EACE,aAAA;EACA,qBAAA;EACA,eAAA;AJyIJ;AIvIE;EACE,sBDfU;AHwJd;AIvIE;EACE,WDZc;ECad,qBAAA;AJyIJ;AIxII;EACE,cDbiB;ECcjB,qBAAA;AJ0IN;AIvIE;EACE,aAAA;EACA,cDlBkB;ECmBlB,oBDhCe;AHyKnB;ACrKE;EGyBA;IAKI,cAAA;EJ2IJ;AACF;AIzIE;EACE,oBAAA;AJ2IJ;AC7KE;EGiCA;IAGI,iBAAA;EJ6IJ;AACF;;AKrMA;EACE,aAAA;EACA,qHAAA;EAEA,sBAAA;ALuMF;AKtME;EACE,aAAA;EAGA,aAAA;EACA,uBAAA;EACA,mBAAA;ALsMJ;AKpME;EACE,kBAAA;ALsMJ;AKrMI;EACE,mBAAA;EACA,yBAAA;EACA,gBFXe;EEYf,0BAAA;ALuMN;ACvME;EIJE;IAMI,oBFNW;IEOX,iBAAA;ELyMN;AACF;AKvMI;EACE,kBFZe;EEaf,gBFpBe;AH6NrB;ACjNE;EIME;IAII,mBFjBW;EH4NjB;AACF;AKxMI;EACE,mBFtBa;AHgOnB;ACzNE;EIcE;IAGI,oBF1BU;EHsOhB;AACF;AC1OE;EI0BE;IAMI,cAAA;EL8MN;AACF;;AMtPA;EAEE,yBH4ByB;AH4N3B;AMvPE;EAEE,aAAA;EACA,8BAAA;ANwPJ;AC3OE;EKhBA;IAKI,cAAA;EN0PJ;AACF;AMxPE;EACE,iCHSY;EGRZ,yBAAA;EACA,kBAAA;AN0PJ;AMzPI;EACE,YAAA;AN2PN;ACxPE;EKRA;IASI,gBAAA;IACA,uBHFQ;EH6PZ;AACF;AMzPE;EACE,iCHJY;AH+PhB;ACjQE;EKKA;IAGI,gBAAA;EN6PJ;AACF;AM3PE;EACE,oBHhBe;AH6QnB;AM1PE;EACE,cHTiB;AHqQrB;AM1PE;EACE,cHXmB;AHuQvB;;AOlSA;EAEE,yBJ6B2B;AHuQ7B;AOjSI;EAEE,kBAAA;EACA,UAAA;EACA,cAAA;APkSN;AClRE;EMpBE;IAMI,WAAA;EPoSN;AACF;AOnSM;EACE,oBJCW;AHoSnB;AOlSI;;EAEE,cJOe;AH6RrB;AOjSE;EACE,oBJJU;EIKV,aAAA;EACA,8BAAA;APmSJ;ACzSE;EMGA;IAKI,sBAAA;EPqSJ;AACF;AOnSE;EACE,kCJTY;EIUZ,yBJFuB;EIGvB,iBAAA;EACA,sBJEY;AHmShB;ACpTE;EMiBI;IACE,wBAAA;EPsSN;AACF;AOpSI;EACE,wBAAA;EACA,sBJNU;AH4ShB;AOpSI;EACE,qBAAA;APsSN;AOpSI;EACE,cJrBiB;EIsBjB,gBJzCa;AH+UnB;;AQvVA;EACE,iBLkBY;EKjBZ,yBL4ByB;EK3BzB,kBAAA;AR0VF;AQxVE;EACE,qBLaU;EKZV,cLmBiB;EKlBjB,oBLEc;AHwVlB","file":"main.css"}
\ No newline at end of file
diff --git a/index.html b/index.html
index 11c413a..dcee8f9 100644
--- a/index.html
+++ b/index.html
@@ -20,14 +20,10 @@
<!-- NAVIGATION -->
<header class="header" id="header">
<div class="header__navigation">
- <div class="banner__logo-box">
+ <div class="header__logo-box">
<a href="./index.html"><img src="./img/logo.png" alt="logo" /></a>
</div>
- <div class="banner__logo-box-dark">
- <a href="./index.html"
- ><img src="./img/logo-dark.png" alt="logo-dark"
- /></a>
- </div>
+
<i class="header__icon fa-solid fa-bars"></i>
<nav class="header__nav">
<ul class="header__list">
@@ -47,23 +43,17 @@
<!-- BANNER SECTION -->
<main>
<section class="banner">
- <div class="banner__overlay">
- <div class="banner__inner">
- <div class="banner__text-box">
- <h3>Welcome</h3>
- <h1>I'm a photographer</h1>
- <p>
- It is a long established fact that a reader will be of a page
- when established fact looking at its layout.
- </p>
- <button class="btn btn--primary">Download cv</button>
- <!-- Style za kopceto vo common-elements -->
- </div>
+ <div class="banner__inner">
+ <div class="banner__text-box">
+ <h3>Welcome</h3>
+ <h1>I'm a photographer</h1>
+ <p>
+ It is a long established fact that a reader will be of a page when
+ established fact looking at its layout.
+ </p>
+ <button class="btn btn--primary">Download cv</button>
</div>
</div>
- <div class="ungle">
- <a href="#"><i class="fa-solid fa-angle-up"></i></a>
- </div>
</section>
<!-- ABOUT SECTION -->
<section class="about">
@@ -75,31 +65,34 @@
<h2>About Me</h2>
<h3>Hello! <span>I'm Kerri Deo</span></h3>
<p>
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum,
- libero!
+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. At id
+ explicabo quasi voluptate rem aliquam iure, odit perspiciatis
+ dolorum? Debitis.
</p>
<p>
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti
- magnam quo consequuntur. Nemo rem voluptas blanditiis autem
- mollitia quia asperiores.
+ Lorem ipsum dolor sit amet consectetur adipisicing elit.
+ Excepturi, harum labore. Quas corporis autem sed architecto
+ cupiditate vitae necessitatibus nam sit cumque officia, nihil iste
+ repudiandae itaque optio numquam minus.
</p>
<p>
- Lorem ipsum dolor, sit amet consectetur adipisicing elit.
- Accusamus tempore quibusdam hic sint soluta quos. Labore alias
- ratione nobis cum.
+ Lorem ipsum dolor sit amet consectetur adipisicing elit.
+ Consectetur ad quis, numquam pariatur alias dolorem quisquam eos
+ ut temporibus explicabo autem eaque cupiditate, recusandae
+ reprehenderit officiis cumque eum animi obcaecati.
</p>
- <!-- Style za iconite vo common-elements -->
-
- <i
- class="social-icon social-icon--border fa-brands fa-dribbble"
- ></i>
- <i
- class="social-icon social-icon--border fa-brands fa-facebook"
- ></i>
- <i
- class="social-icon social-icon--border fa-brands fa-instagram"
- ></i>
- <i class="social-icon social-icon--border fa-brands fa-twitter"></i>
+ <a class="social-icon social-icon--border" href="#">
+ <i class="fa-brands fa-dribbble"></i
+ ></a>
+ <a class="social-icon social-icon--border" href="#"
+ ><i class="fa-brands fa-facebook"></i
+ ></a>
+ <a class="social-icon social-icon--border" href="#"
+ ><i class="fa-brands fa-instagram"></i
+ ></a>
+ <a class="social-icon social-icon--border" href="#">
+ <i class="fa-brands fa-twitter"></i
+ ></a>
</div>
</div>
</section>
@@ -109,7 +102,8 @@
<div class="blog__inner">
<h2>Our Blog</h2>
<p>
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, iste.
+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sit
+ nesciunt beatae quo numquam eum animi.
</p>
<div class="blog__post-container">
<div class="blog__post-box">
@@ -122,7 +116,6 @@
explicabo sit facilis.
</p>
<a class="btn btn--secondary" href="#">Read More...</a>
- <!-- style za linkot vo common-elements -->
</div>
<div class="blog__post-box">
<img src="./img/blog-2.jpg" alt="blog-1" />
@@ -153,22 +146,22 @@
<!-- FOOTER -->
<footer class="footer">
- <!-- Style za iconite vo common-elements -->
<div class="footer__inner">
- <i
- class="social-icon social-icon--background fa-brands fa-facebook-f"
- ></i>
- <i
- class="social-icon social-icon--background fa-brands fa-linkedin-in"
- ></i>
- <i
- class="social-icon social-icon--background fa-brands fa-pinterest-p"
- ></i>
- <i class="social-icon social-icon--background fa-brands fa-twitter"></i>
+ <a class="social-icon social-icon--background" href="#"
+ ><i class="fa-brands fa-facebook-f"></i
+ ></a>
+ <a class="social-icon social-icon--background" href="#">
+ <i class="fa-brands fa-linkedin-in"></i
+ ></a>
- <div class="paragraph">
- <p>2018-2023 ©Kerri. Design by SRTBThemes</p>
- </div>
+ <a class="social-icon social-icon--background" href="#">
+ <i class="fa-brands fa-pinterest-p"></i
+ ></a>
+ <a class="social-icon social-icon--background" href="#">
+ <i class="fa-brands fa-twitter"></i
+ ></a>
+
+ <p class="copy">2018-2023 ©Kerri. Design by SRTBThemes</p>
</div>
</footer>
<button
@@ -176,8 +169,7 @@
onclick="location.href='#header'"
title="Go to top"
>
- <i class="fa-solid fa-arrow-up"></i>
+ <i class="fa-solid fa-angle-up"></i>
</button>
- <!-- style vo common-elements-->
</body>
</html>
--
GitLab