WebSite: Redesign

nir9 · Apr 12, 2023 · 349ee7c · 349ee7c
1 parent c689228
commit 349ee7c
Show file tree

Hide file tree

Showing 14 changed files with 85 additions and 437 deletions.
diff --git a/README.md b/README.md
@@ -13,7 +13,7 @@ A simple & beautiful touch carousel
 - Centered carousel or left sided (default is centered)
 
 
-![ItemSlide](https://raw.github.com/nir9/itemslide/master/website-src/img/itemslide.png)
+![ItemSlide](https://raw.github.com/nir9/itemslide/master/website-src/img/image.jpg)
 
 
 #### Optional Plugins (To add features)

diff --git a/docs/index.html b/docs/index.html
@@ -12,43 +12,12 @@
 </head>
 <body>
     <header>
-
-
-        <a style="color:#FFF;text-decoration:none;" href="../index.html">
-            <div id="headertext">ItemSlide<span style="font-size:4.3vh;">.js</span>
-            </div>
-         </a>
-            <table id="buttons-menu">
-                <tr>
-                    <td>
-                        <a id="docs" href="index.html">
-                            Docs
-                        </a>
-                    </td>
-                    <td>
-                        <a id="github" href="https://github.com/nir9/itemslide">
-                            Github
-                        </a>
-                    </td>
-                </tr>
-            </table>
-
-
-
-        <!--END OF BUTTONS MENU-->
-
-
-
-        <span id="downloadarea">
-        <a href="../website-src/download.html" id="download">DOWNLOAD</a> (10K)
-        </span>
-
+        <br>
+        <a id="headertext" href="../index.html">
+            ItemSlide.js
+        </a>
     </header>
 
-
-
-
-
     <div id="welcome">
         <div class="content" id="docs-content">
             <div class="main-title">
@@ -281,11 +250,9 @@
 
     </span>
 
-    Created by <a class="hrefs" href="https://github.com/nir9">Nir Lichtman</a>. Design by <a class="hrefs" href="http://iddan.co/">Iddan Aharonson</a>.
+    Created by <a class="hrefs" href="https://github.com/nir9">Nir Lichtman</a>
 
     </div>
-    <!--Fotter untill here-->
-
 </body>
 
 </html>
diff --git a/docs/layout.css b/docs/layout.css
@@ -3,12 +3,12 @@
     overflow-y: scroll;
     font-size: 3vh;
     text-align: left;
-    background-color: #FF7676;
+    background-color: #8601AF;
     -webkit-overflow-scrolling: touch;
 }
 
 #welcome a {
-    color:white;
+    color: white;
 }
 
 #docs-content {
@@ -37,7 +37,6 @@
 
     margin: auto;
     background-color: #fff;
-    /*e1e1e1*/
 
     border-radius: 5px;
 }

diff --git a/index.html b/index.html
@@ -24,52 +24,45 @@
     <link href="website-src/layout.css" rel="stylesheet" />
     <link href="website-src/sliding.css" rel="stylesheet" />
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
-    <!--Optional-->
-    <!--Mousewheel compatible only with jQuery-->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.js"></script>
 
     <script src="dist/itemslide.min.js"></script>
-
-    <script src="website-src/sliding.js"></script>  <!-- Here the carousel is initialized -->
+    <script src="website-src/sliding.js"></script>
 
 </head>
 <body>
     <header>
-        <a style="color:#FFF;text-decoration:none;" href="index.html">
-            <div id="headertext">ItemSlide<span style="font-size:4.3vh;">.js</span>
-            </div>
-          </a>
+        <br>
+        <a id="headertext" href="index.html">
+            ItemSlide.js
+        </a>
+    </header>
+
+    <div id="welcome">
+        <span class="content">
+            <div id="maintitle">JavaScript touch carousel library<br/></div>
             <table id="buttons-menu">
                 <tr>
                     <td>
                         <a id="docs" href="docs/index.html">
-                            Docs
+                            Documentation
                         </a>
                     </td>
                     <td>
                         <a id="github" href="https://github.com/nir9/itemslide">
-                            Github
+                            Source on Github
                         </a>
                     </td>
+                    <td>
+                        <span id="downloadarea">
+                            <a href="website-src/download.html" id="download">Download</a> (10K)
+                        </span>
+                    </td>
                 </tr>
             </table>
-
-        <span id="downloadarea">
-        <a href="website-src/download.html" id="download">DOWNLOAD</a> (10K)
-        </span>
-    </header>
-
-    <div id="welcome">
-        <span class="content">
-        <img id="main-img" src="website-src/img/hero.svg"/>
-        <div id="maintitle">simple & beautiful<br/>
-            <span style="font-weight:400;">touch carousel</span><br/>
-            <span id="example-link"><a href="examples/fullscreen_navigation/index.html">Fullscreen Example</a></span>
-        </div>
         </span>
     </div>
 
-    <!-- Here is the carousel -->
     <div id="scrolling">
         <ul>
             <li>
@@ -99,7 +92,7 @@
 <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
     </span>
 
-        Created by <a class="hrefs" href="https://github.com/nir9">Nir Lichtman</a>. Design by <a class="hrefs" href="http://aniddan.com/">Iddan Aaronsohn</a>.
+        Created by <a class="hrefs" href="https://github.com/nir9">Nir Lichtman</a>
     </div>
 </body>
 </html>
diff --git a/website-src/download.css b/website-src/download.css
@@ -1,45 +1,29 @@
-
-
-#welcome
-{
-    height:86.5vh; font-size:5vh;
-    background-color: #FF7676;
+#welcome {
+    height: 86.5vh;
+    font-size: 5vh;
+    background-color: #8601AF;
 }
 
-
-
 #welcome .menu a
 {
     position: relative;
     top:5.5vh;
 
-    border-radius: 2vh;
-    -webkit-border-radius: 2vh;
-    -o-border-radius: 2vh;
-    -moz-border-radius: 2vh;
-
     padding: 2vh 5vh 2vh 5vh;
 
     border-style: solid;
     border-width: 2px;
     border-color: #FFF;
 
-    /*border-style: solid;
-    border-width: 4px;
-    border-color: grey;*/
-
     text-decoration: none;
-    /*padding:2vh;*/
     font-weight: 600;
-    color:#FFF;
+    color: #FFF;
     font-size:3.7vh;
     transition: background-color 0.25s;
 }
 
 
-#welcome .menu a:hover
-{
-    background-color: #FFA6A6;
+#welcome .menu a:hover {
+    background-color: #FEFE33;
+    color: #8601AF;
 }
-
-
diff --git a/website-src/download.html b/website-src/download.html
@@ -7,71 +7,20 @@
     <title>ItemSlide.js - Download</title>
 
     <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600' rel='stylesheet' type='text/css'>
-
-
-    <!--Website Files-->
-    <link href="layout.css" rel="stylesheet" /><!--layout--->
-    <link href="download.css" rel="stylesheet" /><!--layout--->
-
-
-
+    <link href="layout.css" rel="stylesheet" />
+    <link href="download.css" rel="stylesheet" />
 </head>
 
 <body>
     <header>
-
-
-        <a style="color:#FFF;text-decoration:none;" href="../index.html">
-            <div id="headertext">ItemSlide<span style="font-size:4.3vh;">.js</span>
-            </div>
-            </a>
-            <table id="buttons-menu">
-                <tr>
-                    <td>
-                        <a id="docs" href="../docs/index.html">
-                            Docs
-                        </a>
-                    </td>
-                    <td>
-                        <a id="github" href="https://github.com/nir9/itemslide">
-                            Github
-                        </a>
-                    </td>
-                </tr>
-            </table>
-
-
-
-
-
-
-
-
-        <!--END OF BUTTONS MENU-->
-
-
-
-        <span id="downloadarea">
-        <a href="download.html" id="download" download>DOWNLOAD</a> (10K)
-        </span>
-
+        <br>
+        <a id="headertext" href="../index.html">
+            ItemSlide.js
+        </a>
     </header>
-
-
-
-
-
     <div id="welcome"><br/>ItemSlide requires jQuery or Zepto.<br/><br/>
-
         <span class="menu"><a href="../dist/itemslide.min.js">DOWNLOAD</a></span>
-
     </div>
-
-
-
-
-
-
     <!--Fotter from here-->
     <div id="fotter" align="center">
 
@@ -85,11 +34,9 @@
 
     </span>
 
-    Created by <a class="hrefs" href="https://github.com/nir9">Nir Lichtman</a>. Design by <a class="hrefs" href="http://iddan.co/">Iddan Aharonson</a>.
+    Created by <a class="hrefs" href="https://github.com/nir9">Nir Lichtman</a>
 
     </div>
-    <!--Fotter untill here-->
-
 </body>
 
 </html>
diff --git a/website-src/img/docs.svg b/website-src/img/docs.svg