added adaptive dots

LiliaBilous · Oct 24, 2024 · 82ed51e · 82ed51e
1 parent 0d71bdf
commit 82ed51e
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 17 deletions.
diff --git a/BilousLiliia.html b/BilousLiliia.html
@@ -36,7 +36,7 @@ <h3 class="my-projects__title">Latest Projects</h3>
                   target="_blank"
                   >Test Task
                 </a>
-                ............
+                <span class="dots"></span>
                 <span>
                   <span class="bracket">[</span> HTML5, CSS, JS, GSAP, SVG-sprite
                   <span class="bracket">]</span></span
@@ -51,7 +51,7 @@ <h3 class="my-projects__title">Latest Projects</h3>
                   target="_blank"
                   >Portfolio project
                 </a>
-                ............
+                <span class="dots"></span>
                 <span>
                   <span class="bracket">[</span> HTML5, SASS, JS, Webpack
                   <span class="bracket">]</span></span
@@ -66,7 +66,7 @@ <h3 class="my-projects__title">Latest Projects</h3>
                   target="_blank"
                   >Test Task for a Junior Front-End position
                 </a>
-                ............
+                <span class="dots"></span>
                 <span>
                   <span class="bracket">[</span> HTML5, SASS, JS, Webpack
                   <span class="bracket">]</span></span
@@ -81,7 +81,7 @@ <h3 class="my-projects__title">Latest Projects</h3>
                   target="_blank"
                   >Top cafes Ukraine</a
                 >
-                ............
+                <span class="dots"></span>
                 <span>
                   <span class="bracket">[</span> HTML5, CSS3, Vue.js, Vite, Pinia
                   <span class="bracket">]</span></span
@@ -102,7 +102,7 @@ <h3 class="my-certificates__title">My certificates</h3>
                   target="_blank"
                   >FreeCodeCamp - JavaScript Algorithms and Data Structures</a
                 >
-                ..............
+                <span class="dots"></span>
                 <span>
                   <span class="bracket">[</span>JS, ES6
                   <span class="bracket">] </span></span
@@ -117,7 +117,7 @@ <h3 class="my-certificates__title">My certificates</h3>
                   target="_blank"
                   >FreeCodeCamp - Responsive Web Design</a
                 >
-                ............
+                <span class="dots"></span>
                 <span>
                   <span class="bracket">[</span> HTML5, CSS3
                   <span class="bracket">]</span></span
@@ -132,7 +132,7 @@ <h3 class="my-certificates__title">My certificates</h3>
                   target="_blank"
                   >English course</a
                 >
-                ....................
+                <span class="dots"></span>
                 <span>
                   <span class="bracket">[</span>Intermediate level B1
                   <span class="bracket">]</span></span
@@ -212,7 +212,7 @@ <h3 class="sidebar__title">Contacts</h3>
           <div class="contacts__item">
             <span class="contacts-icon">A:</span>
             <span class="contacts-text">Kyiv, Ukraine</span>
-          </div>          
+          </div>
           <div class="contacts__item">
             <span class="contacts-icon">E:</span>
             <a class="contacts-text" href="mailto:liliyabilous.email@gmail.com"

diff --git a/css/styles.css b/css/styles.css
@@ -18,24 +18,28 @@ body {
   line-height: 1.25;
   color: var(--text-color);
   max-width: 75rem;
-  margin: 2rem auto;
+  height: 100%;
+  margin: 0 auto;
 }
 
 .main-container {
   display: flex;
   flex-direction: row-reverse;
   width: 100%;
-  height: 100%;
+  min-height: 100%;
+  overflow: clip;
   background-color: var(--white-color);
   box-shadow: 6px 6px 20px rgba(0, 0, 0, 0.1);
 }
 .main-content {
-  margin: 4rem 2rem 2rem 2rem;
+  margin: 2rem;
   display: flex;
   flex-direction: column;
   gap: 1rem;
+  width: 70%;
 }
 .about-me {
+
 }
 .about-me__profession {
   font-weight: bold;
@@ -74,9 +78,20 @@ body {
 .my-projects__item {
   list-style: decimal;
 }
-.my-projects__text {
+.my-projects__text,
+.my-certificates__text {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
 }
 .my-projects__link {
+  white-space: nowrap;
+}
+.dots {
+  flex-grow: 1;
+  border-bottom: 1px dotted var(--text-color);
+  margin: 0 0.5rem;
 }
 .bracket {
   font-weight: bold;
@@ -142,9 +157,11 @@ body {
 }
 .main-section-title {
 }
+
+/* ----------------------------------------------------------------------------------------- */
 .sidebar {
-  width: 20rem;
-  padding: 4rem 0;
+  width: 30%;
+  padding: 2rem 0;
   background-color: var(--dark-background-color);
   line-height: 1.5rem;
   font-weight: 300;
@@ -170,6 +187,7 @@ body {
 }
 .contacts-text {
   color: var(--text-grey-color);
+  overflow-wrap:anywhere;
 }
 .sidebar__contacts,
 .sidebar__tech-skill,
@@ -205,7 +223,7 @@ body {
 }
 .photo {
   height: 17rem;
-  width: 20rem;
+  width: 100%;
   object-fit: cover;
 }
 
@@ -232,7 +250,14 @@ a:active {
   color: var(--primary-color);
 }
 
-
+/* --------------------------------------------- */
 @media (max-width: 50rem) {
-
+.main-content {
+  margin: 1rem;
+  gap: 0.5rem;
+
+}
+.sidebar__contacts, .sidebar__tech-skill, .sidebar__soft-skill, .sidebar__education {
+  padding: 0.5rem;
+}
 }