added more html content

3-17-14
jayandon · Mar 17, 2014 · 1350540 · 1350540
1 parent 8a87ff3
commit 1350540
Show file tree

Hide file tree

Showing 48 changed files with 304 additions and 215 deletions.
diff --git a/about.html b/about.html
@@ -3,10 +3,15 @@
 	<head>
 		<meta charset="UTF-8">
 		<title>RWD First Examples</title>
-		<link rel="stylesheet" href="css/about.css">
+		<link rel="stylesheet" href="css/style.css">
 
 	</head>
 	<body>
+		<a name="top"></a>
+<div class="menu">
+    <a href="#main_nav">Menu</a>
+</div>
+
 		<div class="conference">
 			<h1>ABOUT THE CONFERENCE</h1>
 				<p>The path to becoming a creative professional is not an easy one and even the path itself is hard to find. Careers in the Creative Arts is designed to inform educate and inspire students who are thinking about going down that path. It is free and open to all current and prospective students at BMCC.</p>
@@ -128,6 +133,25 @@ <h3>Driving From West Side Highway:</h3>
 
 		</div>
 
+		<a name="main_nav"></a> 
+<nav id="main_nav" >
+  <ul>
+      	<li id="active"> <a href="index.html">home</a> </li>
+		<li> <a href="about.html">About</a> </li>
+		<li> <a href="schedule.html">Schedule</a> </li>
+		<li> <a href="speakers.html">Speakers</a> </li>
+		<li> <a href="videos.html">Videos</a> </li>
+		<li> <a href="session.html">Sessions</a> </li>
+
+      <li><a href="#top" class="top">Top</a></li>
+  </ul>
+</nav>
+
+<footer>
+	<P>Copyright 2014
+	<br>Roger Pena</P>
+</footer>
+
 	</body>
 
 </html>
diff --git a/cropped/AlizabethTowery.jpg b/cropped/AlizabethTowery.jpg
diff --git a/cropped/BilWright.jpg b/cropped/BilWright.jpg
diff --git a/cropped/BilWright_2.jpg b/cropped/BilWright_2.jpg
diff --git a/cropped/ChrisStein.jpg b/cropped/ChrisStein.jpg
diff --git a/cropped/DianeDowling.jpg b/cropped/DianeDowling.jpg
diff --git a/cropped/ElspethBrown.jpg b/cropped/ElspethBrown.jpg
diff --git a/cropped/JodyCulkin.jpg b/cropped/JodyCulkin.jpg
diff --git a/cropped/LisaMellinger.jpg b/cropped/LisaMellinger.jpg
diff --git a/cropped/MalcomLinton.jpg b/cropped/MalcomLinton.jpg
diff --git a/cropped/PeterPallis.jpg b/cropped/PeterPallis.jpg
diff --git a/cropped/PeterPallis2.jpg b/cropped/PeterPallis2.jpg
diff --git a/cropped/RevitalKaisar.jpg b/cropped/RevitalKaisar.jpg
diff --git a/cropped/RobertZweig_.jpg b/cropped/RobertZweig_.jpg
diff --git a/cropped/SANDRAPOSTER.psd b/cropped/SANDRAPOSTER.psd
diff --git a/cropped/SandraPosterwithEmmy2.jpg b/cropped/SandraPosterwithEmmy2.jpg
diff --git a/cropped/SarahHaviland.jpg b/cropped/SarahHaviland.jpg
diff --git a/cropped/SheilaSolomonKlass.jpg b/cropped/SheilaSolomonKlass.jpg
diff --git a/cropped/SheilaSolomonKlass_thumb.jpg b/cropped/SheilaSolomonKlass_thumb.jpg
diff --git a/cropped/SusanaPowell.jpg b/cropped/SusanaPowell.jpg
diff --git a/cropped/alizabethtoweryspeakers.psd b/cropped/alizabethtoweryspeakers.psd
diff --git a/cropped/bilwright3.jpg b/cropped/bilwright3.jpg
diff --git a/cropped/bilwright3speakers.jpg b/cropped/bilwright3speakers.jpg
diff --git a/cropped/bilwright_2speakers.jpg b/cropped/bilwright_2speakers.jpg
diff --git a/cropped/bilwrightspeakers.jpg b/cropped/bilwrightspeakers.jpg
diff --git a/cropped/chrissteinspeakers.jpg b/cropped/chrissteinspeakers.jpg
diff --git a/cropped/dianedowlingspeakers.jpg b/cropped/dianedowlingspeakers.jpg
diff --git a/cropped/elspethbrownspeakers.jpg b/cropped/elspethbrownspeakers.jpg
diff --git a/cropped/jodyculkinspeakers.psd b/cropped/jodyculkinspeakers.psd
diff --git a/cropped/lisamellingerspeakers.jpg b/cropped/lisamellingerspeakers.jpg
diff --git a/cropped/lois_elaine_griffith.jpg b/cropped/lois_elaine_griffith.jpg
diff --git a/cropped/lois_elaine_griffithspeakers.jpg b/cropped/lois_elaine_griffithspeakers.jpg
diff --git a/cropped/malcomlintonspeakers.jpg b/cropped/malcomlintonspeakers.jpg
diff --git a/cropped/peterpallis2speakers.psd b/cropped/peterpallis2speakers.psd
diff --git a/cropped/peterpallisspeakers.jpg b/cropped/peterpallisspeakers.jpg
diff --git a/cropped/revitalkaisarspeakers.psd b/cropped/revitalkaisarspeakers.psd
diff --git a/cropped/robertzweig_speakers.jpg b/cropped/robertzweig_speakers.jpg
diff --git a/cropped/sandraposterspeakers.gif b/cropped/sandraposterspeakers.gif
diff --git a/cropped/sandraposterwithemmy2speakers.jpg b/cropped/sandraposterwithemmy2speakers.jpg
diff --git a/cropped/sarahhavilandspeakers.jpg b/cropped/sarahhavilandspeakers.jpg
diff --git a/cropped/sheilasolomonklass_thumbspeakers.jpg b/cropped/sheilasolomonklass_thumbspeakers.jpg
diff --git a/cropped/sheilasolomonklassspeakers.jpg b/cropped/sheilasolomonklassspeakers.jpg
diff --git a/cropped/susanapowellspeakers.jpg b/cropped/susanapowellspeakers.jpg
diff --git a/css/style.css b/css/style.css
@@ -23,7 +23,17 @@ line-height: 1.5;
 font-family: ;
 }
 
-
+header
+{
+		margin:auto;
+		width:86%;
+		background-color:red;
+		border:2px solid #a1a1a1;
+		padding:10px 40px; 
+		background:#C2C2D6;
+		border-radius:25px;
+		font-size: 1.5em;
+}
 
 
 h1
@@ -38,6 +48,34 @@ h1
 		text-decoration:none;
 	}
 
+h1.main-header
+
+	{
+		margin:auto;
+		width:86%;
+		border:2px solid #a1a1a1;
+		padding:10px 40px; 
+		/*background:#C2C2D6;*/
+		border-radius:25px;
+		font-size: 1.5em;
+
+		width:86%;
+	background-color: #4471AF;
+	padding: 10px
+	}
+
+h1.sub-header
+
+{
+		margin:auto;
+		width:86%;
+		background-color:red;
+		border:2px solid #a1a1a1;
+		padding:10px 40px; 
+		background:#C2C2D6;
+		border-radius:25px;
+		font-size: 3em;
+	}
 h2
 
 	{	
@@ -100,15 +138,38 @@ p.presenter
 .session {
 margin:auto;
 width:86%;
+border:2px solid #a1a1a1;
+padding:10px 40px; 
+background:#C2C2D6;
+border-radius:25px;
+
+}
+
+.conference{
+margin:auto;
+width:86%;
 background-color:red;
-;
+border:2px solid #a1a1a1;
+padding:10px 40px; 
+background:#C2C2D6;
+border-radius:25px;
 }
 
 	/* =======================================
 speakers page
 ======================================= */
-body#speakers{
-	background-color: orange;
+/*xbody#speakers{*/
+
+.intro{
+	margin:auto;
+width:86%;
+background-color:red;
+border:2px solid #a1a1a1;
+padding:10px 40px; 
+background:#C2C2D6;
+border-radius:25px;
+}
+
 }
 .track{
 	width:86%;
@@ -119,10 +180,11 @@ body#speakers{
 
 .speakers {
 margin:auto;
-width:95%;
-background-color:red;
-padding:5px;
-;
+width:86%;
+border:2px solid #a1a1a1;
+padding:10px 40px; 
+background:#C2C2D6;
+border-radius:25px;
 }
 
 /* =======================================
@@ -136,32 +198,116 @@ About page
 }
 
 .directions-type{
-	padding-left:10px;
-	padding-top:10px;
 	margin:auto;
-	width:86%;
+width:86%;
+border:2px solid #a1a1a1;
+padding:10px 40px; 
+background:#C2C2D6;
+border-radius:25px;
 }
 
 
 .location {
-	margin:auto;
-	width:86%;
-	background-color:green;
+margin:auto;
+width:86%;
+border:2px solid #a1a1a1;
+padding:10px 40px; 
+background:#C2C2D6;
+border-radius:25px;
 	}
 
 .map {
-	margin:auto;
-	width:86%;
-	background-color:purple;
+margin:auto;
+width:86%;
+background-color:red;
+border:2px solid #a1a1a1;
+padding:10px 40px; 
+background:#C2C2D6;
+border-radius:25px;
 	}
 
 .subway {
-
-	background-color:gray;
+margin:auto;
+width:86%;
+background-color:red;
+border:2px solid #a1a1a1;
+padding:10px 40px; 
+background:#C2C2D6;
+border-radius:25px;
 	}
 
 .bus{
-	background-color:blue;
+	margin:auto;
+width:86%;
+background-color:red;
+border:2px solid #a1a1a1;
+padding:10px 40px; 
+background:#C2C2D6;
+border-radius:25px;
+}
+.date{
+	margin:auto;
+width:86%;
+background-color:red;
+border:2px solid #a1a1a1;
+padding:10px 40px; 
+background:#C2C2D6;
+border-radius:25px;
+}
+
+/* ============================
+* NAVIGATION 
+* Modified from: http://webdesign.tutsplus.com/tutorials/   htmlcss-tutorials/a-simple-responsive-mobile-first-navigation/
+* =============================*/  
+
+#main_nav{
+clear:both;
+}  
+
+#main_nav ul{
+list-style: none;
+}
+
+#main_nav li a{
+display:block;
+color:#fff;
+background-color: #555;
+text-transform: uppercase;
+padding: 0.625em; /* 10/16 */
+text-decoration:none;
+border-bottom: 1px solid #eee;
+font-weight:900;
+}
+
+#main_nav li a:hover{
+ color:#555;
+background-color: #fff;
+}
+
+#main_nav li a:active{
+color:#555;
+background-color: #f90;
+}  
+
+/* menu button */
+.menu a{
+padding:0.5em 0.625em; /*10/16 */
+background-color: #555;
+background-color: rgba(60,60,60,.6);
+border-radius:5px;
+color: #fff;
+text-decoration:none;
+}
+
+.menu a:hover{
+color:#555;
+background-color: #f90;
+}
+
+.menu{
+margin-bottom:1em;
+position:fixed;
+float: right; 
 }
 
 

diff --git a/index.html b/index.html
@@ -7,31 +7,77 @@
 </head>
 <body>
 	<a name="top"></a>
-		<div class="menu">
+<div class="menu">
     <a href="#main_nav">Menu</a>
-  		</div>
+</div>
 
+<div class="intro">
+<h1>
+Careers in the Creative Arts
+</h1>
 
+		<p>Careers in the Creative Arts is a one day event at BMCC that will give you direct insight into what it takes to be a creative professional from the creatives themselves. Come for free and learn how to make a living at what you love.</p>
+</div>
 
+<div class="date">
+			<h1>DATE AND TIME</h1>
 
+				<p>Friday, June 14, 2014<br>
+				8:30am - 4:30pm</p>
+</div>
 
 
+<div class="location">
+				<h1>LOCATION</h1>
+					<p>Borough of Manhattan Community College<br>
+					199 Chambers Street<br> 
+					New York, NY 10007</p>
 
+</div>
 
 
+<div class="featuredspeakers">
 
+	<h1>Bil Wright</h1>
+	<img src="cropped/BilWright_2.jpg">
+</div>	
 
-	0
-	<a name="nav"></a>
-<nav id="nav">
-<ul>
-<li id="active"> <a href="index.html">home</a> </li>
-<li> <a href="about.html">About</a> </li>
-<li> <a href="schedule.html">Schedule</a> </li>
-<li> <a href="speakers.html">Speakers</a> </li>
-<li> <a href="videos.html">Videos</a> </li>
-<li> <a href="session.html">Sessions</a> </li>
-</ul>
+<div class="workshop">
+	<h2>Creative Writing<h2>
+		<p>Whether you write novels, plays, poems, short stories, fiction or non-fiction this is the place for you.</p>
+</div>
+
+
+<div class="workshop">
+	<h2>Fine Arts<h2>
+		<p>All starving artists whether you're painters, sculptors, photographers, illustrators or anything else, make your way to this workshop.</p>
+</div>
+
+
+<div class="workshop">
+	<h2>Performing Arts<h2>
+		<p>This is the spot for you if you express your creativity in front of people. Actors, musicians, dancers and theatre people are all welcome.</p>
+</div>
+
+
+<div class="workshop">
+	<h2>Media Arts<h2>
+		<p>It's all about the media. From the silver screen, to magazines, to the mobile web, this is for all filmmakers, graphic designers, animators and web designers.</p>
+</div>
+
+
+<a name="main_nav"></a> 
+<nav id="main_nav" >
+  <ul>
+      	<li id="active"> <a href="index.html">home</a> </li>
+		<li> <a href="about.html">About</a> </li>
+		<li> <a href="schedule.html">Schedule</a> </li>
+		<li> <a href="speakers.html">Speakers</a> </li>
+		<li> <a href="videos.html">Videos</a> </li>
+		<li> <a href="session.html">Sessions</a> </li>
+
+      <li><a href="#top" class="top">Top</a></li>
+  </ul>
 </nav>
 
 <footer>