diff --git a/client/FirstViewstylesheet.css b/client/FirstViewstylesheet.css
index 2adf6e8e89ded3001d3182fae6a8f4e090816201..a8efec11259370ceea0d3c94999a27761c4fb95b 100644
--- a/client/FirstViewstylesheet.css
+++ b/client/FirstViewstylesheet.css
@@ -69,8 +69,8 @@ body {
.firstThreeImages-container img,
.secondThreeImages-container img {
- width: 390px;
- height: 390px;
+ width: 380px;
+ height: 380px;
margin-right: 30px;
margin-left: 30px;
border-radius: 10px;
@@ -257,6 +257,78 @@ button[label="Romance"]::before {
content: "Romance";
}
+button[label="War"]::before {
+ content: "War";
+}
+
+button[label="Adventure"]::before {
+ content: "Adventure";
+}
+
+button[label="Film-Noir"]::before {
+ content: "Film-Noir";
+}
+
+button[label="Animation"]::before {
+ content: "Animation";
+}
+
+button[label="Biography"]::before {
+ content: "Biography";
+}
+
+button[label="Crime"]::before {
+ content: "Crime";
+}
+
+button[label="Family"]::before {
+ content: "Family";
+}
+
+button[label="Fantasy"]::before {
+ content: "Fantasy";
+}
+
+button[label="Documentary"]::before {
+ content: "Documentary";
+}
+
+button[label="History"]::before {
+ content: "History";
+}
+
+button[label="Music"]::before {
+ content: "Music";
+}
+
+button[label="Musical"]::before {
+ content: "Musical";
+}
+
+button[label="Mystery"]::before {
+ content: "Mystery";
+}
+
+button[label="Sci-Fi"]::before {
+ content: "Sci-Fi";
+}
+
+button[label="Short"]::before {
+ content: "Short";
+}
+
+button[label="Sport"]::before {
+ content: "Sport";
+}
+
+button[label="Thriller"]::before {
+ content: "Thriller";
+}
+
+button[label="Western"]::before {
+ content: "Western";
+}
+
button[label="Horror"] {
background-image: url('/Users/adnamaric/Desktop/grupp-4-project/client/firstViewImages/buttons/horrorButton.avif');
}
@@ -277,6 +349,78 @@ button[label="Comedy"] {
background-image: url('/Users/adnamaric/Desktop/grupp-4-project/client/firstViewImages/buttons/comedyButton.avif');
}
+button[label="Film-Noir"] {
+ background-image: url('/Users/adnamaric/Desktop/grupp-4-project/client/firstViewImages/buttons/filmNoirButton.avif');
+}
+
+button[label="History"] {
+ background-image: url('/Users/adnamaric/Desktop/grupp-4-project/client/firstViewImages/buttons/historyButton.avif');
+}
+
+button[label="Musical"] {
+ background-image: url('/Users/adnamaric/Desktop/grupp-4-project/client/firstViewImages/buttons/musicalButton.avif');
+}
+
+button[label="Music"] {
+ background-image: url('/Users/adnamaric/Desktop/grupp-4-project/client/firstViewImages/buttons/musicButton.avif');
+}
+
+button[label="Mystery"] {
+ background-image: url('/Users/adnamaric/Desktop/grupp-4-project/client/firstViewImages/buttons/mysteryButton.avif');
+}
+
+button[label="Sci-Fi"] {
+ background-image: url('/Users/adnamaric/Desktop/grupp-4-project/client/firstViewImages/buttons/sciFiButton.avif');
+}
+
+button[label="Short"] {
+ background-image: url('/Users/adnamaric/Desktop/grupp-4-project/client/firstViewImages/buttons/shortButton.avif');
+}
+
+button[label="Sport"] {
+ background-image: url('/Users/adnamaric/Desktop/grupp-4-project/client/firstViewImages/buttons/sportButton.avif');
+}
+
+button[label="Thriller"] {
+ background-image: url('/Users/adnamaric/Desktop/grupp-4-project/client/firstViewImages/buttons/thrillerButton.avif');
+}
+
+button[label="War"] {
+ background-image: url('/Users/adnamaric/Desktop/grupp-4-project/client/firstViewImages/buttons/warButton.avif');
+}
+
+button[label="Western"] {
+ background-image: url('/Users/adnamaric/Desktop/grupp-4-project/client/firstViewImages/buttons/westernButton.avif');
+}
+
+button[label="Fantasy"] {
+ background-image: url('/Users/adnamaric/Desktop/grupp-4-project/client/firstViewImages/buttons/fantasyButton.avif');
+}
+
+button[label="Crime"] {
+ background-image: url('/Users/adnamaric/Desktop/grupp-4-project/client/firstViewImages/buttons/crimeButton.avif');
+}
+
+button[label="Documentary"] {
+ background-image: url('/Users/adnamaric/Desktop/grupp-4-project/client/firstViewImages/buttons/documentaryButton.avif');
+}
+
+button[label="Adventure"] {
+ background-image: url('/Users/adnamaric/Desktop/grupp-4-project/client/firstViewImages/buttons/adventureButton.avif');
+}
+
+button[label="Animation"] {
+ background-image: url('/Users/adnamaric/Desktop/grupp-4-project/client/firstViewImages/buttons/animationButton.avif');
+}
+
+button[label="Biography"] {
+ background-image: url('/Users/adnamaric/Desktop/grupp-4-project/client/firstViewImages/buttons/biographyButton.avif');
+}
+
+button[label="Family"] {
+ background-image: url('/Users/adnamaric/Desktop/grupp-4-project/client/firstViewImages/buttons/familyButton.avif');
+}
+
.genreButton:hover::after {
opacity: 1;
}
@@ -294,18 +438,24 @@ button[label="Comedy"] {
margin-top: 50px;
}
-.comedy-row {
+.first-buttons-row,
+.second-buttons-row,
+.third-buttons-row,
+.fourth-buttons-row {
display: flex;
justify-content: center;
-
+ justify-content:space-between;
+ align-items: center;
+ gap: 20px;
+ margin-bottom: 50px;
+ margin-top: 50px;
}
-.horror-drama-row,
-.romance-action-row {
+.fifth-buttons-row {
display: flex;
- justify-content:space-between;
+ justify-content: center;
align-items: center;
- gap: 500px;
+ gap: 20px;
margin-bottom: 50px;
margin-top: 50px;
}
diff --git a/client/firstViewImages/buttons/adventureButton.avif b/client/firstViewImages/buttons/adventureButton.avif
new file mode 100644
index 0000000000000000000000000000000000000000..e3b229e6cd288a9fa99386e0137188b0ccc69c12
Binary files /dev/null and b/client/firstViewImages/buttons/adventureButton.avif differ
diff --git a/client/firstViewImages/buttons/animationButton.avif b/client/firstViewImages/buttons/animationButton.avif
new file mode 100644
index 0000000000000000000000000000000000000000..da261da1f1f39473921e1f3e55da273e5c12e53e
Binary files /dev/null and b/client/firstViewImages/buttons/animationButton.avif differ
diff --git a/client/firstViewImages/buttons/biographyButton.avif b/client/firstViewImages/buttons/biographyButton.avif
new file mode 100644
index 0000000000000000000000000000000000000000..e11e7a484e9a8513920ff9a8ff0c061ac4ee368c
Binary files /dev/null and b/client/firstViewImages/buttons/biographyButton.avif differ
diff --git a/client/firstViewImages/buttons/crimeButton.avif b/client/firstViewImages/buttons/crimeButton.avif
new file mode 100644
index 0000000000000000000000000000000000000000..4156715e71a4b1de8467e1f91efec02a35728833
Binary files /dev/null and b/client/firstViewImages/buttons/crimeButton.avif differ
diff --git a/client/firstViewImages/buttons/documentaryButton.avif b/client/firstViewImages/buttons/documentaryButton.avif
new file mode 100644
index 0000000000000000000000000000000000000000..bdd71c3dd8be4d61fc0f84c8be2aee9c354a7186
Binary files /dev/null and b/client/firstViewImages/buttons/documentaryButton.avif differ
diff --git a/client/firstViewImages/buttons/familyButton.avif b/client/firstViewImages/buttons/familyButton.avif
new file mode 100644
index 0000000000000000000000000000000000000000..de604fc131e8cea4a5135df93857fd78a448263c
Binary files /dev/null and b/client/firstViewImages/buttons/familyButton.avif differ
diff --git a/client/firstViewImages/buttons/fantasyButton.avif b/client/firstViewImages/buttons/fantasyButton.avif
new file mode 100644
index 0000000000000000000000000000000000000000..8965b6382beeb6e73374a8575cad8f43d1ae0f4d
Binary files /dev/null and b/client/firstViewImages/buttons/fantasyButton.avif differ
diff --git a/client/firstViewImages/buttons/filmNoirButton.avif b/client/firstViewImages/buttons/filmNoirButton.avif
new file mode 100644
index 0000000000000000000000000000000000000000..03e6501ef972774631f6905585773133fbe4d547
Binary files /dev/null and b/client/firstViewImages/buttons/filmNoirButton.avif differ
diff --git a/client/firstViewImages/buttons/historyButton.avif b/client/firstViewImages/buttons/historyButton.avif
new file mode 100644
index 0000000000000000000000000000000000000000..5817121be968ce62fd3fa5afa6e38a27b25df7aa
Binary files /dev/null and b/client/firstViewImages/buttons/historyButton.avif differ
diff --git a/client/firstViewImages/buttons/musicButton.avif b/client/firstViewImages/buttons/musicButton.avif
new file mode 100644
index 0000000000000000000000000000000000000000..6742b7e0247218cb43a87b4e83b0f52122d09cad
Binary files /dev/null and b/client/firstViewImages/buttons/musicButton.avif differ
diff --git a/client/firstViewImages/buttons/musicalButton.avif b/client/firstViewImages/buttons/musicalButton.avif
new file mode 100644
index 0000000000000000000000000000000000000000..d2ba70015a3f25f609e410e178d63dd1d319d455
Binary files /dev/null and b/client/firstViewImages/buttons/musicalButton.avif differ
diff --git a/client/firstViewImages/buttons/mysteryButton.avif b/client/firstViewImages/buttons/mysteryButton.avif
new file mode 100644
index 0000000000000000000000000000000000000000..70c4897491a83bd39e1db060bdb6f96505c5f3cc
Binary files /dev/null and b/client/firstViewImages/buttons/mysteryButton.avif differ
diff --git a/client/firstViewImages/buttons/sciFiButton.avif b/client/firstViewImages/buttons/sciFiButton.avif
new file mode 100644
index 0000000000000000000000000000000000000000..40042a1eaa7c145a0e985feb3089a5e7fdac4d4e
Binary files /dev/null and b/client/firstViewImages/buttons/sciFiButton.avif differ
diff --git a/client/firstViewImages/buttons/shortButton.avif b/client/firstViewImages/buttons/shortButton.avif
new file mode 100644
index 0000000000000000000000000000000000000000..428b6b1b703b460b01be840864470e4a0aaa2b86
Binary files /dev/null and b/client/firstViewImages/buttons/shortButton.avif differ
diff --git a/client/firstViewImages/buttons/sportButton.avif b/client/firstViewImages/buttons/sportButton.avif
new file mode 100644
index 0000000000000000000000000000000000000000..adf092ccdb99ca35d0708c7e034fdf272a5e67a5
Binary files /dev/null and b/client/firstViewImages/buttons/sportButton.avif differ
diff --git a/client/firstViewImages/buttons/thrillerButton.avif b/client/firstViewImages/buttons/thrillerButton.avif
new file mode 100644
index 0000000000000000000000000000000000000000..f74c3a2b26c377a027256219e92d691bb0b9b512
Binary files /dev/null and b/client/firstViewImages/buttons/thrillerButton.avif differ
diff --git a/client/firstViewImages/buttons/warButton.avif b/client/firstViewImages/buttons/warButton.avif
new file mode 100644
index 0000000000000000000000000000000000000000..815c1da68049ddc703d9a2186e6d98471c0b789a
Binary files /dev/null and b/client/firstViewImages/buttons/warButton.avif differ
diff --git a/client/firstViewImages/buttons/westernButton.avif b/client/firstViewImages/buttons/westernButton.avif
new file mode 100644
index 0000000000000000000000000000000000000000..69c44216f9fb5954647cfe7989d8c69c123693a2
Binary files /dev/null and b/client/firstViewImages/buttons/westernButton.avif differ
diff --git a/client/firstview.html b/client/firstview.html
index 9d7e32c1b78db9e0813ac5b94718a8428117efa0..bcf7b891aa538650370fc2590a5eedd38b3f37cb 100644
--- a/client/firstview.html
+++ b/client/firstview.html
@@ -120,22 +120,48 @@
<!-- Second buttons container -->
<!-- Second buttons container -->
<article class="second-buttons-container">
- <!-- First row: Horror and Drama buttons -->
- <div class="horror-drama-row">
+ <!-- First row: Genre buttons -->
+ <div class="first-buttons-row">
<button class="genreButton" label="Horror"></button>
<button class="genreButton" label="Drama"></button>
+ <button class="genreButton" label="Adventure"></button>
+ <button class="genreButton" label="Animation"></button>
+ <button class="genreButton" label="Biography"></button>
</div>
- <!-- Second row: Comedy button -->
- <div class="comedy-row">
+ <!-- Second row: Genre buttons -->
+ <div class="second-buttons-row">
<button class="genreButton" label="Comedy"></button>
+ <button class="genreButton" label="Crime"></button>
+ <button class="genreButton" label="Documentary"></button>
+ <button class="genreButton" label="Family"></button>
+ <button class="genreButton" label="Fantasy"></button>
</div>
- <!-- Third row: Romance and Action buttons -->
- <div class="romance-action-row">
+ <!-- Third row: Genre buttons -->
+ <div class="third-buttons-row">
<button class="genreButton" label="Romance"></button>
<button class="genreButton" label="Action"></button>
+ <button class="genreButton" label="Film-Noir"></button>
+ <button class="genreButton" label="History"></button>
+ <button class="genreButton" label="Music"></button>
+ </div>
+
+ <!-- Fourth row: Genre buttons -->
+ <div class="fourth-buttons-row">
+ <button class="genreButton" label="Musical"></button>
+ <button class="genreButton" label="Mystery"></button>
+ <button class="genreButton" label="Sci-Fi"></button>
+ <button class="genreButton" label="Short"></button>
+ <button class="genreButton" label="Sport"></button>
</div>
</article>
+<!-- Fifth row: Genre buttons -->
+<div class="fifth-buttons-row">
+ <button class="genreButton" label="Thriller"></button>
+ <button class="genreButton" label="War"></button>
+ <button class="genreButton" label="Western"></button>
+</div>
+
<!-- Line -->
<hr class="footer-line">
diff --git a/client/secondViewStylesheet.css b/client/secondViewStylesheet.css
index 355e7f949404ee2a18c2930616d75ff756b82e21..ff3f3e660dd923de6814d63a61fe29c87d3b6d8b 100644
--- a/client/secondViewStylesheet.css
+++ b/client/secondViewStylesheet.css
@@ -48,26 +48,86 @@ body {
h2 {
font-size: 40px;
- margin-left: 30px;
}
-.first-container img {
+.first-container img,
+.third-container img {
width: 400px;
height: 400px;
margin-right: 30px;
- margin-left: 30px;
+ margin-left: 20px;
border-radius: 10px;
align-items: center;
+ margin-top: 40px;
}
-.first-container {
+.first-container,
+.third-container {
display: flex;
justify-content: space-between;
- margin-left: 30px;
+ margin-left: 40px;
+ margin-right: 20px;
+ margin-top: 50px;
+ margin-bottom: 50px;
+}
+
+.first-container .text-container,
+.third-container .text-container {
+ flex: 1;
+}
+
+.second-container {
+ display: flex;
+ margin-left: 40px;
margin-right: 30px;
- margin-top: 20px;
+ margin-top: 50px;
}
-.first-container .text-container {
+.second-container .image-container {
flex: 1;
+}
+
+.second-container .text-container {
+ flex: 2;
+ margin-left: 60px;
+ margin-right: 20px;
+}
+
+.second-container img {
+ width: 400px;
+ height: 400px;
+ margin-left: 20px;
+ margin-top: 30px;
+ border-radius: 10px;
+ align-items: center;
+}
+
+.line {
+ border: none;
+}
+
+.contact-us-container {
+ background-color: rgba(0, 0, 0, 0.7);
+ color: white;
+ padding: 20px;
+ border-radius: 10px;
+ margin-top: 50px;
+ margin-bottom: 50px;
+}
+
+.contact-form {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+textarea {
+ background-color: rgba(0, 0, 0, 0.5);
+ color: white;
+ border: none;
+ border-radius: 5px;
+ padding: 10px;
+ margin-bottom: 10px;
+ width: 100%;
+ box-sizing: border-box;
}
\ No newline at end of file
diff --git a/client/secondview.html b/client/secondview.html
index 8798dc467f30b10ee15a95294ca944853454eb2e..9b55e9a8f5db989911880a5c7dd5bc34527779f6 100644
--- a/client/secondview.html
+++ b/client/secondview.html
@@ -31,6 +31,81 @@
<div class="text-container">
<h2> Title </h2> <!--- Change to suitable title--> <!-- CONNECTA MED JS -->
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+ ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+ laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+ voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+ non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+ ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+ laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+ voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+ non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+ ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+ laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+ voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+ non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+ ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+ laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+ voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+ non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <!-- Lägg in text -->
+ </div>
+ <div class="image-container">
+ <img src="/Users/adnamaric/Desktop/grupp-4-project/client/secondViewImages/firstContainerImage.avif" alt="Picture of hole">
+ </div>
+</article>
+
+
+<!--- Second container: text + img -->
+<article class="second-container">
+ <div class="image-container">
+ <img src="/Users/adnamaric/Desktop/grupp-4-project/client/secondViewImages/firstContainerImage.avif" alt="Picture of hole">
+ </div>
+ <div class="text-container">
+ <h2> Title </h2>
+ <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+ ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+ laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+ voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+ non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+ ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+ laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+ voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+ non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+ ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+ laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+ voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+ non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+ ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+ laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+ voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+ non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+ </div>
+</article>
+
+<article class="third-container">
+ <div class="text-container">
+ <h2> Title </h2> <!--- Change to suitable title--> <!-- CONNECTA MED JS -->
+ <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+ ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+ laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+ voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+ non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+ ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+ laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+ voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+ non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+ ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+ laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+ voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+ non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
@@ -40,6 +115,24 @@
<img src="/Users/adnamaric/Desktop/grupp-4-project/client/secondViewImages/firstContainerImage.avif" alt="Picture of hole">
</div>
</article>
+
+<!-- BUTTONS TO THE THREE OTHER PAGES -->
+
+<!-- Line -->
+<hr class="footer-line">
+
+<!-- Contact us box -->
+<article class="contact-us-container">
+ <!-- Contact us info -->
+ <div class="contactUs">
+ <p>Contact us:</p>
+ <div class="contact-form">
+ <textarea id="contactMessage" name="contactMessage" rows="4" cols="50" placeholder="Write your message here..."></textarea>
+ <button id="sendButton">Send</button>
+ </div>
+ </div>
+</article>
+
</div>
</body>
</html>
\ No newline at end of file