Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI

CodeMyUI/index.html

Created September 19, 2017 03:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save CodeMyUI/31c25395ac0d26001e05b81237e29546 to your computer and use it in GitHub Desktop.
Save CodeMyUI/31c25395ac0d26001e05b81237e29546 to your computer and use it in GitHub Desktop.
Download ZIP
Inspiration Dribbble #3 - Blog Post
Raw
index.html
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<body>
<div class="post">
<div class="post-left">
<div class="post-left_title">Lorem ipsum:</div>
<div class="post-left_title_sub">Dolor sit amet</div>
<div class="post-left_border"></div>
<div class="post-left_author">
<img src="https://img4.hostingpics.net/pics/195495circleprofil.png"</a>
<p>Jeremy Medina</p>
</div>
</div>
<div class="post-right">
<div class="post-right_body">
<p><span>L</span>orem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu augue at eros finibus aliquet lobortis et nisi. Integer nec ipsum feugiat, varius velit et, porta eros. Vestibulum bibendum diam nec urna dignissim sodales. Aliquam at maximus ligula.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu augue at eros finibus aliquet lobortis et nisi. Integer nec ipsum feugiat, varius velit et, porta eros. Vestibulum bibendum diam nec urna dignissim sodales.</p>
</div>
<div class="post-right_footer">
<div class="post-right_footer_date">
<p>Sat 06 aug 2016 - <span>22h14<span></p>
</div>
<div class="post-right_footer_pictos">
<i class="fa fa-heart" aria-hidden="true"></i>
<i class="fa fa-share-alt" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</body>
Raw
inspiration-dribbble-3-blog-post.markdown
Raw
style.scss
$white: #FEFEFE;
$dark: #484855;
$greyLight: #D1CFD2;
$greyDark: #9B999E;
$grey: #B9B5BE;
$red: #ef5350;
body {
height: 100vh;
background: radial-gradient(circle, #D6A664 , #F9CD8F);
display: flex;
justify-content: center;
align-items: center;
font-family: roboto;
}
.post {
display: flex;
width: 1000px;
}
.post-left {
width: 40%;
background-color: $dark;
color: white;
padding: 3em;
position: relative;
}
.post-left_title {
font-size: 2em;
text-transform: uppercase;
font-weight: 700;
}
.post-left_title_sub {
font-size: 2em;
text-transform: uppercase;
font-weight: 300;
margin-top: 0.25em;
}
.post-left_border {
border: 2px solid $red;
width: 15%;
margin-top: 1em;
}
.post-left_author {
position: absolute;
bottom: 2em;
display: flex;
align-items: center;
img {
width: 2.5em;
margin-right:1em;
border: 1px solid $white;
border-radius: 50%;
}
}
.post-right {
width: 60%;
background-color: $white;
color: $dark;
}
.post-right_body {
line-height: 2;
padding: 2em;
p {
margin-top: 1em;
span {
font-size: 2em;
}
}
}
.post-right_footer {
display: flex;
justify-content: space-between;
box-shadow: 0px -4px 3px -2px rgba(0,0,0,0.1);
padding: 2em;
}
.post-right_footer_date {
text-transform: uppercase;
span {
font-weight: 700;
}
}
.post-right_footer_pictos {
font-size: 1.5em;
margin-right: 1em;
.fa-heart {
color: $red;
margin-right: 1em;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment