step 4: about

dhanusir · Aug 19, 2020 · a17b1cb · a17b1cb
1 parent eb6ca50
commit a17b1cb
Show file tree

Hide file tree

Showing 2 changed files with 113 additions and 2 deletions.
diff --git a/css/style.css b/css/style.css
@@ -15,6 +15,18 @@
 .section-padding {
   padding: 60px 0;
 }
+.text-center {
+  text-align: center;
+}
+.width_80 {
+  width: 80%;
+}
+.width_70 {
+  width: 70%;
+}
+.width_60 {
+  width: 60%;
+}
 
 /* Main CSS */
 html, body {
@@ -77,3 +89,60 @@ nav ul li a:hover, nav ul li a.active {
 #intro .intro-body h1 {
   padding-bottom: 5px;
 }
+
+/* About */
+#about {
+  background-color: #eee;
+  overflow: auto;
+}
+#about header h1 {
+  font-size: 2rem;
+}
+#about .about-content > div {
+  width: 50%;
+  overflow: auto;
+  padding: 0 2rem;
+}
+
+/* About left column */
+#about .about-content .column1 {
+  float: left;
+}
+#about .about-content p {
+  margin-top: 0;
+}
+#about .about-content .skills {
+  margin-top: 20px;
+}
+#about .about-content .skills .skill-item {
+  background-color: orange;
+  height: 25px;
+  margin-bottom: 5px;
+  padding-left: 10px;
+  font-size: 13px;
+}
+/* About right column */
+#about .about-content .column2 {
+  float: right;
+}
+#about .about-content .column2 h3 {
+  padding-bottom: 10px;
+}
+#about .about-content .education-grid .education-item {
+  margin-bottom: 30px;
+}
+#about .about-content .education-grid .education-item .year {
+  font-size: 12px;
+  font-weight: 500;
+  margin-bottom: 0;
+}
+#about .about-content .education-grid .education-item h3 {
+  padding: 0;
+  margin-bottom: 5px;
+  line-height: 1;
+  font-weight: 700;
+}
+#about .about-content .education-grid .education-item h4 {
+  font-size: 15px;
+  font-weight: 500;
+}
diff --git a/index.html b/index.html
@@ -51,8 +51,50 @@ <h1>Hi, I am Foo.</h1>
     </header>
 
     <!-- About -->
-    <section>
-      <h2>About Section</h2>
+    <section id="about" class="section-padding">
+      <div class="container">
+        <header>
+          <h1 class="text-center">About Me</h1>
+        </header>
+        <div class="about-content">
+          <div class="column1">
+            <div class="intro-text">
+              <p>
+                Hi, my name is Foo. I am a 4th Year Computer Science student and have dream of helping world by
+                making better softwares.
+              </p>
+              <p>
+                Web Development excites me a lot and like to play with its related technologies whenever I get time.
+              </p>
+            </div>
+            <div class="skills">
+              <h3>Skills <i class="fas fa-cogs fa-lg"></i></i></h3>
+              <div class="skills-grid">
+                <div class="skill-item width_80">HTML (80%)</div>
+                <div class="skill-item width_70">CSS (70%)</div>
+                <div class="skill-item width_60">JavaScript (60%)</div>
+              </div>
+            </div>
+          </div>
+          <div class="column2">
+            <h3>Education <i class="fas fa-graduation-cap fa-lg"></i></h3>
+            <div class="education-grid">
+              <div class="education-item">
+                <p class="year">2016 - Present</p>
+                <h3>BSc(Computer Science)</h3>
+                <h4>Bar University</h4>
+                <p>Baz, XYZ</p>
+              </div>
+              <div class="education-item">
+                <p class="year">2014 - 2016</p>
+                <h3>Higher Secondary</h3>
+                <h4>ABC School</h4>
+                <p>Baz, XYZ</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </section>
 
     <!-- Blogs -->