Difference between revisions of "Team:Penn/Notebook"

Line 1: Line 1:
 
<html>
 
<html>
−
 
 
<style type="text/css">
 
<style type="text/css">
 +
/* not required */
 +
*,:active{
 +
outline: none;
 +
}
 +
*{
 +
padding: 0px;
 +
margin: 0px;
 +
}
 +
 
body{
 
body{
−
  background-color: #F5F1E9;
+
margin: 20px;
 +
background-color: #EEEDE9;
 +
-webkit-font-smoothing: antialiased;
 +
text-rendering: optimizeLegibility;
 +
font-size: 96.5%;
 +
font-family: Helvetica, Arial, sans-serif;
 
}
 
}
−
#calendar{
+
 
−
  margin-left: auto;
+
input{
−
  margin-right: auto;
+
font-family: Helvetica, Arial, sans-serif;
−
  width: 320px;
+
−
  font-family: 'Lato', sans-serif;
+
 
}
 
}
−
#calendar_weekdays div{
+
 
−
  display:inline-block;
+
h1, h2, h3, h4, h5, p{
−
  vertical-align:top;
+
margin-bottom: 10px;
 
}
 
}
−
#calendar_content, #calendar_weekdays, #calendar_header{
+
 
−
  position: relative;
+
p{
−
  width: 320px;
+
line-height: 20px;
−
  overflow: hidden;
+
−
  float: left;
+
−
  z-index: 10;
+
 
}
 
}
−
#calendar_weekdays div, #calendar_content div{
+
 
−
  width:40px;
+
a{
−
  height: 40px;
+
text-decoration: none;
−
  overflow: hidden;
+
color: #FF462B;
−
  text-align: center;
+
−
  background-color: #FFFFFF;
+
−
  color: #787878;
+
 
}
 
}
−
#calendar_content{
+
 
−
  -webkit-border-radius: 0px 0px 12px 12px;
+
.clearfix{
−
  -moz-border-radius: 0px 0px 12px 12px;
+
clear: both;
−
  border-radius: 0px 0px 12px 12px;
+
 
}
 
}
−
#calendar_content div{
+
 
−
  float: left;
+
.animate{
 +
-webkit-transition: all 0.3s ease-in-out;
 +
-moz-transition: all 0.3s ease-in-out;
 +
transition: all 0.3s ease-in-out;
 
}
 
}
−
#calendar_content div:hover{
+
 
−
  background-color: #F8F8F8;
+
 
 +
/* required */
 +
.calendar{
 +
position: absolute;
 +
border-radius: 4px;
 +
overflow: hidden;
 +
width: 800px;
 +
height: 450px;
 +
left: 50%;
 +
margin-left: -400px;
 +
margin-top: -225px;
 +
top: 50%;
 +
background-color: #ffffff;
 +
color: #333333;
 
}
 
}
−
#calendar_content div.blank{
+
 
−
  background-color: #E8E8E8;
+
.calendar h1, .calendar h2{
 +
font-weight: 300;
 +
font-size: 26px;
 +
line-height: 28px;
 +
text-transform: uppercase;
 +
margin: 0px 0px 20px 0px;
 
}
 
}
−
#calendar_header, #calendar_content div.today{
+
 
−
  zoom: 1;
+
.calendar h1 span{
−
  filter: alpha(opacity=70);
+
display: block;
−
  opacity: 0.7;
+
 
}
 
}
−
#calendar_content div.today{
+
 
−
  color: #FFFFFF;
+
.calendar .col{
 +
position: relative;
 +
float: left;
 +
height: 100%;
 
}
 
}
−
#calendar_header{
+
 
−
  width: 100%;
+
.calendar .col .content{
−
  height: 37px;
+
padding: 40px;
−
  text-align: center;
+
−
  background-color: #FF6860;
+
−
  padding: 18px 0;
+
−
  -webkit-border-radius: 12px 12px 0px 0px;
+
−
  -moz-border-radius: 12px 12px 0px 0px;
+
−
  border-radius: 12px 12px 0px 0px;
+
 
}
 
}
−
#calendar_header h1{
+
 
−
  font-size: 1.5em;
+
.calendar ul{
−
  color: #FFFFFF;
+
margin: 0px;
−
  float:left;
+
−
  width:70%;
+
 
}
 
}
−
i[class^=icon-chevron]{
+
 
−
  color: #FFFFFF;
+
.calendar ul li{
−
  float: left;
+
list-style: none;
−
  width:15%;
+
−
  border-radius: 50%;
+
 
}
 
}
 +
 +
.calendar .leftCol{
 +
width: 40%;
 +
background-color: #F48989;
 +
}
 +
 +
.calendar .noteList li{
 +
color: #ffffff;
 +
margin-bottom: 10px;
 +
}
 +
 +
.calendar .notes p,
 +
.calendar .notes input,
 +
.calendar .noteList li{
 +
font-weight: 300;
 +
font-size: 14px;
 +
}
 +
 +
.calendar .notes p{
 +
border-bottom: solid 1px rgba(255,255,255,0.4);
 +
}
 +
 +
.calendar .notes input{
 +
background-color: #F48989;
 +
color: #ffffff;
 +
border: none;
 +
width: 200px;
 +
}
 +
 +
.calendar .addNote,
 +
.calendar .removeNote{
 +
float: right;
 +
color: rgba(255,255,255,0.4);
 +
font-weight: bold;
 +
margin-left: 20px;
 +
}
 +
 +
.calendar .addNote:hover,
 +
.calendar .removeNote:hover{
 +
color: #ffffff;
 +
}
 +
 +
.calendar .addNote{
 +
font-size: 16px;
 +
}
 +
 +
.calendar .leftCol h1{
 +
color: #ffffff;
 +
margin-bottom: 40px;
 +
}
 +
 +
.calendar .rightCol{
 +
width: 60%;
 +
}
 +
 +
.calendar .rightCol h2{
 +
color: #C7BEBE;
 +
text-align: right;
 +
margin-bottom: 70px;
 +
}
 +
 +
.calendar .months li,
 +
.calendar .weekday li,
 +
.calendar .days li{
 +
float: left;
 +
text-transform: uppercase;
 +
}
 +
 +
.calendar .months li a,
 +
.calendar .weekday li a,
 +
.calendar .days li a{
 +
display: block;
 +
color: #747978;
 +
}
 +
 +
.calendar .months li a{
 +
font-size: 10px;
 +
color: #C7BEBE;
 +
text-align: center;
 +
width: 32px;
 +
margin-bottom: 20px;
 +
}
 +
 +
.calendar .months li .selected{
 +
font-weight: bold;
 +
color: #747978;
 +
}
 +
 +
.calendar .weekday li a{
 +
width: 55px;
 +
text-align: center;
 +
margin-bottom: 20px;
 +
font-size: 12px;
 +
}
 +
 +
.calendar .days li{
 +
width: 55px;
 +
}
 +
 +
.calendar .days li a{
 +
width: 36px;
 +
height: 24px;
 +
text-align: center;
 +
margin: auto auto;
 +
font-size: 12px;
 +
font-weight: bold;
 +
border-radius: 12px;
 +
margin-bottom: 10px;
 +
padding-top: 10px;
 +
}
 +
 +
 +
.calendar .days li a:hover{
 +
background-color: #EEEDE9;
 +
}
 +
 +
.calendar .days li .selected{
 +
background-color: #F5A1A3!important;
 +
color: #ffffff;
 +
}
 +
 +
.calendar .days li .event{
 +
color: #F5A1A3;
 +
}
 +
 +
 +
/* placeholder color */
 +
::-webkit-input-placeholder {color: #ffffff; }
 +
:-moz-placeholder {color: #ffffff; }
 +
::-moz-placeholder {color: #ffffff; }
 +
:-ms-input-placeholder {color: #ffffff; }
 
</style>
 
</style>
  
−
<head>
 
−
  <link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
 
−
</head>
 
−
<body>
 
−
  <div id="calendar">
 
−
    <div id="calendar_header"><i class="icon-chevron-left"></i>          <h1></h1><i class="icon-chevron-right"></i>        </div>
 
−
    <div id="calendar_weekdays"></div>
 
−
    <div id="calendar_content"></div>
 
  
 +
<div class="calendar">
 +
 +
<div class="col leftCol">
 +
<div class="content">
 +
<h1 class="date">Friday<span>September 12th</span></h1>
 +
<div class="notes">
 +
<p>
 +
<input type="text" value="" placeholder="new note"/>
 +
<a href="#" title="Add note" class="addNote animate">+</a>
 +
</p>
 +
<ul class="noteList">
 +
<li>Headbutt a lion<a href="#" title="Remove note" class="removeNote animate">x</a></li>
 +
</ul>
 +
</div>
 +
</div>
 +
</div>
 +
 +
<div class="col rightCol">
 +
<div class="content">
 +
<h2 class="year">2013</h2>
 +
<ul class="months">
 +
<li><a href="#" title="Jan" data-value="1">Jan</a></li>
 +
<li><a href="#" title="Feb" data-value="2">Feb</a></li>
 +
<li><a href="#" title="Mar" data-value="3">Mar</a></li>
 +
<li><a href="#" title="Apr" data-value="4">Apr</a></li>
 +
<li><a href="#" title="May" data-value="5">May</a></li>
 +
<li><a href="#" title="Jun" data-value="6">Jun</a></li>
 +
<li><a href="#" title="Jul" data-value="7">Jul</a></li>
 +
<li><a href="#" title="Aug" data-value="8">Aug</a></li>
 +
<li><a href="#" title="Sep" data-value="9" class="selected">Sep</a></li>
 +
<li><a href="#" title="Oct" data-value="10">Oct</a></li>
 +
<li><a href="#" title="Nov" data-value="11">Nov</a></li>
 +
<li><a href="#" title="Dec" data-value="12">Dec</a></li>
 +
</ul>
 +
<div class="clearfix"></div>
 +
<ul class="weekday">
 +
<li><a href="#" title="Mon" data-value="1">Mon</a></li>
 +
<li><a href="#" title="Tue" data-value="2">Tue</a></li>
 +
<li><a href="#" title="Wed" data-value="3">Wed</a></li>
 +
<li><a href="#" title="Thu" data-value="4">Thu</a></li>
 +
<li><a href="#" title="Fri" data-value="5">Fri</a></li>
 +
<li><a href="#" title="Say" data-value="6">Sat</a></li>
 +
<li><a href="#" title="Sun" data-value="7">Sun</a></li>
 +
</ul>
 +
<div class="clearfix"></div>
 +
<ul class="days">
 +
<script>
 +
for( var _i = 1; _i <= 31; _i += 1 ){
 +
var _addClass = '';
 +
if( _i === 12 ){ _addClass = ' class="selected"'; }
 +
 +
switch( _i ){
 +
case 8:
 +
case 10:
 +
case 27:
 +
_addClass = ' class="event"';
 +
break;
 +
}
 +
 +
document.write( '<li><a href="#" title="'+_i+'" data-value="'+_i+'"'+_addClass+'>'+_i+'</a></li>' );
 +
}
 +
</script>
 +
</ul>
 +
<div class="clearfix"></div>
 +
</div>
 +
</div>
 +
 +
<div class="clearfix"></div>
 +
 +
</div>
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 01:23, 27 August 2015

FridaySeptember 12th

+

  • Headbutt a lionx

2013