Adaugate restul fisierelor css

altcv/css/about.css

@@ -0,0 +1,108 @@
+.welcome {
+  background-color: var(--bg-primary);
+  height: 50vh;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.welcome h1 {
+  text-align: center;
+}
+
+@media (max-width: 768px) {
+  .welcome h1 {
+    font-size: 2rem;
+  }
+}
+
+.trainers .container.grid {
+  padding: var(--spacing-medium) var(--spacing-small);
+}
+
+.trainers .trainers-container {
+  padding-bottom: var(--spacing-large);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.trainers .trainer-wrapper {
+  width: 25%;
+  padding: 0 var(--spacing-small);
+}
+
+.trainers .trainer {
+  width: 100%;
+  min-height: 350px;
+
+  padding: var(--spacing-small);
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  margin-top: calc(2 * var(--spacing-xl));
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.trainers .image-wrapper {
+  width: 150px;
+  height: 150px;
+
+  border-radius: 50%;
+  overflow: hidden;
+
+  margin-top: -70px;
+}
+
+.trainer img {
+  width: 100%;
+  height: auto;
+  filter: grayscale(100%);
+}
+
+.trainer h3 {
+  width: 100%;
+  font-size: var(--fs-large);
+  font-weight: 400;
+  text-align: center;
+  background-color: rgba(20, 30, 76, 0.9);
+
+  border-radius: 5px;
+  padding: var(--spacing-tiny) 0;
+  margin-bottom: var(--spacing-medium);
+  margin-top: -25px;
+
+  z-index: 1;
+}
+
+@media (max-width: 992px) {
+  .trainers .trainer-wrapper {
+    width: calc(100% / 3);
+  }
+}
+
+@media (max-width: 768px) {
+  .trainers .trainer-wrapper {
+    width: 50%;
+  }
+
+  .trainers .trainer {
+    min-height: 310px;
+  }
+}
+
+@media (max-width: 576px) {
+  .trainers .trainer-wrapper {
+    width: 100%;
+  }
+
+  .trainers .trainer {
+    min-height: 0;
+  }
+
+  .trainer p {
+    margin-bottom: var(--spacing-medium);
+  }
+}

altcv/css/contact.css

@@ -0,0 +1,144 @@
+.welcome {
+  background-color: var(--bg-primary);
+  height: 50vh;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.welcome h1 {
+  text-align: center;
+}
+
+@media (max-width: 768px) {
+  .welcome h1 {
+    font-size: 2rem;
+  }
+}
+
+.contact h2 {
+  text-align: center;
+
+  padding-top: var(--spacing-large);
+}
+
+.contact h2,
+.contact .main-paragraph,
+.contact .contact-wrapper {
+  margin-bottom: var(--spacing-large);
+}
+
+.contact .contact-wrapper {
+  display: flex;
+}
+
+.contact ul,
+.contact form {
+  width: 50%;
+
+  display: flex;
+  flex-direction: column;
+
+  padding: var(--spacing-medium);
+}
+
+.contact li {
+  display: flex;
+  justify-content: space-between;
+
+  padding-bottom: var(--spacing-small);
+  margin-bottom: var(--spacing-large);
+  border-bottom: 1px solid #ddd;
+}
+
+.contact .contact-wrapper p,
+.contact a,
+.contact label,
+.contact input,
+.contact textarea {
+  font-size: var(--fs-medium);
+}
+
+.contact .material-symbols-outlined {
+  vertical-align: middle;
+  color: var(--text-primary);
+}
+
+.contact .contact-wrapper p:not(.description),
+.contact label,
+.contact input,
+.contact textarea {
+  color: var(--text-dark);
+}
+
+.contact a,
+.contact .description,
+.contact input::placeholder {
+  color: #8e8e8e;
+}
+
+.contact a:hover {
+  color: var(--text-primary);
+}
+
+.contact label {
+  margin-bottom: var(--spacing-tiny);
+}
+
+.contact input,
+.contact textarea {
+  padding: var(--spacing-small);
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  margin-bottom: var(--spacing-medium);
+}
+
+.contact input:focus,
+.contact textarea:focus {
+  border-color: #8e8e8e;
+  outline: none;
+}
+
+.contact textarea {
+  font-family: inherit;
+  height: 100px;
+}
+
+.contact input[type="submit"] {
+  font-size: var(--fs-medium);
+  text-align: center;
+
+  color: var(--text-white);
+  background-color: var(--button-color);
+
+  border: 1px solid var(--button-color);
+  border-radius: 5px;
+  padding: var(--spacing-small);
+
+  width: 100px;
+}
+
+@media (max-width: 768px) {
+  .contact .contact-wrapper {
+    flex-direction: column;
+  }
+
+  .contact ul,
+  .contact form {
+    width: 100%;
+    padding: 0;
+  }
+
+  .contact li {
+    margin-bottom: var(--spacing-medium);
+  }
+
+  .contact li:last-of-type {
+    margin-bottom: var(--spacing-large);
+  }
+
+  .contact input[type="submit"] {
+    margin-bottom: 0;
+  }
+}

altcv/css/courses.css

@@ -0,0 +1,133 @@
+.welcome {
+  background-color: var(--bg-primary);
+  height: 50vh;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.welcome h1 {
+  text-align: center;
+}
+
+@media (max-width: 768px) {
+  .welcome h1 {
+    font-size: 2rem;
+  }
+}
+
+.courses .container.grid {
+  padding: var(--spacing-medium) var(--spacing-small);
+}
+
+.courses .container.grid .main-paragraph {
+  margin-left: var(--spacing-small);
+  margin-right: var(--spacing-small);
+}
+
+.courses h2 {
+  padding-top: var(--spacing-large);
+}
+
+.courses h2,
+.courses .main-paragraph {
+  text-align: center;
+}
+
+.courses h2,
+.courses .main-paragraph,
+.courses .courses-container {
+  margin-bottom: var(--spacing-large);
+}
+
+.courses .courses-container {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.courses .course-wrapper {
+  width: calc(100% / 3);
+
+  padding-right: var(--spacing-small);
+  padding-left: var(--spacing-small);
+}
+
+.courses .course {
+  width: 100%;
+
+  padding: var(--spacing-tiny);
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  margin-bottom: var(--spacing-medium);
+}
+
+.courses .presentation-image {
+  width: 100%;
+  height: auto;
+
+  margin-bottom: var(--spacing-large);
+}
+
+.courses h3 {
+  color: var(--text-primary);
+}
+
+.courses .microsoft-logo {
+  width: 80px;
+  height: auto;
+  vertical-align: middle;
+}
+
+.courses span,
+.courses .certification {
+  font-size: var(--fs-medium);
+  color: #666;
+}
+
+.courses .material-symbols-outlined {
+  vertical-align: middle;
+}
+
+.courses a {
+  font-size: var(--fs-medium);
+  text-align: center;
+
+  color: var(--text-white);
+  background-color: var(--button-color);
+
+  border: 1px solid var(--button-color);
+  border-radius: 5px;
+  padding: var(--spacing-tiny);
+
+  width: 100px;
+}
+
+.courses h3,
+.courses .certification,
+.courses .details,
+.courses a {
+  margin-bottom: var(--spacing-medium);
+}
+
+.courses .content {
+  padding: 0 var(--spacing-small);
+}
+
+.courses .microsoft-logo,
+.courses .duration-months,
+.courses .duration-hours {
+  margin-left: var(--spacing-small);
+}
+
+@media (max-width: 992px) {
+  .courses .course-wrapper {
+    width: 50%;
+  }
+}
+
+@media (max-width: 768px) {
+  .courses .course-wrapper {
+    width: 100%;
+  }
+}