Skip to content

Commit 7aceea8

Browse files
emcodingemcoding
committed
Add cards with grid and flexbox
1 parent ccdc32b commit 7aceea8

File tree

3 files changed

+109
-16
lines changed

3 files changed

+109
-16
lines changed

‎app/assets/images/learn-icon.png

2.37 KB
Loading

‎app/assets/stylesheets/home.scss

Lines changed: 57 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ body {
88
font-weight: 200;
99
}
1010

11+
//// HERO things
12+
1113
//color moving background
1214
body {
1315
background: linear-gradient(-45deg, $DJSsunshine, $DJSacqua, $DJSlavender, $DJSrose);
@@ -73,20 +75,68 @@ body {
7375
color: lighten($DJSlavender, 10%);
7476
}
7577

76-
.text-container {
77-
margin: 2vw;
78-
margin-top: 12vh;
79-
}
80-
8178
hr.separator-line {
8279
border: 2px solid orange;
8380
border-radius: 5px;
8481
width: 10%;
8582
margin:20px auto;
8683
}
8784

88-
p {
89-
font-size: smaller;
85+
//// CONTENT THINGS
86+
// cards (grid) -> card (flex) -> card Content (See below)
87+
88+
.text-container {
89+
margin: 2vw;
90+
margin-top: 15vh;
91+
}
92+
93+
.cards {
94+
max-width: 80%;
95+
margin: 0 auto;
96+
display: grid;
97+
grid-gap: 1rem;
98+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
99+
// ^ make it responsive without mediaqueries:
100+
}
101+
102+
.card {
90103
background-color: $DJSbackground_grey;
104+
padding: 1rem;
105+
height: fit-content;
106+
border-radius: 2px;
107+
display: flex;
108+
flex-direction: column;
109+
// box shadow
110+
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
111+
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
91112
}
92113

114+
.card:hover {
115+
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
116+
}
117+
118+
// CARD content
119+
// card-header (flex) : img + card-title (course-appetite || course-around)
120+
// card-text
121+
122+
.card-header {
123+
display: flex;
124+
flex-direction: row;
125+
align-items: center;
126+
justify-content: flex-start;
127+
}
128+
.card-title {
129+
//padding-left: 15px;
130+
}
131+
.course-appetite {
132+
color: $DJSacqua;
133+
}
134+
.course-around {
135+
color: $DJSrose;
136+
}
137+
138+
.card-text {
139+
font-size: smaller;
140+
}
141+
142+

‎app/views/pages/home.html.erb

Lines changed: 52 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,63 @@
44
<div class="hero-txt">
55
<div class="hero-over-title"> How to write and maintain</div>
66
<div class="hero-title">Clean JavaScript Code in your Rails App</div>
7-
<!-- <hr class="separator-line">-->
8-
<div class="hero-payoff">An online course about writing, organising and re-using JavaScript code for Ruby on Rails developers</div>
7+
<!-- <hr class="separator-line">-->
8+
<div class="hero-payoff">An online course about writing, organising and re-using JavaScript code for Ruby on Rails
9+
developers
10+
</div>
911

1012
</div>
1113
</div>
1214
</section>
1315

14-
<section class="text-container first-container">
15-
<p>
16-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, atque consequuntur deleniti distinctio dolores ea eos facere illum in ipsum itaque iusto magni nobis quam repellendus repudiandae rerum, tempora voluptatibus.
17-
</p>
16+
<section class="text-container">
17+
<div class="cards">
18+
<div class="card">
1819

19-
<p>
20-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, atque consequuntur deleniti distinctio dolores ea eos facere illum in ipsum itaque iusto magni nobis quam repellendus repudiandae rerum, tempora voluptatibus.
21-
</p>
20+
<div class="card-header">
21+
<!-- <div><%#= image_tag("learn-icon", size: 32, alt: "icon") %></div>-->
22+
<div class="card-title course-appetite">What you will learn</div>
23+
</div>
24+
<div class="card-text">
25+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aperiam distinctio dolor esse
26+
exercitationem, facilis inventore ipsa labore laborum magnam nihil, nisi nobis nostrum officia, porro quae
27+
quis veniam voluptas.
28+
</div>
29+
</div>
30+
<div class="card">
31+
<div class="card-title course-appetite">What it means for your Rails app</div>
32+
<div class="card-text">
33+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aperiam distinctio dolor esse
34+
exercitationem, facilis inventore ipsa labore laborum magnam nihil, nisi nobis nostrum officia, porro quae
35+
quis veniam voluptas.
36+
</div>
37+
</div>
38+
<div class="card">
39+
<div class="card-title course-appetite">Bonus Content</div>
40+
<div class="card-text">
41+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aperiam distinctio dolor esse
42+
exercitationem, facilis inventore ipsa labore laborum magnam nihil, nisi nobis nostrum officia, porro quae
43+
quis veniam voluptas.
44+
</div>
45+
</div>
46+
<div class="card">
47+
<div class="card-title course-around">Ams ruby workshop</div>
48+
<div class="card-text">
49+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aperiam distinctio dolor esse exercitationem,
50+
facilis inventore ipsa labore laborum magnam nihil, nisi nobis nostrum officia, porro quae quis veniam voluptas.
51+
</div>
52+
</div>
53+
<div class="card">
54+
<div class="card-title course-around">Corona Pricing</div>
55+
<div class="card-text">
56+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aperiam distinctio dolor esse exercitationem,
57+
facilis inventore ipsa labore laborum magnam nihil, nisi nobis nostrum officia, porro quae quis veniam voluptas.
58+
</div>
59+
</div>
60+
<div class="card">
61+
<div style="color: orange">enroll now
62+
</div>
63+
</div>
64+
</div>
2265
</section>
2366

0 commit comments

Comments
 (0)