Autoprefixes

cyr15103 · Oct 4, 2017 · f97ef48 · f97ef48
1 parent 21467d2
commit f97ef48
Show file tree

Hide file tree

Showing 3 changed files with 111 additions and 56 deletions.
diff --git a/layout-practice/index.html b/layout-practice/index.html
@@ -96,25 +96,25 @@ <h4>Co Founder</h4>
             <h4 class="headings-2 center-h4">SERIOUSLY</h4>
         	<h2 class="headings-2">So start on this soon.</h2>
             <p align="center">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Etiasem malesuada magn. Vestibulum felis euismod semper.</p>
-            <img src="images/browser.png" alt="browser image" class="full-width">
+            <img src="images/browser.png" alt="browser image" class="full-width browser">
         </section>
     </article>    
 
    	<article id="blue-bg">
-        <section class="four-column">
-           <h4 class="headings-4 center-h4-2">THIS FORM DOESN'T HAVE TO WORK</h4>
-        	<h2 align="center" class="headings-4">But create it anyways. Use the right fields ...</h2>
-
+
+           <h4 class="headings-4">THIS FORM DOESN'T HAVE TO WORK</h4>
+        	<h2 class="headings-4">But create it anyways. Use the right fields ...</h2>
+           <section class="four-column"> 
             <form>
 
   				<div class="input">
-  					<input type="text" name="fullname" value="FULL NAME">
+  					<input type="text" name="fullname" placeholder="FULL NAME">
   				</div>
   				<div class="input">
-  				<input type="text" name="email" value="YOUR EMAIL">
+  				<input type="text" name="email" placeholder="YOUR EMAIL">
   				</div>
 				<div class="input">
-  					<input type="text" name="password" value="PASSWORD">
+  					<input type="text" name="password" placeholder="PASSWORD">
   				</div>
 			</form>
 			<div class="button-box">

diff --git a/layout-practice/layout-practice.css b/layout-practice/layout-practice.css
@@ -24,6 +24,7 @@ h1 {
 	font-weight:100;
 	font-size:60px;
 	padding:200px 275px 50px 275px;
+	vertical-align:middle;
 }
 
 h2 {
@@ -64,8 +65,9 @@ a {
 
 .button {
 	background-color:#ff6d6d;
-	display: inline-block;
-	margin-left:43%;
+	display:flex;
+	width:100px;
+	justify-content: center;
 	padding:15px 50px 15px 50px;
 	border-radius: 2px;
 	margin-bottom:20px;
@@ -240,10 +242,10 @@ footer {
 	}
 
 	.button {
-	margin-left:36%;
-	padding:5px 30px 5px 30px;
-	margin-bottom:10px;
-	margin-top:0px;
+	display:flex;
+	width:100px;
+	justify-content: center;
+	padding:5px 15px 5px 15px;
 	}
 
 	.full-width {
@@ -334,9 +336,10 @@ footer {
 		font-size:14px;
 	}
 	.button {
-	margin-left:39%;
-	margin-bottom:10px;
-	margin-top:0px;
+	display:flex;
+	width:100px;
+	justify-content: center;
+	padding:10px 30px 10px 30px;
 	}
 
 	 article h2, article h3, article h4, article p, footer h3 {
@@ -416,9 +419,7 @@ footer {
 		margin-left:6%;
 		margin-top:20px;
 	}
-	.button {
-		padding:5px 50px 5px 50px;
-	}
+
 }
 
 /*desktop styles*/
@@ -452,7 +453,7 @@ footer {
 	}
 
 	#black-bg img {
-		margin-left:80px;
+		margin-left:8%;
 	}
 
 	.three-column div{
@@ -552,28 +553,17 @@ footer {
 	}
 
 	.headings-2 {
-		margin-left:32%;
+		display:flex;
+		justify-content: center;
 	}
 
 	.headings-3 {
 		margin-top:70px;
 	}
 
-	.headings-4 {
-		margin-left:26%;
-		width:700px;
-	}
-
-	#white-bg-1 .center-h4 {
-		margin-left:43%;
-	}
-
-	#grey-bg .center-h4{
-		margin-left:43%;
-	}
-
-	#blue-bg .center-h4-2{
-		margin-left:38%;
+	.headings-4{
+		display:flex;
+		justify-content: center;
 	}
 
 	#brand-names {
@@ -588,8 +578,9 @@ footer {
 	}
 
 	#grey-bg img {
-		margin-left:18%;
-		margin-bottom:-15px;
+		margin-bottom:-10px;
+		display:flex;
+		justify-content: center;
 	}
 
 	#blue-bg form {
@@ -623,4 +614,8 @@ footer {
 	footer {
 		margin-left:5%;
 	}
+
+	#brand-names .shrink-1st {
+		margin-left:15%;
+	}
 }
diff --git a/web-exercises-master/css-css3/main.css b/web-exercises-master/css-css3/main.css
@@ -99,6 +99,9 @@ textarea {
  * 1. Add a background gradient to the body
  */
 body {
+    background: -webkit-gradient(linear, left top, left bottom, from(#80ccff), color-stop(navy), to(purple));
+    background: -webkit-linear-gradient(#80ccff, navy, purple);
+    background: -o-linear-gradient(#80ccff, navy, purple);
     background: linear-gradient(#80ccff, navy, purple);
 }
 
@@ -119,41 +122,91 @@ main > header {
  * 3. Add a serif web font to the page (will require modification to html). Add it first in the font-family below.
  */
 main > header h1 {
-  animation-duration: 1s;
-  animation-fill-mode: both;
-  animation-iteration-count: infinite;
-  animation-duration: 2s;
-  animation-duration: .75s;
-  animation-name:rubberband;
+  -webkit-animation-duration: 1s;
+          animation-duration: 1s;
+  -webkit-animation-fill-mode: both;
+          animation-fill-mode: both;
+  -webkit-animation-iteration-count: infinite;
+          animation-iteration-count: infinite;
+  -webkit-animation-duration: 2s;
+          animation-duration: 2s;
+  -webkit-animation-duration: .75s;
+          animation-duration: .75s;
+  -webkit-animation-name:rubberband;
+          animation-name:rubberband;
+}
+
+@-webkit-keyframes rubberband{
+  from {
+    -webkit-transform: scale3d(1, 1, 1);
+            transform: scale3d(1, 1, 1);
+  }
+
+  30% {
+    -webkit-transform: scale3d(1.25, 0.75, 1);
+            transform: scale3d(1.25, 0.75, 1);
+  }
+
+  40% {
+    -webkit-transform: scale3d(0.75, 1.25, 1);
+            transform: scale3d(0.75, 1.25, 1);
+  }
+
+  50% {
+    -webkit-transform: scale3d(1.15, 0.85, 1);
+            transform: scale3d(1.15, 0.85, 1);
+  }
+
+  65% {
+    -webkit-transform: scale3d(.95, 1.05, 1);
+            transform: scale3d(.95, 1.05, 1);
+  }
+
+  75% {
+    -webkit-transform: scale3d(1.05, .95, 1);
+            transform: scale3d(1.05, .95, 1);
+  }
+
+  to {
+    -webkit-transform: scale3d(1, 1, 1);
+            transform: scale3d(1, 1, 1);
+  }
 }
 
 @keyframes rubberband{
   from {
-    transform: scale3d(1, 1, 1);
+    -webkit-transform: scale3d(1, 1, 1);
+            transform: scale3d(1, 1, 1);
   }
 
   30% {
-    transform: scale3d(1.25, 0.75, 1);
+    -webkit-transform: scale3d(1.25, 0.75, 1);
+            transform: scale3d(1.25, 0.75, 1);
   }
 
   40% {
-    transform: scale3d(0.75, 1.25, 1);
+    -webkit-transform: scale3d(0.75, 1.25, 1);
+            transform: scale3d(0.75, 1.25, 1);
   }
 
   50% {
-    transform: scale3d(1.15, 0.85, 1);
+    -webkit-transform: scale3d(1.15, 0.85, 1);
+            transform: scale3d(1.15, 0.85, 1);
   }
 
   65% {
-    transform: scale3d(.95, 1.05, 1);
+    -webkit-transform: scale3d(.95, 1.05, 1);
+            transform: scale3d(.95, 1.05, 1);
   }
 
   75% {
-    transform: scale3d(1.05, .95, 1);
+    -webkit-transform: scale3d(1.05, .95, 1);
+            transform: scale3d(1.05, .95, 1);
   }
 
   to {
-    transform: scale3d(1, 1, 1);
+    -webkit-transform: scale3d(1, 1, 1);
+            transform: scale3d(1, 1, 1);
   }
 }
 
@@ -168,7 +221,8 @@ h1 {
 main > aside, main > section {
     float: left;
     background-color: white;
-    box-sizing:border-box;
+    -webkit-box-sizing:border-box;
+            box-sizing:border-box;
     padding:25px;
 }
 
@@ -201,6 +255,8 @@ main > aside nav a {
     border-radius:5px;
     color: white;
     text-decoration: none;
+    -webkit-transition: background-color 2s;
+    -o-transition: background-color 2s;
     transition: background-color 2s;
 }
 
@@ -218,7 +274,9 @@ main > section img {
     width: 300px;
     float:right;
     margin: 0 0 1em 1em;
-    transform:rotate(180deg)
+    -webkit-transform:rotate(180deg);
+        -ms-transform:rotate(180deg);
+            transform:rotate(180deg)
 }
 
 
@@ -310,6 +368,7 @@ main > section img {
 
 @media print,
        (-webkit-min-device-pixel-ratio: 1.25),
+       (-o-min-device-pixel-ratio: 5/4),
        (min-resolution: 1.25dppx),
        (min-resolution: 120dpi) {
     /* Style adjustments for high resolution devices */
@@ -330,7 +389,8 @@ main > section img {
         background: transparent !important;
         color: #000 !important; /* Black prints faster:
                                    http://www.sanbeiji.com/archives/953 */
-        box-shadow: none !important;
+        -webkit-box-shadow: none !important;
+                box-shadow: none !important;
         text-shadow: none !important;
     }
 
@@ -392,4 +452,4 @@ main > section img {
     h3 {
         page-break-after: avoid;
     }
-}
+}