Skip to content

Instantly share code, notes, and snippets.

@sankalpsingha

sankalpsingha/Quadtrust Brochure Design ( HTML ).markdown

Last active August 29, 2015 14:23
Show Gist options
  • Save sankalpsingha/f082edca5e695a37d533 to your computer and use it in GitHub Desktop.
Save sankalpsingha/f082edca5e695a37d533 to your computer and use it in GitHub Desktop.
Download ZIP
Quadtrust Brochure Design ( HTML )
Raw
index.html
<body>
<ul class="color-tabs">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<h1>Quotation</h1>
<div class="container">
<div class="speech-bubble">
<h2>Hi there,</h2>
<div class="arrow-down"></div>
</div>
<div class="main clear">
<div class="main clear">
<p>As per our discussion here is the quotation for the website.</p>
<p>QUADTRUST will be developing the site in three phases:</p>
<ul>
<li>Test</li>
<li>Test2</li>
<li>Test3</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur soluta provident, hic! Sed placeat temporibus, obcaecati fugit numquam saepe beatae!</p>
<h3><strong>Phase 1</strong> : Designing</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis nemo eligendi tempora totam, accusamus illum quaerat facere amet voluptatum debitis.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio reiciendis, pariatur at voluptatem atque architecto quod molestias. Sed, dolorem quidem.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, ullam!</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, molestias deleniti repellat nostrum? Dolor ea, sequi aut debitis totam recusandae voluptatem distinctio voluptas deleniti sed magnam, similique quaerat, facere voluptate?</li>
</ul>
<h3><strong>Phase 2:</strong> Something Else</h3>
<ul>
<li>Lorem <strong>ipsum</strong> dolor sit amet, consectetur adipisicing elit. Cumque, illo.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla sed quisquam est. Sint, nostrum.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, eaque.</li>
</ul>
<p>These are all the cool things that I could write here just to see how they would all look after the final thing is done. I think that the result has come out pretty good.</p>
<p>Thanking you sincerely,</p>
<div class="signature">
<p>Sankalp Singha</p>
<div class="small">
CEO Quadtrust
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="tab">
<div class="logo">
<img src="http://i.imgur.com/GXZ0AJT.png?1" alt="" width="300" />
</div>
</div>
<div class="footer-right">
<a href="#">www.quadtrust.com</a>
<div class="small-line clear"></div>
<address class="clear">2nd Floor, No. 9 Maharaja, <br /> Nanda Kumar Road,
<br />Kolkata 700022, India</address>
</div>
</footer>
</body>
Raw
style.css
@import url(http://fonts.googleapis.com/css?family=Lato:300,400);
/* Setting up the few variables. */
$left: 60px;
body{
font-family: 'Lato', sans-serif;
}
.color-tabs{
list-style:none;
width:100%;
font-size:0;
li{
display: inline-block;
&:nth-child(1){
height:7px;
width: 16.6667%;
background-color: #f29b00;
}
&:nth-child(2){
height:7px;
width: 16.6667%;
background-color: #ca1d17;
}
&:nth-child(3){
height:7px;
width: 16.6667%;
background-color: #6a509d;
}
&:nth-child(4){
height:7px;
width: 16.6667%;
background-color: #1c3f8a;
}
&:nth-child(5){
height:7px;
width: 16.6667%;
background-color: #009fd9;
}
&:nth-child(6){
height:7px;
width: 16.6667%;
background-color: #7db928;
}
}
}
h1{
text-transform: uppercase;
float: right;
display:block;
font-size: 60px;
color: #f3f3f3;
font-weight: 350;
margin-top: 20px;
margin-right: 25px;
}
.container{
/* width: 960px; */
margin: 140px 100px;
padding: 50px;
}
.speech-bubble{
float: left;
border: 2px solid #323232;
padding: 7px;
border-radius: 15px;
background-color: #323232;
color: #fff;
position: relative;
margin-bottom: 40px;
font-weight: 300;
font-size: 2em;
.arrow-down {
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #323232;
position: absolute;
right: 20px;
bottom: -10px;
}
}
.main {
font-weight: 300;
p{
margin-bottom: 25px;
font-size: 1.3em;
line-height: 30px;
}
ul{
margin-left: $left;
list-style-type: lower-greek;
font-size: 1.2em;
font-weight: 300;
margin-bottom: 25px;
li{
margin-bottom: 10px;
line-height: 30px;
}
}
h3{
font-size: 1.5em;
border-left: 5px solid;
padding-left: 20px;
background-color: aliceblue;
padding-top: 10px;
padding-bottom: 10px;
margin-bottom: 40px;
strong{
font-weight: 400;
}
}
.signature{
border-left: 5px solid black;
padding-left: 10px;
p{
font-weight: 400;
line-height: 20px;
}
.small{
margin-top: -20px;
}
}
}
.clear{
clear: both;
}
footer{
height: 200px;
border-top: 1.5px solid #999;
.tab{
/* height: 50px; */
width: 200px;
background-color: #FFF;
position: relative;
/* border: 2px solid blue; */
.logo{
position: absolute;
top: 55px;
left: 35px;
}
&:before {
/* height: 50px; */
/* width: 10px; */
/* display: block; */
content:" ";
background-color: #FFF;
position: absolute;
/* right: 2px; */
/* top: -2px; */
/* border-top: 1px solid #999; */
/* border-bottom: 2px solid blue; */
}
&::after {
display: block;
content:" ";
width: 0px;
height: 230px;
top: 0px;
/* background-color: #FFF; */
position: absolute;
right: -200px;
transform:skewX(135deg);
border: 1px solid #999;
z-index: -1;
}
}
.footer-right{
margin: 40px;
float: right;
address{
font-size: 1.5em;
font-weight: 300;
display:block;
text-align: right;
}
a{
text-decoration: none;
color: #4b4949;
font-size: 1.7em;
display: block;
margin-bottom: 10px;
float: right;
/* padding-bottom: 40px; */
}
.small-line{
/* max-width: 40px; */
border: 2px solid black;
display: block;
min-width: 70px;
float: right;
/* padding-right: 50px; */
margin-bottom: 20px;
}
}
}
/* Lets add the media queries here. */
@media (max-width: 850px){
.container{
margin: 140px 50px;
}
}
@media (max-width: 720){
.container{
margin: 140px 30px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment