HTML5 响应式钓鱼垂直类网站模板

Ripples on the Water Website Design 里面包含一个能自适应内容高度的缎带标题。

模板，轮播，ribbon

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 2109
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<div id="mobile-nav-main" class="box-shadow column-full">
    <div id="mobile-nav-top" class="gradient orange-background">
        <span class="white allcaps open-sans larger text-shadow-dark">Menu</span>
    </div>
</div>
<div id="container">
    <div id="mobile-nav" class="column-full">
        <ul>
            <li><a class="darkgray notd allcaps" href="services.php" title="Services">Services</a>
            </li>
            <li><a class="darkgray notd allcaps" href="products.php" title="Products">Products</a>
            </li>
            <li><a class="darkgray notd allcaps" href="aboutus.php" title="About Us">About Us</a>
            </li>
            <li><a class="darkgray notd allcaps" href="photogallery.php" title="Photo Gallery">Photo Gallery</a>
            </li>
            <li><a class="darkgray notd allcaps" href="resources.php" title="Resources">Resources</a>
            </li>
            <li><a class="darkgray notd allcaps" href="contactus.php" title="Contact Us">Contact Us</a>
            </li>
            <li><a class="darkgray notd allcaps" href="testimonials.php" title="Testimonials">Testimonials</a>
            </li>
            <li><a class="darkgray notd allcaps" href="index.php" title="Home">Home</a>
            </li>
        </ul>
    </div>
    <div class="divsplitter" style="height: .5em;"></div>
    <header id="header-main" class="column-full">
        <div id="logo">
            <a href="index.php" title="Ripples on the Water - Home"><img src="https://www.ripplesotwater.com/images/site/ripples-on-the-water-logo.png" alt="Ripples on the Water" />
            </a>
        </div>
        <div class="divsplitter" style="height: .5em;"></div>
        <nav class="gradient orange-background">
            <span class="open-sans text-shadow-dark"><a href="services.php" title="Services">Services</a> &nbsp; &nbsp;<a href="products.php" title="Products">Products</a> &nbsp; &nbsp;<a href="aboutus.php" title="About Us">About Us</a> &nbsp; &nbsp;<a href="photogallery.php" title="Photo Gallery">Photo Gallery</a> &nbsp; &nbsp;<a href="resources.php" title="Resources">Resources</a> &nbsp; &nbsp;<a href="contactus.php" title="Contact Us">Contact Us</a> &nbsp; &nbsp;<a href="testimonials.php" title="Testimonials">Testimonials</a> &nbsp; &nbsp;<a href="index.php" title="Home">Home</a></span>
        </nav>
        <section id="featured-content">
            <div class="section-shadow">
                <div class="section-shadow-right"><img src="https://www.ripplesotwater.com/images/site/shadow-right.png" alt="Ripples on the Water" />
                </div>
                <div class="section-shadow-left"><img src="https://www.ripplesotwater.com/images/site/shadow-left.png" alt="Ripples on the Water" />
                </div>
            </div>
            <div class="featured-caption-main">
                <div class="featured-caption box-shadow active">
                    <div class="the-caption">
                        <span class="open-sans orange largest allcaps"><a class="notd" href="services.php" title="Our Services">Our Services</a></span>
                        <div class="divsplitter" style="height: .15em;"></div>
                        <span class="white small">Full time fly fishing guides. We also offer a variety of fly tying, fly casting and fly fishing lessons for everyone. <a href="services.php" title="Learn More">Learn More &gt;&gt;</a></span>
                    </div>
                </div>
                <div class="featured-caption box-shadow">
                    <div class="the-caption">
                        <span class="open-sans orange largest allcaps"><a class="notd" href="products.php" title="Products">Products</a></span>
                        <div class="divsplitter" style="height: .15em;"></div>
                        <span class="white small">Check out our own unique line of products; Lanyards, Salmon Flies, Earrings and much more! <a href="products.php" title="Learn More">Learn More &gt;&gt;</a></span>
                    </div>
                </div>
                <div class="featured-caption box-shadow">
                    <div class="the-caption">
                        <span class="open-sans orange largest allcaps"><a class="notd" href="aboutus.php" title="About Us">About Us</a></span>
                        <div class="divsplitter" style="height: .15em;"></div>
                        <span class="white small">Let us give you a better idea of who we are!<br/><a href="aboutus.php" title="Learn More">Learn More &gt;&gt;</a></span>
                    </div>
                </div>
                <div class="featured-caption box-shadow">
                    <div class="the-caption">
                        <span class="open-sans orange largest allcaps"><a class="notd" href="photogallery.php" title="Photo Gallery">Photo Gallery</a></span>
                        <div class="divsplitter" style="height: .15em;"></div>
                        <span class="white small">Check out and see some pictures of our area, fish and fishing. Check out the big fish. <a href="photogallery.php" title="Learn More">Learn More &gt;&gt;</a></span>
                    </div>
                </div>
                <div class="featured-caption box-shadow">
                    <div class="the-caption">
                        <span class="open-sans orange largest allcaps"><a class="notd" href="resources.php" title="Resources">Resources</a></span>
                        <div class="divsplitter" style="height: .15em;"></div>
                        <span class="white small">Need a license, place to stay or find out about our affiliates?  We'd like to help you out! <a href="resources.php" title="Learn More">Learn More &gt;&gt;</a></span>
                    </div>
                </div>
                <div class="featured-caption box-shadow">
                    <div class="the-caption">
                        <span class="open-sans orange largest allcaps"><a class="notd" href="contactus.php" title="About Us">Contact Us</a></span>
                        <div class="divsplitter" style="height: .15em;"></div>
                        <span class="white small">Need some help or have a question? <a href="contactus.php" title="Learn More">Learn More &gt;&gt;</a></span>
                    </div>
                </div>
                <div class="featured-caption box-shadow">
                    <div class="the-caption">
                        <span class="open-sans orange largest allcaps"><a class="notd" href="testimonials.php" title="Testimonials">Testimonials</a></span>
                        <div class="divsplitter" style="height: .15em;"></div>
                        <span class="white small">See what some of our clients have to say about their experience! <a href="testimonials.php" title="Learn More">Learn More &gt;&gt;</a></span>
                    </div>
                </div>
            </div>
            <div id="featured-images-mask">
                <div id="featured-images-container">
                    <img class="featured-image active" src="https://www.ripplesotwater.com/images/featured/featured-services.jpg" alt="Services" />
                    <img class="featured-image" src="https://www.ripplesotwater.com/images/featured/featured-products.jpg" alt="Products" />
                    <img class="featured-image" src="https://www.ripplesotwater.com/images/featured/about-us.jpg" alt="About Us" />
                    <img class="featured-image" src="https://www.ripplesotwater.com/images/featured/featured-photo-gallery.jpg" alt="Photo Gallery" />
                    <img class="featured-image" src="https://www.ripplesotwater.com/images/featured/resources.jpg" alt="Resources" />
                    <img class="featured-image" src="https://www.ripplesotwater.com/images/featured/contact-us.jpg" alt="Contact Us" />
                    <img class="featured-image" src="https://www.ripplesotwater.com/images/featured/featured-testimonials.jpg" alt="Testimonials" />
                </div>
            </div>
        </section>
    </header>
    <section id="content-main" class="column-full">
        <section id="contact-bar" class="site-padding">
            <div id="facebook-icon">
                <a href="https://www.facebook.com/pages/Ripples-on-the-water/376441652378703?fref=ts" target="new" title="Like Us on Facebook"><img src="https://www.ripplesotwater.com/images/site/facebook-icon.jpg" alt="Like Us on Facebook" />
                </a>
            </div>
            <div id="contact-content"><span class="white open-sans small"><span itemprop="streetAddress">206 Vanyo Road</span> <span itemprop="addressLocality">Berlin</span>, <span itemprop="addressRegion">PA</span> <span itemprop="postalCode">15530</span> &nbsp; &nbsp;
                <span itemprop="telephone"><a class="white notd" href="tel:+18147019703">814-701-9703</a>
                    </span>
                </span>
            </div>
        </section>
        <div class="divsplitter" style="height: 2em;"></div>
        <section class="site-padding">
            <section id="left-column" class="column nine">
                <section id="why-rotw" class="column fifteen">
                    <div class="divsplitter" style="height: 3px; background: #111316;"></div>
                    <div class="divsplitter" style="height: 2px;"></div>
                    <div class="divsplitter" style="height: 1px; background: #111316;"></div>
                    <div class="divsplitter" style="height: .5em;"></div>
                    <span class="open-sans allcaps orange larger">Why Ripples on the Water</span>
                    <p>We have been fly fishing the pristine and overlooked waters in Somerset County and the Laurel Highlands since 1970. From small mountain streams to classic limestone waters and everything in between, we can tailor a fly fishing trip
                        that is well suited to anyone's individual needs. We strive to make every day on the stream one that you will never forget. We are a full-time fly fishing guide service and are the only licensed guide service registered in Somerset
                        County making us your first choice to host your fly fishing experience in the Laurel Highlands. Book a trip with us, and discover all that the Laurel Highlands has to offer and take you on the trip of a lifetime. Fly fishing is
                        our passion, not just a hobby, and our expertise will make your trip worth remembering. Aside from guiding clients around the area, we offer classes in fly tying, fly casting and fly fishing.</p>
                </section>
                <div class="divsplitter" style="height: 2em;"></div>
                <section id="about-the-area" class="column fifteen">
                    <div class="divsplitter" style="height: 3px; background: #111316;"></div>
                    <div class="divsplitter" style="height: 2px;"></div>
                    <div class="divsplitter" style="height: 1px; background: #111316;"></div>
                    <div class="divsplitter" style="height: .5em;"></div>
                    <span class="open-sans allcaps orange larger">About the Area</span>
                    <p><span class="black">The Finest Fly Fishing Experience in the Laurel Highlands.</span> Located within the mountains in the heart of the Laurel Highlands, Somerset County and the surrounding areas have the resources to make your destination
                        a trip to remember. Aside from Alaska, Pennsylvania has more fishable miles of water than any other State in the U.S. Somerset County alone has 32 approved trout streams, more than any of the other 66 Counties in the State. The
                        county also has 61 streams that support natural reproduction, 6 Class "A" Wild Trout streams and 3 Class "A" Wild Forest streams.</p>
                    <img class="img-main" src="https://www.ripplesotwater.com/images/site/sample-image.jpg" />
                    <p>Coupled with the rest of the Laurel Highlands, this area excels in prime and pristine Trout fishing for Brown, Brook and Rainbows. The area abounds in different types of water that can appeal to anyone who casts a fly, whether it is
                        dry flies, wet flies, nymphs or streamers. Fishing in one of our many stocked streams, native fisheries or private trophy trout waters can provide a memorable destination for everyone. Many of our streams have healthy insect populations
                        and can afford the angler diversity in different types and styles of fishing. Just a short hop from us, we can be on some local limestone waters that offer world class fly fishing and prolific hatches. When one thinks of fly fishing
                        in Pennsylvania, all eyes turn to the center part of the state. While we do fish and enjoy that area, our hearts are still focused on some of this areas great and untapped streams. Every year numerous fish have been taken that
                        exceed 24".</p>
                </section>
            </section>
            <section id="right-column" class="column seven">
                <section id="our-services">
                    <div class="orange-background heading gradient">
                        <span class="white allcaps larger open-sans">Our Services</span>
                    </div>
                    <div class="divsplitter" style="height: 1em;"></div>
                    <ul>
                        <li>Fly Tying Classes</li>
                        <li>Fly Casting Instruction</li>
                        <li>Fly Fishing Instruction</li>
                        <li>Guided Fly Fishing Trips
                            <br />
                            <em>~ Half and Full Day Trips Available</em>
                        </li>
                    </ul>
                    <div class="view-all-main">
                        <div class="view-all"><a href="services.php" title="View All Services" class="view-all-link smaller darkgray notd">View All Services</a>
                        </div>
                        <div class="view-all-line">
                            <div class="view-all-hidden"></div>
                            <img src="https://www.ripplesotwater.com/images/site/spacer.gif" alt="spacer" style="width: 100%; height: 2px; border: 0;" />
                        </div>
                    </div>
                </section>
                <div class="divsplitter" style="height: 2em;"></div>
                <section id="products">
                    <div class="orange-background heading gradient">
                        <span class="white allcaps larger open-sans">Products</span>
                    </div>
                    <div class="divsplitter" style="height: 1em;"></div>
                    <ul>
                        <li>Lanyards</li>
                        <li>Classic Salmon Flies</li>
                        <li>Custom Trout Flies</li>
                        <li>Earrings</li>
                        <li>Fly Tying Materials and More</li>
                    </ul>
                    <div class="view-all-main">
                        <div class="view-all"><a href="products.php" title="View All Products" class="view-all-link smaller darkgray notd">View All Products</a>
                        </div>
                        <div class="view-all-line">
                            <div class="view-all-hidden"></div>
                            <img src="https://www.ripplesotwater.com/images/site/spacer.gif" alt="spacer" style="width: 100%; height: 2px; border: 0;" />
                        </div>
                    </div>
                </section>
                <div class="divsplitter" style="height: 2em;"></div>
                <section id="ads">
                    <a href="contactus.php" title="Youth Group Special"><img src="https://www.ripplesotwater.com/images/site/youth-group-ad.jpg" alt="Youth Group Special" />
                    </a>
                    <div class="divsplitter" style="height: 1em;"></div>
                    <a href="contactus.php" title="Couples Discount"><img src="https://www.ripplesotwater.com/images/site/couples-discount-ad.jpg" alt="Couples Discount" />
                    </a>
                    <div class="divsplitter" style="height: 1em;"></div>
                    <a href="contactus.php" title="Veterans Discount"><img src="https://www.ripplesotwater.com/images/site/veterans-discount.jpg" alt="Veterans Discount" />
                    </a>
                </section>
            </section>
        </section>
    </section>
    <section id="footer" class="column-full">
        <div id="to-top-icon">
            <a href="javascript:void(0)" onClick="goToByScroll('container')" title="Return to Top"><img src="https://www.ripplesotwater.com/images/site/to-top-icon.png" alt="Return to Top" />
            </a>
        </div>
        <div class="section-shadow">
            <div class="section-shadow-right"><img src="https://www.ripplesotwater.com/images/site/shadow-right.png" alt="Ripples on the Water" />
            </div>
            <div class="section-shadow-left"><img src="https://www.ripplesotwater.com/images/site/shadow-left.png" alt="Ripples on the Water" />
            </div>
        </div>
        <div class="divsplitter" style="height: 3em;"></div>
        <div id="partner-logos" class="column eight">
            <span class="darkgray smaller" style="display: block;">Our Partners</span>
            <div id="airflow-logo" class="partner-logo">
                <a href="https://www.airflofishing.com/?AirfloChooseCountry=2" title="Airflow" target="new"><img class="grayscale" src="https://www.ripplesotwater.com/images/site/partners/airflow.jpg" alt="Airflow" />
                </a>
            </div>
            <div id="fishpond-logo" class="partner-logo">
                <a href="https://www.fishpondusa.com" title="Fishpond" target="new"><img class="grayscale" src="https://www.ripplesotwater.com/images/site/partners/fishpond.jpg" alt="Fishpond" />
                </a>
            </div>
            <div id="hareline-logo" class="partner-logo">
                <a href="https://www.hareline.com" title="Hareline" target="new"><img class="grayscale" src="https://www.ripplesotwater.com/images/site/partners/hareline.png" alt="Hareline" />
                </a>
            </div>
            <div id="filson-logo" class="partner-logo">
                <a href="https://www.filson.com/?utm_source=MSN&utm_medium=CPC&utm_campaign=[Brand]%20Generic%20-%20(Exact)&utm_term=filson's" title="Filson" target="new"><img class="grayscale" src="https://www.ripplesotwater.com/images/site/partners/filson.png" alt="Filson" />
                </a>
            </div>
            <div id="asg-logo" class="partner-logo">
                <a href="https://www.anglersportgroup.com/" title="Angler Sport Group" target="new"><img class="grayscale" src="https://www.ripplesotwater.com/images/site/partners/asg.png" alt="Angler Sport Group" />
                </a>
            </div>
            <div id="umpqua-logo" class="partner-logo">
                <a href="https://umpqua.com/" title="Angler Sport Group" target="new"><img class="grayscale" src="https://www.ripplesotwater.com/images/site/partners/umpqua.png" alt="Umpqua" />
                </a>
            </div>
            <div id="whiting-logo" class="partner-logo">
                <a href="https://www.whitingfarms.com/" title="Angler Sport Group" target="new"><img class="grayscale" src="https://www.ripplesotwater.com/images/site/partners/whiting.png" alt="Whiting" />
                </a>
            </div>
            <div id="rio-logo" class="partner-logo">
                <a href="https://www.rioproducts.com" title="Rio" target="new"><img class="grayscale" src="https://www.ripplesotwater.com/images/site/partners/rio.jpg" alt="Rio" />
                </a>
            </div>
            <div id="echo-logo" class="partner-logo">
                <a href="https://www.echoflyfishing.com/" title="Echo" target="new"><img class="grayscale" src="https://www.ripplesotwater.com/images/site/partners/echo.jpg" alt="Echo" />
                </a>
            </div>
            <div id="greys-logo" class="partner-logo">
                <a href="https://fly.greysfishing.com/en-us/home/" title="Greys" target="new"><img class="grayscale" src="https://www.ripplesotwater.com/images/site/partners/greys.png" alt="Greys" />
                </a>
            </div>
            <div id="redington-logo" class="partner-logo">
                <a href="https://www.redington.com" title="Redington" target="new"><img class="grayscale" src="https://www.ripplesotwater.com/images/site/partners/redington.png" alt="Redington" />
                </a>
            </div>
            <div id="hardy-logo" class="partner-logo">
                <a href="https://fly.hardyfishing.com/en-us/home/" title="Hardy" target="new"><img class="grayscale" src="https://www.ripplesotwater.com/images/site/partners/hardy.png" alt="Hardy" />
                </a>
            </div>

<div id="simms-logo" class="partner-logo">
                <a href="https://www.simmsfishing.com" title="Simms" target="new"><img class="grayscale" src="https://www.ripplesotwater.com/images/site/partners/simms.png" alt="Simms" />
                </a>
            </div>
            <div id="sage-logo" class="partner-logo">
                <a href="https://www.sageflyfish.com" title="Sage" target="new"><img class="grayscale" src="https://www.ripplesotwater.com/images/site/partners/sage.png" alt="Sage" />
                </a>
            </div>
            <div id="allen-logo" class="partner-logo">
                <a href="https://www.allenflyfishing.com/" title="Allen Fly Fishing" target="new"><img class="grayscale" src="https://www.ripplesotwater.com/images/site/partners/allen-fly-fishing.png" alt="Allen Fly Fishing" />
                </a>
            </div>
        </div>
        <div id="footer-links" class="column eight">
            <span class="tiny open-sans"><a  class="darkgray color-link" href="services.php" title="Services">Services</a> &nbsp; &nbsp;<a class="darkgray color-link" href="products.php" title="Products">Products</a> &nbsp; &nbsp;<a class="darkgray color-link" href="aboutus.php" title="About Us">About Us</a> &nbsp; &nbsp;<a class="darkgray color-link" href="photogallery.php" title="Photo Gallery">Photo Gallery</a> &nbsp; &nbsp;<a class="darkgray color-link" href="resources.php" title="Resources">Resources</a> &nbsp; &nbsp;<a class="darkgray color-link" href="contactus.php" title="Contact Us">Contact Us</a> &nbsp; &nbsp;<a class="darkgray color-link" href="testimonials.php" title="Testimonials">Testimonials</a> &nbsp; &nbsp;<a class="darkgray color-link" href="index.php" title="Home">Home</a>
            <br />
            &copy; 2015 Ripples on the Water<br />
            Site By: <a class="notd" href="https://www.datasystemsassociates.com" title="Data Systems Associates" target="new">Data Systems Associates</a></span>
            <div class="divsplitter" style="height: .5em;"></div>
            <img src="https://www.ripplesotwater.com/images/verification_seal.png" alt="PayPal Verified" />
        </div>
        <div class="divsplitter" style="height: 2em;"></div>
    </section>
</div>

Ripples on the Water Website Design 里面包含一个能自适应内容高度的缎带标题。

模板，轮播，ribbon

编辑器支持Emmet

快捷键

Ripples on the Water Website Design 里面包含一个能自适应内容高度的缎带标题。

模板，轮播，ribbon

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：