Postingan lainnya
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