feat: Footer complete

MIU-cz · Sep 10, 2023 · 8a96bc3 · 8a96bc3
1 parent 1a3c3c9
commit 8a96bc3
Show file tree

Hide file tree

Showing 6 changed files with 100 additions and 2 deletions.
diff --git a/ibaCZ-Blog/components/_Footer.php b/ibaCZ-Blog/components/_Footer.php
@@ -0,0 +1,21 @@
+<?php
+require '_smm-bar.php';
+?>
+
+<div class="footer_container">
+	<div class="footer_description">
+		<p>&copy; 2023 Cube. Test by IBACZ</p>
+	</div>
+
+	<div class="footer_smmBtns">
+		<ul class="links_content">
+			<?php
+			$smmBar($smmLinks);
+			?>
+		</ul>
+	</div>
+
+	<div class="footer_topBtn">
+		<a href="#topBrand" class="main_btn">Back to top</a>
+	</div>
+</div>
diff --git a/ibaCZ-Blog/components/_Header.php b/ibaCZ-Blog/components/_Header.php
@@ -13,7 +13,7 @@
 			</ul>
 		</div>
 
-		<div class="brand_container">
+		<div class="brand_container" id="topBrand">
 			<div class="brand_pic">
 				<img src="./src/img/autor-foto.png" alt="autor-foto">
 			</div>

diff --git a/ibaCZ-Blog/src/css/_Footer.scss b/ibaCZ-Blog/src/css/_Footer.scss
@@ -0,0 +1,36 @@
+.footer_container {
+	width: 100%;
+	margin-top: 40px;
+	padding: 40px 0;
+
+	border-top: 1px solid $c-blue-grayest;
+	@include Flexyble();
+	justify-content: space-between;
+}
+
+.footer_description {
+	@include fontStyle($color: $c-blue-grayest);
+}
+
+.footer_smmBtns {
+	.links_content {
+		width: 190px;
+		@include Flexyble();
+		flex-direction: row;
+		justify-content: space-between;
+
+		.links_item {
+			width: 20px;
+			height: 20px;
+
+			svg {
+				width: 100%;
+				height: 100%;
+				object-fit: cover;
+			}
+		}
+	}
+}
+
+.footer_topBtn {
+}
diff --git a/ibaCZ-Blog/src/css/_Main.scss b/ibaCZ-Blog/src/css/_Main.scss
@@ -429,6 +429,7 @@
 // ===================
 .instagram_container {
 	width: 100%;
+	margin-top: 40px;
 	@include Flexyble();
 	position: relative;
 

diff --git a/ibaCZ-Blog/src/css/style.css b/ibaCZ-Blog/src/css/style.css
@@ -897,6 +897,7 @@
 
 .instagram_container {
   width: 100%;
+  margin-top: 40px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -923,6 +924,45 @@
   position: absolute;
 }
 
+.footer_container {
+  width: 100%;
+  margin-top: 40px;
+  padding: 40px 0;
+  border-top: 1px solid hsl(217, 16%, 68%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.footer_description {
+  font-family: "Roboto-Regular";
+  font-size: inherit;
+  font-weight: inherit;
+  letter-spacing: normal;
+  line-height: normal;
+  color: hsl(217, 16%, 68%);
+}
+
+.footer_smmBtns .links_content {
+  width: 190px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.footer_smmBtns .links_content .links_item {
+  width: 20px;
+  height: 20px;
+}
+.footer_smmBtns .links_content .links_item svg {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
 body {
   font-family: "Roboto-Regular";
   font-size: 14px;

diff --git a/ibaCZ-Blog/src/css/style.css.map b/ibaCZ-Blog/src/css/style.css.map