Merge pull request #21 from anassajaanan/anas

Add a button to see more informations about The movie characters

index.html

@@ -24,37 +24,43 @@ <h4>Name: Agent Smith</h4>
           <img src="img/characters/agent-smith.jpg" alt="Agent Smith"/>
           <p>AKA: Bane </p>
           <p>Quotes: "Never send a human to do a machine's job." </p>
+		  <a class="btn-infos" href="https://en.wikipedia.org/wiki/Agent_Smith" target="_blank">More infos</a>
         </div>  
         <div class="character">
           <h4>Name: Neo</h4>
           <img src="img/characters/neo_picture.jpg" alt="Neo" />
           <p>AKA: Thomas Anderson </p>
           <p>Quotes: When Trinity says "Neo, no one has ever done anything like this, then Neo replies "That's why it's going to work." </p>
-        </div>        
+		  <a class="btn-infos" href="https://en.wikipedia.org/wiki/Neo_(The_Matrix)" target="_blank">More infos</a>
+		</div>        
         <div class="character">
           <h4>Name: Trinity</h4>
           <img src="img/characters/trinity.png" alt="Trinity" />
           <p>AKA: Trinity Announces </p>
           <p>Quotes: "The Matrix isn't real." </p>
-        </div>
+		  <a class="btn-infos" href="https://en.wikipedia.org/wiki/Trinity_(The_Matrix)" target="_blank">More infos</a>
+		</div>
         <div class="character">
           <h4>Name: Morpheus</h4>
           <img src="img/characters/morpheus.jpg" alt="Morpheus" />
           <p>AKA:--  </p>
           <p>Quotes: "The Matrix is everywhere." </p>
-        </div>
+		  <a class="btn-infos" href="https://en.wikipedia.org/wiki/Morpheus_(The_Matrix)" target="_blank">More infos</a>
+		</div>
         <div class="character">
             <h4>Name: Morpheus</h4>
             <img src="img/characters/woman_red.jpeg" alt="Morpheus" />
             <p>AKA:--  </p>
             <p>Quotes: "The woman in the red dress. I designed her." </p>
-        </div>
+			<a class="btn-infos" href="https://en.wikipedia.org/wiki/Morpheus_(The_Matrix)" target="_blank">More infos</a>
+		</div>
         <div class="character">
           <h4>Name: Cypher</h4>
           <img src="img/characters/cypher.jpg" alt="Cypher" />
           <p>AKA: The Betrayer </p>
           <p>Quotes: "You know... for a long time, I thought I was in love with you. I used to dream about you. You're a beautiful woman, Trinity. Too bad things had to turn out this way." </p>
-        </div>
+		  <a class="btn-infos" href="https://matrix.fandom.com/wiki/Cypher" target="_blank">More infos</a>
+		</div>
       </section>
       <!--characters-section-->
 

styles.css

@@ -76,6 +76,12 @@ img {
   display: block;
 }
 
+.btn-infos {
+	background-color: #018307;
+	border-radius: 10px;
+	text-decoration: none;
+}
+
 @media (max-width: 760px) {
   .character img {
     width: 100%;
@@ -118,6 +124,7 @@ a {
     font-size: 1.2rem;
     padding: 5px;
     line-height: 25px;
+	margin-bottom: 20px;
   }
 }