tp1

1b767241 · Alexandre DELEFOSSE · 01032e11 · 1b767241 · 1b767241 · 1b767241
Commit 1b767241 authored 6 years ago by Alexandre DELEFOSSE
--- a/carpenterBrut.mp4
+++ b/carpenterBrut.mp4
--- a/css/style.css
+++ b/css/style.css
 nav ul a,
 nav .brand-logo {
-  color: #444;
+  color: white;
 }
--- a/index.html
+++ b/index.html
@@ -12,7 +12,7 @@
 	</head>

 	<body>
-		<nav class="#b388ff deep-purple accent-1" role="navigation">
+		<nav class="purple" role="navigation">
 			<div class="nav-wrapper container">
 				<a id="logo-container" href="#" class="brand-logo">Logo</a>

@@ -23,7 +23,84 @@
 			</div>
 		</nav>

-		<!--JavaScript at end of body for optimized loading-->
-		<script type="text/javascript" src="js/materialize.min.js"></script>
+		<div id="index-banner" class="parallax-container">
+	    <div class="section no-pad-bot">
+	      <div class="container">
+	        <h1 class="header center white-text">InstaZZ</h1>
+	      </div>
+	    </div>
+	    <div class="parallax"><img src="https://images3.alphacoders.com/915/915614.jpg" alt="synthwave img1"></div>
+	  </div>
+
+		<div class="purple lighten-2">
+			<div class="container">
+		    <div class="section">
+
+		      <!--   Icon Section   -->
+		      <div class="row">
+		        <div class="col s12 m4">
+		          <div class="icon-block">
+		            <h2 class="center white-text"><i class="medium material-icons">flash_on</i></h2>
+		            <h5 class="center white-text">Speeds up development</h5>
+
+		            <p class="light white-text">We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components. Additionally, we refined animations and transitions to provide a smoother experience for developers.</p>
+		          </div>
+		        </div>
+
+		        <div class="col s12 m4">
+		          <div class="icon-block">
+		            <h2 class="center white-text"><i class="medium material-icons">group</i></h2>
+		            <h5 class="center white-text">User Experience Focused</h5>
+
+		            <p class="light white-text">By utilizing elements and principles of Material Design, we were able to create a framework that incorporates components and animations that provide more feedback to users. Additionally, a single underlying responsive system across all platforms allow for a more unified user experience.</p>
+		          </div>
+		        </div>
+
+		        <div class="col s12 m4">
+		          <div class="icon-block">
+		            <h2 class="center white-text"><i class="medium material-icons">settings</i></h2>
+		            <h5 class="center white-text">Easy to work with</h5>
+
+		            <p class="light white-text">We have provided detailed documentation as well as specific code examples to help new users get started. We are also always open to feedback and can answer any questions a user may have about Materialize.</p>
+		          </div>
+		        </div>
+		      </div>
+
+		    </div>
+			</div>
+		</div>
+
+		<div class="parallax-container">
+	    <div class="section no-pad-bot">
+	      <div class="container">
+
+  				<video class="responsive-video" controls>
+    				<source src="carpenterBrut.mp4" type="video/mp4">
+  				</video>
+
+	      </div>
+	    </div>
+	    <div class="parallax"><img src="http://hdqwalls.com/download/synthwave-city-retro-neon-4k-se-1920x1080.jpg" alt="synthwave img2"></div>
+	  </div>
+
+		<div class="purple lighten-2">
+			<div class="container">
+				<div class="section">
+
+					<div class="row">
+						<div class="col s12 center">
+							<h3><i class="mdi-content-send white-text"></i></h3>
+							<h4 class="white-text">Contact Us</h4>
+							<p class="left-align light white-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque id nunc nec volutpat. Etiam pellentesque tristique arcu, non consequat magna fermentum ac. Cras ut ultricies eros. Maecenas eros justo, ullamcorper a sapien id, viverra ultrices eros. Morbi sem neque, posuere et pretium eget, bibendum sollicitudin lacus. Aliquam eleifend sollicitudin diam, eu mattis nisl maximus sed. Nulla imperdiet semper molestie. Morbi massa odio, condimentum sed ipsum ac, gravida ultrices erat. Nullam eget dignissim mauris, non tristique erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
+						</div>
+					</div>
+
+				</div>
+			</div>
+		</div>
+		<!--  Scripts-->
+	  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
+	  <script src="js/materialize.js"></script>
+	  <script src="js/init.js"></script>
 	</body>
 </html>
--- a/isima.jpg
+++ b/isima.jpg
--- a/js/init.js
+++ b/js/init.js
+(function($){
+  $(function(){
+
+    $('.sidenav').sidenav();
+    $('.parallax').parallax();
+
+  }); // end of document ready
+})(jQuery); // end of jQuery name space