CodeYourFuture · shirinpanahian · Oct 29, 2024 · rosb-code · Oct 31, 2024 · rosb-code
diff --git a/Wireframe/css/style.css b/Wireframe/css/style.css
@@ -0,0 +1,118 @@
+body{
+    font-family: Arial, Helvetica, sans-serif;
+    padding: 0;
+    padding-bottom: 60px;
+    margin: 0;
+    box-sizing: border-box;  
+}
+
+.content{
+    min-height: 100vh;
+    padding: 20px;
+    background-color: #f0f0f0;
+}
+
+header{
+    text-align: center;
+    background-color:#082B51;
+    color: #ffffff;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    margin-bottom: 40px;
+}
+
+
+.read-btn{
+        display: inline-block;
+        padding: 10px 20px;
+        background-color: #333;
+        color: white;
+        text-decoration: none;
+        border-radius: 5px;
+        margin-top: 10px;
+        margin-bottom: 20px;
+        transition: background-color 0.3s ease;
+}
+
+.read-btn:hover{
+    background-color: #555;
+}
+
+
+.container{
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.container section:first-child{
+
+    margin-bottom: 40px;
+    text-align: center; 
+}
+
+.container p{
+   font-size: 1rem;
+   color: #777; 
+}
+
+.container .column{
+    width: 48%;
+    text-align: center;
+}
+
+.container .column img{
+    width: 100%;
+    height: auto;
+    margin-bottom: 15px;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+
+}
+
+.container .column h2{
+    font-size: 1.5rem;
+    margin-bottom: 10px;
+}
+
+.site-footer {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    text-align: center;
+    padding: 15px;
+    font-size: 0.9rem;
+    color: whitesmoke;
+    background-color: #041C34;
+    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.footer-email {
+    position: absolute;
+    right: 50px;
+    top: 50%;
+    transform: translateY(-50%);  /* Center vertically */
+    color: whitesmoke;
+    font-size: 0.9rem;
+}
+
+.footer-email a {
+    color: whitesmoke;
+    text-decoration: none;
+    transition: color 0.3s ease;
+}
+
+.footer-email a:hover {
+    color: #FF6B6B;  
+}
+
+@media (max-width: 768px) {
+    .container .column {
+      width: 100%;
+      margin-bottom: 20px;
+    }
+  }
diff --git a/Wireframe/image/img1.png b/Wireframe/image/img1.png
diff --git a/Wireframe/image/img11.webp b/Wireframe/image/img11.webp
diff --git a/Wireframe/image/img111.jpg b/Wireframe/image/img111.jpg
diff --git a/Wireframe/image/img2.png b/Wireframe/image/img2.png
diff --git a/Wireframe/image/img22.jpg b/Wireframe/image/img22.jpg
diff --git a/Wireframe/image/img3.jpeg b/Wireframe/image/img3.jpeg
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -3,11 +3,47 @@
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Wireframe</title>
-    <link rel="stylesheet" href="style.css">
+    <title>WireFrame</title>
+    <link rel="stylesheet" href="css/style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+
   </head>
   <body>
+    <div class="content">
+
+      <header>
+        <h1>Learn Git</h1>
+        <p>Master Git to manage your code, collaborate with teams, and streamline your development process.</p>
+      </header>
+
+      <main class="container">
+
+        <section>
+          <h2>what is git?</h2>
+          <p>Git is a version control system that helps developers track changes in code, collaborate easily, and manage project versions. It allows branching, committing changes, and reverting to earlier versions. Popular platforms like GitHub use Git for smooth teamwork on coding projects.</p>
+          <a href="#" class="read-btn">Read More</a>
+        </section>
+
+        <section class="column">
+          <img src="image/img2.png" alt="git-developer">
+          <h2>why do developers need Git?</h2>
+          <p>Developers need Git to manage code efficiently, especially in teams. It tracks changes, preventing code conflicts when multiple people work on the same files. Git also allows developers to experiment with new features in branches, merge them later, and easily roll back mistakes. It ensures smooth collaboration and keeps a detailed history of project development.</p>
+          <a href="#" class="read-btn">Read More</a>
+        </section>
+
+        <section class="column">
+          <img src="image/img3.jpeg" alt="branch-image">
+          <h2>what is a branch in Git?</h2>
+          <p>A branch in Git is a separate line of development that allows you to work on different features or fixes without affecting the main codebase. You can create a branch to isolate your changes, and once you’re done, merge it back into the main branch (often called “main” or “master”). This helps manage parallel WorkStreams and keeps the code organized and stable.</p>
+          <a href="#" class="read-btn">Read More</a>
+        </section>
+      </main>
+    </div>
     <!-- Add your HTML markup here -->
     <!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
-</body>
+      <footer class="site-footer">
+        <p>Copyright © 2024 Code Your Future. All Rights Reserved.</p>
+        <span class="footer-email">Email:<a href="mailto:[email protected]" >[email protected]</a></span>
+    </footer>
+    </body>
 </html