style: Add index.css

Put CSS code in index.css file
gabrielml · Jul 24, 2021 · 433dcd7 · 433dcd7
1 parent 0c97718
commit 433dcd7
Show file tree

Hide file tree

Showing 2 changed files with 89 additions and 94 deletions.
diff --git a/index.css b/index.css
@@ -0,0 +1,88 @@
+/* header and body setup */
+
+html {
+    font-family: "Open Sans", sans-serif;
+    background: url(pattern.png);
+}
+
+body {
+    width: 100%;
+    max-width: 1200px;
+    margin: 0 auto;
+    background-color: white;
+    position: relative;
+}
+
+/* Header styling */
+
+header {
+    height: 150px;
+}
+
+header img {
+    width: 100px;
+    position: absolute;
+    right: 32.5px;
+    top: 32.5px;
+}
+
+h1 {
+    font-size: 50px;
+    line-height: 140px;
+    margin: 0 0 0 32.5px;
+}
+
+/* main section and video styling */
+
+main {
+    background: #ccc;
+}
+
+article {
+    padding: 20px;
+}
+
+h2 {
+    margin-top: 0;
+}
+
+p {
+    line-height: 2;
+}
+
+iframe {
+    float: left;
+    margin: 0 20px 20px 0;
+    max-width: 100%;
+}
+
+/* further info links */
+
+.further-info {
+    clear: left;
+    padding: 40px 0;
+    background: #c13832;
+    box-shadow: inset 0 3px 2px rgba(0, 0, 0, 0.5),
+        inset 0 -3px 2px rgba(0, 0, 0, 0.5);
+}
+
+.further-info a {
+    width: 25%;
+    display: block;
+    float: left;
+}
+
+.further-info img {
+    max-width: 100%;
+}
+
+.clearfix {
+    clear: both;
+}
+
+/* Red panda image */
+
+.red-panda img {
+    display: block;
+    max-width: 100%;
+}
diff --git a/index.html b/index.html
@@ -9,102 +9,11 @@
       rel="stylesheet"
       type="text/css"
     />
-    <style>
-      /* header and body setup */
-
-      html {
-        font-family: "Open Sans", sans-serif;
-        background: url(pattern.png);
-      }
-
-      body {
-        width: 100%;
-        max-width: 1200px;
-        margin: 0 auto;
-        background-color: white;
-        position: relative;
-      }
-
-      /* Header styling */
-
-      header {
-        height: 150px;
-      }
-
-      header img {
-        width: 100px;
-        position: absolute;
-        right: 32.5px;
-        top: 32.5px;
-      }
-
-      h1 {
-        font-size: 50px;
-        line-height: 140px;
-        margin: 0 0 0 32.5px;
-      }
-
-      /* main section and video styling */
-
-      main {
-        background: #ccc;
-      }
-
-      article {
-        padding: 20px;
-      }
-
-      h2 {
-        margin-top: 0;
-      }
-
-      p {
-        line-height: 2;
-      }
-
-      iframe {
-        float: left;
-        margin: 0 20px 20px 0;
-        max-width: 100%;
-      }
-
-      /* further info links */
-
-      .further-info {
-        clear: left;
-        padding: 40px 0;
-        background: #c13832;
-        box-shadow: inset 0 3px 2px rgba(0, 0, 0, 0.5),
-          inset 0 -3px 2px rgba(0, 0, 0, 0.5);
-      }
-
-      .further-info a {
-        width: 25%;
-        display: block;
-        float: left;
-      }
-
-      .further-info img {
-        max-width: 100%;
-      }
-
-      .clearfix {
-        clear: both;
-      }
-
-      /* Red panda image */
-
-      .red-panda img {
-        display: block;
-        max-width: 100%;
-      }
-    </style>
+    <link href="index.css" rel="stylesheet" type="text/css" />
   </head>
   <body>
     <header>
       <h1>Mozilla</h1>
-      <!-- insert <img> element, link to the small
-          version of the Firefox logo -->
       <img
         src="images/firefox_logo-only_RGB120_tinified.png"
         alt=""
@@ -114,7 +23,6 @@ <h1>Mozilla</h1>
 
     <main>
       <article>
-        <!-- insert iframe from youtube -->
         <iframe
           width="400"
           height="315"
@@ -145,7 +53,6 @@ <h2>Rocking the free web</h2>
       </article>
 
       <div class="further-info">
-        <!-- insert images with srcsets and sizes -->
         <a href="https://www.mozilla.org/en-US/firefox/new/">
           <img
             srcset="