Refactor and Formatting

Remove unnecessary comments Remove unused styles Format code Update Logo image
YC · Oct 22, 2020 · c1c57ec · c1c57ec
1 parent 3ef985e
commit c1c57ec
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 122 deletions.
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2013-16 YC
+Copyright (c) 2013 YC
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of
 this software and associated documentation files (the "Software"), to deal in

diff --git a/README.md b/README.md
@@ -1,15 +1,10 @@
 Coming Soon
 ===========
-Coming Soon is a simplistic, animated and responsive "coming soon" page. 
-Coming Soon is coded in HTML5 and CSS3. 
+Coming Soon is a simplistic, animated and responsive "coming soon" page.
 
-Features:
-Multi-Browser Support (Up to Date Major Browsers),
-Responsive Design
-
-Upcoming Features:
-More Multi Browser Support,
-Documentation
+- HTML and CSS
+- Multi-Browser Support (Up to Date Major Browsers)
+- Responsive Design
 
 [Demo](http://yc.github.io/coming-soon/)
-![alt tag](image/scr.png)
+![Screenshot](image/scr.png)
diff --git a/index.html b/index.html
@@ -1,117 +1,89 @@
 <!DOCTYPE html>
-<!--/*License at http://github.com/YC/coming-soon*/-->
 <html>
-    <head>
-        <meta charset="utf-8"> <!--Define Charset-->
-        <meta name=viewport content="width=device-width, initial-scale=1">
-        <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
-        <style type="text/css">
-            body {margin:0;padding:0;} /*CSS Reset*/
-            html {height:100%;}
-            body
-            {
-                font-family: 'Roboto', sans-serif; /*Default Font*/
-                width:100%; height:100%;
-                text-align:center; /*Align Text to Center*/
-                display:table;
-                -webkit-animation: fadeinelement 3s;
-                animation: fadeinelement 3s;
-            }
-            h1,h2,h3
-            {
-                cursor:default; /*When hover, default cursor displays*/
-            }
-            h2
-            {
-                font-weight:300;
-                margin-bottom:25px;
-            }
-            img
-            {
-                width:25%; /*Define Image Width*/
-                width:25vw;
-                border:0; /*For IE*/
-            }
-            #main
-            {
-                vertical-align:middle;
-                display:table-cell;
-            }
-            #progress
-            {
-                width:45%; /*Changes Percentage of Bar Total Width*/
-                width:45vw;
-                border-radius:10px; /*Roundness of Bar*/
-                background-color:#a8a8a8; /*Background Colour of Bar*/
-                margin:0 auto; /*Center Object*/
-                padding:7px 5px;
-                /*border: 5px solid #a8a8a8; - Border Colour of Bar*/
-            }
-            #fill
-            {
-                padding:2px 0;
-                background-color:#00b98b; /*Fill of Bar*/
-                width:35%; /*Bar Percent, Can be Customized down Below*/
-                border-radius:25px; /*Bar Roundness*/
-                -webkit-animation: proanimate 2s;
-                animation: proanimate 2s;
+<head>
+    <meta charset="utf-8">
+    <meta name=viewport content="width=device-width, initial-scale=1">
+    <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
+    <style>
+        body { margin: 0; padding: 0; }
+        html { height: 100%; cursor: default; }
+        body {
+            font-family: "Roboto", sans-serif; /* Default font */
+            width: 100%; height: 100%;
+            text-align: center;
+            display: table;
+            opacity: 1;
+            animation: fadein 3s forwards;
+        }
+        h2 {
+            font-weight: 300;
+            margin-bottom: 25px;
+        }
+        img {
+            width: 25%; /* Image width */
+            border: 0; /* For IE */
+        }
+        #main {
+            vertical-align: middle;
+            display: table-cell;
+        }
+        /* Progress bar */
+        #progress {
+            width: 45%; /* Bar width */
+            margin: 0 auto;
+            border-radius: 10px; /* Roundness */
+            background-color: #a8a8a8; /* Background colour */
+            padding: 7px 5px;
+            /* border: 5px solid #a8a8a8; Border */
+        }
+        #fill {
+            padding: 2px 0;
+            background-color: #00b98b; /* Fill colour */
+            width: 35%; /* Bar percentage, change text below also */
+            border-radius: 25px; /* Roundness */
+            animation: proanimate 2s;
+        }
+        #barpercent h3 {
+            color: white; /* Bar percentage text colour */
+            margin: 0; padding: 0;
+            opacity: 1;
+            animation: fadein 3s forwards;
+        }
+
+        /* Fades in animation */
+        @keyframes fadein  {
+            from { opacity: 0; }
+        }
+        /* Animates bar on page load */
+        @keyframes proanimate {
+            from { width: 0%; }
+        }
+
+        @media screen and (max-width:600px) {
+            img {
+                width: 60%;
             }
-            #barpercent h3
-            {
-                color:white; /*Bar Percentage Text Colour*/
-                margin:0; padding:0;
-                opacity:0;
-                -webkit-animation: fadeinelement 3s forwards;
-                animation: fadeinelement 3s forwards;
+            h1 {
+                font-size: 1.3em;
             }
-
-            @keyframes fadeinelement /*Fades in Page*/
-            {
-                from {opacity:0;}
-                to {opacity:1;}
+            h2 {
+                margin: 1.1em;
+                font-size: 1.1em;
             }
-            @-webkit-keyframes fadeinelement
-            {
-                from {opacity:0;}
-                to {opacity:1;}
-            }	
-
-             /* Animates Bar Moving on Page Load*/
-            @keyframes proanimate{from {width:0%;}}
-            @-webkit-keyframes proanimate{from {width:0%;}}
-
-            /*Responsive*/
-            @media screen and (max-width:600px)
-            {
-                img
-                {
-                    width:80%;
-                    width:60vw;
-                }
-                h1
-                {
-                    font-size:1.3em;
-                }
-                h2
-                {
-                    margin: 1.1em;
-                    font-size:1.1em;
-                }
-                #progress
-                {
-                    width:80%; /*Changes Percentage of Bar Width*/
-                }
+            #progress {
+                width: 80%; /* Bar width */
             }
-        </style>	
-        <!--Title of Page--><title>Coming Soon</title>
-    </head>	
-    <body>
-        <div id="main"> <!--Start Page Container-->
-            <img src="logo.png" alt=""> <!--Logo-->
-            <h1>Company Name</h1>
-            <h2>Our website is currently under construction. </h2>
-            <div id="progress"><div id="fill"><div id="barpercent"><h3>35%</h3></div></div></div>
-        </div> <!--End Page Container-->
-        <link href='https://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css' property='stylesheet'> <!--Define Google Fonts-->
-    </body>
-</html>
+        }
+    </style>
+    <title>Coming Soon</title>
+</head>
+<body>
+    <div id="main">
+        <img src="logo.png" alt="Logo Image">
+        <h1>Company Name</h1>
+        <h2>Our website is currently under construction. </h2>
+        <div id="progress"><div id="fill"><div id="barpercent"><h3>35%</h3></div></div></div>
+    </div>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap" rel="stylesheet">
+</body>
+</html>
diff --git a/logo.png b/logo.png