[Help] Bantu ane bikin portofolio gan :D

Beranda
Komunitas
Tech
Website, Webmaster, Webdeveloper
[Help] Bantu ane bikin portofolio gan :D

yupangestu

05-09-2015 06:35

Gan, ane sekarang pengin buat bikin portofolio, tapi ane bingung 2 hal gan (maklum ada beberapa code yang ane copas)

1. itu cara bikin navigasinya ditengah gimana yah gan?
2. Terus footernya bisa ga ditaroh dibawah section dan sidebar? (Code provided)

Spoiler for previewnya:

[Help] Bantu ane bikin portofolio gan :D

Ini gan codenya.

1. Kunjungi github ane gan disini

2. kodenya dibawah gan

Spoiler for HTML:

Code:

<DOCTYPE! html>

<html>

<head>

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <link href="style.css" rel="stylesheet" type="text/css">

 <title>Portofolio Pertama Yuko Pangestu</title>

</head>

<body>

 <div class="menu-wrap">

 <nav class="menu">

 <ul class="clearfix">

 <li class="current-item"><a href="#">Home</a></li>

 <li>

 <a href="#">Movies <span class="arrow">▼</span></a>

 

 <ul class="sub-menu">

 <li><a href="#">My Own Profile</a></li>

 <li><a href="#">Coming Soon</a></li>

 </ul>

 </li>

 <li><a href="#">T.V. Shows</a></li>

 <li ><a href="#">Photos</a></li>

 <li><a href="#">Site Help</a></li>

 </ul>

 </nav>

</div>

 <div id="homeheading">My Own Portofolio</div>

 <div id="homepara">This is the paragraf of the homepage</div>

 <section>

 <div class="clearfix">

 <div id="sectionhead">

 Hi this is the heading of the section

 </div>

 </div>

 <div class="clearfix">

 <div id="sectionpara">

 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

 proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 </div>

 </div>

 </section>

 <sidebar>

 Bagaimana cara membuat Sidebar, Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

 proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 </sidebar>

 <footer>

 <div class="clearfix">

 <div id="copyright">Copyright@ Yuko Pangestu 2015</div>

 </footer>

 </div>

</body>

</html>

Spoiler for CSS:

Code:

div{

 display: block;

}



body {

 width: 960px;

 margin: 0px auto;

 height: 100%;

}



.clearfix:after {

 display:block;

 clear:both;

}

 

/*----- Menu Outline -----*/

.menu-wrap {

 width:100%;

 height: 150px;

}

 

.menu {

 width:1000px;

 margin:0px auto;

 float: left;

}

 

.menu li {

 margin:0px;

 list-style:none;

 font-family:'Ek Mukta';

}

 

.menu a {

 transition:all linear 0.15s;

 color:#919191;

}

 

.menu li:hover > a, .menu .current-item > a {

 text-decoration:none;

 color:#be5b70;

}

 

.menu .arrow {

 font-size:11px;

 line-height:0%;

}

 

/*----- Top Level -----*/

.menu > ul > li {

 float:left;

 display:inline-block;

 position:relative;

 font-size:19px;

}

 

.menu > ul > li > a {

 padding:10px 40px;

 display:inline-block;

 text-shadow:0px 1px 0px rgba(0,0,0,0.4);

}

 

.menu > ul > li:hover > a, .menu > ul > .current-item > a {

 background:#2e2728;

}

 

/*----- Bottom Level -----*/

.menu li:hover .sub-menu {

 z-index:1;

 opacity:1;

}

 

.sub-menu {

 width:160%;

 padding:5px 0px;

 position:absolute;

 top:100%;

 left:0px;

 z-index:-1;

 opacity:0;

 transitionpacity linear 0.15s;

 box-shadow:0px 2px 3px rgba(0,0,0,0.2);

 background:#2e2728;

}

 

.sub-menu li {

 display:block;

 font-size:16px;

}

 

.sub-menu li a {

 padding:10px 30px;

 display:block;

}

 

.sub-menu li a:hover, .sub-menu .current-item a {

 background:#3e3436;

}



#homeheading{

 color: black;

 text-align: center;

 font-size: 32px;

 text-transform: uppercase;

 font-weight: bold;

 padding: 10px;

 border: #28de21 solid 5px;

 margin: 0px auto;

 margin-top: 40px;

 margin-bottom: 30px;

 position: relative;

 width: 400px;

 height: auto;

 border-radius: 0px;

 -webkit-transition: border-radius 0.5s; /* For Safari 3.1 to 6.0 */

 transition: border-radius 0.5s;

 transition-timing-function: ease-out;

 -webkit-transition-timing-function: ease-out;

}



#homeheading:hover{

 border-radius: 25px;

}



#homepara{

 text-align: center;

 font-size: 24px;

 font-weight: bold;

 font-style: sans-serif;

 margin-bottom: 40px;

}



section{

 display: block;

 margin-top: 25px;

 float: left;

 width: 60%;

}



sidebar{

 display: block;

 float: right;

 width: 35%;

 margin-top: 25px;

}



#container {

 width: 960px;

 display: block;

 margin: 0px auto;

 height: 100%;

 overflow: hidden;

}



footer{

 width: 100%;

 height: 100px;

 position: relative;

 bottom: 0;

 left: 0;



}

Diubah oleh yupangestu 05-09-2015 06:35

1.4K

Kutip

Balasan

Komentar yang asik ya

Urutan

Terbaru

Terlama

Komentar yang asik ya

Komunitas Pilihan