add card-project

Author: carlosjorger

index.html

@@ -57,11 +57,26 @@ <h2 id="presentation-main-skill">I'm an <br class='br-show'>full-stack engineer<
   </section>
   <section>
     <article id="work">
-      <h2 class="subtitle reveal">These are my github repositories:</h2>
-      <div class="card-project">
-
+      <h2 class="subtitle reveal">These are my github repositories</h2>
+      <div id="open-ecommerce" class="card-project reveal">
+        <div class="card-title">
+          OpenEcommerce
+        </div>
+        <br>
+        <div class="card-description">
+          OpenEcommerce is an ecommerce builded with .net. Using a hexagonal architecture, cqrs pattern and more interesting patterns.
+        </div>
+      </div>
+      <div id="angular-portfolio" class="card-project reveal">
+        <div class="card-title">
+          Angular Portfolio
+        </div>
+        <br>
+        <div class="card-description">
+          It is a personal portfolio builded with angular using really cool animation (Angular animations).
+        </div>
       </div>
-      <ul>
+      <!-- <ul>
         <li class="reveal">
           <p><a class="work-link" href="https://github.com/CarlosJorgeR/openEcommerce" target="_blank"
               rel="noopener noreferrer">
@@ -72,7 +87,7 @@ <h2 class="subtitle reveal">These are my github repositories:</h2>
               rel="noopener noreferrer">
               My portfolio</a> is a personal portfolio builded with angular.</p>
         </li>
-      </ul>
+      </ul> -->
     </article>
   </section>
   <footer>
@@ -92,12 +107,13 @@ <h1 class="subtitle contacts-item">Contact</h1>
         <p class="footer-item">
           © 2022 Carlos Jorge
           </br>
-          <a class="work-link" href="https://github.com/CarlosJorgeR/carlosjorger.github.io">Published</a> in 
+          <a class="work-link" href="https://github.com/CarlosJorgeR/carlosjorger.github.io">Published</a> in
           <a class="work-link" href="https://pages.github.com/">Github Page</a>
         </p>
 
       </div>
     </article>
   </footer>
 </body>
+
 </html>

styles.css

@@ -114,7 +114,6 @@ nav {
   text-align: center;
 }
 
-/* Classes */
 .presentation {
   color: rgb(148, 112, 220);
   font-family: var(--default-font-family);
@@ -140,8 +139,36 @@ nav {
   text-align: center;
 }
 
+.card-project{
 
+  padding: 0.5em;
+  margin: 1em;
+  width: 60%;
+  display: flex;
+  flex-direction: column;
+  font-family: var(--default-font-family);
+}
+.card-title{
+  color: var(--default-font-color);
+
+}
+.card-description{
+  padding: 1em;
+  color: rgb(153, 249, 249);
+  font-size: 0.6em;
+  background-color: rgb(25, 18, 33);
+}
+#open-ecommerce{
+  border-left: groove 0.2rem aqua;
+  border-top: groove 0.2rem aqua;
+  margin-left: 5em;
+}
+#angular-portfolio{
+  border-right: groove 0.2rem aqua;
+  border-top: groove 0.2rem aqua;
+  margin-right: 5em;
 
+}
 /* Ids */
 #presentation-title {
   font-size: 2.6rem;
@@ -274,7 +301,9 @@ nav {
 
 
   }
-
+  .card-project{
+    width: 65%;
+  }
   section,
   footer {
     width: 75%;
@@ -290,22 +319,26 @@ nav {
     font-size: 17px;
 
   }
-
+  .card-project{
+    width: 70%;
+  }
   p {
     max-width: 450px;
   }
 
   section,
   footer {
-    width: 70%;
+    width: 75%;
   }
 }
 
 @media (max-width: 665px) {
   :root {
     font-size: 13px;
   }
-
+  .card-project{
+    width: 80%;
+  }
   p {
     max-width: 330px;
   }