-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
169 lines (148 loc) · 9.7 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset="utf-8">
<title>Practical CSS Layouts</title>
<meta name="description" content="Real webpages with real-world challenges, created using CSS Grid Layout Module, Flexible Box Layout Module (Flexbox), and other new features in CSS.">
<meta name="robots" content="index, follow">
<meta name="author" content="Jaspreet Kaur Jain">
<link rel="icon" type="image/x-icon" href="favicon.png">
<!-- External CSS -->
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/style.css">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@jaspreetkjain">
<meta name="twitter:title" content="Practical CSS Layouts">
<meta name="twitter:description" content="Real webpages with real-world challenges, created using CSS Grid Layout Module, Flexible Box Layout Module (Flexbox), and other new features in CSS.">
<meta property="og:type" content="article">
<meta property="og:title" content="Practical CSS Layouts">
<meta property="og:site_name" content="Practical CSS Layouts">
<meta property="og:url" content="http://jaspreetkaur.com/practicalcsslayouts/">
<meta property="og:image" content="--">
<meta property="article:published_time" content="2018-01-10">
<meta property="article:author" content="https://www.facebook.com/jas.jain">
<!-- Place this tag in your head or just before your close body tag. -->
<script src="https://apis.google.com/js/platform.js" async defer></script>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.12';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script>window.twttr = (function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0],
t = window.twttr || {};
if (d.getElementById(id)) return t;
js = d.createElement(s);
js.id = id;
js.src = "https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
t._e = [];
t.ready = function(f) {
t._e.push(f);
};
return t;
}(document, "script", "twitter-wjs"));</script>
</head>
<body>
<div id="wrapper">
<a href="https://github.com/hsrtech/practical-layouts-with-grid" target="_blank"><img class="fork-github" src="https://camo.githubusercontent.com/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"></a>
<section>
<h1 class="logo">Practical CSS Layouts</h1>
<div class="section-inner">
<p><em>The best way to learn something new is to practice.</em> When I started learning CSS Grid, I found that most of the articles/tutorials provide a very basic layout to make it easy to explain things. But those easy layouts do not cover real word challenges that we face while working on actual projects. So I decided to design some real pages to find out the real challenges while working with new CSS layout modules.</p>
<p>I am creating these pages using CSS Grid layout Module, Flexible Box Layout Module (Flexbox), and other new features in CSS. Also, I have shared my code in this <a href="https://github.com/hsrtech/practical-layouts-with-grid" target="_blank">github repository</a> so that anybody can use the code for learning.</p>
<h2>FAQ</h2>
<div class="tab">
<input id="tab-one" type="checkbox" name="tabs">
<label for="tab-one">Can I use these designs?</label>
<div class="tab-content">
<p> I have used some open source designs available at different websites; due credit is given to each designer. Please get in touch with the respective designers if you need more details about licensing information for a design.</p>
</div>
</div>
<div class="tab">
<input id="tab-two" type="checkbox" name="tabs">
<label for="tab-two">Can I use this code?</label>
<div class="tab-content">
<p> This is an open source project, you can use the code as you like. However because code in this project is experimental, I cannot guarantee its compatibility with all browsers and devices.</p>
</div>
</div>
<div class="tab">
<input id="tab-three" type="checkbox" name="tabs">
<label for="tab-three">Can I contribute?</label>
<div class="tab-content">
<p>Yes, any contributions are welcome, if they are relevant to this project.</p>
</div>
</div>
<div class="tab">
<input id="tab-four" type="checkbox" name="tabs">
<label for="tab-four">Can I provide you a design for coding?</label>
<div class="tab-content">
<p>Yes, but all pages/designs will be available as part of this open source project. Alternatively I am available on <a href="https://www.upwork.com/fl/jaspreetkjain" target="_blank">upwork</a> for paid projects.</p>
</div>
</div>
<div class="tab">
<input id="tab-five" type="checkbox" name="tabs">
<label for="tab-five">How can I learn CSS Grid Module?</label>
<div class="tab-content">
<p>I am curating a list of learning resources (Link to be added)</p>
</div>
</div>
<h2>About Me</h2>
<p>Hi, I am Jaspreet K. Jain, I am a Frontend developer, entrepreneur, co-founder @ <a href="http://hsrtech.com/" target="_blank">HSR Technologies</a>, and mother of a lovely son.</p>
<p>Follow me on twitter <a href="https://twitter.com/JaspreetJain" target="_blank">@jaspreetkjain</a></p>
<h2>Spread the word</h2>
<p>Share my love for this project so that others can know and then use this code.</p>
<ul class="social-share">
<li>
<!-- Place this tag where you want the share button to render. -->
<div class="g-plus" data-action="share" data-href="http://jaspreetkaur.com/practicalcsslayouts/"></div>
</li>
<li>
<div class="fb-share-button" data-href="http://jaspreetkaur.com/practicalcsslayouts/" data-layout="button_count" data-size="small" data-mobile-iframe="true"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fjaspreetkaur.com%2Fpracticalcsslayouts%2F&src=sdkpreparse" class="fb-xfbml-parse-ignore">Share</a></div>
</li>
<li>
<a class="twitter-share-button" href="https://twitter.com/intent/tweet?text=Practical%20CSS%20Layouts%20by%20@jaspreetkjain">Tweet</a>
</li>
</ul>
</div>
</section>
<article>
<div class="box">
<a href="http://jaspreetkaur.com/practicalcsslayouts/layout_01/index.html" target="_blank"><img src="images/kappe.jpg" alt=""></a> <a href="http://jaspreetkaur.com/practicalcsslayouts/layout_01/blog.html" target="_blank"><img src="images/kappe-2.jpg" alt=""></a>
<header>
<h3>Kappe</h3>
<p>Kappe is a creative multipurpose web template. With its grid-based design, you can convert into a personal blog or a business web page with a few clicks of the button.</p>
<p>Design: <a href="https://colorlib.com/wp/free-psd-website-templates/" target="_blank">https://colorlib.com/wp/free-psd-website-templates/</a></p><br>
<p>
<a href="https://github.com/hsrtech/practical-css-layouts/tree/master/layout_01" target="_blank" class="btn">Source Code <i class="fa-fw select-all fab"></i></a>
<a href="http://jaspreetkaur.com/practicalcsslayouts/layout_01/index.html" target="_blank" class="btn">Preview Page 1</a> <a href="http://jaspreetkaur.com/practicalcsslayouts/layout_01/blog.html" target="_blank" class="btn">Preview Page 2</a></p>
</header>
</div>
<div class="box">
<a href="http://jaspreetkaur.com/practicalcsslayouts/layout_02/index.html" target="_blank"><img src="images/hexal.jpg" alt=""></a> </a>
<header>
<h3>Hexal</h3>
<p>Hexal is a unique portfolio template that is guaranteed to leave an impression on anyone visiting your site. It is definitely perfect for web designers, graphic designers, and anyone with a creative mind.</p>
<p>Design: <a href="https://colorlib.com/wp/free-psd-website-templates/" target="_blank">https://colorlib.com/wp/free-psd-website-templates/</a></p><br>
<p>
<a href="https://github.com/hsrtech/practical-css-layouts/tree/master/layout_02" target="_blank" class="btn">Source Code <i class="fa-fw select-all fab"></i></a>
<a href="http://jaspreetkaur.com/practicalcsslayouts/layout_02/index.html" target="_blank" class="btn">Preview Page</a></p>
</header>
</div>
</article>
</div>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-114592325-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-114592325-1');
</script>
</body>
</html>