Skip to content

Commit 778f6a5

Browse files
SuyashLakhotiaSuyashLakhotia
committed
Revised & Moved Styles for Cards & Jumbotron to 'sass/layout'
1 parent d86a1d4 commit 778f6a5

File tree

8 files changed

+206
-171
lines changed

8 files changed

+206
-171
lines changed

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,9 +46,9 @@
4646
- `src/*.html`: Gulp copies them over to `dist/`.
4747

4848
##### Sass Files
49-
- `sass/layout/`: Contains styles for the navbar and footer.
49+
- `sass/layout/`: Contains styles for the navbar, jumbotron, cards & footer.
5050
- `sass/pages/`: Contains page-specific styles.
51-
- `sass/utils/`: Contains globally used variables, mixins & styles.
51+
- `sass/utils/`: Contains globally used variables, mixins & base styles.
5252
- `sass/main.scss`: Imports all the necessary Sass files.
5353

5454
## Bower Components

‎dist/css/cards.css‎

Lines changed: 49 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -228,25 +228,11 @@ Navbar Styles
228228
}
229229
}
230230

231-
/*******************************************************************************
232-
Footer Styles
233-
*******************************************************************************/
234-
.footer {
235-
width: 100%;
236-
padding: 10px 0 0 0;
237-
color: #fff;
238-
background: #000;
239-
}
240-
241-
.footer p {
242-
font-size: 14px;
243-
}
244-
245231
/*******************************************************************************
246232
Jumbotron Styles
247233
*******************************************************************************/
248234
.jumbotron-wrapper {
249-
padding: 0 10px;
235+
padding: 0 40px;
250236
color: #fff;
251237
background: #000;
252238
position: relative;
@@ -325,19 +311,19 @@ Jumbotron Styles
325311
font-size: 720%;
326312
}
327313
.jumbotron-small {
328-
height: 70vh;
314+
height: 60vh;
329315
}
330316
.jumbotron-small .jumbotron-content {
331317
position: relative;
332-
top: 50%;
318+
top: 55%;
333319
-webkit-transform: translateY(-50%);
334320
-moz-transform: translateY(-50%);
335321
-ms-transform: translateY(-50%);
336322
-o-transform: translateY(-50%);
337323
transform: translateY(-50%);
338324
}
339325
.jumbotron-small .jumbotron-content #title {
340-
font-size: 600%;
326+
font-size: 500%;
341327
}
342328
}
343329

@@ -362,23 +348,59 @@ Jumbotron Styles
362348
}
363349

364350
/*******************************************************************************
365-
Main Content Styles
351+
Cards Styles
366352
*******************************************************************************/
367-
.content-home {
353+
.card-wrapper {
368354
position: relative;
369-
padding-top: 20px;
370-
padding-bottom: 20px;
355+
background: #fff;
356+
box-shadow: 0 0 5px #777;
371357
}
372358

373-
.content-home .card-wrap {
374-
position: relative;
359+
.card-big {
375360
margin: 20px 0;
376361
padding: 20px 30px 40px 30px;
377-
background: #fff;
378-
box-shadow: 0 0 5px #777;
379362
}
380363

381-
.content-home .card-wrap h3 {
364+
.card-small {
365+
margin: 10px 0;
366+
padding: 10px 40px 10px 40px;
367+
}
368+
369+
@media only screen and (max-width: 767px) {
370+
.card-big {
371+
padding-right: 10px;
372+
padding-left: 10px;
373+
}
374+
.card-small {
375+
margin: 25px 0;
376+
padding: 20px 10px 30px 10px;
377+
}
378+
}
379+
380+
/*******************************************************************************
381+
Footer Styles
382+
*******************************************************************************/
383+
.footer {
384+
width: 100%;
385+
padding: 10px 0 0 0;
386+
color: #fff;
387+
background: #000;
388+
}
389+
390+
.footer p {
391+
font-size: 14px;
392+
}
393+
394+
/*******************************************************************************
395+
Home Page Styles
396+
*******************************************************************************/
397+
.content-home {
398+
position: relative;
399+
padding-top: 20px;
400+
padding-bottom: 20px;
401+
}
402+
403+
.content-home .card-big h3 {
382404
font-family: "Raleway", "Lucida Grande", sans-serif;
383405
font-weight: 400;
384406
margin-bottom: 30px;
@@ -449,9 +471,4 @@ Main Content Styles
449471
color: #696969;
450472
}
451473

452-
@media only screen and (max-width: 767px) {
453-
.content-home .card-wrap {
454-
padding-right: 10px;
455-
padding-left: 10px;
456-
}
457474
}

‎dist/index.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ <h2 id="tagline">Bootstrap template for card-based design</h2>
6464

6565
<!-- Main Content -->
6666
<div class="container content-home">
67-
<div class="card-wrap wow fadeInUp">
67+
<div class="card-wrapper card-big wow fadeInUp">
6868
<div>
6969
<h3><span id="card1"></span><i class="fa fa-user"></i> Card 1</h3>
7070
</div>
@@ -86,7 +86,7 @@ <h3><span id="card1"></span><i class="fa fa-user"></i> Card 1</h3>
8686
</div>
8787
</div>
8888

89-
<div class="card-wrap wow fadeInUp">
89+
<div class="card-wrapper card-big wow fadeInUp">
9090
<div>
9191
<h3><span id="card2"></span><i class="fa fa-bookmark"></i> Card 2</h3>
9292
</div>
@@ -106,7 +106,7 @@ <h3><span id="card2"></span><i class="fa fa-bookmark"></i> Card 2</h3>
106106
</div>
107107
</div>
108108

109-
<div class="card-wrap wow fadeInUp">
109+
<div class="card-wrapper card-big wow fadeInUp">
110110
<div>
111111
<h3><span id="card3"></span><i class="fa fa-cog fa-spin"></i> Card 3</h3>
112112
</div>
@@ -179,7 +179,7 @@ <h5 class="stamp">Medium</h5>
179179
</div>
180180
</div>
181181

182-
<div class="card-wrap wow fadeInUp">
182+
<div class="card-wrapper card-big wow fadeInUp">
183183
<div>
184184
<h3><span id="card4"></span><i class="fa fa-terminal"></i> Card 4</h3>
185185
</div>
@@ -214,7 +214,7 @@ <h6 class="project-details">Detail 1 | Detail 2 | Detail 3</h6>
214214
</div>
215215
</div>
216216

217-
<div class="card-wrap contact wow fadeInUp">
217+
<div class="card-wrapper card-big contact wow fadeInUp">
218218
<div>
219219
<h3><span id="contact"></span>Contact</h3>
220220
</div>

‎src/index.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ <h2 id="tagline">Bootstrap template for card-based design</h2>
6464

6565
<!-- Main Content -->
6666
<div class="container content-home">
67-
<div class="card-wrap wow fadeInUp">
67+
<div class="card-wrapper card-big wow fadeInUp">
6868
<div>
6969
<h3><span id="card1"></span><i class="fa fa-user"></i> Card 1</h3>
7070
</div>
@@ -86,7 +86,7 @@ <h3><span id="card1"></span><i class="fa fa-user"></i> Card 1</h3>
8686
</div>
8787
</div>
8888

89-
<div class="card-wrap wow fadeInUp">
89+
<div class="card-wrapper card-big wow fadeInUp">
9090
<div>
9191
<h3><span id="card2"></span><i class="fa fa-bookmark"></i> Card 2</h3>
9292
</div>
@@ -106,7 +106,7 @@ <h3><span id="card2"></span><i class="fa fa-bookmark"></i> Card 2</h3>
106106
</div>
107107
</div>
108108

109-
<div class="card-wrap wow fadeInUp">
109+
<div class="card-wrapper card-big wow fadeInUp">
110110
<div>
111111
<h3><span id="card3"></span><i class="fa fa-cog fa-spin"></i> Card 3</h3>
112112
</div>
@@ -179,7 +179,7 @@ <h5 class="stamp">Medium</h5>
179179
</div>
180180
</div>
181181

182-
<div class="card-wrap wow fadeInUp">
182+
<div class="card-wrapper card-big wow fadeInUp">
183183
<div>
184184
<h3><span id="card4"></span><i class="fa fa-terminal"></i> Card 4</h3>
185185
</div>
@@ -214,7 +214,7 @@ <h6 class="project-details">Detail 1 | Detail 2 | Detail 3</h6>
214214
</div>
215215
</div>
216216

217-
<div class="card-wrap contact wow fadeInUp">
217+
<div class="card-wrapper card-big contact wow fadeInUp">
218218
<div>
219219
<h3><span id="contact"></span>Contact</h3>
220220
</div>

‎src/sass/layout/_cards.scss‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
/*******************************************************************************
2+
Cards Styles
3+
*******************************************************************************/
4+
5+
.card-wrapper {
6+
position: relative;
7+
background: #fff;
8+
box-shadow: 0 0 5px #777;
9+
}
10+
11+
.card-big {
12+
margin: 20px 0;
13+
padding: 20px 30px 40px 30px;
14+
}
15+
16+
.card-small {
17+
margin: 10px 0;
18+
padding: 10px 40px 10px 40px;
19+
}
20+
21+
@include small-screens-only {
22+
.card-big {
23+
padding-right: 10px;
24+
padding-left: 10px;
25+
}
26+
27+
.card-small {
28+
margin: 25px 0;
29+
padding: 20px 10px 30px 10px;
30+
}
31+
}

‎src/sass/layout/_jumbotron.scss‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
/*******************************************************************************
2+
Jumbotron Styles
3+
*******************************************************************************/
4+
5+
.jumbotron-wrapper {
6+
padding: 0 40px;
7+
color: #fff;
8+
background: #000;
9+
position: relative;
10+
11+
.delayed-entry {
12+
@include animation-delay(0.5s);
13+
@include animation-duration(1s);
14+
}
15+
}
16+
17+
.jumbotron-content {
18+
#title {
19+
font-family: Code, $heading-font-stack;
20+
font-weight: $font-light;
21+
}
22+
23+
#tagline {
24+
font-family: Code, $heading-font-stack;
25+
font-weight: $font-light;
26+
padding-top: 10px;
27+
padding-bottom: 30px;
28+
}
29+
}
30+
31+
.btn-scroll-wrapper {
32+
text-align: center;
33+
position: absolute;
34+
bottom: 3%;
35+
right: 0;
36+
left: 0;
37+
margin-right: auto;
38+
margin-left: auto;
39+
40+
.btn-scroll,
41+
.btn-scroll:focus {
42+
font-size: 40px;
43+
width: 65px;
44+
height: 65px;
45+
@include transition(all .3s ease-in-out);
46+
color: #fff;
47+
border: 2px solid #fff;
48+
border-radius: 50%;
49+
}
50+
51+
.btn-scroll:hover {
52+
color: #000;
53+
border: 2px solid #fff;
54+
background-color: #fff;
55+
}
56+
}
57+
58+
@include medium-screens-up {
59+
.jumbotron-big {
60+
height: 100vh;
61+
62+
.jumbotron-content {
63+
position: relative;
64+
top: 45%;
65+
@include transform(translateY(-50%));
66+
67+
#title {
68+
font-size: 720%;
69+
}
70+
}
71+
}
72+
73+
.jumbotron-small {
74+
height: 60vh;
75+
76+
.jumbotron-content {
77+
position: relative;
78+
top: 55%;
79+
@include transform(translateY(-50%));
80+
81+
#title {
82+
font-size: 500%;
83+
}
84+
}
85+
}
86+
}
87+
88+
@include small-screens-only {
89+
.jumbotron-big {
90+
min-height: 60vh;
91+
}
92+
93+
.jumbotron-small {
94+
min-height: 50vh;
95+
}
96+
97+
.jumbotron-content {
98+
padding-top: 40px;
99+
padding-bottom: 80px;
100+
101+
#title {
102+
font-size: 350%;
103+
padding-top: 60px;
104+
}
105+
106+
#tagline {
107+
font-size: 150%;
108+
}
109+
}
110+
}

‎src/sass/main.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
@import 'utils/buttons';
55

66
@import 'layout/navbar';
7+
@import 'layout/jumbotron';
8+
@import 'layout/cards';
79
@import 'layout/footer';
810

911
@import 'pages/index';

0 commit comments

Comments
 (0)