update html and css codes

latifa-wakili · May 23, 2024 · 00a8cad · 00a8cad
1 parent dff2d46
commit 00a8cad
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 10 deletions.
diff --git a/index.css b/index.css
@@ -17,19 +17,30 @@
   text-align: center;
 }
 
-.image {
+#img-div {
   background-color: white;
-  height: 710px;
+  height: auto;
   margin: 15px;
 }
 
-.image img {
+/* img{
+  display: block;
+} */
+
+#img-div img {
   transform: translate(70px, 30px);
 }
-
-.image p {
+#img-div #image{
+  max-width: 100%;
+}
+#img-div p {
   margin-top: 40px;
 }
+#image{
+  height: auto;
+  max-width: 100%;
+
+}
 
 * {
   margin: 0;

diff --git a/index.html b/index.html
@@ -3,22 +3,28 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-   <title>Document</title>
+   <title id="title">web-page</title>
    <link rel="stylesheet" href="./index.css">
 </head>
+
 <body>
+  <main id="main">
    <div class="container">
       <h2>Dr.Norman Borlaug</h2>
       <p>The man how saved ab billion lives</p>
-
-      <div class="image">
-         <img src="./tribute.jpg" alt="tribute">
+      <div id="img-div">
+         <img src="./tribute.jpg" id="image" alt="tribute" >
           <p>Dr. Norman Borlaug, third from the left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger.</p>
+           <figcaption id="img-caption">this is a web_page</figcaption>
       </div>
-
+      
       <div class="contain">
          <h3>Here's a time line of Dr. Borlaug's life:</h3>
+
          <div class="listItem">
+            <a id="tribute-info">information</a>
+            <a href="" id="tribute-link" target="_blank">about this web_page</a>
+
             <ul>
                <li><strong>1914</strong> - Born in Cresco, Iowa</li>
                <li><strong>1933</strong> - Leaves his family's farm to attend the University of Minnesota, thanks<br/>
@@ -44,6 +50,7 @@ <h3>Here's a time line of Dr. Borlaug's life:</h3>
                <li><b>2009</b> - dies at the age of 95.</li>
             </ul>
          </div>
+
          <div class="mainList">  
              <em>"Borlaug's life and achievement are testimony to the far-reaching contribution <br/> that one man's towering intellect, persistence and scientific vision can make to<br/> human peace and progress."</em>
             <br/>
@@ -54,5 +61,7 @@ <h3>If you have time, you should read more about this incredible human being on
       </div>
 
    </div>
+  </main>
 </body>
+
 </html>