Skip to content

Commit c001e0e

Browse files
cdconn00cdconn00
authored
Merge pull request #4 from cdconn00/testing
News Section PR
2 parents 704d229 + beec58d commit c001e0e

File tree

2 files changed

+339
-48
lines changed

2 files changed

+339
-48
lines changed

‎public/styles/main.css‎

Lines changed: 209 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ label:focus,
2424
.main-purple{
2525
color: #341f97;
2626
}
27+
/***** /Global/ ******/
2728

2829
/***** Home Page *****/
2930
.home-banner-img {
@@ -70,6 +71,7 @@ label:focus,
7071
margin-left: 10px;
7172
}
7273

74+
/***** Navbar *****/
7375
#navRight {
7476
padding-left: 20px;
7577
}
@@ -81,7 +83,7 @@ label:focus,
8183
#navbar{
8284
width: 100%;
8385
transition: background-color .4s linear;
84-
z-index: 1;
86+
z-index: 10;
8587
}
8688

8789
#navbar.scrolled{
@@ -117,6 +119,8 @@ label:focus,
117119
}
118120
}
119121

122+
/***** /Navbar/ *****/
123+
120124
#txtEmail {
121125
border-top-left-radius: 38px;
122126
border-bottom-left-radius: 38px;
@@ -145,4 +149,207 @@ label:focus,
145149
background-color: #341f97;
146150
height: 5rem;
147151
color: #FFF;
148-
}
152+
}
153+
154+
155+
/***** News Cards *****/
156+
.post-module {
157+
position: relative;
158+
z-index: 1;
159+
display: block;
160+
background: #FFFFFF;
161+
width: 270px;
162+
height: 470px;
163+
-webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
164+
-moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
165+
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
166+
-webkit-transition: all 0.3s linear 0s;
167+
-moz-transition: all 0.3s linear 0s;
168+
-ms-transition: all 0.3s linear 0s;
169+
-o-transition: all 0.3s linear 0s;
170+
transition: all 0.3s linear 0s;
171+
}
172+
.post-module:hover,
173+
.hover {
174+
-webkit-box-shadow: 0px 1px 35px 0px rgba(0, 0, 0, 0.3);
175+
-moz-box-shadow: 0px 1px 35px 0px rgba(0, 0, 0, 0.3);
176+
box-shadow: 0px 1px 35px 0px rgba(0, 0, 0, 0.3);
177+
}
178+
.post-module:hover .thumbnail img,
179+
.hover .thumbnail img {
180+
-webkit-transform: scale(1.1);
181+
-moz-transform: scale(1.1);
182+
transform: scale(1.1);
183+
opacity: 0.6;
184+
}
185+
.post-module .thumbnail {
186+
background: #000000;
187+
height: 400px;
188+
overflow: hidden;
189+
}
190+
.post-module .thumbnail .date {
191+
position: absolute;
192+
top: 20px;
193+
right: 20px;
194+
z-index: 1;
195+
background: #341f97;
196+
width: 55px;
197+
height: 55px;
198+
padding: 5px 0;
199+
-webkit-border-radius: 100%;
200+
-moz-border-radius: 100%;
201+
border-radius: 100%;
202+
color: #FFFFFF;
203+
font-weight: 700;
204+
text-align: center;
205+
-webkti-box-sizing: border-box;
206+
-moz-box-sizing: border-box;
207+
box-sizing: border-box;
208+
}
209+
.post-module .thumbnail .date .day {
210+
font-size: 18px;
211+
}
212+
.post-module .thumbnail .date .month {
213+
font-size: 12px;
214+
text-transform: uppercase;
215+
}
216+
.post-module .thumbnail img {
217+
display: block;
218+
width: 120%;
219+
-webkit-transition: all 0.3s linear 0s;
220+
-moz-transition: all 0.3s linear 0s;
221+
-ms-transition: all 0.3s linear 0s;
222+
-o-transition: all 0.3s linear 0s;
223+
transition: all 0.3s linear 0s;
224+
}
225+
.post-module .post-content {
226+
position: absolute;
227+
bottom: 0;
228+
background: #FFFFFF;
229+
width: 100%;
230+
padding: 30px;
231+
-webkti-box-sizing: border-box;
232+
-moz-box-sizing: border-box;
233+
box-sizing: border-box;
234+
-webkit-transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s;
235+
-moz-transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s;
236+
-ms-transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s;
237+
-o-transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s;
238+
transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s;
239+
}
240+
.post-module .post-content .category {
241+
position: absolute;
242+
top: -34px;
243+
left: 0;
244+
background: #341f97;
245+
padding: 10px 15px;
246+
color: #FFFFFF;
247+
font-size: 14px;
248+
font-weight: 600;
249+
text-transform: uppercase;
250+
}
251+
.post-module .post-content .title {
252+
margin: 0;
253+
padding: 0 0 10px;
254+
color: #333333;
255+
font-size: 26px;
256+
font-weight: 700;
257+
}
258+
.post-module .post-content .sub_title {
259+
margin: 0;
260+
padding: 0 0 20px;
261+
color: #341f97;
262+
font-size: 20px;
263+
font-weight: 400;
264+
}
265+
.post-module .post-content .description {
266+
display: none;
267+
color: #666666;
268+
font-size: 14px;
269+
line-height: 1.8em;
270+
}
271+
.post-module .post-content .post-meta {
272+
margin: 30px 0 0;
273+
color: #999999;
274+
}
275+
.post-module .post-content .post-meta .timestamp {
276+
margin: 0 16px 0 0;
277+
}
278+
.post-module .post-content .post-meta a {
279+
color: #999999;
280+
text-decoration: none;
281+
}
282+
.hover .post-content .description {
283+
display: block !important;
284+
height: auto !important;
285+
opacity: 1 !important;
286+
}
287+
.card-container {
288+
margin: 0 auto;
289+
width: 270px;
290+
}
291+
.card-container:before,
292+
.card-container:after {
293+
content: '';
294+
display: block;
295+
clear: both;
296+
}
297+
.card-container .column {
298+
width: 50%;
299+
-webkit-box-sizing: border-box;
300+
-moz-box-sizing: border-box;
301+
box-sizing: border-box;
302+
}
303+
.card-container .column .demo-title {
304+
margin: 0 0 15px;
305+
color: #666666;
306+
font-size: 18px;
307+
font-weight: bold;
308+
text-transform: uppercase;
309+
}
310+
.card-container .info {
311+
width: 300px;
312+
margin: 50px auto;
313+
text-align: center;
314+
}
315+
.card-container .info h1 {
316+
margin: 0 0 15px;
317+
padding: 0;
318+
font-size: 24px;
319+
font-weight: bold;
320+
color: #333333;
321+
}
322+
.card-container .info span {
323+
color: #666666;
324+
font-size: 12px;
325+
}
326+
.card-container .info span a {
327+
color: #000000;
328+
text-decoration: none;
329+
}
330+
.card-container .info span .fa {
331+
color: #341f97;
332+
}
333+
334+
@media (min-width: 425px) and (max-width: 768px){
335+
.post-module{
336+
width: 360px;
337+
}
338+
339+
.card-container{
340+
width: 360px;
341+
}
342+
}
343+
344+
@media (max-width: 425px){
345+
.post-module{
346+
width: 270px;
347+
}
348+
349+
.card-container{
350+
width: 270px;
351+
}
352+
}
353+
354+
/***** /News Cards/ *****/
355+
/***** /Home Page/ *****/

0 commit comments

Comments
 (0)