Merge pull request #239 from Evavic44/project-x

Added Project Section

Author: namangupta1399

index.html

@@ -49,7 +49,7 @@ <h1 class="logo"><a href="#home"><img src="./src/assets/images/chryz-hub-transpa
         </div>
         <ul class="nav-list">
           <li><a href="./index.html">Community</a></li>
-          <li><a href="./index.html">Projects</a></li>
+          <li><a href="#projects">Projects</a></li>
           <li><a href="./index.html">Blog</a></li>
           <li><a href="./index.html">Moderators</a></li>
         </ul>
@@ -86,7 +86,47 @@ <h2 class="text-primary">Our Vision</h2>
       <a href="https://github.com/chryz-hub/opensource-4-everyone/blob/master/My-PR-Contribution-Practice.md" rel="noopener" class="btn btn-secondary" target="_blank"><i class="fas fa-code-branch"></i> Create Pull Request</a>
     </div>
   </header>
+  <main>
+    <section id="projects" class="projects">
+      <h2>Projects</h2>
+      <div class="flex-items">
+        <a href="#">
+          <div class="item project">
+            <h4 class="text-secondary">Chryz-Hub Website</h4>
+            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis quos consequatur atque perferendis sapiente consectetur iusto tempora temporibus, sequi maxime.</p>
+            <div>
+              <span class="fab fa-html5"></span>
+              <span class="fab fa-css3-alt"></span>
+              <span class="fab fa-js"></span>
+            </div>
+          </div>
+        </a>
 
+        <a href="#">
+          <div class="item project">
+            <h4 class="text-secondary">Project X</h4>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt ipsa corrupti, officia labore quibusdam adipisci! Ducimus perspiciatis corrupti dolore accusamus?</p>
+            <div>
+              <span class="fab fa-python"></span>
+              <span class="fab fa-bootstrap"></span>
+              <span class="fab fa-js"></span>
+            </div>
+          </div>
+        </a>
+        
+        <a href="#">
+          <div class="item project">
+            <h4 class="text-secondary">Project Y</h4>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt ipsa corrupti, officia labore quibusdam adipisci! Ducimus perspiciatis corrupti dolore accusamus?</p>
+            <div>
+              <span class="fab fa-react"></span>
+              <span class="fab fa-js"></span>
+            </div>
+          </div>
+        </a>
+      </div>
+    </section>
+  </main> 
   <!-- JAVASCRIPT -->
   <script src="./src/assets/javascript/script.js"></script>
 </body>

src/assets/css/global.css

@@ -144,4 +144,30 @@ textarea:focus {
 .container {
   max-width: 1200px;
   margin: 0 auto;
-}
+}
+
+/* Flex Items */
+.flex-items {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.flex-items a {
+  display: block;
+  margin: 0 20px;
+  transition: all 0.4s ease-in-out; 
+}
+
+.flex-items a:hover {
+  transform: translateY(-10px);
+  box-shadow: 2px 2px 5px rgba(9, 156, 176, 0.5);
+  border-radius: 11px;
+}
+
+.item {
+  border: 1px solid #ddd;
+  border-radius: 10px;
+  box-shadow: 3px 5px 5px var(--shadow);
+}
+

src/assets/css/styles.css

@@ -221,4 +221,41 @@ nav ul li a:focus {
 
 .vision-content a:hover span {
     transform: rotate(90deg);
+}
+
+/* Projects */
+#projects {
+    height: 400px;
+}
+
+.projects {
+    margin: 0 auto;
+    max-width: 1200px;
+}
+
+.projects h2 {
+    text-align: center;
+    margin: 50px 0 20px;
+}
+
+.project {
+    padding: 40px;
+    background: #fff url(../images/under-construction.png) no-repeat center center/cover;
+}
+
+.project p {
+    font-size: 16px;
+    line-height: 1.6;
+}
+
+.project div {
+    margin-top: 20px;
+    display: flex;
+    width: 100%;
+    justify-content: flex-end;
+}
+
+.project div span {
+    margin: 0 5px;
+    color: var(--secondaryBtn);
 }