Skip to content
This repository has been archived by the owner on Sep 15, 2024. It is now read-only.

Commit

Permalink
Add a button to see more informations about The movie characters
Browse files Browse the repository at this point in the history
  • Loading branch information
Anas Ajaanan committed Oct 7, 2023
1 parent 9f1341b commit 1274721
Show file tree
Hide file tree
Showing 2 changed files with 18 additions and 5 deletions.
16 changes: 11 additions & 5 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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-->

Expand Down
7 changes: 7 additions & 0 deletions styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
Expand Down Expand Up @@ -118,6 +124,7 @@ a {
font-size: 1.2rem;
padding: 5px;
line-height: 25px;
margin-bottom: 20px;
}
}

Expand Down

0 comments on commit 1274721

Please sign in to comment.