diff --git a/Wireframe/css/style.css b/Wireframe/css/style.css
index e69de29b..3a51d31e 100644
--- a/Wireframe/css/style.css
+++ b/Wireframe/css/style.css
@@ -0,0 +1,3 @@
+body{
+    background-color:rgb(117, 13, 13);
+}
diff --git a/Wireframe/index.html b/Wireframe/index.html
index 67544158..1632943b 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -9,5 +9,51 @@
   <body>
     <!-- Add your HTML markup here -->
     <!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
+   <header class="header">
+    <h1>GIT</h1>
+    <p class="main">Version Control System</p>
+   </header>
+   <main>
+    <section class="section1">
+      <article class="article1">
+        <h2>What is Git?</h2>
+        <div>
+        <img width:79% src="https://upload.wikimedia.org/wikipedia/commons/e/e0/Git-logo.svg">
+        </div>
+        <p>Git is a version control system used for tracking changes in computer files. It is generally used for source code management in software development.</p>
+        <div>
+        <br>
+        <a target="_blank" class="rdm-btn" href="https://www.simplilearn.com/tutorials/git-tutorial/what-is-git">Read More</a>
+        </div>
+      </article>
+    </section>
+    <section class="section2">
+      <article class="article2">
+      <h2>Why do developers need Git?</h2>
+      <div>
+      <img width=100% src="https://www.simplilearn.com/ice9/free_resources_article_thumb/business.JPG">
+      </div>
+      <p>Because let multiple developers work on a project where everyone can upload, edit and manage the source code. And can also work in parallel (with help of Branching and Merging) so that there are no code conflicts between them and all developers can work without losing or affecting each other’s work!.</p>
+      <br>
+      <a target="_blank" class="rdm-btn" href="https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell">Read More</a>
+      </article>
+      <article class="article3">
+      <h2>What is a branch in Git?</h2>
+      <div>
+      <img class="img-git" width=100%  src="https://miro.medium.com/v2/resize:fit:720/format:webp/1*vOgcWxc9PW10b-E6VndtLQ.png">
+      </div>
+      <p>Branching means you diverge from the main line of development and continue to do work without messing with that main line</p>
+      <br>
+      <a target="_blank" class="rdm-btn" href="https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell">Read More</a>
+      </article>
+  </section>
+   </main>
+  
+  <footer class="footer">
+      <hr />
+      <p>contacs</p>
+      <p>More informations</p>
+    </footer>
+
 </body>
 </html
\ No newline at end of file
diff --git a/Wireframe/style.css b/Wireframe/style.css
new file mode 100644
index 00000000..4e4fb7ec
--- /dev/null
+++ b/Wireframe/style.css
@@ -0,0 +1,70 @@
+*{
+    margin:0;
+    padding: 0;
+    box-sizing: border-box;
+}
+.header{
+    height: 10%;
+    display:flex;
+    flex-direction:column;
+    justify-content: center;
+    align-items: center;
+   
+    
+}
+body{background-color: powderblue;}
+.main{ text-align: center;
+        font-size: 1.5rem;}
+
+main .section1 article:first-child{
+            color:lime;
+            background-color: black;
+        }
+
+.section1{
+    height: 40%;
+
+}
+
+.section2{
+    height: 45%;
+    display:flex;
+    justify-content: space-between;
+    
+}
+.article2{
+    width: 50%;
+    margin: 1% 1% 1% 1%;
+    padding: 1% 1% 1% 1%;
+        }
+
+.article3{
+    width: 50%;
+    margin: 1% 1% 1% 1%;
+    padding: 1% 1% 5% 1%;
+}
+
+        
+article{
+    border:4px solid;
+    padding:1% 1% 1% 1%;
+    margin-top: 3%;
+}
+
+
+h1{
+    
+    font-family: 'Times New Roman', Times, serif;
+    font-size: 3rem;
+}
+h2{
+    font-family: 'Times New Roman', Times, serif;
+    font-size:1.5rem ;
+}
+.rdm-btn{
+    background-color: beige;
+    color:black;
+    padding: 0.50% 0.40%;
+    text-decoration: none;
+    border: 1px solid;}
+
