Added icons for the project skills

Changed the skills section of the home page adding the icons and a flex-box
francesca-paris · Feb 2, 2022 · 79b1854 · 79b1854
1 parent b9134d0
commit 79b1854
Show file tree

Hide file tree

Showing 17 changed files with 443 additions and 28 deletions.
diff --git a/css/style.css b/css/style.css
@@ -281,18 +281,28 @@ h4 {
   margin-bottom: 0;
 }
 
-#work img {
-  border-radius: 0;
-  margin: 16px 0 4px;
-}
-
 #work {
   padding-bottom: 8px;
 }
 
 .skills {
-  font-style: italic;
-  color: #898d89;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  align-content: flex-start;
+  grid-row-gap: 4px;
+}
+
+.skills p {
+  padding-top: unset;
+}
+
+.item {
+  width: 148px;
+}
+
+.item p {
+  line-height: 36px;
 }
 
 .bold {
@@ -382,6 +392,10 @@ h4 {
   padding-left: 12px;
 }
 
+.space-left-40 {
+  padding-left: 40px;
+}
+
 /* Main Column classes */
 .col-4 {
   width: 33.33%;
@@ -475,10 +489,19 @@ h4 {
   padding-bottom: 36px;
 }
 
+.space-vertical-16 {
+  padding-top: 16px;
+  padding-bottom: 16px;
+}
+
 .space-top16 {
   padding-top: 16px;
 }
 
+.space-top-20 {
+  padding-top: 20px;
+}
+
 .space-top {
   padding-top: 24px;
 }
@@ -487,6 +510,10 @@ h4 {
   padding-bottom: 20px;
 }
 
+.space-bottom-4 {
+  padding-bottom: 4px;
+}
+
 .space-bottom12 {
   padding-bottom: 12px;
 }

diff --git a/img/skills/icn_MVP.svg b/img/skills/icn_MVP.svg
diff --git a/img/skills/icn_android.svg b/img/skills/icn_android.svg
diff --git a/img/skills/icn_coding.svg b/img/skills/icn_coding.svg
diff --git a/img/skills/icn_high-fidelity.svg b/img/skills/icn_high-fidelity.svg
diff --git a/img/skills/icn_icons.svg b/img/skills/icn_icons.svg
diff --git a/img/skills/icn_ios.svg b/img/skills/icn_ios.svg
diff --git a/img/skills/icn_mock-up.svg b/img/skills/icn_mock-up.svg
diff --git a/img/skills/icn_prototype.svg b/img/skills/icn_prototype.svg
diff --git a/img/skills/icn_responsive-design.svg b/img/skills/icn_responsive-design.svg
diff --git a/img/skills/icn_style-guide.svg b/img/skills/icn_style-guide.svg
diff --git a/img/skills/icn_user-flows.svg b/img/skills/icn_user-flows.svg
diff --git a/img/skills/icn_user-persona.svg b/img/skills/icn_user-persona.svg