Adding main content for the website such as image, paragraph content, other.

Author: Jacknguyen4438

Wireframe/index.html

@@ -13,42 +13,53 @@ <h1>Wireframe Basic knowledge</h1>
         This is the default, provided code and no changes have been made yet.
       </p>
     </header>
+    <hr>
     <main>
-      <div id="div-1">
+    <div id="div-1">
        <article class="article-border">
-          <img src="placeholder.svg" alt="" class="" />
+          <img src="https://media.geeksforgeeks.org/wp-content/uploads/20240702120959/Readme1.png" alt="An image with the work Read ME with green color" id="image-size" />
           <h2>READ ME.md file and what is purpose.</h2>
           <p>
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-            voluptates. Quisquam, voluptates.
+           Readme.md is a type of file mainly to tell other other programmer, developer
+           and other coder by to serve as the entry point and primary documentation for a software project, 
+           providing an overview that explains what the project does, why it is useful, and how to install and use it. 
+           It helps users quickly understand, set up, and contribute to the code
           </p>
-           <a href="" class="Link-box-border">Read more</a>
+           <a href="https://www.makeareadme.com" target="_blank" class="Link-box-border">Read more</a>
         </article>
         </div>
-        <hr>
+        
         <!--The second Item-->
         <div id="row-side">
+        <div  class="content-size">
         <article class="article-border">
-          <img src="placeholder.svg" alt="" class="" />
+          <img src="https://images.prismic.io/prismic-main/Zoa6gh5LeNNTwzHJ_web_design_wireframe.jpeg?auto=format,compress" alt="Is an example of how to design web layout" class="image-size-2" />
           <h2>What is a wireframe and the purpose of it used</h2>
-          <p>
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-            voluptates. Quisquam, voluptates.
+          <p id="paragraph-3" >
+           What is wireframe, wireframe 
+           is a way to design a website service at the structural level. 
+           A wireframe is commonly used to layout content and functionality on a page which takes into account user needs and user journeys. 
+           wireframes are used early in the development process to establish the basic structure of a page before visual design and content is added.
           </p>
-           <a href="" class="Link-box-border">Read more</a>
+           <a href="https://www.figma.com/resource-library/what-is-wireframing/" target="_blank" class="Link-box-border">Read more</a>
         </article>
-    
+        </div>
         <!--The third item-->
-        
+        <div class="content-size">
         <article class="article-border">
-          <img src="placeholder.svg" alt="" class="" />
+          <img src="https://media.licdn.com/dms/image/v2/D4D12AQH6ykM-AVoDKg/article-cover_image-shrink_720_1280/B4DZZW5EzAHAAM-/0/1745214525491?e=2147483647&v=beta&t=kB_Gy_FceQSnp1FMZ2lVvoPis3lrcCQjgX0Zur3z4pc" alt="a detail map on what is git and branch" class="image-size-2" />
           <h2>Git, repo and branch</h2>
-          <p>
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-            voluptates. Quisquam, voluptates.
+          <p >
+            Git, repo and branch are some basic knowledge that you should learn when you start programming. They can be a powerful tool
+            that will help you on your journey, especially later on when you do a group project or your own personal project.
+            Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency,
+            how ever they also allow you save, control and redo your project file version. Repository is when you work on a  group project 
+            you can copy all of the files of the main project and make your self owner of that copy project. Branch is for when you want to make some change like adding image, changing color
+            or add some functionality to the project doesn't effect the main original file.
           </p>
-           <a href="" class="Link-box-border">Read more</a>
+           <a href="https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-branches" target="_blank" class="Link-box-border">Read more</a>
         </article>
+        </div>
        </div>
       </main>
       <footer>

Wireframe/style.css

@@ -1,7 +1,7 @@
 /*Main part of the website content(do not deleted)*/
-.image-size {
-     width: 100%;
-     height: 20%;
+#image-size{
+    width:100%;
+    height: auto;
 }
 .article-border{
     border: 2px solid black;
@@ -10,26 +10,50 @@
     padding-bottom: 20px;
 }
 
+
+body{
+background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12);
+}
+footer{
+    background-color: black;
+
+}
+
+article{
+    background-color: white;
+}
 /*This is for the position of the first Item*/
 #div-1{
    width: 73%;
    height: 20%;
    position: relative;
    left:17%;
+   overflow: hidden;
+   margin-bottom: 20px;
 }
 
 /*This part is mainly for item 2 and 3*/
 
 #row-side{
-   width: 74%;
+   width:73%;
    display: flex;
    position: relative;
    left: 17%;
    padding: 0px 0px 0px -10px;
 }
 
+.content-size{
+    width: 60%;
+   
+}
 
-
+.image-size-2{
+    width:100%;
+    
+}
+#paragraph-3{
+    margin-bottom: 102px;
+}
 /*This for the read more button do not deleted*/
 .Link-box-border{
     border: 2px solid black;
@@ -41,6 +65,7 @@ p{
     margin: 0px 0px 30px 5px;
 }
 
+
 /*For heading styling*/
 h2{
     margin-bottom: 5px;