diff --git a/design_membership/calendar.html b/design_membership/calendar.html new file mode 100644 index 00000000..acd783f5 --- /dev/null +++ b/design_membership/calendar.html @@ -0,0 +1,110 @@ + + + + + Calendar + + + + + + +
+ +
+ +
+ +

September

+ + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MoTuWeThFrSaSu
2627282930311
2345678
9101112131415
16171819202122
23242526272829
30123456
+ +
+ +
+ + + \ No newline at end of file diff --git a/design_membership/stylesheet.css b/design_membership/stylesheet.css new file mode 100644 index 00000000..4c257151 --- /dev/null +++ b/design_membership/stylesheet.css @@ -0,0 +1,166 @@ +@charset "utf-8"; +/* CSS Document */ + +/* ---------- FONTAWESOME ---------- */ +/* ---------- http://fortawesome.github.com/Font-Awesome/ ---------- */ +/* ---------- http://weloveiconfonts.com/ ---------- */ + +@import url(http://weloveiconfonts.com/api/?family=fontawesome); + +*[class*="fontawesome-"]:before { + font-family: 'FontAwesome', sans-serif; +} + +/* ---------- GENERAL ---------- */ + +body { + background: #f9f9f9; + color: #0e171c; + font: 100 100%/.7em 'Lato', sans-serif; + margin: 0; +} + +a { + text-decoration: none; +} + +/*Month size*/ +h2 { + font-size: .8em; + line-height: 1em; + /*margin: .1em 0;*/ +} + +td{ + font-size:.7em; +} + +h3 { + font-size: .7em; + line-height: .1em; + margin: .13em 0; +} + +table { + /*border-collapse: collapse;*/ + border-spacing: 0; +} + +.container { + height: 270px; + left: 50%; + margin: -100px 0 0 -100px; /* Calendar location */ + position: absolute; + top: 50%; + width: 13%; +} + +/* ---------- CALENDAR ---------- */ + +.calendar { + text-align: center; +} + +.calendar header { + position: relative; +} + +.calendar h2 { + text-transform: uppercase; + color: #1A6687; +} +/*Title*/ +.calendar thead { + font-size: .9em; + font-weight: 600; + text-transform: uppercase; + color: #8BC4C9; +} + +/*Body text*/ +.calendar tbody { + color: #7c8a95; +} + +/*select date*/ +.calendar tbody td:hover { + border: .2em solid #8BC4C9; +} + +.calendar td { + border: .7em solid none; + border-radius: 50%; + display: inline-block; + height: 2em; + line-height: 2em; + text-align: center; + width: 2em; +} + +.calendar .prev-month, +.calendar .next-month { + color: #cbd1d2; +} + +.calendar .prev-month:hover, +.calendar .next-month:hover { + border: 2px solid #cbd1d2; +} + +/*Today*/ +.current-day { + background: #8BC4C9; + color: #f9f9f9; +} + +.event { + cursor: pointer; + position: relative; +} + +/*Little dot*/ +.event:after { + background: #8BC4C9; + border-radius: 50%; + bottom: .3em; + display: block; + content: ''; + height: .3em; + left: 50%; + margin: -.5em 0 0 -.1em; + position: absolute; + width: .3em; +} + +.event.current-day:after { + background: #f9f9f9; +} + +/*Next,Prev month*/ +.btn-prev, +.btn-next { + border: 2px solid none; + border-radius: 50%; + color: #8BC4C9; + height: 2em; + font-size: .75em; + line-height: 2em; + margin: -1em; + position: absolute; + top: 50%; + width: 2em; +} + +.btn-prev:hover, +.btn-next:hover { + background: none; + color: #1A6687; +} + +.btn-prev { + left: 1.7em; +} + +.btn-next { + right: 1.7em; +} \ No newline at end of file