That just some fun in material design. Inspired by the really talented : Magnigenie ! https://dribbble.com/shots/2442471-Material-Blog-Card
Created
March 12, 2023 20:04
-
-
Save GervacioRodriguez/d7fe5596e4a78686799452c5eaf3da97 to your computer and use it in GitHub Desktop.
Blog Card fun #1
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
div.fond | |
span.s1 blog | |
span.s2 card | |
div.card | |
div.thumbnail | |
img.left(src="https://cdn2.hubspot.net/hubfs/322787/Mychefcom/images/BLOG/Header-Blog/photo-culinaire-pexels.jpg") | |
div.right | |
h1 Why you Need More Magnesium in Your Daily Diet | |
div.author | |
img(src="https://randomuser.me/api/portraits/men/95.jpg") | |
h2 Igor MARTY | |
div.separator | |
p Magnesium is one of the six essential macro-minerals that is required by the body for energy production and synthesis of protein and enzymes. It contributes to the development of bones and most importantly it is responsible for synthesis of your DNA and RNA. A new report that has appeared in theBritish Journal of Cancer, gives you another reason to add more magnesium to your diet... | |
h5 12 | |
h6 JANUARY | |
ul | |
li | |
i.fa.fa-eye.fa-2x | |
li | |
i.fa.fa-heart-o.fa-2x | |
li | |
i.fa.fa-envelope-o.fa-2x | |
li | |
i.fa.fa-share-alt.fa-2x | |
div.fab | |
i.fa.fa-arrow-down.fa-3x |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Not today Js, not today... */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import url(https://fonts.googleapis.com/css?family=Roboto) | |
/*Just the background stuff*/ | |
span.s1 | |
position : absolute | |
top : 0 | |
font-size : 15rem | |
font-weight : 800 | |
text-transform : uppercase | |
color : #3C4447 | |
span.s2 | |
font-weight : 800 | |
position : absolute | |
bottom : 0 | |
right : 0 | |
font-size : 15rem | |
text-transform : uppercase | |
color : #3C4447 | |
/*My hum... body.. yeah..*/ | |
body | |
background-color: #353B3F | |
font-family: 'Roboto', sans-serif | |
/* The card */ | |
.card | |
position : relative | |
height: 450px | |
width: 900px | |
margin : 200px auto | |
background-color : #FFF | |
-webkit-box-shadow: 10px 10px 93px 0px rgba(0,0,0,0.75) | |
-moz-box-shadow: 10px 10px 93px 0px rgba(0,0,0,0.75) | |
box-shadow: 10px 10px 93px 0px rgba(0,0,0,0.75) | |
/* Image on the left side */ | |
.thumbnail | |
float : left | |
position : relative | |
left : 30px | |
top : -30px | |
height : 320px | |
width : 530px | |
-webkit-box-shadow: 10px 10px 60px 0px rgba(0,0,0,0.75) | |
-moz-box-shadow: 10px 10px 60px 0px rgba(0,0,0,0.75) | |
box-shadow: 10px 10px 60px 0px rgba(0,0,0,0.75) | |
overflow: hidden | |
/*object-fit: cover;*/ | |
/*object-position: center;*/ | |
img.left | |
position: absolute | |
left: 50% | |
top: 50% | |
height: auto | |
width: 100% | |
-webkit-transform: translate(-50%,-50%) | |
-ms-transform: translate(-50%,-50%) | |
transform: translate(-50%,-50%) | |
/* Right side of the card */ | |
.right | |
margin-left : 590px | |
margin-right : 20px | |
h1 | |
padding-top : 15px | |
font-size : 1.3rem | |
color : #4B4B4B | |
.author | |
background-color : #9ECAFF | |
height : 30px | |
width : 110px | |
border-radius : 20px | |
.author>img | |
padding-top : 5px | |
margin-left : 10px | |
float : left | |
height : 20px | |
width : 20px | |
border-radius : 50% | |
h2 | |
padding-top : 8px | |
margin-right : 6px | |
text-align : right | |
font-size : 0.8rem | |
color :white | |
.separator | |
margin-top : 10px | |
border : 1px solid #C3C3C3 | |
p | |
text-align: justify | |
padding-top : 10px | |
font-size : 0.95rem | |
line-height: 150% | |
color : #4B4B4B | |
/* DATE of release*/ | |
h5 | |
position : absolute | |
left : 30px | |
bottom : -120px | |
font-size : 6rem | |
color : #C3C3C3 | |
h6 | |
position : absolute | |
left : 30px | |
bottom : -55px | |
font-size : 2rem | |
color : #C3C3C3 | |
/* Those futur buttons */ | |
ul | |
margin-left : 250px | |
li | |
display: inline | |
list-style: none | |
padding-right: 40px | |
color : #7B7B7B | |
/* Floating action button */ | |
.fab | |
position : absolute | |
right : 50px | |
bottom : -40px | |
box-sizing: border-box | |
padding-top: 18px | |
background-color : #1875D0 | |
width : 80px | |
height : 80px | |
color : white | |
text-align : center | |
border-radius : 50% | |
-webkit-box-shadow: 10px 10px 50px 0px rgba(0,0,0,0.75) | |
-moz-box-shadow: 10px 10px 50px 0px rgba(0,0,0,0.75) | |
box-shadow: 10px 10px 50px 0px rgba(0,0,0,0.75) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment