fix: filled and stylized language box (section)

vitalik203 · Mar 29, 2024 · 08c2854 · 08c2854
1 parent 1cbe7c1
commit 08c2854
Show file tree

Hide file tree

Showing 4 changed files with 128 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -81,7 +81,28 @@
             <img src="img/color theory.svg" alt="Design Skills" />
           </div>
         </section>
-        <section class="box__col1"></section>
+        <section class="box__col1">
+          <p class="box__title">Language</p>
+          <div class="horisontal-line"></div>
+          <div class="language__cover">
+            <p>English</p>
+            <div class="level-lang">
+              <div class="english-level_left"></div>
+            </div>
+          </div>
+          <div class="language__cover">
+            <p>Deutsch</p>
+            <div class="level-lang">
+              <div class="deutsch-level_left"></div>
+            </div>
+          </div>
+          <div class="language__cover">
+            <p>Francais</p>
+            <div class="level-lang">
+              <div class="francais-level_left"></div>
+            </div>
+          </div>
+        </section>
         <section class="box__col1"></section>
       </section>
       <div class="wrapper-col"></div>

diff --git a/styles/styles.css b/styles/styles.css
@@ -135,4 +135,58 @@
        column-gap: 35px;
   height: 40px;
   margin: 20px 0 0 50px;
+}
+
+.language__cover {
+  display: flex;
+  height: 30px;
+  margin-left: 50px;
+  align-items: center;
+  position: relative;
+  top: 20px;
+  margin-top: 20px;
+}
+.language__cover p {
+  color: rgb(255, 255, 255);
+  font-family: Titillium Web;
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 30px;
+  letter-spacing: 0%;
+  text-align: left;
+  align-items: center;
+  width: 72px;
+  margin-right: 6px;
+}
+
+.level {
+  position: relative;
+  align-items: flex-end;
+}
+
+.english-level_left {
+  width: 100%;
+  /* Primary color */
+  background: rgb(46, 126, 224);
+  height: 10px;
+}
+
+.deutsch-level_left {
+  width: 185px;
+  height: 10px;
+  background: rgb(46, 126, 224);
+}
+
+.francais-level_left {
+  width: 185px;
+  height: 10px;
+  background: rgb(46, 126, 224);
+}
+
+.level-lang {
+  width: 242px;
+  background-color: white;
+  overflow: hidden;
+  height: 10px;
+  position: relative;
 }/*# sourceMappingURL=styles.css.map */
diff --git a/styles/styles.css.map b/styles/styles.css.map
diff --git a/styles/styles.scss b/styles/styles.scss
@@ -136,3 +136,54 @@ body {
   height: 40px;
   margin: 20px 0 0 50px;
 }
+
+//Languages
+.language__cover {
+  display: flex;
+  height: 30px;
+  margin-left: 50px;
+  align-items: center;
+  position: relative;
+  top: 20px;
+  margin-top: 20px;
+  p {
+    color: rgb(255, 255, 255);
+    font-family: Titillium Web;
+    font-size: 20px;
+    font-weight: 600;
+    line-height: 30px;
+    letter-spacing: 0%;
+    text-align: left;
+    align-items: center;
+    width: 72px;
+    margin-right: 6px;
+  }
+}
+.level {
+  position: relative;
+  align-items: flex-end;
+}
+.english-level_left {
+  width: 100%;
+  /* Primary color */
+  background: rgb(46, 126, 224);
+  height: 10px;
+}
+.deutsch-level_left {
+  width: 185px;
+  height: 10px;
+  background: rgb(46, 126, 224);
+}
+.francais-level_left {
+  width: 185px;
+  height: 10px;
+  background: rgb(46, 126, 224);
+}
+
+.level-lang {
+  width: 242px;
+  background-color: white;
+  overflow: hidden;
+  height: 10px;
+  position: relative;
+}