add raleway font in dir

css/fonts.css

@@ -0,0 +1,41 @@
+@font-face {
+    font-family: 'Raleway', sans-serif;
+    font-style: normal;
+    font-weight: 700;
+    src: url(../fonts/raleway/Raleway-Bold.woff2) format('woff2'), url(../fonts/raleway/Raleway-Bold.woff) format('woff')
+}
+
+@font-face {
+    font-family: 'Raleway', sans-serif;
+    font-style: italic;
+    font-weight: 700;
+    src: url(../fonts/raleway/Raleway-BoldItalic.woff2) format('woff2'), url(../fonts/raleway/Raleway-BoldItalic.woff) format('woff')
+}
+
+@font-face {
+    font-family: 'Raleway', sans-serif;
+    font-style: normal;
+    font-weight: 400;
+    src: url(../fonts/raleway/Raleway-Regular.woff2) format('woff2'), url(../fonts/raleway/Raleway-Regular.woff) format('woff')
+}
+
+@font-face {
+    font-family: 'Raleway', sans-serif;
+    font-style: italic;
+    font-weight: 400;
+    src: url(../fonts/raleway/Raleway-Italic.woff2) format('woff2'), url(../fonts/raleway/Raleway-Italic.woff) format('woff')
+}
+
+@font-face {
+    font-family: 'Raleway', sans-serif;
+    font-style: normal;
+    font-weight: 300;
+    src: url(../fonts/raleway/Raleway-Light.woff2) format('woff2'), url(../fonts/raleway/Raleway-Light.woff) format('woff')
+}
+
+@font-face {
+    font-family: 'Raleway', sans-serif;
+    font-style: italic;
+    font-weight: 300;
+    src: url(../fonts/raleway/Raleway-LightItalic.woff2) format('woff2'), url(../fonts/raleway/Raleway-LightItalic.woff) format('woff')
+}

css/skeleton.css

@@ -25,6 +25,7 @@
 - Media Queries
 */
 
+@import "fonts.css";
 
 /* Grid
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
@@ -34,30 +35,33 @@
     max-width: 960px;
     margin: 0 auto;
     padding: 0 20px;
-  box-sizing: border-box; }
+    box-sizing: border-box;
+}
+
 .column,
 .columns {
     width: 100%;
     float: left;
-  box-sizing: border-box; }
+    box-sizing: border-box;
+}
 
 /* For devices larger than 400px */
-@media (min-width: 400px) {
+@media screen and (min-width: 400px) {
     .container {
         width: 85%;
-    padding: 0; }
+        padding: 0;
+    }
 }
 
 /* For devices larger than 550px */
 @media (min-width: 550px) {
-  .container {
-    width: 80%; }
+    .container { width: 80%; }
+
     .column,
-  .columns {
-    margin-left: 4%; }
+    .columns { margin-left: 4%; }
+
     .column:first-child,
-  .columns:first-child {
-    margin-left: 0; }
+    .columns:first-child { margin-left: 0; }
 
     .one.column,
     .one.columns                    { width: 4.66666666667%; }
@@ -72,10 +76,8 @@
     .ten.columns                    { width: 82.6666666667%; }
     .eleven.columns                 { width: 91.3333333333%; }
     .twelve.columns                 { width: 100%; margin-left: 0; }
-
     .one-third.column               { width: 30.6666666667%; }
     .two-thirds.column              { width: 65.3333333333%; }
-
     .one-half.column                { width: 48%; }
 
   /* Offsets */
@@ -101,15 +103,12 @@
     .offset-by-ten.columns          { margin-left: 86.6666666667%; }
     .offset-by-eleven.column,
     .offset-by-eleven.columns       { margin-left: 95.3333333333%; }
-
     .offset-by-one-third.column,
     .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
     .offset-by-two-thirds.column,
     .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }
-
     .offset-by-one-half.column,
     .offset-by-one-half.columns     { margin-left: 52%; }
-
 }
 
 
@@ -118,22 +117,24 @@
 /* NOTE
 html is set to 62.5% so that all the REM measurements throughout Skeleton
 are based on 10px sizing. So basically 1.5rem = 15px :) */
-html {
-  font-size: 62.5%; }
+html { font-size: 62.5%; }
+
 body {
     font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
     line-height: 1.6;
     font-weight: 400;
     font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  color: #222; }
-
+    color: #222;
+}
 
 /* Typography
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
 h1, h2, h3, h4, h5, h6 {
     margin-top: 0;
     margin-bottom: 2rem;
-  font-weight: 300; }
+    font-weight: 300;
+}
+
 h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
 h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
 h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
@@ -142,7 +143,7 @@ h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
 h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }
 
 /* Larger than phablet */
-@media (min-width: 550px) {
+@media screen and (min-width: 550px) {
     h1 { font-size: 5.0rem; }
     h2 { font-size: 4.2rem; }
     h3 { font-size: 3.6rem; }
@@ -151,17 +152,14 @@ h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }
     h6 { font-size: 1.5rem; }
 }
 
-p {
-  margin-top: 0; }
-
+p { margin-top: 0; }
 
 /* Links
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
-a {
-  color: #1EAEDB; }
-a:hover {
-  color: #0FA0CE; }
+a { color: #1EAEDB; }
 
+a:hover,
+a:focus { color: #0FA0CE; }
 
 /* Buttons
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
@@ -186,7 +184,9 @@ input[type="button"] {
     border-radius: 4px;
     border: 1px solid #bbb;
     cursor: pointer;
-  box-sizing: border-box; }
+    box-sizing: border-box;
+}
+
 .button:hover,
 button:hover,
 input[type="submit"]:hover,
@@ -199,7 +199,9 @@ input[type="reset"]:focus,
 input[type="button"]:focus {
     color: #333;
     border-color: #888;
-  outline: 0; }
+    outline: 0;
+}
+
 .button.button-primary,
 button.button-primary,
 input[type="submit"].button-primary,
@@ -207,7 +209,9 @@ input[type="reset"].button-primary,
 input[type="button"].button-primary {
     color: #FFF;
     background-color: #33C3F0;
-  border-color: #33C3F0; }
+    border-color: #33C3F0;
+}
+
 .button.button-primary:hover,
 button.button-primary:hover,
 input[type="submit"].button-primary:hover,
@@ -220,7 +224,8 @@ input[type="reset"].button-primary:focus,
 input[type="button"].button-primary:focus {
     color: #FFF;
     background-color: #1EAEDB;
-  border-color: #1EAEDB; }
+    border-color: #1EAEDB;
+}
 
 
 /* Forms
@@ -240,7 +245,9 @@ select {
     border: 1px solid #D1D1D1;
     border-radius: 4px;
     box-shadow: none;
-  box-sizing: border-box; }
+    box-sizing: border-box;
+}
+
 /* Removes awkward default styles on some inputs for iOS */
 input[type="email"],
 input[type="number"],
@@ -252,11 +259,15 @@ input[type="password"],
 textarea {
     -webkit-appearance: none;
     -moz-appearance: none;
-          appearance: none; }
+    appearance: none;
+}
+
 textarea {
     min-height: 65px;
     padding-top: 6px;
-  padding-bottom: 6px; }
+    padding-bottom: 6px;
+}
+
 input[type="email"]:focus,
 input[type="number"]:focus,
 input[type="search"]:focus,
@@ -267,41 +278,51 @@ input[type="password"]:focus,
 textarea:focus,
 select:focus {
     border: 1px solid #33C3F0;
-  outline: 0; }
+    outline: 0;
+}
+
 label,
 legend {
     display: block;
     margin-bottom: .5rem;
-  font-weight: 600; }
+    font-weight: 600;
+}
+
 fieldset {
     padding: 0;
-  border-width: 0; }
+    border-width: 0;
+}
+
 input[type="checkbox"],
-input[type="radio"] {
-  display: inline; }
+input[type="radio"] { display: inline; }
+
 label > .label-body {
     display: inline-block;
     margin-left: .5rem;
-  font-weight: normal; }
+    font-weight: normal;
+}
 
 
 /* Lists
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
-ul {
-  list-style: circle inside; }
-ol {
-  list-style: decimal inside; }
+ul { list-style: circle inside; }
+
+ol { list-style: decimal inside; }
+
 ol, ul {
     padding-left: 0;
-  margin-top: 0; }
+    margin-top: 0;
+}
+
 ul ul,
 ul ol,
 ol ol,
 ol ul {
     margin: 1.5rem 0 1.5rem 3rem;
-  font-size: 90%; }
-li {
-  margin-bottom: 1rem; }
+    font-size: 90%;
+}
+
+li { margin-bottom: 1rem; }
 
 
 /* Code
@@ -313,12 +334,14 @@ code {
     white-space: nowrap;
     background: #F1F1F1;
     border: 1px solid #E1E1E1;
-  border-radius: 4px; }
+    border-radius: 4px;
+}
+
 pre > code {
     display: block;
     padding: 1rem 1.5rem;
-  white-space: pre; }
-
+    white-space: pre;
+}
 
 /* Tables
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
@@ -326,25 +349,25 @@ th,
 td {
     padding: 12px 15px;
     text-align: left;
-  border-bottom: 1px solid #E1E1E1; }
-th:first-child,
-td:first-child {
-  padding-left: 0; }
-th:last-child,
-td:last-child {
-  padding-right: 0; }
+    border-bottom: 1px solid #E1E1E1;
+}
 
+th:first-child,
+td:first-child { padding-left: 0; }
+
+th:last-child,
+td:last-child { padding-right: 0; }
 
 /* Spacing
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
 button,
-.button {
-  margin-bottom: 1rem; }
+.button { margin-bottom: 1rem; }
+
 input,
 textarea,
 select,
-fieldset {
-  margin-bottom: 1.5rem; }
+fieldset { margin-bottom: 1.5rem; }
+
 pre,
 blockquote,
 dl,
@@ -353,23 +376,23 @@ table,
 p,
 ul,
 ol,
-form {
-  margin-bottom: 2.5rem; }
-
+form { margin-bottom: 2.5rem; }
 
 /* Utilities
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
 .u-full-width {
     width: 100%;
-  box-sizing: border-box; }
+    box-sizing: border-box;
+}
+
 .u-max-full-width {
     max-width: 100%;
-  box-sizing: border-box; }
-.u-pull-right {
-  float: right; }
-.u-pull-left {
-  float: left; }
+    box-sizing: border-box;
+}
 
+.u-pull-right { float: right; }
+
+.u-pull-left { float: left; }
 
 /* Misc
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
@@ -377,8 +400,8 @@ hr {
     margin-top: 3rem;
     margin-bottom: 3.5rem;
     border-width: 0;
-  border-top: 1px solid #E1E1E1; }
-
+    border-top: 1px solid #E1E1E1;
+}
 
 /* Clearing
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
@@ -389,8 +412,8 @@ hr {
 .u-cf {
     content: "";
     display: table;
-  clear: both; }
-
+    clear: both;
+}
 
 /* Media Queries
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
@@ -401,18 +424,17 @@ on small devices, paste the mobile query code up in the buttons section and styl
 there.
 */
 
-
 /* Larger than mobile */
-@media (min-width: 400px) {}
+@media screen and (min-width: 400px) {}
 
 /* Larger than phablet (also point when grid becomes active) */
-@media (min-width: 550px) {}
+@media screen and (min-width: 550px) {}
 
 /* Larger than tablet */
-@media (min-width: 750px) {}
+@media screen and (min-width: 750px) {}
 
 /* Larger than desktop */
-@media (min-width: 1000px) {}
+@media screen and (min-width: 1000px) {}
 
 /* Larger than Desktop HD */
-@media (min-width: 1200px) {}
+@media screen and (min-width: 1200px) {}

index.html

@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
+    <head>
 
         <!-- Basic Page Needs
         –––––––––––––––––––––––––––––––––––––––––––––––––– -->
@@ -13,24 +13,18 @@
         –––––––––––––––––––––––––––––––––––––––––––––––––– -->
         <meta name="viewport" content="width=device-width, initial-scale=1">
 
-  <!-- FONT
+        <!-- Favicon
         –––––––––––––––––––––––––––––––––––––––––––––––––– -->
-  <link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
+        <link rel="icon" type="image/png" href="images/favicon.png">
 
         <!-- CSS
         –––––––––––––––––––––––––––––––––––––––––––––––––– -->
         <link rel="stylesheet" href="css/normalize.css">
         <link rel="stylesheet" href="css/skeleton.css">
 
-  <!-- Favicon
-  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
-  <link rel="icon" type="image/png" href="images/favicon.png">
+    </head>
+    <body>
 
-</head>
-<body>
-
-  <!-- Primary Page Layout
-  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
         <div class="container">
             <div class="row">
                 <div class="one-half column" style="margin-top: 25%">
@@ -40,7 +34,5 @@
             </div>
         </div>
 
-<!-- End Document
-  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
-</body>
+    </body>
 </html>