Skip to content

Instantly share code, notes, and snippets.

@naresh-io

naresh-io/dabblet.css

Last active July 9, 2016 14:38
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save naresh-io/c2aa769f6e793c43ff2fde122d5d939b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save naresh-io/c2aa769f6e793c43ff2fde122d5d939b to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. naresh-io revised this gist Jul 9, 2016. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -58,7 +58,7 @@
    margin-top: -50px;
    background: rgba(255,255,255,.5);
    }
    #slider img {
    .slider img {
    width: 100%;
    }
    /*.arrow-down {
  2. naresh-io revised this gist Jul 9, 2016. No changes.
  3. naresh-io revised this gist Jul 9, 2016. No changes.
  4. naresh-io revised this gist Jul 9, 2016. 1 changed file with 18 additions and 7 deletions.
    25 changes: 18 additions & 7 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -10,16 +10,20 @@
    .sitename {
    font-size: 25px;
    line-height: 50px;
    margin: 0px 25px;
    margin: 0px 50px;
    display: inline-block;
    color: white;
    font-family: Helvetica, sans-serif;
    float: left;
    }
    .sitename a {
    text-decoration: none;
    color: white;
    }
    #menu ul {
    list-style: none;
    font-size: 15px;
    font-family: helvetica, sans-serif;
    font-family: helvetica;
    }
    #menu ul li {
    float: left;
    @@ -38,22 +42,29 @@
    color: black;;
    }
    #menu ul li a:hover {
    backgound-color: #4CAF50;
    background-color: #4CAF50;
    color: white;
    }
    #menu ul ul {
    position: absolute;
    display: none;
    background-color: white;
    background: rgba(255,255,255,.5);
    }
    #menu ul li:hover > ul {
    display: block;
    }
    #menu ul ul ul {
    margin-left: 150px;
    margin-top: -50px;
    background:rgba(255,255,255,.5);
    background: rgba(255,255,255,.5);
    }
    .slider img {
    #slider img {
    width: 100%;
    }
    }
    /*.arrow-down {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #fff;
    }*/
  5. naresh-io created this gist Jul 9, 2016.
    59 changes: 59 additions & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,59 @@
    * {
    margin: 0;
    padding: 0;
    }
    .header {
    width: 100%;
    height: 50px;
    background-color: #0066cc;
    }
    .sitename {
    font-size: 25px;
    line-height: 50px;
    margin: 0px 25px;
    display: inline-block;
    color: white;
    font-family: Helvetica, sans-serif;
    float: left;
    }
    #menu ul {
    list-style: none;
    font-size: 15px;
    font-family: helvetica, sans-serif;
    }
    #menu ul li {
    float: left;
    position: relative;
    width: 150px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    }
    #menu ul li a {
    text-decoration: none;
    color: white;
    display: block;
    }
    #menu ul li ul a {
    color: black;;
    }
    #menu ul li a:hover {
    backgound-color: #4CAF50;
    color: white;
    }
    #menu ul ul {
    position: absolute;
    display: none;
    background-color: white;
    }
    #menu ul li:hover > ul {
    display: block;
    }
    #menu ul ul ul {
    margin-left: 150px;
    margin-top: -50px;
    background:rgba(255,255,255,.5);
    }
    .slider img {
    width: 100%;
    }
    30 changes: 30 additions & 0 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,30 @@
    <div class="header">
    <div class="sitename">Website Name</div>
    <div id="menu">
    <ul>
    <li><a href="#">Tab 1</a>
    <ul>
    <li><a href="#">Sub Tab 1</a></li>
    <li><a href="#">Sub Tab 2</a></li>
    <li><a href="#">Sub Tab 3</a>
    <ul>
    <li><a href="#">Sub Sub Tab 1</a></li>
    <li><a href="#">Sub Sub Tab 2</a></li>
    <li><a href="#">Sub Sub Tab 3</a></li>
    <li><a href="#">Sub Sub Tab 4</a></li>
    <li><a href="#">Sub Sub Tab 5</a></li>
    </ul> </li>
    <li><a href="#">Sub Tab 4</a></li>
    <li><a href="#">Sub Tab 5</a></li>
    </ul>
    </li>
    <li><a href="#">Tab 2</a></li>
    <li><a href="#">Tab 3</a></li>
    <li><a href="#">Tab 4</a></li>
    <li><a href="#">Tab 5</a></li>
    </ul>
    </div>
    </div>
    <div class="slider">
    <img src = "http://www.sgbrandreach.com/wp-content/themes/food/img/cms_website_slider_img.png" />
    </div>
    1 change: 1 addition & 0 deletions dabblet.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    // alert('Hello world!');
    1 change: 1 addition & 0 deletions settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    {"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}