简易的响应式LANDING PAGE模板

Simple responsive craft beer landing page

html5, 模板, 博客

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

第三方库
作品简介 2488
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import 'https://fonts.googleapis.com/css?family=Fjalla+One|Playfair+Display';
/* ------------------------------------------------------------------ */
/* Base
/* ------------------------------------------------------------------ */

body {
    background: #FFFFFF;
    font-family: 'Playfair Display', serif;
    margin: 0;
}
/* ------------------------------------------------------------------ */
/* Grid
/* ------------------------------------------------------------------ */

.container {
    position: relative;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}
.column,
.columns {
    width: 100%;
    float: left;
    box-sizing: border-box;
}
/* For devices larger than 400px */

@media (min-width: 400px) {
    .container {
        width: 85%;
        padding: 0;
    }
}
/* For devices larger than 550px */

@media (min-width: 550px) {
    .container {
        width: 80%;
    }
    .column,
    .columns {
        margin-left: 4%;
    }
    .column:first-child,
    .columns:first-child {
        margin-left: 0;
    }
    .one.column,
    .one.columns {
        width: 4.66666666667%;
    }
    .two.columns {
        width: 13.3333333333%;
    }
    .three.columns {
        width: 22%;
    }
    .four.columns {
        width: 30.6666666667%;
    }
    .five.columns {
        width: 39.3333333333%;
    }
    .six.columns {
        width: 48%;
    }
    .seven.columns {
        width: 56.6666666667%;
    }
    .eight.columns {
        width: 65.3333333333%;
    }
    .nine.columns {
        width: 74.0%;
    }
    .ten.columns {
        width: 82.6666666667%;
    }
    .eleven.columns {
        width: 91.3333333333%;
    }
    .twelve.columns {
        width: 100%;
        margin-left: 0;
    }
    .one-third.column {
        width: 30.6666666667%;
    }
    .two-thirds.column {
        width: 65.3333333333%;
    }
    .one-half.column {
        width: 48%;
    }
    /* Offsets */
    
    .offset-by-one.column,
    .offset-by-one.columns {
        margin-left: 8.66666666667%;
    }
    .offset-by-two.column,
    .offset-by-two.columns {
        margin-left: 17.3333333333%;
    }
    .offset-by-three.column,
    .offset-by-three.columns {
        margin-left: 26%;
    }
    .offset-by-four.column,
    .offset-by-four.columns {
        margin-left: 34.6666666667%;
    }
    .offset-by-five.column,
    .offset-by-five.columns {
        margin-left: 43.3333333333%;
    }
    .offset-by-six.column,
    .offset-by-six.columns {
        margin-left: 52%;
    }
    .offset-by-seven.column,
    .offset-by-seven.columns {
        margin-left: 60.6666666667%;
    }
    .offset-by-eight.column,
    .offset-by-eight.columns {
        margin-left: 69.3333333333%;
    }
    .offset-by-nine.column,
    .offset-by-nine.columns {
        margin-left: 78.0%;
    }
    .offset-by-ten.column,
    .offset-by-ten.columns {
        margin-left: 86.6666666667%;
    }
    .offset-by-eleven.column,
    .offset-by-eleven.columns {
        margin-left: 95.3333333333%;
    }
    .offset-by-one-third.column,
    .offset-by-one-third.columns {
        margin-left: 34.6666666667%;
    }
    .offset-by-two-thirds.column,
    .offset-by-two-thirds.columns {
        margin-left: 69.3333333333%;
    }
    .offset-by-one-half.column,
    .offset-by-one-half.columns {
        margin-left: 52%;
    }
}
/* ------------------------------------------------------------------ */
/* Clearing
/* ------------------------------------------------------------------ */

.container:after,
.row:after,
.u-cf {
    content: "";
    display: table;
    clear: both;
}
/* ------------------------------------------------------------------ */
/* Typography
/* ------------------------------------------------------------------ */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Fjalla One', sans-serif;
    margin-top: 0;
    margin-bottom: 2rem;
    font-weight: 300;
}
img {
    width: 100%;
    height: auto;
}
/* ------------------------------------------------------------------ */
/* Header Styles
/* ------------------------------------------------------------------ */

header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%%;
    height: 100vh;
    background: #EE6A5B url(http://jeffbredenkamp.neocities.org/bg01.gif);
}
.title {
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
    padding: 2rem;
    max-width: 960px;
    text-align: center;
}
.title h1 {
    color: #FFF;
    font-weight: 900;
    letter-spacing: 0px;
    text-transform: uppercase;
    font-size: 150px;
}
.title p {
    color: #1e1a1b;
    text-transform: lowercase;
    font-style: italic;
    font-weight: 400;
    font-size: 30px;
    left: 0;
    width: 100%;
}
.title hr {
    border: 3px solid #ffffff;
    width: 50%;
    margin-top: 40px;
    margin-bottom: 40px;
}
@media only screen and (max-width: 768px) {
    .title h1 {
        font-size: 80px;
    }
    .title p {
        font-size: 20px;
    }
}
/* ------------------------------------------------------------------ */
/* About Section
/* ------------------------------------------------------------------ */

#about {
    padding-top: 96px;
    padding-bottom: 66px;
    overflow: hidden;
    border-bottom-color: #E8E8EE;
    border-bottom-width: 3px;
    border-bottom-style: solid;
    padding: 50px 0 10px;
}
#about h1 {
    color: #1e1a1b;
    line-height: 1.25em;
    font-size: 100px;
    margin-right: auto;
    margin-left: auto;
}
#about p {
    color: #1e1a1b;
    line-height: 1.75em;
    font-size: 34px;
}
#about p {
    margin-top: 20px;
    margin-bottom: 20px;
}
@media only screen and (max-width: 768px) {
    #about h1 {
        text-align: left;
        color: #1e1a1b;
        line-height: 1.25em;
        font-size: 54px;
        margin-right: auto;
        margin-left: auto;
    }
    #about p {
        line-height: 1.75em;
        padding-top: 6%;
        font-size: 20px;
    }
}
/* ------------------------------------------------------------------ */
/* Formula Section
/* ------------------------------------------------------------------ */

#formula {
    padding: 50px 0 10px;
    overflow: hidden;
    border-bottom-color: #E8E8EE;
    border-bottom-width: 3px;
    border-bottom-style: solid;
}
#formula h1 {
    color: #999;
    line-height: 1em;
    letter-spacing: 0px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 230px;
    margin-top: 25px;
    margin-bottom: 30px;
    ;
}
#formula p {
    width: 100%;
    text-align: center;
    font-weight: bold;
    color: #1e1a1b;
    text-transform: uppercase;
    line-height: 2.25em;
    letter-spacing: 2px;
    font-size: 28px;
    margin-top: 20px;
    border-bottom-color: #1e1a1b;
    border-bottom-width: 4px;
    border-bottom-style: solid;
}
@media only screen and (max-width: 768px) {
    #formula h1 {
        font-size: 100px;
    }
    #formula p {
        font-size: 20px;
    }
}
/* ------------------------------------------------------------------ */
/* Section Four
/* ------------------------------------------------------------------ */

#sectionfour {
    padding: 50px 0 10px;
}
#sectionfour h1 {
    color: #1e1a1b;
    font-size: 55px;
    margin-bottom: 40px;
}
#sectionfour p {
    color: #1e1a1b;
    line-height: 2em;
    font-size: 24px;
    margin-top: 40px;
}
@media only screen and (min-width: 768px) {
    #sectionfour h1 {
        font-size: 50px;
    }
}
/* ------------------------------------------------------------------ */
/* Brewing Process Section
/* ------------------------------------------------------------------ */

#Brewingsection {
    padding: 50px 0 10px;
    border-bottom-color: #E8E8EE;
    border-bottom-width: 3px;
    border-bottom-style: solid;
}
#brewing .selection {
    margin: 0px auto;
    width: 100%;
    position: relative;
}
#brewing h1 {
    color: #EE6A5B;
    letter-spacing: 15px;
    font-size: 180px;
    font-weight: 800;
    text-transform: uppercase;
}
#brewing p {
    color: #1e1a1b;
    font-size: 28px;
}
@media only screen and (max-width: 768px) {
    #brewing h1 {
        font-size: 80px;
    }
}
@media only screen and (min-width: 768px) {
    #brewing .selection {
        margin: 0px auto;
        width: 500px;
        position: relative;
    }
    #brewing .first {
        margin-left: 0%;
    }
    #brewing .second {
        margin-left: 50%;
    }
    #brewing .third {
        margin-left: 0%;
    }
    #brewing .fourth {
        margin-left: 50%;
    }
    #twentyone .secondfont {
        font-size: 2.5em;
    }
    #brewing .position {
        left: 0px;
        top: 25px;
        right: 0px;
        margin-right: auto;
        margin-left: auto;
        position: absolute;
    }
}
/* ------------------------------------------------------------------ */
/* Reviews Section
/* ------------------------------------------------------------------ */

#reviews {
    background-position: center;
    padding: 15rem 0px 12rem;
    background-image: url(http://jeffbredenkamp.neocities.org/reviewbg.png);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 0px 0 0px;
    min-height: 500px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%%;
}
.content {
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
    text-align: center;
}
.content h2 {
    margin: 0 auto;
    width: 50%;
    text-align: center;
    color: #EE6A5B;
    line-height: 1.35em;
    font-size: 46px;
}
.content p {
    width: 50%;
    text-align: center;
    color: #EE6A5B;
    text-transform: uppercase;
    line-height: 1.75em;
    letter-spacing: 5px;
    padding-top: 30px;
    font-size: 0.85em;
    font-style: italic;
    margin-top: 75px;
    margin: 0 auto;
    border-top-color: #1e1a1b;
    border-top-width: 3px;
    border-top-style: solid;
}
@media only screen and (max-width: 768px) {
    .content h2 {
        font-size: 28px;
    }
}
/* ------------------------------------------------------------------ */
/* Footer Section
/* ------------------------------------------------------------------ */

footer {
    padding-top: 48px;
    background-color: #333;
    color: #303030;
    font-size: 14px;
    text-align: center;
    position: relative;
    padding-bottom: 50px;
}
footer h2 {
    text-align: center;
    color: #EE6A5B;
    line-height: 1.2em;
    letter-spacing: 6px;
    text-transform: uppercase;
    font-size: 28px;
}
footer p {
    text-align: center;
    color: #999;
    line-height: 3em;
    letter-spacing: 2px;
    font-size: 1em;
    margin-top: 20px;
}
/* ------------------------------------------------------------------ */
/* General Styles
/* ------------------------------------------------------------------ */

hr {
    border: 3px solid #EE6A5B;
    border-image: none;
}

HTML

<header>
    <div class="title">
        <p>A Seemingly Magical Process</p>
        <hr>
        <h1>Emerald Tablet</h1>
        <hr>
        <p>Of Transformation, Creation, or Combination.</p>
    </div>
</header>

<section id="about">
    <div class="container">
        <div class="six columns">
            <h1>What is<br>
    Emerald Tablet?</h1>
            <hr>
        </div>
        <div class="six columns">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
</section>

<section id="formula">
    <div class="container">
        <div class="eight columns">
            <h1>Our<br>
        <span style="color: #EE6A5B;">Formula</span> Process</h1>
        </div>
        <div class="four columns">
            <p>1. Malted Barley</p>
            <p>2. Hops</p>
            <p>3. Yeast</p>
            <p>4. Water</p>
            <p>5. Orange Peel</p>
        </div>
    </div>
</section>

<section id="sectionfour">
    <div class="container">
        <div class="twelve columns">
            <div class="six columns">
                <h1>The Brewing Process</h1>
                <hr>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
            <div class="six columns"> <img src="https://jeffbredenkamp.neocities.org/alch01.png" alt="Alchemy"> </div>
        </div>
    </div>
</section>

<section id="Brewingsection">
    <div class="container">
        <div id="brewing">
            <div class="selection first">
                <h1>One</h1>
                <p class="position"><em>The Malting</em>
                    <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
            <div class="selection second">
                <h1>Two</h1>
                <p class="position"><em>The Brewing</em>
                    <br> Sed ut perspiciatis unde omnis error sit voluptatem.</p>
            </div>
            <div class="selection third">
                <h1>Three</h1>
                <p class="position"><em>The Fermentation</em>
                    <br> Nemo enim ipsam voluptatem quia sit aspernatur.</p>
            </div>
            <div class="selection fourth">
                <h1>Four</h1>
                <p class="position"><em>The Bottling</em>
                    <br> At vero eos et accusamus et iusto ducimus.</p>
            </div>
        </div>
    </div>
</section>

<h2>The true alchemists do not change lead into gold; they change the world into words.</h2>
        <p>William H. Gass</p>
    </div>

</section>

<footer>
    <div class="row">
        <div class="container">
            <div class="four columns">
                <h2>Contact Us</h2>
                <p><em>+44 1908 254 165</em>
                </p>
                <hr>
                <p>456 Strawberry Lane
                    <br> Mableton
                    <br> GA 30126</p>
            </div>
            <div class="four columns">
                <h2>Opening Times</h2>
                <p><em>Mon - Fri 09:00 to 20:00</em>
                </p>
                <hr>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p>
            </div>
            <div class="four columns">
                <h2>Social Media</h2>
                <p><em>Follow Us</em>
                </p>
                <hr>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
                    <br>
                </p>
            </div>
        </div>
    </div>
</footer>

Simple responsive craft beer landing page

html5, 模板, 博客

编辑器支持Emmet

快捷键

Simple responsive craft beer landing page

html5, 模板, 博客

HTML5/GSAP 一款旅行类移动网页应用模板

HTML5 GSAP一款很棒的竖向动画广告条模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：