Added versions profile pictures and set padding in the page

francesca-paris · Apr 26, 2021 · 85e6533 · 85e6533
1 parent 0a91d3f
commit 85e6533
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 15 deletions.
diff --git a/about.html b/about.html
@@ -33,16 +33,17 @@
   <main>
     <div class="container">
       <div id="about-pic">
+        <picture>
+          <source srcset="img/about-image@2x.png" media="(min-width:767px)">
+          <img src="img/about/about-image@1x.png" alt="image of Francesca" class="profile">
+        </picture>
       </div>
     </div>
 
     <div class="container">
       <div>
-        <picture>
-          <img src="img/about/about-image.png" alt="image of Francesca" class="profile">
-        </picture>
         <div>
-          <div id="introduction">
+          <div>
             <h2>My Story</h2>
             <p>My name is Francesca Paris. I am a recent graduate of the UI design bootcamp from
               Career Foundry.</p>

diff --git a/css/style.css b/css/style.css
@@ -218,23 +218,21 @@ h4 {
 }
 
 
-/* Sections ids*/
+/*  About page  */
 
 #about-pic {
-  padding:
+  text-align: center;
+  padding: 48px 0 12px 0;
 }
 
-#introduction {
-
+.profile {
+  width: 168px;
 }
 
 #skills-tools {
-
+  margin-bottom: 48px;
 }
 
-#tools-i-use {
-
-}
 
 /* Images */
 
@@ -247,9 +245,6 @@ picture .logo {
   max-width: 150px;
 }
 
-.profile {
-  width: 300px;
-}
 
 .yellow {
   background-color: #FAF9F0;

diff --git a/img/about/about-image@1x.png b/img/about/about-image@1x.png
diff --git a/img/about/about-image.png → img/about/about-image@2x.png b/img/about/about-image.png → img/about/about-image@2x.png