hyf-assignment-template/courses/foundation/git/HTML-CSS/Week-1/Blog/index.html at 25d4dc05bf16c5952d4d30b4fa21449cdcd88918 · HackYourFuture-CPH/hyf-assignment-template · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Life Style Blog</title>
    <link rel="stylesheet" href="styles.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=Lobster&family=Playwrite+US+Modern:wght@100..400&family=Quicksand:wght@300..700&family=Rouge+Script&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css"
    />
  </head>
  <body>
    <!-- header -->
    <header class="header">
      <h1>🌸 Bloom Life</h1>
      <p class="centerText">
        Little rituals, cozy spaces, and mindful living ✨
      </p>
    </header>
    <!-- main -->
    <main>

      <section class="heroSection">
        <p class="centerText boldText">Why Lifestyle Habits Matter</p>
        <p>
          The way we live day to day shapes the way we feel. Our spaces, our
          routines, the little things we do without thinking they all add up.
          Every morning cup of tea, every quiet corner we create, every small
          habit we choose becomes part of the rhythm of our lives. When we pause
          to look at these details with intention, we begin to see how much
          power they hold. By slowing down, adjusting our environment, and
          choosing rituals that bring comfort and joy, we can design days that
          nourish us from the inside out. It’s not about perfection or following
          a strict routine, it’s about creating a gentle structure that supports
          the life we want to live. Through mindful choices, we can build lives
          that feel soft, meaningful, and truly ours.
        </p>
      </section>

      <section class="card">

        <div>
          <p class="boldText">How I Create Calm Mornings ☀️</p>
          <p>
            Mornings set the tone for my entire day. A cup of warm tea, soft
            sunlight, and a few quiet minutes to breathe that’s where my peace
            begins. In this post, I’ll share the simple habits that help me
            start each morning with calm energy and a clear mind.
          </p>
        </div>
        <img
          src="https://images.unsplash.com/38/QoR8Bv1S2SEqH6UcSJCA_Tea.jpg?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=2070"
          alt="Morning Coffee"
        />
      </section>
      <!-- aside -->
      <aside class="posts card">
        <h1 class="centerText">Recent posts</h1>

        <div>
          <ul>
            <li>
              <a
                href="https://camillestyles.com/wellness/books-to-get-out-of-a-reading-slump/"
                >Best books for Fall</a
              >
            </li>
            <li>
              <a
                href="https://camillestyles.com/style/fashion/wardrobe-essentials/best-fall-basics/"
                >Fall essentials
              </a>
            </li>
            <li>
              <a
                href="https://camillestyles.com/food/pumpkin-cheesecake-cookies/"
                >Pumpkin cheese cookies</a
              >
            </li>
          </ul>
          <img
            src="https://hueandhatchet.com/wp-content/uploads/2019/10/Lifestyle-Blog-Featured-Image.jpg.webp"
            alt="Blog images"
          />
        </div>
      </aside>

      <section>
        <p class="boldText">My favorites</p>

        <div class="favoriteCardsContainer">

          <div class="favoriteCard">
            <p>Morning Playlist</p>
            <a href="https://open.spotify.com/playlist/6mgWUWQhvRnkuxUZaE96vZ">
              <img
                src="https://images.unsplash.com/photo-1527150122806-f682d2fd8b09?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1331"
                alt="Music"
              />
            </a>
          </div>
          <div class="favoriteCard">
            <p>Book List</p>
            <a
              href="https://www.goodreads.com/list/show/264.Books_That_Everyone_Should_Read_At_Least_Once"
              ><img
                src="https://plus.unsplash.com/premium_photo-1668198395277-de6e6f748065?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=687"
                alt="book image"
            /></a>
          </div>
          <div class="favoriteCard">
            <p>Decor Inspiration</p>
            <a href="https://dk.pinterest.com/ideas/home-decor/935249274030/"
              ><img
                src="https://images.unsplash.com/photo-1643148636541-bca753f22846?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=687"
                alt="sofa image"
              />
            </a>
          </div>
        </div>
      </section>
    </main>
    <!-- footer -->
    <footer>
      <p>© 2025 Bloom Life. All rights reserved.</p>
      <p>Made with ☕ and soft lighting.</p>
    </footer>
  </body>
</html>