CodeYourFuture · Priscilla-MacGatus · Sep 16, 2024 · Sep 16, 2024 · Sep 16, 2024 · Sep 16, 2024
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+    "cSpell.words": [
+        "Wireframe"
+    ]
+}
diff --git a/Wireframe/css/style.css b/Wireframe/css/style.css
@@ -0,0 +1,171 @@
+
+/* Body */
+
+body{
+background-color:rgb(63, 54, 65);    
+}
+
+
+
+/* Header */
+
+
+.page_title{
+font-size: 40px;
+margin-bottom: 10px;
+position: relative;
+left: 750px;
+color: aliceblue;
+}
+
+
+.title_description{
+font-family: Georgia, 'Times New Roman', Times, serif; 
+font-size: large;
+font-style: italic;
+margin-top:0px;
+margin-bottom: 80px;
+position: relative;
+left: 600px;
+color: aliceblue;
+}
+
+
+/* Article Title */
+
+
+article {
+position: relative;
+left: 170px;
+}
+
+
+
+h4{
+font-size: 18px;
+color: aliceblue;
+}
+
+
+/* Article 1 */
+
+.div_article1:first-child{
+border: 0.5px solid rgb(245, 234, 217);
+width: 1000px;
+position: relative;
+left:300px ;;
+}
+
+.div_article1 img{
+ width: 1000px; 
+height: 500px;   
+}
+
+.subdivided_div_article1{
+text-align: left;
+padding: 15px;
+font-family:Georgia, 'Times New Roman', Times, serif;
+color: aliceblue;
+}
+
+
+
+
+/* Article 2 */
+
+.div_article2{
+border:0.5px solid  rgb(245, 234, 217); 
+width: 500px;
+height: 420px;
+position: relative; 
+left: 300px;
+top:53px;
+overflow: hidden;
+padding-bottom:15px;
+}
+
+.div_article2 img{
+width:500px;    
+}
+
+.subdivided_div_article2{
+margin: 10px;  
+font-family:Georgia, 'Times New Roman', Times, serif; 
+color: aliceblue;
+}
+
+
+
+
+
+/* Article 3 */
+
+
+
+.div_article3{
+border:0.5px solid rgb(245, 234, 217);
+width: 455px;
+height:420px;
+position:relative;
+left: 848px; 
+bottom:385px;
+overflow: hidden;
+padding-bottom:15px;   
+}
+
+.div_article3 img{
+width:455px;
+height: 250px;
+}
+
+.subdivided_div_article3{
+margin: 10px;
+font-family:Georgia, 'Times New Roman', Times, serif;
+color: aliceblue;
+}
+
+
+
+/* Buttons */
+
+.subdivided_div_article1 button {
+color:black;
+border-radius: 7px;
+border:0.5px solid grey;
+background-color: rgb(181, 207, 183);
+height:30px;
+width: 100px;
+}
+
+.subdivided_div_article2 button {
+color:black;
+border-radius: 7px;
+border:0.5px solid grey;
+background-color: rgb(181, 207, 183);
+height:30px;
+width: 100px;
+}
+
+.subdivided_div_article3 button {
+color:black;
+border-radius: 7px;
+border:0.5px solid grey;
+background-color: rgb(181, 207, 183);
+height:30px;
+width: 100px;
+}
+
+
+/* Footer */
+
+footer{
+color: rgb(218, 240, 231);
+background-color: rgb(71, 63, 80);
+text-align: center;
+font-size: larger;
+padding:30px;
+position: fixed;
+bottom: 0;
+width: 100%;
+box-shadow: 0 -2px 5px rgb(126, 126, 126);
+}
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -1,13 +1,118 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
+    <meta name="description" content="A static website made from a Wireframe">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Wireframe</title>
-    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="css/style.css">
   </head>
   <body>
     <!-- Add your HTML markup here -->
     <!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
+
+
+<!-- This is the BEGINNING of the HEADER -->
+ <header>
+
+  <h1 class="page_title"> Git: A Developer's Best Friend </h1>
+  <p  class="title_description"> Explore the world of Git branching and discover how this powerful feature can enhance your development workflow. </p>
+
+ </header>
+ <!-- This is the END of the HEADER -->
+
+
+
+<!-- This is the BEGINNING of the MAIN -->
+<main>
+<article>
+
+ <!--The is Article 1 -->
+
+<div class="div_article1">
+
+  <img class="image1"  alt="An image with the inscription Git" src="https://mural.ltd/_next/image?url=%2Fstatic%2Fimages%2Fgit%2F0.png&w=3840&q=75">
+
+  <div class="subdivided_div_article1">
+
+   <h4 class="git_definition">What Is Git?</h4>
+
+   <p class="summary1">Git is a powerful version control system that enables developers to efficiently manage their code, collaborative development, tracking changes, and undoing mistakes.</p>
+
+   <a  target="_blank" href="https://www.datacamp.com/blog/all-about-git"> 
+   <button class="button1">Read More</button>
+   </a>
+
+  </div>
+
+
+</div>
+
+<!--The is Article 2-->
+
+<div class="div_article2">
+
+  <img class="image2"   alt="An image with question why Git?"  src="https://codingforchemists.com/git-logo.webp">
+
+
+
+  <div class="subdivided_div_article2">
+   <h4 class="git_benefits">Importance Of Git</h4>
+
+   <p class="summary2">Git is a revolutionized  way developers work. It provides a robust framework for tracking changes to code, collaborating with team members, and managing project history. </p>
+
+   <a  target="_blank" href="https://blog.rheinwerk-computing.com/gits-significance-in-software-development"> 
+   <button class="button2">Read More</button>
+   </a>
+   </div>  
+
+
+
+</div>
+
+<!--The is Article 3-->
+
+<div  class="div_article3">
+
+  <img class="image3"  alt="This is an image of a source control icon" src="https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1c85173b-5ca0-4525-820c-80d6999b997c_2838x1835.jpeg">
+
+
+  <div class="subdivided_div_article3">
+   <h4 class="branch_definition">What is a Git Branch?</h4>
+
+    <p class="summary3">Git Branches are like parallel paths within a project's history. They allow developers to work on different features, bug fixes, or experimental changes without affecting the main codebase. </p>
+
+
+    <a  target="_blank" href="https://magit.vc/manual/forge/Branching.html"> 
+    <button class="button3">Read More</button>
+    </a>
+
+  </div>
+
+
+</div>
+
+</article>
+</main>
+<!-- This is the END of the MAIN -->
+
+
+
+<!--The BEGINNING of FOOTER -->
+
+<footer>
+  <p  class="footer_paragraph1">
+ <strong>Address:</strong> 145 Main Street, Lviv, 089970 <br>
+ <strong>Phone:</strong> (+380) 475-387-330 <br>
+ <strong>Email:</strong> [email protected]
+  </p>
+
+  <p  class="footer_paragraph2"> Copyright © 2024 Developer's Hub</p>
+
+ </footer>
+
+<!--The END of FOOTER-->
+
+
 </body>
 </html