Jump to content

Xatspace Theme - Design Responsive


Recommended Posts

  • Members

CSS code: 

background: none;font-family: Arial, Helvetica, sans-serif;color: tomato;}*{margin: 0;padding: 0;box-sizing: border-box;}h1, h2, h3, h4, p{line-height: 1.5em;word-break: break-all;}a{text-decoration: none;display: block;color: white;transition: all .30s ease;margin: 21px 0;}li{display: inline-block;vertical-align: middle;list-style: none;}img{max-width: 100%;height: auto;vertical-align: middle;}p{color: black;}#topnav{position: fixed;top: 0;left: 0;background: #615973;width: 100%;padding: px 0;box-shadow: 2px 2px 2px rgba(0,0,0,0.40);z-index: 4;}.main{max-width: 1270px;margin: auto;padding: 0 21px;}.flex{display: flex;align-items: center;flex-wrap: wrap;justify-content: space-between;}.menu a{padding: 0 12px;}a:hover{opacity: 0.8;}#bg{background: url(https://imagizer.imageshack.com/v2/1600x1200q90/923/B1TwSP.jpg) center;background-size: cover;padding: 221px 0;}#bg .main h1, #bg .main p{color: white;}.btn{background: #F2A7C3;padding: 10px 21px;border: solid 1px #d1d1d1;display: inline-block;}.box{margin: 110px 0;}p{color: #333;}.about{line-height: 2.5em;}.caret{display: inline-block;vertical-align: middle;border-top: solid 6px black;border-right: solid 6px transparent;border-left: solid 6px transparent;}#wrapper{background: turquoise;padding: 110px 0;}#wrapper, .box, .end{overflow: hidden;}@media (min-width: 600px) { .photo, .photob{width: 47%;} .intems{width: 30%;} }.photo, .photob, .intems{margin: 8px;}h3{margin-bottom: 21px;}.about, h4{margin-top: 21px;}.end{background: turquoise;padding: 110px 0;}.o_o{display: flex;flex-direction: column;align-items: center;}.player{background: #000;padding: 21px;border-bottom: dashed 1px white;}#footer{background: #333;clear: both;padding: 12px 0;text-align: center;font-size: x-small;}div#noowayfixed {

 

 

 

HTML code:

<div id="topnav">
<div class="main">

<div class="flex">
 <h2>Bem-vindo (a)</h2>

 <div class="menu">
 <ul>
 <li><a href="#">Home <span class="caret"></span></a></li>
 <li><a href="#">Edit</a></li>
 <li><a href="#">Edit</a></li>
 <li><a href="#">Edit</a></li>
 <li><a href="#">Edit</a></li>
 <li><a href="#">Edit</a></li>
 </ul>
 </div>
</div>

</div> 
</div>

<div id="bg">
<div class="main">

<h1>Welcome to my <span style="color:#F2A7C3;">Xatspace!</span></h1>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cupiditate blanditiis sapiente exercitationem voluptate porro, sit, placeat obcaecati nesciunt error natus, tempore pariatur nulla perferendis quae asperiores incidunt vel nemo itaque!</p>
<a href="#" class="btn">Read more</a>

</div> 
</div>

<div class="box">
<div class="main">

<h1>About us <span class="caret"></span></h1>
<p class="about">The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p>
<a href="#" class="btn">About us</a>

</div> 
</div>

<div id="wrapper">
<div class="main">

<div class="flex">
 <div class="photo">
 <h3>Your title here!</h3>
 <img src="https://imagizer.imageshack.com/v2/1600x1200q90/923/jAEiTR.jpg" />
 <p class="about">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable</p>
 </div>

 <div class="photob">
 <h3>Your title here!</h3>
 <img src="https://imagizer.imageshack.com/v2/1600x1200q90/922/iiYggv.jpg" />
 <p class="about">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable</p>
 </div>
</div>

</div> 
</div>

<div class="box">
<div class="main">

<div class="flex">
 <div class="intems">
 <img src="https://imagizer.imageshack.com/v2/1600x1200q90/922/SZ4Og6.jpg" />
 <h4>Namy friend here!</h4>
 <p class="about">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic accusantium incidunt similique accusamus, voluptatum assumenda totam esse magni nobis sed debitis quae adipisci odio nihil vel alias explicabo reiciendis! Distinctio?</p>
 <a href="#" class="btn">Learn more</a>
 </div>

 <div class="intems">
 <img src="https://imagizer.imageshack.com/v2/1600x1200q90/923/NO6qZL.jpg" />
 <h4>Namy friend here!</h4>
 <p class="about">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic accusantium incidunt similique accusamus, voluptatum assumenda totam esse magni nobis sed debitis quae adipisci odio nihil vel alias explicabo reiciendis! Distinctio?</p>
 <a href="#" class="btn">Learn more</a>
 </div>

 <div class="intems">
 <img src="https://imagizer.imageshack.com/v2/1600x1200q90/922/mZHYGR.jpg" />
 <h4>Namy friend here!</h4>
 <p class="about">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic accusantium incidunt similique accusamus, voluptatum assumenda totam esse magni nobis sed debitis quae adipisci odio nihil vel alias explicabo reiciendis! Distinctio?</p>
 <a href="#" class="btn">Learn more</a>
 </div>
</div>

</div> 
</div>

<div class="end">

<div class="o_o">
 <div class="player">
 <a href="#" class="p">Youtube: <span>Your title video here!</span></a>
[youtube:400:240:rq-WlPYFnm8:autoplay=1&loop=1&controls=0&disablekb=1&showinfo=0&start=0]
 </div>
</div> 

</div>

<div id="footer">
 Template by Bonequinho
</div>

 

 

Live preview:

 

https://imagizer.imageshack.com/v2/1600x1200q90/923/B1TwSP.jpg

 

© bonequinho 2018 All COPYRIGHT RESERVED

Edited by Bonequinho
  • Award 1
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.

×
×
  • 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.