boolean-uk · Azan-H · Mar 4, 2024
diff --git a/img/playstation-logo.png b/img/playstation-logo.png
diff --git a/index.html b/index.html
@@ -5,9 +5,55 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <link rel="stylesheet" href="style.css" />
-
+    <link rel="stylesheet" href="./style.css">
+    <title>PlayStation</title>
   </head>
   <body>
-
+    <header>
+      <nav id="navbar">
+        <section class="container">
+          <h1 class="logo"><img src="./img/playstation-logo.png" alt=""></h1>
+          <ul>
+            <li id="about-nav"><a href="#about">About</a></li>
+            <li id="history-nav"><a href="#history">History</a></li>
+            <li id="games-nav"><a href="#games">Games</a></li>
+          </ul>
+        </section>
+      </nav>
+    </header>
+    <section id="info">
+      <section id="about">
+      <h1>What is PlayStation</h1>
+      <p>PlayStation (Japanese: プレイステーション, Hepburn: Pureisutēshon, officially abbreviated as PS) is a video gaming brand that consists of five home video game consoles, two handhelds, a media center, and a smartphone, as well as an online service and multiple magazines. The brand is produced by Sony Interactive Entertainment, a division of Sony.</p>
+      <a href="https://en.wikipedia.org/wiki/PlayStation" target="_blank"> Learn more at WikiPedia</a>
+      </section>
+      <section class="background"></section>
+      <section id="history">
+      <h1>The history of PlayStation</h1>
+      <p>The first PlayStation console was released in Japan in December 1994, and worldwide the following year. The original console in the series was the first console of any type to ship over 100 million units, doing so in under a decade. Its successor, the PlayStation 2, was released in 2000; it is the best-selling home console to date, having reached over 155 million units sold by the end of 2012. Sony's next console, the PlayStation 3, was released in 2006, selling over 87.4 million units by March 2017. Sony's next console, the PlayStation 4, was released in 2013, selling a million units within a day, becoming the fastest selling console in history. The latest console in the series, the PlayStation 5, was released in 2020 and sold 10 million units in its first 249 days, unseating its predecessor as the fastest-selling PlayStation console to-date. The main series of controllers utilized by the PlayStation series is the DualShock, a line of vibration-feedback gamepads that sold 28 million units by June 2008.</p>
+      <a href="https://en.wikipedia.org/wiki/PlayStation" target="_blank"> Learn more at WikiPedia</a>
+      </section>
+      <section class="background"></section>
+      <section id="games">
+      <h1>The games of PlayStation</h1>
+      <p>PlayStation have produced some amazing franchises over the years. Here's a few:</p>
+      <ul>
+        <li><a class="gow" href="https://www.playstation.com/en-gb/god-of-war/" target="_blank">God of War</a></li>
+        <img src="https://i.ebayimg.com/images/g/j50AAOSwNXFlEXY3/s-l1600.jpg" alt="God of War games">
+        <li><a class="hor" href="https://www.playstation.com/en-gb/horizon/" target="_blank">Horizon</a></li>
+        <img src="https://fictionhorizon.com/wp-content/uploads/2022/09/Horizon-games-in-order.jpg" alt="Ratchet & Clank games">
+        <li><a class="unc" href="https://www.playstation.com/en-gb/uncharted/" target="_blank">Uncharted</a></li>
+        <img src="https://gmedia.playstation.com/is/image/SIEPDC/uncharted-hub-hero-banner-desktop-05-en-17sept21?$2400px$" alt="Uncharted games">
+        <li><a class="tlou" href="https://www.playstation.com/en-gb/the-last-of-us/" target="_blank">The last of us</a></li>
+        <img src="https://i.ebayimg.com/images/g/9U0AAOSwViZgnB-6/s-l1200.webp" alt="The Last of us games">
+      </ul>
+      </section>
+    </section>
   </body>
+  <footer>
+    <div class="box1"></div>
+    <div class="box2"></div>
+    <div class="box3"></div>
+    <div class="box4"></div>
+  </footer>
 </html>
diff --git a/style.css b/style.css
@@ -0,0 +1,184 @@
+* {
+  border: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+body {
+  background-color: #e5e5e5;
+}
+
+.background {
+  max-width: 100%;
+  height: 110px;
+  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/4/4e/Playstation_logo_colour.svg/150px-Playstation_logo_colour.svg.png);
+  margin-top: 200px;
+  margin-bottom: 100px;
+  margin-left: 18px;
+}
+
+/* navbar */
+
+.container {
+  max-width: 1300 px;
+  overflow: auto;
+  margin: auto;
+}
+
+#navbar {
+  background-image: linear-gradient(to bottom right, #2e6db4, #8fbaeb);
+  overflow: auto;
+}
+
+#navbar img {
+  width: 75px;
+  float: left;
+  padding-left: 10px;
+  padding-top: 20px;
+}
+
+#navbar ul {
+  list-style: none;
+  float: right;
+}
+
+#navbar ul li {
+  float: left;
+  font-size: 20px;
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+#navbar ul a {
+  display: block;
+  text-align: center;
+  padding: 15px;
+  text-decoration: none;
+  color: aliceblue;
+}
+
+#about-nav {
+  background-color: #df0024;
+  padding: 20px;
+}
+
+#about-nav:hover {
+  background-color: #df0025e2;
+}
+
+#history-nav {
+  background-color: #f3c300;
+  padding: 20px;
+}
+
+#history-nav:hover {
+  background-color: #f3c200e0;
+}
+
+#games-nav {
+  background-color: #00ab9f;
+  padding: 20px;
+}
+
+#games-nav:hover {
+  background-color: #00aba0dd;
+}
+
+/* infromation sections */
+
+#info h1 {
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-size: 75px;
+  text-align: center;
+  padding-top: 150px;
+}
+
+#info p {
+  font-size: 30px;
+  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+  padding: 10px;
+}
+
+#info a {
+  padding-bottom: 20px;
+}
+
+/* games section */
+
+#games p {
+  text-align: center;
+  padding-top: 20px;
+}
+
+#games a {
+  text-decoration: none;
+}
+
+
+#games ul li {
+  list-style: none;
+  font-size: 30px;
+  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+  text-align: center;
+  padding-top: 40px;
+  padding-bottom: 15px;
+}
+
+#games ul img {
+  width: 500px;
+  display:block;
+  margin-left:auto ;
+  margin-right: auto;
+  width: 50%;
+}
+
+.gow:visited,
+.unc:visited,
+.hor:visited,
+.tlou:visited {
+  color: black;
+}
+
+.gow:hover {
+  color: #df0024;
+}
+
+.hor:hover {
+  color: #00ab9f;
+}
+
+.unc:hover {
+  color: #f3c300;
+}
+
+.tlou:hover {
+  color: #2e6db4;
+}
+
+/* footer */
+
+footer {
+  margin-top: 50px;
+}
+
+footer div {
+  display: block;
+  background-color: aqua;
+  height: 25px;
+  width: 100%;
+}
+
+.box1 {
+  background-color: #df0024 ;
+}
+
+.box2 {
+  background-color: #00ab9f;
+}
+
+.box3 {
+  background-color: #f3c300;
+}
+
+.box4 {
+  background-color: #2e6db4;
+}