finalcss/starter-blog.html at main · getfinalui/finalcss · 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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="Type some info">
  <meta name="description" content="Final CSS (finalcss) is a utility-first and component library for building modern websites without leaving your HTML"/>
  <meta property="og:description" content="Final CSS is a utility-first and component library for building modern websites without leaving your HTML"/>
  <meta name="twitter:description" content="Final CSS is a utility-first and component library for building modern websites without leaving your HTML"/>
  <meta name="twitter:card" content="summary_large_image"/>

  <meta name="author" content="Vosidiy M">

  <title>Final CSS - Example data table (finalcss.com)</title>

	<script type="text/javascript">
    // Check localStorage for saved theme and assign that
    const htmlElement = document.documentElement;
    const savedTheme = localStorage.getItem('site-theme');
    if (savedTheme) {
        htmlElement.setAttribute('data-theme', savedTheme);
    }
    function themeSwitcher() {
          const currentTheme = htmlElement.getAttribute('data-theme');
          const newTheme = currentTheme === 'light' || !currentTheme ? 'dark' : 'light';
          // Set the new theme on the body element
          htmlElement.setAttribute('data-theme', newTheme);
          // Save the new theme in localStorage
          localStorage.setItem('site-theme', newTheme);
    }
  </script>


<!-- FinalCSS -->
<link href="css/final.css" rel="stylesheet" type="text/css" />


</head>
<body class="bg-base">


<header class="bg-base py-2 border-bottom">
	<div class="container">
		<div class="d-flex flex-column flex-md-row align-items-center">
			<div class="mb-3 lg:mb-0">
				<a href="https://finalcss.com" class="text-xl font-semibold">Final CSS</a>
			</div>
			<nav class="nav ml-auto">

        <a href="#" class="nav-link">Home</a>
				<a href="#" class="nav-link">About</a>
				<a href="#" class="nav-link">Link one</a>
        <a href="#" class="nav-link">Link two</a>

				<button onclick="themeSwitcher()" class="btn btn-icon btn-default ml-2">
					<span class="d-none dark:d-block">
						<svg xmlns="http://www.w3.org/2000/svg" class="align-middle" fill="none" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
						</svg>
					</span>
					<span class="dark:d-none">
						<svg xmlns="http://www.w3.org/2000/svg" class="align-middle" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
						</svg>
					</span>
				</button>
			</nav>
		</div>
	</div>
</header>

<section class="py-10 bg-lower">
	<div class="container">

	  <header class="py-12">
      <h1 class="text-6xl mb-4">Blog posts</h1>
      <p class="text-lg lg:max-w-50%">
        Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.
      </p>
    </header>

    <div class="row row-cols-1 row-cols-2 lg:row-cols-3 lg:row-cols-3 gap-6">
        <div class="col">
          <article class="card hover:border-primary h-full">
            <a href="#" class="bg-neutral-300 rounded-top overflow-hidden">
				      <img class="object-fit-cover w-100% h-48" src="placeholder.jpg">
			      </a>
            <div class="card-body">
              <time class="text-orange mb-2 d-block">Today</time>
              <a href="#"><h4 class="text-xl mb-2">Breaking news about technology</h4></a>
              <p>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            </div>
          </article>
        </div> <!-- col.// -->

        <div class="col">
          <article class="card hover:border-primary h-full">
            <a href="#" class="bg-neutral-300 rounded-top overflow-hidden">
				      <img class="object-fit-cover w-100% h-48" src="placeholder.jpg">
			      </a>
            <div class="card-body">
              <time class="text-orange mb-2 d-block">Today</time>
              <a href="#"><h4 class="text-xl mb-2">Why the world is changing so quickly</h4></a>
              <p>Temporary text is here. So this is a wider card with supporting text below as a natural .</p>
            </div>
          </article>
        </div> <!-- col.// -->

        <div class="col">
          <article class="card hover:border-primary h-full">
            <a href="#" class="bg-neutral-300 rounded-top overflow-hidden">
				      <img class="object-fit-cover w-100% h-48" src="placeholder.jpg">
			      </a>
            <div class="card-body">
              <time class="text-orange mb-2 d-block">Today</time>
              <a href="#"><h4 class="text-xl mb-2">Someone did something about nothing</h4></a>
              <p>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            </div>
          </article>
        </div> <!-- col.// -->

        <div class="col">
          <article class="card hover:border-primary h-full">
            <a href="#" class="bg-neutral-300 rounded-top overflow-hidden">
				      <img class="object-fit-cover w-100% h-48" src="placeholder.jpg">
			      </a>
            <div class="card-body">
              <time class="text-orange mb-2 d-block">Yesterday</time>
              <a href="#"><h4 class="text-xl mb-2">Breaking news about technology</h4></a>
              <p>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            </div>
          </article>
        </div> <!-- col.// -->

        <div class="col">
          <article class="card hover:border-primary h-full">
            <a href="#" class="bg-neutral-300 rounded-top overflow-hidden">
				      <img class="object-fit-cover w-100% h-48" src="placeholder.jpg">
			      </a>
            <div class="card-body">
              <time class="text-orange mb-2 d-block">Yesterday</time>
              <a href="#"><h4 class="text-xl mb-2">Nothing is better than simple life, isn't it?</h4></a>
              <p>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            </div>
          </article>
        </div> <!-- col.// -->

        <div class="col">
          <article class="card hover:border-primary h-full">
            <a href="#" class="bg-neutral-300 rounded-top overflow-hidden">
				      <img class="object-fit-cover w-100% h-48" src="placeholder.jpg">
			      </a>
            <div class="card-body">
              <time class="text-orange mb-2 d-block">Fev 2, 2025</time>
              <a href="#"><h4 class="text-xl mb-2"> Whereas disregard and contempt for human rights... </h4></a>
              <p> Discover fascinating, unusual, and adventurous things to do. Lorem ipsum dolor sit amet, consectetur adipisicing elit... </p>
            </div>
          </article>
        </div> <!-- col.// -->

        <div class="col">
          <article class="card hover:border-primary h-full">
            <a href="#" class="bg-neutral-300 rounded-top overflow-hidden">
				      <img class="object-fit-cover w-100% h-48" src="placeholder.jpg">
			      </a>
            <div class="card-body">
              <time class="text-orange mb-2 d-block">Fev 12, 2025</time>
              <a href="#"><h4 class="text-xl mb-2">No news is a good news</h4></a>
              <p> Discover fascinating, unusual, and adventurous things to do. Lorem ipsum dolor sit amet, consectetur adipisicing elit </p>
            </div>
          </article>
        </div> <!-- col.// -->
      </div> <!-- row.// -->

      <br>
      <hr>


	</div> <!-- container.// -->
</section>


<footer class="py-12 bg-base">
<div class="container">
  <p class="text-center text-secondary"> Made with love in Tashkent, Copyright 2025 <br> FinalCSS - a simple css library</p>
</div>
</footer>

</body>
</html>