Jump to content
Sign in to follow this  
Boneco

Website Responsive Theme Girl by bonequinho.css

Recommended Posts

CODE CSS3:

background: url(https://imagizer.imageshack.com/v2/1600x1200q90/924/aJYy0t.jpg);background-size: cover;background-attachment: fixed;margin: 0;padding: 0;font: 16px "Poppins", sans-serif;}*{box-sizing: border-box;}img{max-width: 100%;}h1, h2, h3, p{margin: 0;padding: 0;}p{font-size: 14px;color: #b6b6b6;font-style: italic;}.container{max-width: 1128px;margin: auto;padding: 0 21px;}.intro h1, .intro p, .items h2, .items p{text-align: center;}.intro{margin: 76px 0 56px 0;}.intro h1{font-size: 46px;color: white;}.intro h1, .items p{text-transform: uppercase;letter-spacing: 2.8px;}.intro p{font-size: 18px;}.header{background: #fff;padding: 60px 0;}.items p::before{content: '';display: block;padding-top: 12px;border-top: 2px solid #b6b6b6;width: 110px;margin: 10px auto;}.about, .sectionb{padding: 86px;}.about{background: #f0f0f0;}.about p{line-height: 28px;margin-bottom: 24px;}@media (max-width: 600px) { .about{padding: 33px;} }.sectionb{background: #333;}.box-images{background: #000;}.asd .items{padding-top: 36px;padding-bottom: 36px;}.asd .items h2{color: white;}@media (min-width: 600px) { .flex div, .a, .b, .d{width: 50%;} }.flex img{width: 100%;cursor: pointer;height: 310px;}.flex{display: flex;flex-wrap: wrap;}.b , .c, .d{padding: 110px 56px;}.a, .b, .c, .d{height: 400px;}.a img{height: 100%;}.b{background: #f0f0f0;}.c{background: #333;}h3{margin-bottom: 21px;font-size: 36px;color: white;text-shadow: -2px 2px 2px black, -2px -2px 2px gray;}div#noowayfixed {

 

CODE HTML5:

 

[font: Poppins]    

<div class="container">

<div class="intro">
    <h1>space girl</h1>
    <p>by template</p>
</div>

<div class="section">
    <img src="https://imagizer.imageshack.com/v2/1600x1200q90/922/wZdZPn.jpg" alt="bg">
    <div class="header">
            <div class="items">
                <h2>you title heading</h2>
                <p>Lorem ipsum dolor sit</p>
            </div>
    </div>

    <div class="about">
            <p>Curabitur eget semper ante. Morbi eleifend ultricies est, a blandit diam vehicula vel. Vestibulum porttitor nisi quis viverra hendrerit. Suspendisse vel volutpat nibh, vel elementum lacus. Maecenas commodo pulvinar dui, at cursus metus imperdiet vel. Vestibulum et efficitur urna. Duis velit nulla, interdum sed felis sit amet, facilisis auctor nunc. Cras luctus urna at risus feugiat scelerisque nec sed diam.</p>
            <p>Nunc fringilla metus odio, at rutrum augue tristique vel. Nulla ac tellus a neque ullamcorper porta a vitae ipsum. Morbi est sapien, hendrerit quis mi in, aliquam bibendum orci. Vestibulum imperdiet nibh vitae maximus posuere. Aenean sit amet nibh feugiat, condimentum tellus eu, malesuada nunc. Mauris ac pulvinar turpis, sit amet pharetra est. Ut bibendum justo condimentum, vehicula ex vel, venenatis libero. Etiam vehicula urna sed justo bibendum, ac lacinia nunc pulvinar. Integer nec velit orci. Vestibulum pellentesque varius dapibus. Morbi ullamcorper augue est, sed luctus orci fermentum dictum. Nunc tincidunt, nisl consequat convallis viverra, metus nisl ultricies dui, vitae dapibus ligula urna sit amet nibh. Duis ut venenatis enim.</p>
    </div>
</div>

<div class="sectionb">
        <div class="box-images">
            <div class="asd">
                <div class="items">
                    <h2>you title heading</h2>
                    <p>Lorem ipsum dolor sit</p>
                </div>
            </div>

            <div class="flex">
                <div>
                    <img src="https://imagizer.imageshack.com/v2/1600x1200q90/922/r9HICw.jpg" alt="img" class="img">
                    </div>
                    <div>
                        <img src="https://imagizer.imageshack.com/v2/1600x1200q90/922/rIgzIz.jpg" alt="img" class="img">
                        </div>
                        <div>
                            <img src="https://imagizer.imageshack.com/v2/1600x1200q90/924/jwebHv.jpg" alt="img" class="img">
                            </div>
                            <div>
                                <img src="https://imagizer.imageshack.com/v2/1600x1200q90/923/6nRly0.jpg" alt="img" class="img">
                                </div>
                    
        </div>
</div>
</div>

<div class="sectionc">
    <div class="flex">
            <div class="a"><img src="https://imagizer.imageshack.com/v2/1600x1200q90/924/ggiClE.jpg" alt=""></div>
            <div class="b">
                <h3>Lorem ipsum dolor sit</h3>
                <p>Curabitur eget semper ante. Morbi eleifend ultricies est, a blandit diam vehicula vel. Vestibulum porttitor nisi quis viverra hendrerit. Suspendisse vel volutpat nibh, vel elementum lacus. Maecenas commodo pulvinar dui, at cursus metus imperdiet vel.</p>
            </div>
            <div class="c">
                <h3>Lorem ipsum dolor sit</h3>
                <p>Curabitur eget semper ante. Morbi eleifend ultricies est, a blandit diam vehicula vel. Vestibulum porttitor nisi quis viverra hendrerit. Suspendisse vel volutpat nibh, vel elementum lacus. Maecenas commodo pulvinar dui, at cursus metus imperdiet vel.</p>
            </div>
            <div class="a"><img src="https://imagizer.imageshack.com/v2/1600x1200q90/924/hzLh2E.jpg" alt=""></div>
            <div class="a"><img src="https://imagizer.imageshack.com/v2/1600x1200q90/923/lnles8.jpg" alt=""></div>
            <div class="b">
                <h3>Lorem ipsum dolor sit</h3>
                <p>Curabitur eget semper ante. Morbi eleifend ultricies est, a blandit diam vehicula vel. Vestibulum porttitor nisi quis viverra hendrerit. Suspendisse vel volutpat nibh, vel elementum lacus. Maecenas commodo pulvinar dui, at cursus metus imperdiet vel.</p>
            </div>
        </div>
    </div>
</div>

<div id="footer">
    <div class="intro">
        <p>Template by bonequinho</p>
    </div>
</div>

 

 

Live Preview:

 

ZggrTO.png

 

 

Edit codepen:

 

 

 

© bonequinho 2018 All COPYRIGHT RESERVED

  • Award 3
  • Cool 1
  • Wow 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.