Removed text from images

css/style.css

@@ -4,6 +4,11 @@
   --secondary-bg-color: #f4f4f4;
 }
 
+@font-face {
+  font-family: sourcecodevf;
+  src: url(css/SourceCodeVF-Upright.otf);  
+}
+
 /* General Body Styling */
 body {
   font-family: 'Arial', sans-serif;
@@ -41,7 +46,8 @@ body {
   float: left;
   display: block;
   text-align: center;
-  margin-top: -30px;
+  margin-top: -18px;
+  margin-left: 7px;
 }
 
 /* Navigation Menu */
@@ -84,6 +90,38 @@ body {
   margin: auto; /* Center the image in its container */
 }
 
+.banner-content-middle {
+  position: absolute;
+  top: 34%;
+  left: 36%;
+  font-family: sourcecodevf;
+  font-size: 54px; /* Responsive font size */
+  color: white; 
+  text-align: center;
+}
+
+.banner-content-middle .company-name {
+  font-size: 68px; /* Responsive font size */
+}
+
+.banner-content-bottom {
+  position: absolute;
+  bottom: 10px; 
+  right: 10px; 
+  font-size: 1.3vw; /* Responsive font size */
+  color: white; 
+}
+
+.banner-content-bottom a {
+  color: var(--main-text-color);
+  text-decoration: none;
+  font-family: sourcecodevf;
+}
+
+.banner-content-bottom a:hover {
+  text-decoration: underline;
+}
+
 
 /* Main Content */
 .main {
@@ -127,6 +165,22 @@ body {
 }
 
 /* Media Queries */
+@media (max-width: 1581px) {
+  .banner-content-middle {
+    position: absolute;
+    top: 35%;
+    left: 35%;
+    font-family: sourcecodevf;
+    font-size: 4.0vw; /* Responsive font size */
+    color: white; 
+    text-align: center;
+  }
+  
+  .banner-content-middle .company-name {
+    font-size: 5.0vw; /* Responsive font size */
+  }
+}
+
 @media (max-width: 768px) {
   .menu {
     float: none;
@@ -150,6 +204,25 @@ body {
     text-align: center;
   }
 
+  .banner img {
+    padding-top: 30px;
+  }
+
+  .banner-content-middle {
+    position: relative;
+    padding-top: 10px;
+    left: 0%;
+    font-family: sourcecodevf;
+    font-size: 4.0vw; /* Responsive font size */
+    color: white; 
+    text-align: center;
+  }
+  
+  .banner-content-middle .company-name {
+    font-size: 5.0vw; /* Responsive font size */
+  }
+
+
   .footer-left, .footer-right {
     float: none;
     width: 100%;
@@ -158,3 +231,4 @@ body {
     padding-right: 0px;
   }  
 }
+

index.html

@@ -13,7 +13,7 @@
       <div class="header">
       <!-- logo -->
         <div class="logo">
-          <img src="images/celticinfo_logo_transparent_small.png" alt="CelticInfo">
+          <img src="images/celticinfo_logo_small.png" alt="CelticInfo">
         </div>
         <!-- menu -->
       <div class="menu">
@@ -28,8 +28,15 @@
       <div class="banner">
         <picture>
           <source media="(min-width: 1582px)" srcset="images/celticinfo_banner_large.png">
-          <source media="(min-width: 769px)" srcset="images/celticinfo_banner.png">
-          <img src="images/celticinfo_banner_small.png" alt="CelticInfo">
+          <source media="(min-width: 769px)" srcset="images/celticinfo_banner_medium.png">
+          <img src="images/celticinfo_logo_medium.png" alt="CelticInfo">
+          <div class="banner-content-middle">
+            <div class="company-name">Celtic info</div>
+            <div>IT Consulting</div>
+          </div>
+          <div class="banner-content-bottom">
+            <a href="mailto:info@celticinfo.fr?subject=Information request">info@celticinfo.fr</a>
+          </div>
         </picture>        
       </div>
       <div class="footer">