diff --git a/README.md b/README.md index 3708b2c..a187f4d 100644 --- a/README.md +++ b/README.md @@ -69,6 +69,9 @@ A collection of **100% FREE** to use portfolio website templates.

easy

easy-screenshot +

classic

+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. diff --git a/classic/images/avatar.png b/classic/images/avatar.png new file mode 100644 index 0000000..58fecc6 Binary files /dev/null and b/classic/images/avatar.png differ diff --git a/classic/images/backdrop.png b/classic/images/backdrop.png new file mode 100644 index 0000000..e05fd9f Binary files /dev/null and b/classic/images/backdrop.png differ diff --git a/classic/images/camaro.png b/classic/images/camaro.png new file mode 100644 index 0000000..41fc655 Binary files /dev/null and b/classic/images/camaro.png differ diff --git a/classic/images/notfound.png b/classic/images/notfound.png new file mode 100644 index 0000000..40f631e Binary files /dev/null and b/classic/images/notfound.png differ diff --git a/classic/images/robo.png b/classic/images/robo.png new file mode 100644 index 0000000..40b8f83 Binary files /dev/null and b/classic/images/robo.png differ diff --git a/classic/index.html b/classic/index.html new file mode 100644 index 0000000..8d3e87b --- /dev/null +++ b/classic/index.html @@ -0,0 +1,537 @@ + + + + + + + + Classic a Freefolio template by OSSPH + + + + +
+ +
+
+
+ Hero Image +

Welcome to My Portfolio

+

John Doe

+ View My Projects +
+
+

About Me

+
+
+ Profile Picture +
+
+

Hi, I'm John Doe, a web developer based in New York City. I specialize in front-end development and have experience working with HTML, CSS, JavaScript, and various JavaScript frameworks.

+

In my free time, I enjoy playing guitar, hiking, and exploring new places. I also have a passion for photography and enjoy capturing moments in my daily life.

+
+
+
+
+

My Projects

+ + +
+
+ Project 1 +

Project 1

+

Description of Project 1

+ View Project +
+
+ Project 2 +

Project 2

+

Description of Project 2

+ View Project +
+
+ Project 3 +

Project 3

+

Description of Project 3

+ View Project +
+ +
+
+
+

Contact Me

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ +
+ + +
+ +
+
+
+
+
+ + + + \ No newline at end of file diff --git a/classic/styles.css b/classic/styles.css new file mode 100644 index 0000000..dcdf5c3 --- /dev/null +++ b/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%; + } + +} \ No newline at end of file diff --git a/images/classic.png b/images/classic.png new file mode 100644 index 0000000..343dd11 Binary files /dev/null and b/images/classic.png differ diff --git a/index.html b/index.html index d12b677..b4ae638 100644 --- a/index.html +++ b/index.html @@ -109,6 +109,11 @@

Anime

easy

+ + Classic +

Classic

+ +