Skip to content

Commit

Permalink
project
Browse files Browse the repository at this point in the history
  • Loading branch information
dlimla committed Oct 11, 2018
1 parent 8fbc9fe commit a28d58d
Show file tree
Hide file tree
Showing 8 changed files with 423 additions and 9 deletions.
287 changes: 286 additions & 1 deletion css/index.css
Original file line number Diff line number Diff line change
@@ -1 +1,286 @@
/* LESS needs to be processed */
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
* {
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
html,
body {
font-family: 'Roboto', sans-serif;
}
h1,
h2,
h3,
h4,
h5 {
font-family: 'Indie Flower', cursive;
}
h1 {
font-size: 4rem;
}
h2 {
font-size: 3.2rem;
padding-bottom: 10px;
}
h4 {
font-size: 2.5rem;
padding-bottom: 10px;
}
p {
line-height: 1.5;
font-size: 1.6rem;
padding-bottom: 10px;
}
img {
max-width: 100%;
height: auto;
}
.container {
max-width: 800px;
width: 100%;
margin: 0 auto;
}
.header .nav_contain {
display: flex;
justify-content: space-between;
flex-direction: row;
align-items: center;
max-width: 800px;
margin: 0 auto;
padding: 30px 0px 30px 0px;
}
@media (max-width: 530px) {
.header .nav_contain {
display: flex;
flex-direction: column;
justify-content: center;
padding: 30px 0px 5px 0px;
}
.header .nav_contain .left_side {
padding: 0px 0px 10px 0px;
}
}
.header .nav_contain .main_nav a {
text-decoration: none;
font-size: 1.6rem;
padding: 0px 30px 0px 10px;
color: black;
font-weight: 500px;
}
.header .header_border {
border-bottom: 2px dashed #C0C0C0;
}
.footer {
width: 100%;
border-top: 2px dashed silver;
background: #FFEBCD;
}
.footer p {
text-align: center;
color: #212529;
font-size: 1.6rem;
padding: 20px;
}
.home .content-section {
margin: 30px 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.home .content-section .text-content {
width: 48%;
padding-right: 1%;
}
.home .content-section .img-content {
width: 48%;
padding-left: 1%;
}
.home .content-section .img-content img {
border-radius: 10px;
}
.home .inverse-content {
padding-bottom: 30px;
border-bottom: 2px dashed #C0C0C0;
}
.home .inverse-content .text-content {
padding-left: 1%;
padding-right: 0;
}
.home .inverse-content .img-content {
padding-right: 1%;
padding-left: 0;
}
.home .content-destination {
width: 75%;
margin: 0 auto 30px;
}
.home .content-destination img {
border-radius: 10px;
}
.home .content-pick {
padding-top: 30px;
border-top: 2px dashed #C0C0C0;
display: flex;
justify-content: space-between;
}
.home .content-pick .destination {
width: 30%;
margin-bottom: 30px;
}
.btn {
display: flex;
justify-content: center;
align-items: center;
height: 40px;
width: 85%;
background: #008080;
border-radius: 10px;
}
.btn a {
text-decoration: none;
color: white;
font-size: 1.8rem;
font-weight: 500;
}
.header_img_div {
max-width: 800px;
margin: 0 auto;
}
.header_img_div .introduction {
padding: 20px 0px 0px 0px;
}
.header_img_div .introduction h2 {
font-weight: 400;
}
.header_img_div .introduction p {
font-size: 1.6rem;
font-weight: 400;
}
32 changes: 28 additions & 4 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,32 @@
</head>

<body>
<div class="header">

<div class="nav_contain">
<div class="left_side">
<h1 class="fun_bus">Fun Bus</h1>
</div>
<nav class="main_nav">
<a href="#">Home</a>
<a href="#">About Us</a>
<a href="#">Blog</a>
<a href="#">Contact</a>
</nav>
</div>

<div class="header_border"></div>

<div class="header_img_div">
<img class="header_img" src="img/fun-bus.jpg">

<div class="introduction">
<h2 class="intro_title">Weclome to Fun Bus!</h2>
<p>Traveling expedition modern, clean webdesign blogger clean website theme website modern. Design pretty design, travelblogger adventure WordPress wanderlust theme blogger website expedition theme travelblogger Adventure fun traveler pretty design website expedition</p>
</div>
</div>
</div>



<div class="container home">

Expand Down Expand Up @@ -51,17 +75,17 @@ <h2>Pick Your Destination</h2>
<div class="destination">
<h4>Fun In The Sun</h4>
<p>Expedition excursion design excursion fun, clean simple organized WordPress Travel colorful webdesign. Traveler blogger website design expedition clean excursion traveling.</p>
<div class="btn">Sign Me Up!</div>
<div class="btn"><a href="#">Sign Me Up!</a></div>
</div>
<div class="destination">
<h4>Mountain Excursion</h4>
<p>Expedition excursion design excursion fun, clean simple organized WordPress Travel colorful webdesign. Traveler blogger website design expedition clean excursion traveling.</p>
<div class="btn">Sign Me Up!</div>
<div class="btn"><a href="#">Sign Me Up!</a></div>
</div>
<div class="destination">
<h4>Island Getaway</h4>
<p>Expedition excursion design excursion fun, clean simple organized WordPress Travel colorful webdesign. Traveler blogger website design expedition clean excursion traveling.</p>
<div class="btn">Sign Me Up!</div>
<div class="btn"><a href="#">Sign Me Up!</a></div>
</div>
</section>
</div><!-- container -->
Expand Down
5 changes: 5 additions & 0 deletions less/global.less
Original file line number Diff line number Diff line change
Expand Up @@ -43,4 +43,9 @@ img {
max-width: 800px;
width: 100%;
margin: 0 auto;

@media: @phone {
max-width: 530px;

}
}
Loading

0 comments on commit a28d58d

Please sign in to comment.