diff --git a/design_membership/calendar/calendar.html b/design_membership/calendar/calendar.html new file mode 100644 index 00000000..5b3b04a2 --- /dev/null +++ b/design_membership/calendar/calendar.html @@ -0,0 +1,107 @@ + + + + + Calendar + + + + + + +
+ +
+ +
+ + September + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MoTuWeThFrSaSu
2627282930311
2345678
9101112131415
16171819202122
23242526272829
30123456
+ +
+ +
+ + + \ No newline at end of file diff --git a/design_membership/calendar/stylesheet.css b/design_membership/calendar/stylesheet.css new file mode 100644 index 00000000..25861a58 --- /dev/null +++ b/design_membership/calendar/stylesheet.css @@ -0,0 +1,160 @@ +@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: 300 100%/1em 'Lato', sans-serif; + margin: 0; +} + +a { + text-decoration: none; +} + +/*Month size*/ +#monthtitle { + font-size: 1.2em; + line-height: 1.25em; + margin: .25em 0; + font-weight: 600; +} + +h3 { + font-size: 1.5em; + line-height: 1em; + margin: .33em 0; +} + +table { + border-collapse: collapse; + border-spacing: 0; + margin:auto; + +} + +.container { + height: 358px; + left: 50%; + margin: -255px 0 0 -245px; + position: absolute; + top: 50%; + width: 340px; +} + +/* ---------- CALENDAR ---------- */ + +.calendar { + text-align: center; +} + +.calendar header { + position: relative; +} + +.calendar #monthtitle { + text-transform: uppercase; + color: #1A6687; +} +/*Title*/ +.calendar thead { + font-weight: 500; + /*text-transform: uppercase;*/ + color: #8BC4C9; + /*margin-bottom:1px;*/ + +} + +/*Body text*/ +.calendar tbody { + color: #7c8a95; +} + +/*select date*/ +.calendar tbody td:hover { + background: #8BC4C9; + color: #f9f9f9; + /*border: .1px solid #8BC4C9;*/ + + /*border-radius: 50%;*/ +} + +.calendar thead>tr>td{ + border-top:hidden; + border-left:hidden; + border-right: hidden; +} + +.calendar td { + border: .1px solid #cbd1d2; + /*border-radius: 50%;*/ + display: inline-block; + height: 2.5em; + line-height: 2.5em; + text-align: center; + width: 2.5em; + +} + +.calendar .prev-month, +.calendar .next-month { + /*border: .1px solid #cbd1d2;*/ + color: #cbd1d2; + +} + +.calendar .prev-month:hover, +.calendar .next-month:hover { + border: .5px solid #cbd1d2; + background: #cbd1d2; + color: #f9f9f9; +} + +/*Today*/ +.current-day { + color: #8BC4C9; + /*background-color: #8BC4C9;*/ +} + + +/*Next,Prev month*/ +.btn-prev, +.btn-next { + border: 1px solid transparent; + color: #8BC4C9; + font-size: 1.5em; + padding: 1em; + /*height: .7em;*/ + /*line-height: .3em;*/ + /*margin: auto;*/ + /*position: absolute;*/ + /*top: .1em;*/ + /*width: 25em;*/ +} + + +.btn-prev:hover, +.btn-next:hover { + background: none; + color: #1A6687; +} + +.btn-prev { + left: 6em; +} + +.btn-next { + right: 6em; +} \ No newline at end of file