Postingan lainnya
Buku Ini Koding!
Baru!
Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!
Kelas Premium!
Belajar Javascript untuk website
Gunakan kupon "mulaijs" untuk diskon 75 ribu!
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