Skip to content

Commit 98682ff

Browse files
deepak-07deepak-07
committed
style: website styling done
1 parent 9726973 commit 98682ff

File tree

4 files changed

+225
-127
lines changed

4 files changed

+225
-127
lines changed

‎Components/allComponents.html

+110-83
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,17 @@
1212
</head>
1313

1414
<body>
15-
<h2>Components</h2>
16-
<div class="body-contents">
15+
<header>
16+
<h2> <a href="https://github.com/deepak-07"><i class="fab fa-github"></i>GitHub </a></h2>
17+
</header>
18+
<nav>
1719
<div class="sideNav">
18-
20+
<a href="/getStarted.html">
21+
<h1>Bad Ui</h1>
22+
</a>
23+
<a href="/getStarted.html">Getting Started</a>
24+
<hr>
25+
<!-- <a href="#">Components</a> -->
1926
<a href="#alert-section">Alerts</a>
2027
<hr>
2128
<a href="#avatar-section">Avatar</a>
@@ -32,35 +39,39 @@ <h2>Components</h2>
3239
<hr>
3340
<a href="#list-section">List</a>
3441
<hr>
35-
<a href="#navigation-section">Navigation</a>
36-
<hr>
3742
<a href="#modal-section">Modal</a>
3843
<hr>
44+
<a href="#navigation-section">Navigation</a>
45+
<hr>
3946
<a href="#rating-section">Rating</a>
4047
<hr>
4148
<a href="#toast-section">Toast</a>
4249
<hr>
43-
<a href="#"> About</a>
50+
<a href="#about-section"> About</a>
4451
<hr>
4552
</div>
53+
</nav>
54+
<main>
4655
<div class="sections">
4756
<div class="alert-section">
4857
<a name="alert-section"></a>
4958
<h3>Alerts</h3>
50-
<div class=" alert success-alert">
51-
<i class="fas fa-check-circle"></i>
52-
<p>Hey! You got Success</p>
53-
<i class="fas fa-times"></i>
54-
</div>
55-
<div class=" alert warning-alert">
56-
<i class="fas fa-exclamation-circle"></i>
57-
<p>Careful! Warning here</p>
58-
<i class="fas fa-times"></i>
59-
</div>
60-
<div class=" alert failure-alert">
61-
<i class="fas fa-exclamation-triangle"></i>
62-
<p>Uhh!! Its a Failure</p>
63-
<i class="fas fa-times"></i>
59+
<div class="row">
60+
<div class=" alert success-alert">
61+
<i class="fas fa-check-circle"></i>
62+
<p>Hey! You got Success</p>
63+
<i class="fas fa-times"></i>
64+
</div>
65+
<div class=" alert warning-alert">
66+
<i class="fas fa-exclamation-circle"></i>
67+
<p>Careful! Warning here</p>
68+
<i class="fas fa-times"></i>
69+
</div>
70+
<div class=" alert failure-alert">
71+
<i class="fas fa-exclamation-triangle"></i>
72+
<p>Uhh!! Its a Failure</p>
73+
<i class="fas fa-times"></i>
74+
</div>
6475
</div>
6576
</div>
6677
<div class="avatar-section">
@@ -88,49 +99,54 @@ <h3>Badge</h3>
8899
<div class="button-section">
89100
<a name="button-section"></a>
90101
<h3>Buttons</h3>
91-
<button class="btn btn-primary">Primary Button</button>
92-
<button class="btn btn-secondary">Secondary Button</button>
93-
<button class="btn btn-transparent">TertiaryButton</button>
94-
<button class="btn btn-icon"><i class="fas fa-home"></i></button>
95-
<button class="btn btn-floating"><i class="fas fa-plus"></i></button>
96-
<button class="btn btn-floating"><i class="far fa-heart"></i></button>
102+
<div class="row">
103+
<button class="btn btn-primary">Primary Button</button>
104+
<button class="btn btn-secondary">Secondary Button</button>
105+
<button class="btn btn-outline">TertiaryButton</button>
106+
<button class="btn btn-icon"><i class="fas fa-home"></i></button>
107+
<button class="btn btn-floating"><i class="fas fa-plus"></i></button>
108+
<button class="btn btn-floating"><i class="far fa-heart"></i></button>
109+
</div>
97110
</div>
98111
<div class="card-section">
99112
<a name="card-section"></a>
100113
<h3>Cards</h3>
101-
<div class="card">
102-
<div class="card-badge cb-horizontal "> In Progress</div>
103-
<div class="card-title">
104-
<h2>Title</h2>
105-
<div class="card-body">
106-
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Velit labore, quia expedita aliquam non odio laudantium dolores cupiditate alias in quas culpa aliquid reiciendis dolorem odit nesciunt ratione numquam nihil.</p>
107-
</div>
108-
</div>
109-
</div>
110-
<div class="card">
111-
<div class="card-badge cb-diagonal "> New</div>
112-
<div class="card-body">
113-
<img src="https://assets.myntassets.com/h_1440,q_90,w_1080/v1/assets/images/9909507/2019/11/11/27cd5aac-362b-4f8a-892d-4713471eca691573460784459-Levis-Men-Shirts-7801573460781080-4.jpg" alt="">
114+
<div class="row">
115+
116+
<div class="card">
117+
<div class="card-badge cb-horizontal "> In Progress</div>
114118
<div class="card-title">
115-
<h2> Levis </h2>
119+
<h2>Title</h2>
120+
<div class="card-body">
121+
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Velit labore, quia expedita aliquam non odio laudantium dolores cupiditate alias in quas culpa aliquid reiciendis dolorem odit nesciunt ratione numquam nihil.</p>
122+
</div>
116123
</div>
117-
<p>Men Red & White Slim Fit Checked Casual Shirt</p>
118-
<span class="price">Rs. 1259</span>
119-
<button class="btn btn-primary">Add to Cart</button>
120124
</div>
125+
<div class="card">
126+
<div class="card-badge cb-diagonal "> New</div>
127+
<div class="card-body">
128+
<img src="https://assets.myntassets.com/h_1440,q_90,w_1080/v1/assets/images/9909507/2019/11/11/27cd5aac-362b-4f8a-892d-4713471eca691573460784459-Levis-Men-Shirts-7801573460781080-4.jpg" alt="">
129+
<div class="card-title">
130+
<h2> Levis </h2>
131+
</div>
132+
<p>Men Red & White Slim Fit Checked Casual Shirt</p>
133+
<span class="price">Rs. 1259</span>
134+
<button class="btn btn-primary">Add to Cart</button>
135+
</div>
121136

122-
</div>
123-
<div class="card">
124-
<div class="card-badge cb-horizontal"> Sale</div>
125-
<div class="card-body">
126-
<img src="https://assets.myntassets.com/h_1440,q_90,w_1080/v1/assets/images/11056154/2019/12/5/30b0017d-7e72-4d40-9633-ef78d01719741575541717470-AHIKA-Women-Black--Green-Printed-Straight-Kurta-990157554171-1.jpg" alt="">
127-
<div class="card-title">
128-
<h2> AHIKA</h2>
137+
</div>
138+
<div class="card">
139+
<div class="card-badge cb-horizontal"> Sale</div>
140+
<div class="card-body">
141+
<img src="https://assets.myntassets.com/h_1440,q_90,w_1080/v1/assets/images/11056154/2019/12/5/30b0017d-7e72-4d40-9633-ef78d01719741575541717470-AHIKA-Women-Black--Green-Printed-Straight-Kurta-990157554171-1.jpg" alt="">
142+
<div class="card-title">
143+
<h2> AHIKA</h2>
144+
</div>
145+
<p>Women Black & Green Printed Straight Kurta</p>
146+
<span class="price">Rs. 688</span>
147+
<button class="btn btn-primary">Add to Cart</button>
148+
<button class="btn btn-floating"><i class="far fa-heart"></i></button>
129149
</div>
130-
<p>Women Black & Green Printed Straight Kurta</p>
131-
<span class="price">Rs. 688</span>
132-
<button class="btn btn-primary">Add to Cart</button>
133-
<button class="btn btn-floating"><i class="far fa-heart"></i></button>
134150
</div>
135151
</div>
136152
</div>
@@ -170,27 +186,47 @@ <h3>Stacked List</h3>
170186
<li>item 3</li>
171187
</div>
172188
</div>
189+
<div class="modal-section">
190+
<a name="modal-section"></a>
191+
<h3>Modals</h3>
192+
<div class="modal-container">
193+
<div class="modal-title">
194+
<h3>Do you really want to delete it?</h3>
195+
</div>
196+
<div class="modal-body">
197+
This might include you loss of data permanently !
198+
<div class="modal-buttons">
199+
<button class="btn btn-secondary">Yes</button>
200+
<button class="btn btn-primary">No</button>
201+
</div>
202+
</div>
203+
</div>
204+
</div>
173205
<div class="navigation-section">
174206
<a name="navigation-section"></a>
175207
<h3>Navigations</h3>
176-
<div class="nav-bar right-nav">
177-
<span class="nav-logo">
208+
<div class="row">
209+
<div class="nav-bar right-nav">
210+
<span class="nav-logo">
178211
<li>LoGo</li>
179212
</span>
180-
<div class="nav-pages">
181-
<li>Home</li>
182-
<li>About</li>
183-
<li class="nav-active">Contact</li>
213+
<div class="nav-pages">
214+
<li>Home</li>
215+
<li>About</li>
216+
<li class="nav-active">Contact</li>
217+
</div>
184218
</div>
185219
</div>
186-
<div class="nav-bar center-nav">
187-
<span class="nav-logo">
220+
<div class="row">
221+
<div class="nav-bar center-nav">
222+
<span class="nav-logo">
188223
<li>LoGo</li>
189224
</span>
190-
<div class="nav-pages">
191-
<li>Home</li>
192-
<li>About</li>
193-
<li class="nav-active">Contact</li>
225+
<div class="nav-pages">
226+
<li>Home</li>
227+
<li>About</li>
228+
<li class="nav-active">Contact</li>
229+
</div>
194230
</div>
195231
</div>
196232
</div>
@@ -205,22 +241,6 @@ <h3>Ratings</h3>
205241
<span><i class="rating fas fa-star"></i></span>
206242
</div>
207243
</div>
208-
<div class="modal-section">
209-
<a name="modal-section"></a>
210-
<h3>Modals</h3>
211-
<div class="modal-container">
212-
<div class="modal-title">
213-
<h3>Do you really want to delete it?</h3>
214-
</div>
215-
<div class="modal-body">
216-
This might include you loss of data permanently !
217-
<div class="modal-buttons">
218-
<button class="btn btn-secondary">Yes</button>
219-
<button class="btn btn-primary">No</button>
220-
</div>
221-
</div>
222-
</div>
223-
</div>
224244
<div class="toast-section">
225245
<a name="toast-section"></a>
226246
<h3>Toasts</h3>
@@ -233,8 +253,15 @@ <h3>Play with Toast</h3>
233253
</div>
234254
</div>
235255
</div>
256+
<div class="about-section">
257+
<a name="about-section"></a>
258+
<h3>About</h3>
259+
A small place where you will find all basic used components at one place.
260+
261+
</div>
236262
</div>
237-
</div>
263+
</main>
264+
238265
</body>
239266

240267
</html>

‎Components/component.css

+48-6
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,24 @@
1212
--offwhite-color: #a1a5ad;
1313
}
1414

15+
h1 {
16+
color: var(--white-color);
17+
}
18+
19+
body {
20+
font-family: 'Heebo', sans-serif;
21+
}
22+
1523
h3 {
1624
display: block;
25+
color: var(--primary-color);
26+
}
27+
28+
.row {
29+
display: flex;
30+
flex-direction: row;
31+
justify-content: space-evenly;
32+
padding: 5px 5px;
1733
}
1834

1935
.alert-section {
@@ -88,7 +104,7 @@ h3 {
88104
display: fixed;
89105
position: absolute;
90106
top: 70%;
91-
left: 10%;
107+
left: 8%;
92108
width: 10px;
93109
height: 10px;
94110
border-radius: 50%;
@@ -114,7 +130,7 @@ h3 {
114130
position: absolute;
115131
color: var(--primary-color);
116132
top: 5%;
117-
left: 15%;
133+
left: 12%;
118134
width: 15px;
119135
height: 15px;
120136
}
@@ -149,7 +165,7 @@ h3 {
149165
border-radius: 7px;
150166
}
151167

152-
.btn-transparent {
168+
.btn-outline {
153169
border: 2px solid var(--primary-color);
154170
background-color: var(--white-color);
155171
border-radius: 7px;
@@ -259,7 +275,8 @@ h3 {
259275
border: 2px solid var(--primary-color);
260276
outline: none;
261277
}
262-
.input-label{
278+
279+
.input-label {
263280
font-weight: bold;
264281
padding: 5px 5px;
265282
}
@@ -287,10 +304,12 @@ h3 {
287304
flex-direction: row;
288305
list-style: none;
289306
padding: 10px 10px;
307+
width: 300%;
290308
background-color: var(--secondary-color);
291309
border: 2px solid var(--primary-color);
292310
color: var(--white-color);
293311
font-weight: bold;
312+
border-radius: 5px;
294313
}
295314

296315
.right-nav {
@@ -318,9 +337,32 @@ h3 {
318337
background-color: var(--primary-color);
319338
border-radius: 10px;
320339
}
321-
.rating{
340+
341+
.rating {
322342
color: var(--secondary-color);
323343
}
324-
.checked{
344+
345+
.checked {
346+
color: var(--primary-color);
347+
}
348+
349+
.modal-container {
350+
display: block;
351+
z-index: 1;
352+
padding: 5px 5px;
353+
text-align: center;
354+
width: 200px;
355+
background-color: var(--white-color);
325356
color: var(--primary-color);
357+
border-radius: 10px;
358+
}
359+
360+
.toast-container {
361+
display: block;
362+
padding: 5px 5px;
363+
text-align: center;
364+
width: 200px;
365+
background-color: var(--secondary-color);
366+
color: var(--white-color);
367+
border-radius: 10px;
326368
}

0 commit comments

Comments
 (0)