Postingan lainnya
javascript kadang tidak work
bagaimana ya cara membuat javascript itu work 100%, karena kadang kadang script javascript saya tidak work tetapi saat codenya saya copy ke codepen.io, Jadi work 100% entah mengapa saya benar benar kesal. Mungkin saja agan agan di sini punya pengalaman yang serupa dengan saya Saya menggunakan chrome
0
1 Jawaban:
masih belum bisa gan
ini folder htmlnya
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=divice-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="home.css">
</head>
<body>
<div id="header">
<a href="javascript:void(0);" class="icon" onclick="myFunction()">☰</a>
<div class="navbar" id="myTopnav">
<a href="../home.html" style="background-color:rgb(214, 70, 61); color:white;" class="nav">Home</a>
<a href="../about/about.html" class="nav">Tentang</a>
<a href="../service/service.html" class="nav">Service</a>
<a href="../contact/contact.html" class="nav">Kontak</a>
</div>
</div>
<div id="content">
<div class="intro">
<div style="text-align:center;">
<span class="intro-title">
<p>Selamat Datang Di Website Kode</p>
<p style="font-family:Mistral;">(Komunitas Developer)</p>
</span>
</div>
<div style="text-align:center;">
<a href="" class="join">Daftar</a>
</div>
</div>
<div class="second-content">
<div class="about">
<p class="about-title"><b>Tentang Kami</b></p>
<p class="about-text">
Komunitas ini, kami tidak hanya sibuk dengan pembelajar, ada saatnya kami melakukan
kegiatan yang menyenangkan seperti bermain dan jalan jalan
<br><br>
Kami memang memangerjakan sesuatu tetapi bukan berarti bahwa kami tidak akan melakukan sesuatu
tersebut tanpa ada hiburan
</p>
<a href="" class="more1">Lihat Lebih</a>
</div>
<div class="founder">
<p class="founder-title"><b>Founder KODE</b></p>
<div class="founder-box">
<img src="https://inst.eecs.berkeley.edu/~cs194-26/fa16/upload/files/proj4/cs194-26-abw/face.jpg" alt="" class="founder-image">
<p class="founder-name"><b>Joks Kur</b></p>
<p class="founder-text">
Pujian yang kau dapat sekarang adalah tantangan untuk kau agar tidak menjadi sombong
</p>
</div>
<div class="founder-box">
<img src="http://www.netralnews.com/foto/2017/02/08/878-iwan_falsdokvebma-718x452.jpg" alt="" class="founder-image">
<p class="founder-name"><b>Sony Vegas</b></p>
<p class="founder-text">
Pujian yang kau dapat sekarang adalah tantangan untuk kau agar tidak menjadi sombong
</p>
</div>
<div class="founder-box">
<img src="http://4.bp.blogspot.com/-WWr6GgSO8ss/VW-5IRnUCeI/AAAAAAAABDo/5NyPEEucJnI/s1600/jepang2.jpg" alt="" class="founder-image">
<p class="founder-name"><b>Kirei Bijou</b></p>
<p class="founder-text">
Pujian yang kau dapat sekarang adalah tantangan untuk kau agar tidak menjadi sombong
</p>
</div>
</div>
</div>
<div class="third-content">
<div class="goal">
<p class="goal-title"><b>Tujuan Utama Kami</b></p>
<center>
<div class="goal-box">
<img src="indonesian.png" alt="" class="goal-image">
<p class="goal-text">Menjadikan komunitas ini agar terkenal di seluruh indonesia</p>
</div>
<div class="goal-box">
<img src="cooperation.png" alt="" class="goal-image">
<p class="goal-text">Menjalin kerja sama ke beberapa perusahaan untuk proses pembelajaran</p>
</div>
<div class="goal-box">
<img src="work.png" alt="" class="goal-image">
<p class="goal-text">Menciptakan pekerja yang berkualitas dan meningkatkkan lapangan pekerjaan</p>
</div>
</center>
</div>
</div>
<div class="fourth-content">
<p class="portfolio-title">Portofolio Kami</p>
<center>
<div class="portfolio">
<div class="portfolio-box">
<a href="" style="text-decoration:none;">
<img src="portofolio1.jpg" alt="" class="portfolio-image">
<p class="portfolio-name">Penerbangan Air Asia</p>
</a>
</div>
<div class="portfolio-box">
<a href="" style="text-decoration:none;">
<img src="portofolio2.jpg" alt="" class="portfolio-image">
<p class="portfolio-name">Travel blog</p>
</a>
</div>
<div class="portfolio-box">
<a href="" style="text-decoration:none;">
<img src="portofolio3.png" alt="" class="portfolio-image">
<p class="portfolio-name">Docter Clemens</p>
</a>
</div>
</div>
<a href="" class="more2">Lihat Lebih</a>
</center>
<br><br>
</div>
</div>
<div id="footer">
<p class="copyright">
©Copyright 2017 KODE
</p>
</div>
<script src="script.js"></script>
</body>
</html>
ini folder cssnya
*{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin:0px;
padding: 0px;
}
body{
background-image: url("https://static.pexels.com/photos/7101/wood-coffee-iphone-notebook.jpg");
background-size: cover;
background-attachment: fixed;
}
#header{
z-index: 10;
/* overflow: hidden; */
position:fixed;
width:100%;
}
.icon{
display:none;
color: #f2f2f2;
text-align: left;
padding: 14px 16px;
text-decoration: none;
font-size:30px;
}
.navbar {
}
.nav{
float: left;
display: block;
color: #f2f2f2;
text-align: center;
text-decoration: none;
margin: 0px 20px;
padding:20px;
font: 25px arial;
}
.navbar .nav:hover {
color:rgb(113, 106, 113);
}
.navbar .icon {
text-decoration:none;
display: none;
}
#content{
padding-top: 0%;
}
.intro{
background-size: cover;
background-attachment: fixed !important;
filter: grayscale(35%);
padding:20% 5% 15%;
}
.intro-title{
display: inline-block;
font:350% arial;
color:white;
padding:2% 5%;
border-bottom: solid 3px white;
margin-bottom: 2%;
}
.join{
display:inline-block;
font:200% arial;
text-align: center;
background:#d6463d;
color:white;
text-decoration:none;
border-radius:5px;
padding:10px 30px;
-webkit-transition: 0.9s;
transition: 0.9s;
}
.second-content{
background:#0e1c22;
overflow: hidden;
padding:2% 0px 0px;
}
.about{
float:left;
width:50%;
}
.about-title{
margin-bottom:3%;
font:300% consolas;
color:rgb(100, 106, 108);
text-align: left;
padding-left:3%;
}
.about-text{
font:150% arial;
color:rgb(100, 106, 108);
text-align: left;
padding:0px 0px 0px 3%;
line-height: 35px;
}
.more1{
display:inline-block;
font:150% arial;
text-align: center;
background:#d6463d;
color:white;
text-decoration:none;
border-radius:5px;
padding:5px 30px;
margin-left:3%;
-webkit-transition: 0.9s;
transition: 0.9s;
}
.founder{
width:50%;
display: inline-grid; /*coba zoom, dan ganti dengan inline-block*/
padding:0px 3%;
}
.founder-title{
padding-bottom:3%;
font:300% consolas;
color:rgb(100, 106, 108);
}
.founder-box{
margin-bottom:5%;
float: left;
display: block;
}
.founder-image{
float:left;
height:120px;
width:120px;
border:solid 5px rgb(11, 11, 27);
border-radius:50%;
margin-right:1%;
}
.founder-name{
padding-top:0%;
font:170% arial;
color:rgb(100, 106, 108);
}
.founder-text{
font:150% arial;
color:rgb(100, 106, 108);
line-height: 35px;
}
.third-content{
background-color:#f2f5f7;
padding:5% 0px;
}
.goal{
}
.goal-title{
font:350% consolas;
text-align: center;
margin-bottom: 3%;
}
.goal-box{
display: inline-grid;
width:30%;
}
.goal-image{
width:50%;
margin-bottom: 5%;
}
.goal-text{
font:150% arial;
text-align: center;
}
.fourth-content{
padding: 5% 0px;
background:rgba(14, 28, 34, 0.9);
}
.portfolio{
display: table-row-group;
}
.portfolio-title{
font:350% consolas;
color:#fff;
text-align: center;
margin-bottom: 4%;
}
.portfolio-box{
width:30%;
display: inline-grid;
margin:1% 1%;
}
.portfolio-image{
width:100%;
height:250px;
}
.portfolio-name{
font:150% arial;
color:#ffffff;
text-align: center;
}
.more2{
display:inline-block;
font:150% arial;
text-align: center;
background:#d6463d;
color:white;
text-decoration:none;
border-radius:5px;
padding:10px 30px;
-webkit-transition: 0.9s;
transition: 0.9s;
}
#footer{
background:#101521;
padding: 2% 0%;
}
.footer-selection{
display: inline-block;
margin:3% 3% 0px;
color:#ebe8e8;
font:100% arial;
text-decoration: none;
letter-spacing: 2px;
}
.copyright{
color:#ebe8e8;
font-family:calibri;
font-size:150%;
text-align:center;
}
@media only screen and (max-width: 800px) {
body{
background-image: url("background.jpg");
background-size: 100% 20%;
background-attachment: inherit;
background-repeat: no-repeat;
}
#header{
z-index: 10;
overflow: hidden;
background-color: rgb(16, 21, 33);
position:fixed;
width:100%;
}
.icon{
color:#ffffff;
font-size: 40px;
display:block;
}
.navbar .nav {
display:none;
}
.nav{
float: inherit;
display: block;
color: #f2f2f2;
text-align: left;
padding: 14px 16px;
text-decoration: none;
font-size: 25px;
}
.navbar .nav .icon{
float: right;
display: block;
}
.navbar.responsive .nav{
float: none;
display: block;
text-align: left;
}
/*Content*/
.intro{
padding:35% 5% 15%;
}
.intro-title{
display: inline-block;
font:250% arial;
color:white;
padding:2% 0%;
border-bottom: solid 3px white;
margin-bottom: 2%;
}
.join{
display:inline-block;
font:150% arial;
text-align: center;
background:#d6463d;
color:white;
text-decoration:none;
border-radius:5px;
padding:10px 30px;
-webkit-transition: 0.9s;
transition: 0.9s;
}
.second-content{
background:#0e1c22;
overflow: hidden;
padding:3% 0px;
}
.about{
float:none;
width:100%;
margin-bottom: 15%;
padding-left:2%;
}
.about-title{
margin-bottom:2%;
font:230% consolas;
color:rgb(100, 106, 108);
text-align: left;
padding-left:0%;
}
.about-text{
font:20px arial;
color:rgb(100, 106, 108);
text-align: justify;
padding:0px 5% 0px 1%;
line-height: 35px;
}
.more1{
display:inline-block;
font:150% arial;
text-align: center;
background:#d6463d;
color:white;
text-decoration:none;
border-radius:5px;
padding:5px 20px;
margin-left:1%;
-webkit-transition: 0.9s;
transition: 0.9s;
}
.founder{
width:100%;
display: block;
padding:0px 3%;
}
.founder-title{
padding:3% 0px;
font:300% consolas;
color:rgb(100, 106, 108);
}
.founder-box{
margin-bottom:5%;
float: none;
display: inline-block; /**/
}
.founder-image{
display:inline-block;
height:100px;
width:100px;
border-radius:50%;
margin-right:1%;
}
.founder-name{
padding-top:0%;
font:20px arial;
color:rgb(100, 106, 108);
}
.founder-text{
font:100% consolas;
color:rgb(100, 106, 108);
line-height:15px;
}
.third-content{
background-color:#f2f5f7;
padding:5% 0px;
}
.goal-title{
font:350% consolas;
text-align: center;
margin-bottom: 3%;
}
.goal-box{
display: block;
width:100%;
margin-bottom:10%;
}
.goal-image{
width:50%;
margin-bottom: 5%;
}
.goal-text{
font:150% arial;
text-align: center;
}
.fourth-content{
padding: 5% 0px;
background:rgba(28, 38, 43, 1);
}
.portfolio{
display: block;
}
.portfolio-title{
font:350% consolas;
color:#ffffff;
text-align: center;
margin-bottom: 4%;
}
.portfolio-box{
width:100%;
display: block;
padding:0px 5%;
margin:0% 0% 10%;
}
.portfolio-image{
width:100%;
height:250px;
}
.portfolio-name{
font:150% arial;
color:#ffffff;
text-align: center;
}
.more2{
display:inline-block;
font:150% arial;
text-align: center;
background:#d6463d;
color:white;
text-decoration:none;
border-radius:5px;
padding:10px 30px;
-webkit-transition: 0.9s;
transition: 0.9s;
}
dan ini jsnya
$(document).ready(function(){
$(window).scroll(function(){
var wScroll = $(window).scrollTop();
if (wScroll > 50) {
$("#header").css("background-color" , "#101521");
}
else{
$("#header").css("background-color" , "red");
}
});
});
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "navbar") {
x.className += "responsive";
} else {
x.className = "navbar";
}
}
0