Skip to content

Commit 98c9abd

Browse files
Wcoder547Wcoder547
committed
Advance Portion complete
1 parent 93e80b5 commit 98c9abd

File tree

8 files changed

+1540
-1
lines changed

8 files changed

+1540
-1
lines changed

‎advance/.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules

‎advance/index.html‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
!<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Tailwind Advance</title>
7+
<link rel="stylesheet" href="./output.css" />
8+
</head>
9+
<body class="bg-white h-screen">
10+
<ul
11+
class="bg-black text-white flex [&>*]:flex gap-12 justify-center mb-5 p-5 text-center"
12+
>
13+
<li>
14+
<a href="#home">Home</a>
15+
</li>
16+
<li class="text-amber-500"><a href="#About">About</a></li>
17+
<li>
18+
<a href="#contactus" class="active">Contact-us</a>
19+
</li>
20+
<li class="text-right"><a href="#Logout">Logout</a></li>
21+
</ul>
22+
23+
<hr class="h-3 mt-5" />
24+
<h1 class="bg-cyan-500 text-5xl text-center">Screen Break-Points</h1>
25+
<hr class="h-3 mt-5" />
26+
27+
<!-- <div class="bg-pink-400 md:bg-red-400 lg:bg-cyan-500 sm:bd-gray-500">
28+
Hello Tailwind | check syle.css
29+
</div> -->
30+
31+
<hr class="h-3 mt-5" />
32+
<h1 class="bg-orange-500 text-5xl text-center text-white">
33+
Margin padding and space customization
34+
</h1>
35+
<hr class="h-3 mt-5" />
36+
37+
<!-- <div class="bg-cyan-400 p-1">custom padding in Tailwind</div>
38+
<div class="bg-red-400 p-1">custom padding in Tailwind</div>
39+
<div class="bg-green-400 p-1">custom padding in Tailwind</div> -->
40+
<!-- <div class="bg-black p-c-50 text-white">custom padding in Tailwind</div> -->
41+
42+
<hr class="h-3 mt-5" />
43+
<h1 class="bg-pink-500 text-5xl text-center text-white">
44+
Dark Mode with os
45+
</h1>
46+
<hr class="h-3 mt-5" />
47+
48+
<!-- <div class="dark:bg-slate-800">
49+
<h1>Dark Mode test with Tailwind css</h1>
50+
</div> -->
51+
52+
<button class="btn-primary">submit</button>
53+
</body>
54+
</html>

‎advance/instructions.txt‎

Whitespace-only changes.

‎advance/output.css‎

Lines changed: 302 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,302 @@
1+
/*! tailwindcss v4.1.10 | MIT License | https://tailwindcss.com */
2+
@layer theme, base, components, utilities;
3+
@layer theme {
4+
:root, :host {
5+
--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
6+
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
7+
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
8+
"Courier New", monospace;
9+
--color-red-400: oklch(70.4% 0.191 22.216);
10+
--color-orange-500: oklch(70.5% 0.213 47.604);
11+
--color-amber-500: oklch(76.9% 0.188 70.08);
12+
--color-green-400: oklch(79.2% 0.209 151.711);
13+
--color-cyan-400: oklch(78.9% 0.154 211.53);
14+
--color-cyan-500: oklch(71.5% 0.143 215.221);
15+
--color-blue-500: oklch(62.3% 0.214 259.815);
16+
--color-blue-700: oklch(48.8% 0.243 264.376);
17+
--color-pink-400: oklch(71.8% 0.202 349.761);
18+
--color-pink-500: oklch(65.6% 0.241 354.308);
19+
--color-slate-800: oklch(27.9% 0.041 260.031);
20+
--color-black: #000;
21+
--color-white: #fff;
22+
--spacing: 0.25rem;
23+
--text-5xl: 3rem;
24+
--text-5xl--line-height: 1;
25+
--default-font-family: var(--font-sans);
26+
--default-mono-font-family: var(--font-mono);
27+
--padding-1: 50px;
28+
--padding-c-50: 500px;
29+
}
30+
}
31+
@layer base {
32+
*, ::after, ::before, ::backdrop, ::file-selector-button {
33+
box-sizing: border-box;
34+
margin: 0;
35+
padding: 0;
36+
border: 0 solid;
37+
}
38+
html, :host {
39+
line-height: 1.5;
40+
-webkit-text-size-adjust: 100%;
41+
tab-size: 4;
42+
font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
43+
font-feature-settings: var(--default-font-feature-settings, normal);
44+
font-variation-settings: var(--default-font-variation-settings, normal);
45+
-webkit-tap-highlight-color: transparent;
46+
}
47+
hr {
48+
height: 0;
49+
color: inherit;
50+
border-top-width: 1px;
51+
}
52+
abbr:where([title]) {
53+
-webkit-text-decoration: underline dotted;
54+
text-decoration: underline dotted;
55+
}
56+
h1, h2, h3, h4, h5, h6 {
57+
font-size: inherit;
58+
font-weight: inherit;
59+
}
60+
a {
61+
color: inherit;
62+
-webkit-text-decoration: inherit;
63+
text-decoration: inherit;
64+
}
65+
b, strong {
66+
font-weight: bolder;
67+
}
68+
code, kbd, samp, pre {
69+
font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
70+
font-feature-settings: var(--default-mono-font-feature-settings, normal);
71+
font-variation-settings: var(--default-mono-font-variation-settings, normal);
72+
font-size: 1em;
73+
}
74+
small {
75+
font-size: 80%;
76+
}
77+
sub, sup {
78+
font-size: 75%;
79+
line-height: 0;
80+
position: relative;
81+
vertical-align: baseline;
82+
}
83+
sub {
84+
bottom: -0.25em;
85+
}
86+
sup {
87+
top: -0.5em;
88+
}
89+
table {
90+
text-indent: 0;
91+
border-color: inherit;
92+
border-collapse: collapse;
93+
}
94+
:-moz-focusring {
95+
outline: auto;
96+
}
97+
progress {
98+
vertical-align: baseline;
99+
}
100+
summary {
101+
display: list-item;
102+
}
103+
ol, ul, menu {
104+
list-style: none;
105+
}
106+
img, svg, video, canvas, audio, iframe, embed, object {
107+
display: block;
108+
vertical-align: middle;
109+
}
110+
img, video {
111+
max-width: 100%;
112+
height: auto;
113+
}
114+
button, input, select, optgroup, textarea, ::file-selector-button {
115+
font: inherit;
116+
font-feature-settings: inherit;
117+
font-variation-settings: inherit;
118+
letter-spacing: inherit;
119+
color: inherit;
120+
border-radius: 0;
121+
background-color: transparent;
122+
opacity: 1;
123+
}
124+
:where(select:is([multiple], [size])) optgroup {
125+
font-weight: bolder;
126+
}
127+
:where(select:is([multiple], [size])) optgroup option {
128+
padding-inline-start: 20px;
129+
}
130+
::file-selector-button {
131+
margin-inline-end: 4px;
132+
}
133+
::placeholder {
134+
opacity: 1;
135+
}
136+
@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
137+
::placeholder {
138+
color: currentcolor;
139+
@supports (color: color-mix(in lab, red, red)) {
140+
color: color-mix(in oklab, currentcolor 50%, transparent);
141+
}
142+
}
143+
}
144+
textarea {
145+
resize: vertical;
146+
}
147+
::-webkit-search-decoration {
148+
-webkit-appearance: none;
149+
}
150+
::-webkit-date-and-time-value {
151+
min-height: 1lh;
152+
text-align: inherit;
153+
}
154+
::-webkit-datetime-edit {
155+
display: inline-flex;
156+
}
157+
::-webkit-datetime-edit-fields-wrapper {
158+
padding: 0;
159+
}
160+
::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
161+
padding-block: 0;
162+
}
163+
:-moz-ui-invalid {
164+
box-shadow: none;
165+
}
166+
button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
167+
appearance: button;
168+
}
169+
::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
170+
height: auto;
171+
}
172+
[hidden]:where(:not([hidden="until-found"])) {
173+
display: none !important;
174+
}
175+
}
176+
@layer utilities {
177+
.mt-5 {
178+
margin-top: calc(var(--spacing) * 5);
179+
}
180+
.mb-5 {
181+
margin-bottom: calc(var(--spacing) * 5);
182+
}
183+
.ml-10 {
184+
margin-left: calc(var(--spacing) * 10);
185+
}
186+
.flex {
187+
display: flex;
188+
}
189+
.h-3 {
190+
height: calc(var(--spacing) * 3);
191+
}
192+
.h-screen {
193+
height: 100vh;
194+
}
195+
.justify-center {
196+
justify-content: center;
197+
}
198+
.gap-12 {
199+
gap: calc(var(--spacing) * 12);
200+
}
201+
.rounded {
202+
border-radius: 0.25rem;
203+
}
204+
.bg-black {
205+
background-color: var(--color-black);
206+
}
207+
.bg-blue-500 {
208+
background-color: var(--color-blue-500);
209+
}
210+
.bg-cyan-400 {
211+
background-color: var(--color-cyan-400);
212+
}
213+
.bg-cyan-500 {
214+
background-color: var(--color-cyan-500);
215+
}
216+
.bg-green-400 {
217+
background-color: var(--color-green-400);
218+
}
219+
.bg-orange-500 {
220+
background-color: var(--color-orange-500);
221+
}
222+
.bg-pink-400 {
223+
background-color: var(--color-pink-400);
224+
}
225+
.bg-pink-500 {
226+
background-color: var(--color-pink-500);
227+
}
228+
.bg-red-400 {
229+
background-color: var(--color-red-400);
230+
}
231+
.bg-white {
232+
background-color: var(--color-white);
233+
}
234+
.p-1 {
235+
padding: var(--padding-1);
236+
}
237+
.p-2 {
238+
padding: calc(var(--spacing) * 2);
239+
}
240+
.p-5 {
241+
padding: calc(var(--spacing) * 5);
242+
}
243+
.p-c-50 {
244+
padding: var(--padding-c-50);
245+
}
246+
.text-center {
247+
text-align: center;
248+
}
249+
.text-right {
250+
text-align: right;
251+
}
252+
.text-5xl {
253+
font-size: var(--text-5xl);
254+
line-height: var(--tw-leading, var(--text-5xl--line-height));
255+
}
256+
.text-amber-500 {
257+
color: var(--color-amber-500);
258+
}
259+
.text-white {
260+
color: var(--color-white);
261+
}
262+
.hover\:bg-blue-700 {
263+
&:hover {
264+
@media (hover: hover) {
265+
background-color: var(--color-blue-700);
266+
}
267+
}
268+
}
269+
.md\:bg-red-400 {
270+
@media (width >= 768px) {
271+
background-color: var(--color-red-400);
272+
}
273+
}
274+
.lg\:bg-cyan-500 {
275+
@media (width >= 1024px) {
276+
background-color: var(--color-cyan-500);
277+
}
278+
}
279+
.dark\:bg-slate-800 {
280+
@media (prefers-color-scheme: dark) {
281+
background-color: var(--color-slate-800);
282+
}
283+
}
284+
.\[\&\>\*\]\:flex {
285+
&>* {
286+
display: flex;
287+
}
288+
}
289+
}
290+
@layer components {
291+
.btn-primary {
292+
margin-left: calc(var(--spacing) * 10);
293+
border-radius: 0.25rem;
294+
background-color: var(--color-blue-500);
295+
padding: calc(var(--spacing) * 2);
296+
&:hover {
297+
@media (hover: hover) {
298+
background-color: var(--color-blue-700);
299+
}
300+
}
301+
}
302+
}

0 commit comments

Comments
 (0)