diff --git a/public/css/style.css b/public/css/style.css index eb6ccee..996754c 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -406,3 +406,28 @@ img { .welcome-section a.cta-button:hover { background-color: #004d40; } + +.share-buttons { + display: flex; + gap: 10px; /* Space between buttons */ + margin-top: 20px; /* Space above the buttons */ +} + +.share-button { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 8px 12px; + background-color: #f0f0f0; + border: none; + border-radius: 5px; + cursor: pointer; + text-decoration: none; + color: #333; + transition: background-color 0.3s; +} + +.share-button:hover { + background-color: #e0e0e0; +} + diff --git a/public/img/facebook.svg b/public/img/facebook.svg new file mode 100644 index 0000000..357c196 --- /dev/null +++ b/public/img/facebook.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/linkdin.svg b/public/img/linkdin.svg new file mode 100644 index 0000000..b2e1b1d --- /dev/null +++ b/public/img/linkdin.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/twitter.svg b/public/img/twitter.svg new file mode 100644 index 0000000..d13176d --- /dev/null +++ b/public/img/twitter.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/whatsapp.svg b/public/img/whatsapp.svg new file mode 100644 index 0000000..e655bef --- /dev/null +++ b/public/img/whatsapp.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/js/share.js b/public/js/share.js new file mode 100644 index 0000000..b0e6703 --- /dev/null +++ b/public/js/share.js @@ -0,0 +1,6 @@ +document.addEventListener('DOMContentLoaded', () => { + console.log('Social media share buttons ready!'); + // Add any future JS code for handling sharing events here + // basically if want to expand in future + }); + \ No newline at end of file diff --git a/views/layouts/main.ejs b/views/layouts/main.ejs index a38e1c6..a8a7e86 100644 --- a/views/layouts/main.ejs +++ b/views/layouts/main.ejs @@ -19,6 +19,7 @@ <%- include('../partials/footer.ejs') %> + \ No newline at end of file diff --git a/views/partials/share_buttons.ejs b/views/partials/share_buttons.ejs new file mode 100644 index 0000000..2a4e9fb --- /dev/null +++ b/views/partials/share_buttons.ejs @@ -0,0 +1,34 @@ +
+ + + Share on Facebook + + + + + Share on Twitter + + + + + Share on LinkedIn + + + + + Share on WhatsApp + +
+ \ No newline at end of file diff --git a/views/post.ejs b/views/post.ejs index 3aef49f..311fc42 100644 --- a/views/post.ejs +++ b/views/post.ejs @@ -1,3 +1,10 @@

<%= locals.title %>

By: <%= authorName %>

<%= data.body %>
+ + +
+

Share this post:

+ + <%- include('partials/share-buttons') %> +