organize css files

Author: carlosjorger

css/footer.css

@@ -0,0 +1,38 @@
+footer {
+    /* for guide */
+    /* border: solid 3px aqua; */
+    width: 60%;
+    margin: 0 auto;
+    margin-top: 5em;
+    margin-bottom: 5em;
+}
+
+.contacts {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+}
+
+.contacts-item {
+    text-align: center;
+}
+
+.footer {
+    display: grid;
+    height: inherit;
+}
+
+.footer-info {
+    color: var(--default-font-color);
+    font-family: var(--default-font-family);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+}
+
+.footer-info-item {
+    margin: 0 auto;
+    text-align: center;
+}

css/navbar.css

@@ -0,0 +1,36 @@
+.navbar {
+    padding: 0.5em;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    margin: 0;
+}
+
+#home {
+    padding: 1em;
+    align-self: center;
+}
+
+.nav-link {
+    padding: 1em;
+    color: white;
+    text-decoration: none;
+    /* background-image:none; */
+    transition: all 0.5s ease-in-out;
+
+}
+
+.nav-link:hover {
+    background-color: rgb(36, 28, 45);
+    color: aqua !important
+}
+
+.nav-link:visited {
+    color: white;
+    text-decoration: none;
+    background-image: none;
+}
+
+.navbar>li {
+    align-self: center;
+}

css/presentation-section.css

@@ -0,0 +1,31 @@
+.presentation {
+    color: rgb(148, 112, 220);
+    font-family: var(--default-font-family);
+    padding: 1em;
+}
+
+#presentation-title {
+    font-size: 2.6rem;
+    color: aqua;
+    animation: 1s show-presentation ease;
+}
+
+#presentation-main-skill {
+    font-size: 1.8rem;
+    opacity: 0;
+    animation-name: show-presentation-main-skill;
+    animation-timing-function: ease;
+    animation-duration: 1s;
+    animation-delay: 0.2s;
+    animation-fill-mode: forwards;
+}
+
+#presentation-description {
+    opacity: 0;
+    animation-name: show-presentation-main-skill;
+    animation-timing-function: ease;
+    animation-duration: 1s;
+    animation-delay: 0.4s;
+    animation-fill-mode: forwards;
+}
+

css/project-section.css

@@ -0,0 +1,52 @@
+.card-projects {
+    display: flex;
+    flex-direction: column;
+}
+
+.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);
+    padding: 0.5em;
+
+
+}
+
+.card-description {
+    padding: 1em;
+    color: rgb(153, 249, 249);
+    font-size: 0.6em;
+    background-color: rgb(25, 18, 33);
+}
+
+.card-links {
+    padding: 0.5em;
+    display: flex;
+}
+
+#open-ecommerce {
+    border-right: groove 0.2rem aqua;
+    border-top: groove 0.2rem aqua;
+    border-bottom: groove 0.2rem aqua;
+    align-self: flex-end;
+}
+
+#angular-portfolio {
+    border-left: groove 0.2rem aqua;
+    border-top: groove 0.2rem aqua;
+    border-bottom: groove 0.2rem aqua;
+    align-self: flex-start;
+
+}
+
+#angular-portfolio .card-links {
+    justify-content: end;
+}