-
Notifications
You must be signed in to change notification settings - Fork 0
/
bd.html
129 lines (122 loc) · 6.01 KB
/
bd.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
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<link href="http://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css"/>
<link href="http://fonts.googleapis.com/css?family=Montez" rel="stylesheet" type="text/css"/>
<link href="http://fonts.googleapis.com/css?family=Roboto:400,300,400italic,700,100italic,100" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jquery2.min.js"></script>
<script type="text/javascript" src="javascript.js"></script>
</head>
<body>
<div class="nav">
<center>
<h1>browser<b>Dzine</b></h1><span class="tagline"> </span>
<p><b>browserDzine</b> is a web app built for web designers and customers who wish to get their websites designed. It is inspired by the idea that web designing should start in the browser itself rather than on Photoshop. Hope you like using it. It's still in its beta version so there are many more enhancements to come. It can be found on <a href="https://github.com/rishabhaggarwal2/browserDzine">GitHub</a> with a Standard MIT License.
<br>
Made by <a href="http://creativiz.net/rishabh/">Rishabh Aggarwal</a> on <em>Diwali</em>.
</p>
</center>
</div>
<div class="content">
<div class="adjectives">
<h2>What describes your design?</h2>
<p>Here, Enter what <b>adjectives</b> describe your design. These include adjectives relating to your target audience and the ones that set the mood of your page.</p>
<div class="adjective_container">
<input type="text" name="enterAdjectives" placeholder="Adjectives" class="enterhere"/>
</div><br/>
<div class="done">Done!</div><br/>
<hr/>
</div>
<div class="variables">
<center>
<h2>Design Variables</h2>
<p>Here, Set the properties and basic layout material like <b>colors</b>, <b>fonts</b> and other <i>variables</i> that go according to your set adjectives.</p>
</center>
<div class="col2">
<h3>Colors</h3>
<div class="suggestions">
<h4>Suggestions</h4>
<p>
These are the color palettes that suit your choice of adjectives. If you don't see any, the library can't match your adjectives to any stored color palette. Feel free to make a custom one.
</p>
</div>
<h4>Custom</h4>
<div class="custom">
<p>
Don't like the suggestions? Just type in the swatched below the hex code of the color you like and get creative.
</p>
<textarea class="swatch1"></textarea>
<textarea class="swatch2"></textarea>
<textarea class="swatch3"></textarea>
<textarea class="swatch4"></textarea>
<textarea class="swatch5"></textarea>
</div><br/><a href="https://kuler.adobe.com/create/color-wheel/" target="_blank">https://kuler.adobe.com/create/color-wheel/</a>
</div>
<div class="col1">
<h3>Fonts</h3>
<div class="fontsuggestions">
<h4>Suggestions </h4>
<p>
These are the typefaces that suit your choice of adjectives. If you don't see any, the library can't match your adjectives to any stored typeface. Feel free to enter a custom one.
</p>
<div class="suggestion">
<div class="putemhere"></div>
</div>
</div><br/>
<div class="fontcustom">
<h4>Custom </h4>
<p>
Enter a url for font you want to use in headings in first box and the name of the font in the second box. Similarly, Enter the same for the font you want in texts in the second two boxes.<b>Press enter in the name boxes to load the fonts onto the page. Then click on grey box again to load to sample.</b>
<br>
The url is like <em>http://fonts.googleapis.com/css?family=Your+Font+Here</em>
</p>
<div class="suggestion">
<h4 class="customheading"></h4>
<input type="url" placeholder="Enter url from google fonts here"/>
<input type="name" placeholder="Enter name of font here!"/>
<p class="customtext"></p>
<input type="url" placeholder="Enter url from google fonts here"/>
<input type="name" placeholder="Enter name of font here!"/>
</div>
</div><br/><a href="http://www.google.com/fonts" target="_blank">http://www.google.com/fonts</a>
</div><br/><br/>
<div class="done2">Show Sample!</div>
<hr/>
</div>
</div>
<div class="sample"> <span>Typography</span>
<h1>This is the largest of all headings</h1>
<h2>This is the smaller sub heading</h2>
<h3>This is the smaller sub sub heading</h3>
<h4>This is the smallest sub heading</h4>
<p>
<Cum>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</Cum>
</p><img src="sample.jpg"/>
<p class="caption"><b>Caption</b>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<blockquote>
<p>
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
<br>
<em>Rishabh Aggarwal</em>
</p>
</blockquote>
<form>
<input type="name" placeholder="Name"/><br/>
<textarea rows="5" cols="5">Message Here! </textarea>
</form>
<div class="circles">
<center>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c4"></div>
<div class="c5"></div>
</center>
</div>
</div>
<div class="copythis">
</div>
<br>
<div class="footer">
<p><em>Made with love</em> by <a href="http://creativiz.net/rishabh/">Rishabh Aggarwal</a> </p>
</div>
</body>