Add files via upload

mahgah189 · Mar 13, 2024 · d6feef0 · d6feef0
commit d6feef0
Show file tree

Hide file tree

Showing 14 changed files with 472 additions and 0 deletions.
diff --git a/about.html b/about.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+
+<html>
+
+<head>
+    <link rel="stylesheet" href="index.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap" rel="stylesheet">
+</head>
+
+<body>
+    <header class="header">
+        <img class="logo" src="images/logo.png" alt="A logo resembling a speech bubble for My Journal" />
+        <p class="logo-text">My learning journal</p>
+        <a href="index.html" class="header-link">HOME</a>
+        <a href="about.html" class="about-link">ABOUT ME</a>
+    </header>
+
+    <footer>
+        <p class="footer-top-text">My Learning Journal</p>
+        <p class="footer-bottom-text">Copyright ©2022</p>
+    </footer>
+</body>
+
+</html>
diff --git a/blogposts.js b/blogposts.js
@@ -0,0 +1,73 @@
+export const blogArray = [
+    {
+        image: `images/blog-image-01.png`,
+        date: `JULY 23, 2022`,
+        title: `Blog one`,
+        description: `I'm excited to start a new learning journey as a Scrimba Bootcamp student! After several months of learning in the Frontend Developer Career Path.`,
+        alt: `A stock image of a computer viewed from an angle.`
+    },
+
+    {
+        image: `images/blog-image-02.png`,
+        date: `JULY 23, 2022`,
+        title: `Blog two`,
+        description: `I'm excited to start a new learning journey as a Scrimba Bootcamp student! After several months of learning in the Frontend Developer Career Path.`,
+        alt: `A stock photo of a laptop on a table, situated outdoors with the words "I design and develop experiences that make people's lives simple" on screen.`
+    },
+
+    {
+        image: `images/blog-image-03.png`,
+        date: `JULY 23, 2022`,
+        title: `Blog three`,
+        description: `I'm excited to start a new learning journey as a Scrimba Bootcamp student! After several months of learning in the Frontend Developer Career Path.`,
+        alt: `An image of a woman on the beach viewed from the side, with a setting sun in the background.`
+    },
+
+    {
+        image: `images/blog-image-04.png`,
+        date: `JULY 23, 2022`,
+        title: `Blog four`,
+        description: `I'm excited to start a new learning journey as a Scrimba Bootcamp student! After several months of learning in the Frontend Developer Career Path.`,
+        alt: `An image of an arm extending outwards from the camera holding a lightbulb in the center of the frame.`
+    },
+
+    {
+        image: `images/blog-image-05.png`,
+        date: `JULY 23, 2022`,
+        title: `Blog five`,
+        description: `I'm excited to start a new learning journey as a Scrimba Bootcamp student! After several months of learning in the Frontend Developer Career Path.`,
+        alt: `A graphic design of a cybernetic pattern with colors ranging between magenta and dark violet.`
+    },
+
+    {
+        image: `images/blog-image-06.png`,
+        date: `JULY 23, 2022`,
+        title: `Blog six`,
+        description: `I'm excited to start a new learning journey as a Scrimba Bootcamp student! After several months of learning in the Frontend Developer Career Path.`,
+        alt: `An image of a laptop sitting on top of a table, viewed at an angle with a small succulent plant situated behind the laptop.`
+    },
+
+    {
+        image: `images/blog-image-01.png`,
+        date: `JULY 23, 2022`,
+        title: `Blog seven`,
+        description: `I'm excited to start a new learning journey as a Scrimba Bootcamp student! After several months of learning in the Frontend Developer Career Path.`,
+        alt: `A stock image of a computer viewed from an angle.`
+    },
+
+    {
+        image: `images/blog-image-02.png`,
+        date: `JULY 23, 2022`,
+        title: `Blog eight`,
+        description: `I'm excited to start a new learning journey as a Scrimba Bootcamp student! After several months of learning in the Frontend Developer Career Path.`,
+        alt: `A stock photo of a laptop on a table, situated outdoors with the words "I design and develop experiences that make people's lives simple" on screen.`
+    },
+
+    {
+        image: `images/blog-image-03.png`,
+        date: `JULY 23, 2022`,
+        title: `Blog nine`,
+        description: `I'm excited to start a new learning journey as a Scrimba Bootcamp student! After several months of learning in the Frontend Developer Career Path.`,
+        alt: `An image of a woman on the beach viewed from the side, with a setting sun in the background.`
+    }
+]
diff --git a/images/article-image-hero.png b/images/article-image-hero.png
diff --git a/images/blog-image-01.png b/images/blog-image-01.png
diff --git a/images/blog-image-02.png b/images/blog-image-02.png
diff --git a/images/blog-image-03.png b/images/blog-image-03.png
diff --git a/images/blog-image-04.png b/images/blog-image-04.png
diff --git a/images/blog-image-05.png b/images/blog-image-05.png
diff --git a/images/blog-image-06.png b/images/blog-image-06.png
diff --git a/images/blog-image-hero.png b/images/blog-image-hero.png
diff --git a/images/logo.png b/images/logo.png
diff --git a/index.css b/index.css
@@ -0,0 +1,282 @@
+body {
+    font-family: "Source Sans 3", sans-serif;
+    margin: 0;
+}
+
+/* Header styling */
+
+.header {
+    display: grid;
+    grid-template-columns: auto auto 1fr auto auto;
+    padding: 0.8em 3.125em;
+    align-items: center;
+}
+
+.header a {
+    text-decoration: none;
+}
+
+.header a:visited {
+    color: inherit;
+}
+
+.header a:hover {
+    text-decoration: underline;
+}
+
+.logo-text {
+    font-family: "Roboto", sans-serif;
+    font-weight: bold;
+    font-size: 1.25rem;
+    padding-left: 0.3em;
+}
+
+.header-link {
+    grid-column: 4 / 5;
+}
+
+.about-link {
+    grid-column: 5 / 6;
+}
+
+.header-link,
+.about-link {
+    font-size: 1.05rem;
+    padding-left: 1em;
+    padding-right: 1em;
+}
+
+/* Banner styling */
+
+.hero-banner {
+    display: grid;
+    grid-template-columns: minmax(40vw, 60vw) 30vw;
+    grid-template-rows: 350px auto auto;
+    grid-gap: 1em;
+    padding: 3em;
+    background-image: url("images/blog-image-hero.png");
+    background-size: cover;
+    background-position: center;
+    color: white;
+}
+
+.hero-banner p, h1 {
+    margin: 0;
+}
+
+.date {
+    align-self: self-end;
+}
+
+.hero-banner h1 {
+    grid-row: 2;
+    font-size: 2rem;
+}
+
+.banner-subtext {
+    grid-row: 3;
+    font-size: 0.9rem;
+}
+
+/* Blog grid */
+
+.blogs {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+    grid-gap: 1em;
+    margin: 3em;
+}
+
+.blog-container h2 {
+    margin-top: 0;
+    margin-bottom: 0.5em;
+}
+
+.blog-container img {
+    width: 100%;
+}
+
+.blog-date {
+    margin-top: 1em;
+    margin-bottom: 1em;
+}
+
+.blog-description {
+    margin: 0;
+}
+
+.view-btn {
+    grid-column: 2;
+    font-size: 1.1rem;
+    font-weight: bold;
+    text-decoration: underline;
+    padding-top: 2em;
+    margin: auto;
+    border: none;
+    background-color: white;
+    cursor: pointer;
+}
+
+.view-btn:hover {
+    color: #343434;
+}
+
+/* Footer styling */
+
+footer {
+    display: grid;
+    color: #ECECEC;
+    background-color: #202020;
+}
+
+footer p {
+    margin: 0 auto;
+}
+
+.footer-top-text {
+    padding-top: 2.5em;
+    font-weight: bold;
+}
+
+.footer-bottom-text {
+    padding-bottom: 2.5em;
+}
+
+/* JS related classes */
+
+.hide-element {
+    display: none;
+}
+
+/* Media query for tablet */
+
+@media (min-width: 600px) and (max-width: 877px) {
+
+    /* Banner styling */
+
+    .hero-banner {
+        grid-template-columns: 1fr 20vw;
+        grid-template-rows: 250px auto auto;
+        grid-gap: 0.8em;
+        padding: 2.5em;
+        background: linear-gradient(
+            rgba(0, 0, 0, 0.2), 
+            rgba(0, 0, 0, 0.2)
+          ), url("images/article-image-hero.png");
+        background-size: cover;
+    }
+
+    .hero-banner h1 {
+        line-height: 1.2;
+    }
+
+    .banner-subtext {
+        grid-column: 1 / 3;
+        font-size: 1.1rem;
+        line-height: 1.2;
+    }
+
+    /* Blog grid */
+
+    .blogs {
+        grid-gap: 2.5em;
+        margin: 2.5em 1.5em;
+    }
+
+    .view-btn {
+        grid-column: 1 / 3;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+}
+
+/* Media query for mobile */
+
+@media (max-width: 599px) {
+
+    /* Header styling */
+
+    body {
+        min-width: 480px;
+    }
+
+    .header {
+        padding: 0.8em 2em;
+    }
+
+    .logo {
+        width: 2em;
+        height: 2em;
+    }
+
+    .logo-text {
+        font-size: 1.1rem;
+    }
+
+    .about-link {
+        padding-right: 0;
+    }
+
+    .header-link,
+    .about-link {
+    font-size: 0.9rem;
+    font-weight: 500;
+    }
+
+    /* Banner styling */
+
+    .hero-banner {
+        grid-template-columns: 1fr;
+        grid-template-rows: 100px auto auto;
+        grid-gap: 0.8em;
+        padding: 1.5em;
+        background: linear-gradient(
+            rgba(0, 0, 0, 0.2), 
+            rgba(0, 0, 0, 0.2)
+          ), url("images/article-image-hero.png");
+        background-size: cover;
+    }
+
+    .hero-banner h1 {
+        line-height: 1.2;
+    }
+
+    .banner-subtext {
+        font-size: 1.1rem;
+        line-height: 1.2;
+    }
+
+    /* Blog grid */
+
+    .blogs {
+        grid-gap: 2.5em;
+        margin: 2.5em 1.5em;
+    }
+
+    .blog-container,
+    .view-btn {
+        grid-column: 1;
+    }
+
+    .blog-date {
+        margin-top: 0.5em;
+        margin-bottom: 0.5em;
+    }
+
+    .blog-container h2 {
+        margin-top: 0;
+        margin-bottom: 0.25em;
+    }
+
+    .blog-description {
+        font-size: 1.05rem;
+        font-weight: 300;
+        line-height: 1.2;
+    }
+
+    .view-btn{
+        padding-top: 0;
+    }
+
+}