Skip to content

Commit e7690b3

Browse files
shariquesharique
committed
Initial commit,
0 parents  commit e7690b3

File tree

13 files changed

+1734
-0
lines changed

13 files changed

+1734
-0
lines changed

‎2-col-flex/index.htm‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<html></html>

‎Readme.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Design and Layout Examples
2+
3+
This contains the designs and layouts examples that I created for learning or personal use.

‎assets/css/reset.css‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
/* Tkekn from https://www.joshwcomeau.com/css/custom-css-reset/ */
2+
/* 1. Use a more-intuitive box-sizing model */
3+
*,
4+
*::before,
5+
*::after {
6+
box-sizing: border-box;
7+
}
8+
9+
/* 2. Remove default margin */
10+
* {
11+
margin: 0;
12+
}
13+
14+
/* 3. Enable keyword animations */
15+
@media (prefers-reduced-motion: no-preference) {
16+
html {
17+
interpolate-size: allow-keywords;
18+
}
19+
}
20+
21+
body {
22+
/* 4. Add accessible line-height */
23+
line-height: 1.5;
24+
/* 5. Improve text rendering */
25+
-webkit-font-smoothing: antialiased;
26+
}
27+
28+
/* 6. Improve media defaults */
29+
img,
30+
picture,
31+
video,
32+
canvas,
33+
svg {
34+
display: block;
35+
max-width: 100%;
36+
}
37+
38+
/* 7. Inherit fonts for form controls */
39+
input,
40+
button,
41+
textarea,
42+
select {
43+
font: inherit;
44+
}
45+
46+
/* 8. Avoid text overflows */
47+
p,
48+
h1,
49+
h2,
50+
h3,
51+
h4,
52+
h5,
53+
h6 {
54+
overflow-wrap: break-word;
55+
}
56+
57+
/* 9. Improve line wrapping */
58+
p {
59+
text-wrap: pretty;
60+
}
61+
h1,
62+
h2,
63+
h3,
64+
h4,
65+
h5,
66+
h6 {
67+
text-wrap: balance;
68+
}
69+
70+
/*
71+
10. Create a root stacking context
72+
*/
73+
#root,
74+
#__next {
75+
isolation: isolate;
76+
}

‎flex-examples/.gitignore‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎flex-examples/index.html‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite App</title>
8+
</head>
9+
<body>
10+
<header>
11+
<h1>Header</h1>
12+
</header>
13+
<nav>
14+
<ul class="inline">
15+
<li><a href="#">Home</a></li>
16+
<li><a href="#">About</a></li>
17+
<li><a href="#">Services</a></li>
18+
<li><a href="#">Contact</a></li>
19+
</ul>
20+
</nav>
21+
22+
<main>
23+
<div class="container">
24+
<section class="main-content">
25+
<h2>Main Content</h2>
26+
<p>This is the main content area.</p>
27+
<p>
28+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
29+
Repellendus, quo. Voluptate nisi ut impedit ad
30+
reprehenderit nemo assumenda omnis. At esse quae
31+
impedit! Laborum pariatur, aperiam non commodi quod
32+
iusto? Lorem ipsum dolor sit amet consectetur
33+
adipisicing elit. Repellendus, quo. Voluptate nisi ut
34+
impedit ad reprehenderit nemo assumenda omnis. At esse
35+
quae impedit! Laborum pariatur, aperiam non commodi quod
36+
iusto? Lorem ipsum dolor sit amet consectetur
37+
adipisicing elit.
38+
</p>
39+
<p>
40+
Repellendus, quo. Voluptate nisi ut impedit ad
41+
reprehenderit nemo assumenda omnis. At esse quae
42+
impedit! Laborum pariatur, aperiam non commodi quod
43+
iusto?
44+
</p>
45+
</section>
46+
<aside class="sidebar">
47+
<h2>Sidebar</h2>
48+
<p>This is the sidebar content.</p>
49+
</aside>
50+
</div>
51+
</main>
52+
<footer>
53+
<p>Footer</p>
54+
</footer>
55+
<script type="module" src="/src/main.js"></script>
56+
</body>
57+
</html>

0 commit comments

Comments
 (0)