feat: mariateo - add section title for connect

 fix #70
feat: mariateo - add image with rounder corners and border
fix #71
feat: mariateo - add list of icons and link to social media
fix #72
feat: mariateo - add arrow down
fix #73

web/mariateo/my-cv-v3-starter/css/config.css

@@ -2,5 +2,11 @@
   --color-active: rgb(15, 142, 214);
   --color-dark: #333;
   --color-light: #fff;
+
   --color-background: #e5e5e5;
+  --color-button-red: #f93442;
+  --color-button-green: #33b540;
+  --color-button-yellow: #febb43;
+  --color-button-orange: #ff791c;
+  --color-button-purple: #ce73d5;
 }

web/mariateo/my-cv-v3-starter/css/grid.css

@@ -7,12 +7,12 @@
   /* counter-set: pasari; */
 }
 
-.column {
+/* .column { */
   /* border: 10px double coral; */
   /* padding-top: 100%; */
-  background-color: forestgreen;
+  /* background-color: forestgreen; */
   /* counter-increment: pasari; */
-}
+/* } */
 
 /* .dreptunghi::before,
 .patrat::before {

web/mariateo/my-cv-v3-starter/css/layout.css

@@ -92,4 +92,14 @@ body {
   display: flex;
   align-items: center;
   justify-content: center;
+  margin: 54px auto;
 }
+
+.img-wrapper {
+  padding-top: 100%;
+  background-size: cover;
+  width: 100%;
+  border-radius: 20px;
+  border: 4px solid var(--color-active);
+}
+

web/mariateo/my-cv-v3-starter/css/social.css

@@ -0,0 +1,44 @@
+[class^="social-media__"] { 
+  width: 100%;
+  padding-top: 100%;
+  background-color: ed;
+  border-radius: 50%;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+[class="social-media__udemy"] {
+  background-image: url(../image/udemy.png);
+}
+[class="social-media__codewars"] {
+  background-image: url(../image/codewars.png);
+}
+[class="social-media__codetap"] {
+  background-image: url(../image/codetap.png);
+}
+[class="social-media__facebook"] {
+  background-image: url(../image/facebook.png);
+}
+[class="social-media__github"] {
+  background-image: url(../image/github.png);
+}
+
+[data-theme="red"] {
+  background-color: var(--color-button-red);
+}
+
+[data-theme="green"] {
+  background-color: var(--color-button-green);
+}
+
+[data-theme="orange"] {
+  background-color: var(--color-button-orange);
+}
+
+[data-theme="yellow"] {
+  background-color: var(--color-button-yellow);
+}
+
+[data-theme="purple"] {
+  background-color: var(--color-button-purple);
+}

web/mariateo/my-cv-v3-starter/css/un-css-care-le-tine-pe-toate-celelalte.css

@@ -2,3 +2,4 @@
 @import 'grid.css';
 @import 'dark-light.css';
 @import 'layout.css';
+@import 'social.css';

web/mariateo/my-cv-v3-starter/index.html

@@ -42,6 +42,40 @@ <h3 class="section-title"><span>More</span> <span>info</span></h3>
           <img src="image/chevron-down.png" alt="chevron-down">
         </div>
       </div>
+
+      <div class="row" data-align="left">
+        <h3 class="section-title"><span>Let's</span> <span>connect</span></h3>
+      </div>
+
+      <div class="row">
+        <div class="img-wrapper" style="background-image: url(./image/avatar-maria-cotofana.jpeg)"></div>
+      </div>
+
+      <div class="column">
+        <div data-theme="red" class="social-media__udemy"></div>
+      </div>
+
+      <div class="column">
+        <div data-theme="green" class="social-media__codewars"></div>
+      </div>
+
+      <div class="column">
+        <div data-theme="yellow" class="social-media__codetap"></div>
+      </div>
+
+      <div class="column">
+        <div data-theme="orange" class="social-media__facebook"></div>
+      </div>
+
+      <div class="column">
+        <div data-theme="purple" class="social-media__github"></div>
+      </div>
+
+      <div class="row">
+        <div class="button-down">
+          <img src="image/chevron-down.png" alt="chevron-down">
+        </div>
+      </div>
     </div>
   </body>
 </html>