Updates

Orhanguezel · Sep 19, 2024 · e2e67cf · e2e67cf
1 parent 609940f
commit e2e67cf
Show file tree

Hide file tree

Showing 21 changed files with 439 additions and 364 deletions.
diff --git a/about-me.html b/about-me.html
@@ -1,19 +1,45 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>My Portfolio - Guezel Webdesign</title>
-    <link
-      href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&display=swap"
-      rel="stylesheet"
-    />
-    <link rel="stylesheet" href="css/global.css" />
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+
+  <title>Guezel Webdesign | Professional Web Design and Development</title>
+
+  <!-- SEO Meta Tags -->
+  <meta name="description" content="Guezel Webdesign offers professional web design and development services. We design beautiful and functional websites.">
+  <meta name="keywords" content="web design, web development, SEO, mobile-friendly, responsive design, frontend, backend">
+  <meta name="author" content="Guezel Webdesign">
+  <meta name="robots" content="index, follow">
+
+  <!-- Open Graph Meta Tags -->
+  <meta property="og:title" content="Guezel Webdesign | Professional Web Design and Development">
+  <meta property="og:description" content="Guezel Webdesign offers professional web design and development services. We design beautiful and functional websites.">
+  <meta property="og:type" content="website">
+  <meta property="og:url" content="https://www.guezelwebdesign.com">
+  <meta property="og:image" content="https://www.guezelwebdesign.com/assets/social-share-image.png">
+  <meta property="og:site_name" content="Guezel Webdesign">
+
+  <!-- Twitter Meta Tags -->
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:title" content="Guezel Webdesign | Professional Web Design and Development">
+  <meta name="twitter:description" content="Guezel Webdesign offers professional web design and development services. We design beautiful and functional websites.">
+  <meta name="twitter:image" content="https://www.guezelwebdesign.com/assets/social-share-image.png">
+
+  <!-- Canonical Link -->
+  <link rel="canonical" href="https://www.guezelwebdesign.com">
+
+  <!-- Favicon -->
+  <link rel="icon" href="img/favicon.ico" type="image/x-icon" />
+
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css"
+    integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
+
     <link rel="stylesheet" href="css/root.css" />
-    <link rel="stylesheet" href="css/nav.css" />
+    <link rel="stylesheet" href="css/global.css" />   
     <link rel="stylesheet" href="css/hamburger.css" />
     <link rel="stylesheet" href="css/footer.css" />
-    <link rel="stylesheet" href="css/portfolio.css" />
+    <link rel="stylesheet" href="css/about-me.css" />
     <link
     rel="stylesheet"
     href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
@@ -24,9 +50,9 @@
     <header class="main-nav">
       <div class="logo">
         <img src="./img/logo3.png" alt="logo" />
-        <h2 class="section-title">
+        <h4 class="section-title">
           Guezel <span class="highlight">Webdesign</span>
-        </h2>
+        </h4>
       </div>
       <nav>
         <ul class="nav-menu">
@@ -48,14 +74,14 @@ <h2 class="section-title">
 
 <!-- Footer Section -->
 <footer class="footer">
-    <div class="logo-container">
-      <div class="logo">
-        <img src="./img/logo3.png" alt="logo" />
-        <h2 class="section-title">
-          Guezel <span class="highlight">Webdesign</span>
-        </h2>
-      </div>
+  <div class="logo-container">
+    <div class="logo-footer">
+      <img src="./img/logo3.png" alt="logo" />
+      <h4 class="section-title">
+        Guezel <span class="highlight">Webdesign</span>
+      </h4>
     </div>
+  </div>
 
     <div class="footer-content">
         <!-- About Company Section -->

diff --git a/assets/social-share-i.png b/assets/social-share-i.png
diff --git a/assets/social-share-image.png b/assets/social-share-image.png
diff --git a/contakt.html b/contakt.html
@@ -2,31 +2,57 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>My Portfolio - Guezel Webdesign</title>
-    <link
-      href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&display=swap"
-      rel="stylesheet"
-    />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>Guezel Webdesign | Profesyonel Web Tasarım ve Geliştirme</title>
+
+  <!-- SEO Meta Tags -->
+  <meta name="description" content="Guezel Webdesign, profesyonel web tasarım ve geliştirme hizmetleri sunar. Güzel ve işlevsel web siteleri tasarlıyoruz.">
+  <meta name="keywords" content="web tasarım, web geliştirme, SEO, mobil uyumlu, responsive tasarım, frontend, backend">
+  <meta name="author" content="Guezel Webdesign">
+  <meta name="robots" content="index, follow">
+
+  <!-- Open Graph Meta Tags -->
+  <meta property="og:title" content="Guezel Webdesign | Profesyonel Web Tasarım ve Geliştirme">
+  <meta property="og:description" content="Guezel Webdesign, profesyonel web tasarım ve geliştirme hizmetleri sunar. Güzel ve işlevsel web siteleri tasarlıyoruz.">
+  <meta property="og:type" content="website">
+  <meta property="og:url" content="https://www.guezelwebdesign.com">
+  <meta property="og:image" content="https://www.guezelwebdesign.com/assets/social-share-image.png">
+  <meta property="og:site_name" content="Guezel Webdesign">
+
+  <!-- Twitter Meta Tags -->
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:title" content="Guezel Webdesign | Profesyonel Web Tasarım ve Geliştirme">
+  <meta name="twitter:description" content="Guezel Webdesign, profesyonel web tasarım ve geliştirme hizmetleri sunar. Güzel ve işlevsel web siteleri tasarlıyoruz.">
+  <meta name="twitter:image" content="https://www.guezelwebdesign.com/assets/social-share-image.png">
+
+  <!-- Canonical Link -->
+  <link rel="canonical" href="https://www.guezelwebdesign.com">
+
+  <!-- Favicon -->
+  <link rel="icon" href="img/favicon.ico" type="image/x-icon" />
+
+  <!-- Font and Styles -->
+  <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&display=swap" rel="stylesheet" />
+
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css"
+  integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
+
+  <link rel="stylesheet" href="css/root.css" />
     <link rel="stylesheet" href="css/global.css" />
-    <link rel="stylesheet" href="css/root.css" />
-    <link rel="stylesheet" href="css/nav.css" />
     <link rel="stylesheet" href="css/hamburger.css" />
     <link rel="stylesheet" href="css/footer.css" />
     <link rel="stylesheet" href="css/contact-me.css" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
-    />
+
   </head>
   <body>
     <!-- Main Navigation Bar -->
     <header class="main-nav">
       <div class="logo">
         <img src="./img/logo3.png" alt="logo" />
-        <h2 class="section-title">
-          Guezel <span class="highlight">Webdesign</span>
-        </h2>
+        <h4 class="section-title">
+          Guezel 
+          <span class="highlight">Webdesign</span></h4>
+
       </div>
       <nav>
         <ul class="nav-menu">
@@ -44,6 +70,15 @@ <h2 class="section-title">
       </div>
     </header>
 
+    <!-- Hero Section -->
+    <section class="contact-hero" id="contact-hero">
+      <div class="contact-content">
+        <h2>
+          Contact Us
+        </h2>
+      </div>
+    </section>
+
     <!-- Contact Section -->
     <section class="contact-section">
       <div class="contact-info">
@@ -103,11 +138,11 @@ <h3>Mail Address</h3>
     <!-- Footer Section -->
     <footer class="footer">
       <div class="logo-container">
-        <div class="logo">
+        <div class="logo-footer">
           <img src="./img/logo3.png" alt="logo" />
-          <h2 class="section-title">
+          <h4 class="section-title">
             Guezel <span class="highlight">Webdesign</span>
-          </h2>
+          </h4>
         </div>
       </div>
 

diff --git a/css/about-me.css b/css/about-me.css
diff --git a/css/about.css b/css/about.css
@@ -19,8 +19,36 @@
     font-family: var(--font-family2);
 }
 
+
 .about-content p {
     font-size: var(--p-font-size);
     color: var(--text-color);
+    margin-bottom: 30px;
+}
+
+
+@media (max-width: 768px) {
+    .about-me {
+        padding: 30px 10px;
+    }
+
+    .about-me .section-title {
+        font-size: 2em;
+    }
+
+    .about-content {
+        font-size: 1em;
+        line-height: 1.6;
+    }
 }
 
+
+@media (max-width: 480px) {
+    .about-me .section-title {
+        font-size: 1.8em;
+    }
+
+    .about-content {
+        font-size: 0.9em;
+    }
+}
diff --git a/css/contact-me.css b/css/contact-me.css
@@ -1,7 +1,25 @@
+/* Contact Page Responsive Design */
+.contact-hero {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    height: 50vh;
+    background: radial-gradient(circle at center, rgb(13, 31, 45, 0.5) 0%, rgba(0, 0, 0, 1) 100%);
+}
+
+.contact-hero .contact-content {
+    width: 100%;
+    z-index: 2;
+}
+
+.contact-content > h2 {
+    color: var(--text-color);
+}
 
 .contact-section {
     background-color: var(--black-color);
-
 }
 
 .contact-info {
@@ -16,31 +34,28 @@
     color: var(--text-color);
 }
 
-
-
-.contact-container{
+.contact-container {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     align-items: flex-start;
+    width: 100%;
     max-width: 1200px;
-    min-width: 350px;
     margin: 0 auto;
     padding: 20px;
-    gap: 40px;
+    gap: 30px;
 }
 
 .contact-cards {
-    flex:1 1 400px;
+    flex: 1 1 400px;
+    display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
-    align-items: space-between;
-    min-height: 600px;
+    min-height: 680px;
     margin: 0 auto;
-    background-color:var(--secondary-color);
+    background-color: var(--secondary-color);
     border: 0.5px solid rgba(255, 255, 255, 0.1);
     border-radius: 8px;
-
 }
 
 .contact-cards .card {
@@ -55,7 +70,7 @@
     border-radius: 8px;
 }
 
-.card .icon i{
+.card .icon i {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -74,11 +89,10 @@
     color: var(--text-color);
 }
 
-
 .contact-form {
-    flex:1 1 400px;
-    min-height: 600px;
-    background-color:var(--secondary-color);
+    flex: 1 1 400px;
+    min-height: 680px;
+    background-color: var(--secondary-color);
     border: 0.5px solid rgba(255, 255, 255, 0.1);
     border-radius: 8px;
     padding: 20px;
@@ -107,20 +121,20 @@
 }
 
 button {
-    padding: 15px;
-    font-size: 1.1em;
-    border-radius: 8px;
-    border: none;
     width: 120px;
 }
 
+.logo-footer h4{
+    color: var(--text-color);
+  }
+
 /* Responsive for smaller screens */
-@media (max-width: 840px) {
+@media (max-width: 780px) {
     .contact-container {
         flex-direction: column;
     }
 
-    .contact-info,
+    .contact-cards,
     .contact-form {
         width: 100%;
         min-height: auto;

diff --git a/css/contact.css b/css/contact.css
@@ -1,7 +1,7 @@
 /* Contact Section */
 .contact {
     padding: 50px 20px;
-    background: radial-gradient(circle at center, rgb(13, 31, 45, 0.5) 0%, rgba(0, 0, 0, 0.9) 100%); 
+    background: radial-gradient(circle at center, rgb(13, 31, 45, 0.5) 0%, rgba(0, 0, 0, 0.9) 100%);
     text-align: center;
 }
 
@@ -11,6 +11,10 @@
     margin-bottom: 30px;
 }
 
+.contact p{
+    margin-bottom: 30px;
+}
+
 .contact-description {
     font-size: 1.2em;
     color: var(--text-color);
@@ -21,18 +25,16 @@
     font-family: var(--font-family2);
 }
 
-/* Contact Button */
-.quote-btn {
-    background-color: var(--btn-bg-color);
-    color: var(--btn-text-color);
-    padding: 15px 30px;
-    border-radius: 30px;
-    font-size: 1.2em;
-    border: none;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-}
 
-.quote-btn:hover {
-    background-color: var(--highlight-color);
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .contact .section-title {
+        font-size: 2em;
+    }
+
+    .contact-description {
+        font-size: 1em;
+        padding: 0 10px;
+    }
 }