Postingan lainnya
Buku Ini Koding!
Baru!
Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Masalah Pada WEB responsive
permisi.. gini gan saya kan mau nge responsivein web portofolio nah saya taro tag
<meta name="viewport" content="width=device-width" intial-scale=1.0>
Tapi kok ada scroll view right nya ? nih contohnya
Biasanya kan kalo udah di taro tag meta viewport element langsung menyesuaikan jadi ga ada scroll view right lagi.. jadi tinggal kita atur lagi width dll . .. kalo ini kita ngatur width nya ampe lebih dari 100% biar bisa full di hp :3
mungkin ada yang tau masalahnya T_T
nih source codenya .. :D
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" intial-scale=1.0>
<title>Stiven's Portofolio</title>
<link rel="shorcut icon" href="asset/s.png">
<link rel="stylesheet" type="text/css" href="css/main.css">
<script src="js/chart.min.js"></script>
</head>
<body>
<div class=wrap>
<!-- header -->
<div class="header">
<h1 id="title"><a href="index.html">Stiven</a></h1>
<ul id="menu">
<li><a href="#profil">HOME</a>
</li>
<li><a href="#about">TENTANG SAYA</a>
</li>
<li><a href="#kerja">PEKERJAAN</a>
</li>
<li><a href="#portofolio">PORTOFOLIO</a>
</li>
<li><a href="#kontak">KONTAK</a>
</li>
</ul>
</div>
<!-- Bagian profil -->
<div class="wrap future">
<center>
<div id="profil">
<a href="https://www.facebook.com/127.0.0.1.id">
<div id="gambar">
<a href="https://www.facebook.com/127.0.0.1.id" target="_blank">
<img id="img_profile" src="asset/profile.jpg" alt="My picture">
<div id=caption></div>
<div id="quote">"Ketika saya berfoto bersama kedua kakaku"</div>
</a>
</div>
<br>
<div class="nama">
<h1 id="name">"Stiven Trizky Katuuk"</h1>
</div>
<p id="status">"Tidur kemudian bermimpilah dan bangun lalu wujudkanlah"</p>
<p id="status">"Buat teman teman jangan mudah putus asa buat belajar coding :) "</p>
</center>
<!-- Tombol Portofolio -->
<ul id="tombol">
<li><a href="#portofolio">Lihat Karya Saya</a>
</li>
</ul>
</div>
</div>
</div>
<!-- About me -->
<div class="wrapper" id="about">
<br>
<br>
<h1 class="title">Tentang Saya</h1>
<p class="paragraf">Nama saya adalah Stiven Trizky Katuuk. Saya adalah pemula di Web Designer dan Web Development. Saya sedang focus di
<br> <b>javascript, HTML , CSS </b>
<h2 class="sub">Keahlian</h2>
<p class="paragraf">yang akan saya pelajari</p>
<br>
<!-- table skill -->
<div class="skill">
<canvas id="densityChart" width="500" height="120"></canvas>
<script type="text/javascript">
var densityCanvas = document.getElementById("densityChart");
Chart.defaults.global.defaultFontFamily = "Lato";
Chart.defaults.global.defaultFontSize = 18;
var densityData = {
label: '% Keahlian yang saya punya',
data: [100, 90, 40, 20, 0, 0],
backgroundColor: [
'rgba(0, 99, 132, 0.6)',
'rgba(30, 99, 132, 0.6)',
'rgba(60, 99, 132, 0.6)',
'rgba(90, 99, 132, 0.6)',
'rgba(120, 99, 132, 0.6)',
'rgba(150, 99, 132, 0.6)',
],
borderColor: [
'rgba(0, 99, 132, 1)',
'rgba(30, 99, 132, 1)',
'rgba(60, 99, 132, 1)',
'rgba(90, 99, 132, 1)',
'rgba(120, 99, 132, 1)',
'rgba(150, 99, 132, 1)',
],
borderWidth: 2,
hoverBorderWidth: 0
};
var chartOptions = {
scales: {
yAxes: [{
barPercentage: 0.5
}]
},
elements: {
rectangle: {
borderSkipped: 'left',
}
}
};
var barChart = new Chart(densityCanvas, {
type: 'horizontalBar',
data: {
labels: ["HTML", "CSS", "JS", "PHP", "RUBY", "PHYTON"],
datasets: [densityData],
},
options: chartOptions
});
</script>
</div>
<br>
<br>
</div>
<!-- Pekerjaan saya -->
<div class="wrapper" id="kerja">
<br>
<br>
<h1 class="title">Pekerjaan saya</h1>
<p class="paragraf">Pekerjaan saya sekarang adalah. Sebagai pelajar smp di kota palu atau lebih tepatnya SMPN 15 PALU</b>
<h2 class="sub">Pekerjaan</h2>
<p class="paragraf">saya sekarang selain jadi pelajar</p>
<br>
<!-- table Pekerjaan -->
<div class="skill">
<center>
<table>
<tr>
<th>NO</th>
<th>Pekerjaan</th>
<th>Tingkat</th>
</tr>
<tr>
<td>1</td>
<td>Web Design</td>
<td>Rendah</td>
</tr>
<tr>
<td>2</td>
<td>Web Development</td>
<td>Rendah</td>
</tr>
<tr>
<td>3</td>
<td>Editor</td>
<td>Menengah</td>
</tr>
<tr>
<td>4</td>
<td>3D Moddeling</td>
<td>Menengah</td>
</tr>
<tr>
<td>5</td>
<td>RUBY</td>
<td>Belum Belajar</td>
</tr>
<tr>
<td>6</td>
<td>PHYTON</td>
<td>Belum Belajar</td>
</tr>
</table>
</center>
</div>
<br>
<br>
</div>
<!-- Portofolio -->
<div class="wrapper" id="portofolio">
<br>
<br>
<h1 class="title">Portofolio</h1>
<p class="paragraf">Disini saya menampilkan karya. karya saya. mulai dari <b><a href="#webdevelop">Web Development</a></b>,
<b><a href="#3dmod">3D Moddeling</a></b> ,<b><a href="#editing">Editing</a></b>
</p>
<!-- WEB DEVELOMPENT START -->
<div class="penanda">
<h2 class="sub" id="webdevelop">Web Development</h2>
<p class="paragraf">Sekolah Programming (Front-End Web)</p>
<p class="paragraf">Ingin liat karya lainnya ? <b><a href="#3dmod">3D Moddeling </a></b>, <b><a href="#editing">Editing</a></b></p>
<br>
<div class="lokasi">
<center>
<div class="karya">
<img class="img_karya" src="gambar/web/1.png" alt="WEB DEVELOPMENT" ">
<div class="penutup "></div>
<div class="text ">"Halaman Depan "</div>
</div>
<div class="karya ">
<img class="img_karya " src="gambar/web/2.png " alt="WEB DEVELOPMENT " ">
<div class="penutup right"></div>
<div class="text right">"Halaman Depan 1"</div>
</div>
<div class="karya">
<img class="img_karya" src="gambar/web/3.png" alt="WEB DEVELOPMENT" ">
<div class="penutup right1 "></div>
<div class="text right1 ">"Halaman Mata Pelajaran " </div>
</div>
<hr>
<div class="karya ">
<img class="img_karya " src="gambar/web/4.png " alt="WEB DEVELOPMENT " ">
<div class="penutup "></div>
<div class="text ">"Halaman Siswa Terbaik"</div>
</div>
<div class="karya">
<img class="img_karya" src="gambar/web/5.png" alt="WEB DEVELOPMENT" ">
<div class="penutup right "></div>
<div class="text right ">"Halaman Daftar Pengajar " </div>
</div>
<div class="karya ">
<img class="img_karya " src="gambar/web/6.png " alt="WEB DEVELOPMENT " ">
<div class="penutup right1"></div>
<div class="text right1">"Halaman Daftar User"</div>
</div>
</center>
</div>
</div>
<!--3D MODELLING START -->
<div class="penanda">
<h2 class="sub" id="3dmod">3D MODDELING</h2>
<p class="paragraf">Yamaha Mio Sporty</p>
<p class="paragraf">Ingin liat karya lainnya ? <b><a href="#webdevelop">Web Development</a></b>,
<b><a href="#editing">Editing</a></b></p>
<br>
<div class="lokasi">
<center>
<div class="karya">
<img class="img_karya" src="gambar/3dmod/1.png" alt="WEB DEVELOPMENT" ">
<div class="penutup "></div>
<div class="text ">" Depan "</div>
</div>
<div class="karya ">
<img class="img_karya " src="gambar/3dmod/2.png " alt="WEB DEVELOPMENT " ">
<div class="penutup right"></div>
<div class="text right">"Kanan"</div>
</div>
<div class="karya">
<img class="img_karya" src="gambar/3dmod/3.png" alt="WEB DEVELOPMENT" ">
<div class="penutup right1 "></div>
<div class="text right1 ">"Kiri " </div>
</div>
<hr>
<div class="karya ">
<img class="img_karya " src="gambar/3dmod/4.png " alt="WEB DEVELOPMENT " ">
<div class="penutup "></div>
<div class="text ">"Belakang"</div>
</div>
<div class="karya">
<img class="img_karya" src="gambar/3dmod/5.png" alt="WEB DEVELOPMENT" ">
<div class="penutup right "></div>
<div class="text right ">"Atas " </div>
</div>
<div class="karya ">
<img class="img_karya " src="gambar/3dmod/6.png " alt="WEB DEVELOPMENT " ">
<div class="penutup right1"></div>
<div class="text right1">"Bawah"</div>
</div>
</center>
</div>
</div>
<!-- Editing START -->
<div class="penanda">
<h2 class="sub" id="editing">Editing</h2>
<p class="paragraf">Berbagai macam foto</p>
<p class="paragraf">Ingin liat karya lainnya ? <b><a href="#webdevelop">Web Development</a></b>,
<b><a href="#3dmod">3D Moddeling</a></b></p>
<br>
<div class="lokasi">
<center>
<div class="karya">
<img class="img_karya" src="gambar/editing/1.jpg" alt="WEB DEVELOPMENT" ">
<div class="penutup "></div>
<div class="text ">"Manipulasi 3D"</div>
</div>
<div class="karya ">
<img class="img_karya " src="gambar/editing/2.jpg " alt="WEB DEVELOPMENT " ">
<div class="penutup right"></div>
<div class="text right">"Manipulasi"</div>
</div>
<div class="karya">
<img class="img_karya" src="gambar/editing/3.jpg" alt="WEB DEVELOPMENT" ">
<div class="penutup right1 "></div>
<div class="text right1 ">"Manipulasi" </div>
</div>
<hr>
<div class="karya ">
<img class="img_karya " src="gambar/editing/4.jpg " alt="WEB DEVELOPMENT " ">
<div class="penutup "></div>
<div class="text ">"Vector & Vexel"</div>
</div>
<div class="karya">
<img class="img_karya" src="gambar/editing/5.jpg" alt="WEB DEVELOPMENT" ">
<div class="penutup right "></div>
<div class="text right ">"Text Glow" </div>
</div>
<div class="karya ">
<img class="img_karya " src="gambar/editing/6.png " alt="WEB DEVELOPMENT " ">
<div class="penutup right1"></div>
<div class="text right1">"Manipulasi"</div>
</div>
</center>
</div>
</div>
</div>
<br>
<div class="wrapper" id="kontak">
<h1 class="title">Kontak</h1>
<p class="paragraf">Anda bisa kontak saya. Melalui form di bawah ini atau klik icon facebook di bawah</p>
<br>
<br>
<center>
<form action="">
<input class="form" type="text" name="nama" placeholder="Nama">
<br>
<br>
<input class="form" type="text" name="nama" placeholder="Email ">
<br>
<br>
<textarea class="form textarea" name="pesan" id="pesan" cols="80" rows="10" placeholder="Pesan"></textarea>
<br>
<br>
<input class="submit " type="submit" name="submit" value="Kirim">
</form>
<br>
<br>
</center>
<p class="paragraf" style="text-align: left; margin-left: 2%;">Sosial media saya</p>
<br>
<a style="margin-left: 3%;" href="https://www.facebook.com/127.0.0.1.id" target="_blankl"><img src="asset/fb.jpg" alt="Facebook saya" width="30px" height="30px"></a>
</div>
<!-- Footer -->
<div class="wrapper footer" >
<p>© Copyright Stiven. All right reversed.</p>
</div>
</body>
</html>
CSS NYA
/**
* Code Css By: Stiven Trizky Katuuk;
*/
*{
margin: 0;
padding: 0;
font-family: verdana;
clear: both;
}
a{
text-decoration: none;
color: black;
}
a:hover{
text-decoration: underline;
}
.wrap{
background-color: #08AF43;
width:100%;
padding-bottom: 30px;
}
/*
Header
*/
.header{
width:100%;
height: 65px;
background-color: #08AF43;
position: fixed;
z-index: 99999;
}
#title{
padding: 30px;
line-height: 20px;
width: 25%;
clear: both;
float: left;
display: inline;
}
#title a{
text-decoration: none;
color: white;
font-family: "Broadway";
font-size: 32pt;
transition: 0.5s all linear;
}
#title a:hover{
font-size: 36pt;
transition: 0.5s all linear;
}
.header li{
display: inline;
position: relative;
}
#menu {
margin-top: -3.8%;
text-align: right;
clear: both;
width: 50%;
float: right;
margin-right: 5%;
}
#menu a{
text-decoration: none;
color:white;
margin-left: 2%;
}
#menu :hover{
color: #CA0404;
text-decoration: underline;
}
/*
Bagian Profil
*/
#gambar{
clear: both;
width: 25%;
}
#img_profile{
width: 289px;
height: 255px;
border-radius: 50%;
margin-top: 8em;
}
#caption {
width: 290px;
height: 257px;
border-radius: 50%;
background-color: black;
opacity: 0;
position: absolute;
top: 22%;
right: 38.2%;
transition: 0.5s all linear;
}
#quote{
width: 290px;
height: 257px;
top: 40%;
right: 38.3%;
opacity: 0;
position: absolute;
color: white;
z-index: -40;
transition: 0.5s all linear;
}
#gambar:hover #caption{
opacity:0.8;
transition: 0.5s all linear;
}
#gambar:hover #quote{
opacity:1;
z-index: 1;
transition: 0.5s all linear;
}
#name{
color: white;
width: 35%;
font-size: 22pt;
transition: 0.5s all linear;
}
#name:hover{
color: black;
font-size: 24pt;
text-decoration: underline;
transition: 0.5s all linear;
}
#status{
color: white;
margin-top: 10px;
position: static;
top: 1%;
width: 25%;
}
/*
TOMBOL PORTOFOLIO
*/
#tombol li{
list-style: none;
text-align:center;
margin-top: 2%;
}
#tombol li a{
color: white;
font-family: arial;
text-decoration: none;
font-size: 15pt;
padding: 5px 50px;
border:2px solid white;
font-weight: bold;
transition: 0.5s all linear;
}
#tombol a:hover{
background-color: white;
color:#0ABE4A;
transition: 0.5s all linear;
}
/*
About Me
*/
.wrapper{
width: 100%;
padding-top: 10px;
border-top:2px solid #08AF43 ;
}
.title{
text-align:center;
font-size: 32pt;
padding:10px;
}
.paragraf{
font-size: 18px;
text-align: center;
font-family: verdana;
}
.sub{
font-family: arial;
margin-top: 5%;
font-size: 20pt;
text-align: center;
}
.skill{
text-align: center;
}
.skill table,th ,td{
border-collapse: collapse;
width: 60%;
}
.skill table,th,td{
border:1px solid black;
text-align: center;
}
.skill th{
padding: 12px 19px;
background-color: #08AF43;
color: white;
}
.skill td{
padding:8px 89px;
}
/*
Portofolio
*/
.lokasi{
width: 100%;
display: inline;
}
.karya{
clear: both;
width: 100%;
height: auto;
display: inline;
}
.img_karya{
width: 300px;
height: 200px;
margin-left:3%;
}
.penutup {
width: 0%;
height: 200px;
background-color: black;
opacity: 1;
position: absolute;
margin-left:11.4%;
margin-top: -16.6%;
opacity: 0.5;
transition:0.5s all linear;
}
.text{
width: 300px;
height: 200px;
color: white;
z-index: -40;
font-size: 20pt;
position:absolute;
text-align: center;
margin-left: 11%;
margin-top: -8.6%;
transition:0.5s all linear;
}
.karya:hover .penutup{
width: 300px;
transition:0.5s all linear;
}
.karya:hover .text{
z-index: 1;
transition:0.5s all linear;
}
.right{
margin-left: 39.2%;
}
.right1{
margin-left: 67.2%;
}
hr{
padding:8px 5px;
border:1px solid white;
}
/*
Kontak
*/
.form{
padding: 4px 10px;
width: 45%;
border:1px solid black;
border-bottom:2px solid #08AF43;
font-family: fantasy;
color:#08AF43;
}
.textarea{
width: 50%;
}
.submit{
padding: 7px 42px;
font-size: 11pt;
font-family: verdana;
border:1px solid black;
border-bottom:2px solid #08AF43;
color:#08AF43;
}
.submit:hover{
border-bottom:2px solid #CA0404;
color:#CA0404;
transition: 0.5s all linear;
cursor: pointer;
}
.footer{
margin-top:2%;
height:50px;
}
.footer p{
text-align: center;
color: gray;
line-height: 50px;
}
0
2 Jawaban:
Itu cuma masalah di table doang gan?
0
oh iya.. bener. yang memacu gitu adalah gambar dan table nya
nih ketika saya ilangin table sama gambar yang ada di web.
0