Skip to content

Instantly share code, notes, and snippets.

@ryan-w-moore

ryan-w-moore/index.html

Created August 4, 2017 22:54
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 ryan-w-moore/f77b9cd90b755f544c919bac9384ac27 to your computer and use it in GitHub Desktop.
Save ryan-w-moore/f77b9cd90b755f544c919bac9384ac27 to your computer and use it in GitHub Desktop.
Download ZIP
Inspiration Dribble #2 - Calendar
Raw
index.html
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<body>
<div class="calendar">
<div class="calendar-left">
<div class="calendar-left_icons">
<i class="fa fa-share-alt" aria-hidden="true"></i>
</div>
<div class="calendar-left_title">
<p>Friday august 1st</p>
</div>
<div class="calendar-left_notes">
<div class="calendar-left_notes_title">
<p>notes</p>
<i class="fa fa-plus" aria-hidden="true"></i>
</div>
<div class="calendar-left_notes_desc">
<p>Help Sister with Garden<span>16 th</span></p>
<p>Putting together Ikea Furniture<span>17 th</span></p>
</div>
</div>
</div>
<div class="calendar-right">
<div class="calendar-right_title">
<p><i class="fa fa-calendar" aria-hidden="true"></i>2017</p>
<p>Calendar</p>
</div>
<div class="calendar-right_body">
<img src="http://via.placeholder.com/350x200">
</div>
<div class="calendar-right_footer">
<div class="calendar-right_title">
<p><i class="fa fa-map-marker" aria-hidden="true"></i>London</p>
<p>Weather</p>
</div>
<div class="calendar-right_footer_weather">
<i class="fa fa-sun-o" aria-hidden="true"></i>
<p>28°C</p>
</div>
</div>
</div>
</div>
</body>
Raw
inspiration-dribble-2-calendar.markdown
Raw
style.scss
$red : #F9735B;
$white : #fff;
$greyLight : #BEC1D7;
body {
height: 100vh;
background: linear-gradient(45deg, #A6CAE5 , #304FFE);
display: flex;
justify-content: center;
align-items: center;
font-family: roboto;
}
.calendar {
display: flex;
width: 800px;
}
.calendar-left {
background-color: $red;
padding: 1.5em;
color: $white;
width: 30%;
}
.calendar-left_title {
margin-top: 5em;
text-transform: uppercase;
font-weight: 300;
width: 70%;
line-height: 1.5;
font-size: 1.5em;
}
.calendar-left_notes_title {
margin-top: 5em;
font-weight: 300;
text-transform: uppercase;
font-size: 0.75em;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid $white
}
.calendar-left_notes_desc {
p {
font-size: 0.7em;
font-weight: 300;
}
span {
float: right;
}
}
.calendar-right {
background-color: $white;
width: 70%;
padding-left: 1em;
padding-right: 1em;
position: relative;
}
.calendar-right_title {
display: flex;
justify-content: space-between;
color: $greyLight;
border-bottom : 1px solid $greyLight;
i {
margin-right: 1em;
}
}
.calendar-right_body {
display: flex;
justify-content: center;
img {
margin-top: 1em;
}
}
.calendar-right_footer_weather {
display: flex;
align-items: center;
justify-content: space-around;
i {
font-size: 3em;
color: $red;
}
p {
color: $greyLight;
font-weight: 700;
font-size: 2em;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment