Merge pull request #107 from vermilion4/classic

feat(classic): adding a new portfolio style that features a classic vibe

README.md

@@ -69,6 +69,9 @@ A collection of **100% FREE** to use portfolio website templates.
 <h3><a href="https://freefolio.web.app/easy" target="_blank">easy</a></h3>
 <img src="./images/easy.png" alt="easy-screenshot"/>
 
+<h3><a href="https://freefolio.web.app/classic" target="_blank">classic</a></h3>
+<img src="./images/classic.png" alt="classic-screenshot"/>
+
 ## 😤 I own the content in your templates
 
 If any of the content from our collection is owned by you or your organization and has no proper attribution to the owner, please send us an email at opensourcesoftwareph@gmail.com. This happens sometimes and we apologize for the oversight.

classic/styles.css

@@ -0,0 +1,308 @@
+html{
+  scroll-behavior: smooth;
+}
+body {
+    font-family: Arial, sans-serif;
+    line-height: 1.6;
+    margin: 0;
+    padding: 0;
+}
+
+header {
+    background-color: #333;
+    color: white;
+    text-align: center;
+    padding: 1rem;
+}
+
+nav ul {
+    list-style-type: none;
+    padding: 0;
+}
+
+nav ul li {
+    display: inline;
+    margin-right: 1rem;
+}
+
+nav ul li a {
+    color: white;
+    text-decoration: none;
+}
+
+main {
+    padding: 2rem;
+    max-width: 1200px;
+    margin: auto;
+}
+
+section {
+    margin-bottom: 2rem;
+}
+
+.hero {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+    margin: 0;
+    background-color: #f8f9fa;
+    border: 1px solid #dee2e6;
+    border-radius: 0.25rem;
+    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.05);
+}
+
+.hero img {
+    width: 100%;
+    height: auto;
+}
+
+.hero h1 {
+    margin-top: 1rem;
+    margin-bottom: 0.5rem;
+}
+
+.hero h2 {
+    margin-bottom: 1rem;
+}
+
+.hero .cta {
+    display: inline-block;
+    padding: 0.5rem 1rem;
+    margin-top: 1rem;
+    color: #fff;
+    background-color: #007bff;
+    border: 1px solid #007bff;
+    border-radius: 0.25rem;
+    text-decoration: none;
+}
+
+.hero .cta:hover {
+    background-color: #0056b3;
+    border-color: #0056b3;
+  }
+
+
+h1 {
+    font-size: 2rem;
+}
+
+/* About Me */
+css
+#about {
+    padding: 60px 0;
+    background-color: #f8f9fa;
+}
+
+.section-title {
+    font-size: 2.5rem;
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+.about-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.profile-pic {
+    width: 200px;
+    height: 200px;
+    border-radius: 50%;
+    overflow: hidden;
+    margin-bottom: 20px;
+}
+
+.profile-pic img {
+    width: 100%;
+    height: auto;
+}
+
+.bio p {
+    font-size: 1.125rem;
+    line-height: 1.6;
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+/* Projects */
+
+.container {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 2rem;
+}
+
+.card {
+    background-color: #f8f9fa;
+    border: 1px solid #dee2e6;
+    border-radius: 0.25rem;
+    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.05);
+    margin: 1rem;
+    padding: 1rem;
+    width: 300px;
+}
+
+.card img {
+    width: 100%;
+    height: auto;
+}
+
+.card h3 {
+    margin-top: 1rem;
+    margin-bottom: 0.5rem;
+}
+
+.card p {
+    margin-bottom: 1rem;
+}
+
+.card a {
+    color: #007bff;
+    text-decoration: none;
+}
+
+.card a:hover {
+    text-decoration: underline;
+}
+
+/* Contact Form */
+
+svg {
+  height: 23rem;
+  margin-right: 4rem;
+}
+
+#envelope {
+  animation: float 2s ease-in-out infinite;
+}
+
+#star1, #star2, #star3, #star4, #star5, #star6 {
+  animation: blink 1s ease-in-out infinite;
+}
+
+#star2 {
+  animation-delay: 100ms;
+}
+
+#star3 {
+  animation-delay: 500ms;
+}
+
+#star4 {
+  animation-delay: 700ms;
+}
+
+#star5 {
+  animation-delay: 300ms;
+}
+
+#star6 {
+  animation-delay: 200ms;
+}
+
+@keyframes float {
+  0% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-20px);
+  }
+  100% {
+    transform: translateY(0px);
+  }
+}
+@keyframes blink {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.5;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.contact-form{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+form {
+ width: 50%;
+  margin: 0 auto;
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 5px;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
+}
+
+/* Style the form title */
+.title {
+  font-size: 24px;
+  color: #333;
+  text-align: center;
+}
+
+/* Style the form groups */
+.form-group {
+  margin-bottom: 20px;
+}
+
+/* Style the icons */
+.icon {
+  display: block;
+  font-size: 24px;
+  margin-bottom: 10px;
+}
+
+/* Style the form inputs and textarea */
+.form-control {
+ width: calc(100% - 20px);
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+}
+
+/* Style the submit button */
+.btn-primary {
+  background-color: #007bff;
+  color: #fff;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.btn-primary:hover {
+  background-color: #0056b3;
+}
+
+/* Footer */
+
+footer {
+    background-color: #333;
+    color: white;
+    text-align: center;
+    padding: 1rem;
+    margin-top: 2rem;
+}
+
+@media (max-width: 700px) {
+  .contact-form{
+    flex-direction: column;
+    gap: 40px;
+  }
+  svg {
+    height: 13rem;
+    margin-right: 0rem;
+  }
+  form{
+    width: 90%;
+  }
+
+}

index.html

@@ -109,6 +109,11 @@ <h2 class="text-3xl font-bold mt-2">Anime</h2>
         <h2 class="text-3xl font-bold mt-2">easy</h2>
       </a>
 
+      <a href="classic" class="relative bottom-0 hover:bottom-2 transition-all" target="_blank" data-aos="fade-up">
+        <img src="./images/classic.png" alt="Classic" class="rounded-md shadow object-cover w-full aspect-video">
+        <h2 class="text-3xl font-bold mt-2">Classic</h2>
+      </a>
+
     </div>
   </main>