Buat Website dengan HTML part dua di React Js
Pada pertemuan sebelumnya kita sudah berhasil menginstal React js
bagi temen-temen yang belum mengikuti sesi satu silahkan klik link berikut: cara instal React js
1. Didalam folder src silakan buat struktur folder seperti gambar di bawah
2.untuk file App.js pindahkan ke dalam folder content
3. Untuk file index.js tampilanya seperti ini
4. kemudian buka cmd atau terminal di masing masing komputer
5. Maka hasilnya seperti gambar di bawah
6. buka kembali file App.js
import React, {Component} from 'react';
import '../style/styles.css'
class App extends Component{
render(){
return(
<div className="wraaper">
<div className="header">
<div className="navbar">
<div className="logo">
<img className="imgfluid" src={require('../logo/babastudio-logo.png')} />
</div>
<div className="menu">
<ul>
<li><a>Home</a></li>
<li><a>Blogs</a></li>
<li><a>Galery</a></li>
<li><a>Kontak</a></li>
</ul>
</div>
</div>
</div>
<div className="slider">
<div className="slidercontent">
<img className="imageslider" src={require('../../images/banner-desktop.jpg')} />
</div>
</div>
<h2 className="dataprestasi">Prestasi Murid babastudio</h2>
<div className="content">
<div className="content-gambar">
<div className="image">
<img className="imagesliderr" src={require('../../images/21cineplex.jpg')} />
<div className="contentimage">
<h2 className="fontimage">www.21cineplex</h2>
</div>
</div>
<div className="image">
<img className="imagesliderr" src={require('../../images/bpn.jpg')} />
<div className="contentimage">
<h2 className="fontimage">www.bpn.go.id</h2>
</div>
</div>
<div className="image">
<img className="imagesliderr" src={require('../../images/republika.jpg')} />
<div className="contentimage">
<h2 className="fontimage">www.republika.co.id</h2>
</div>
</div>
</div>
{/* end cgambar */}
<div className="content-gambar">
<h2 className="dataprestasi">Tempat Kursus Babastudio</h2>
<div className="content-yutube">
<iframe width="560" height="315" src="https://www.youtube.com/embed/k1OWLK0Yhc8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div className="content-map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3966.195410128611!2d106.62761531431039!3d-6.237955662820547!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69fbf617855555%3A0x499c259b6b3d813a!2sKampus%20Babastudio%20-%20Tangerang.%20Kursus%20web%2C%20SEO%2C%20Internet%20marketing!5e0!3m2!1sid!2sid!4v1571069969653!5m2!1sid!2sid" width="550" height="300" frameborder="0" allowfullscreen=""></iframe>
</div>
</div>
</div>
</div>
)
}
}
export default App;
7. Didalam Folder Src buat folder src buat folder dengan nama style dan buat file style.css
Untuk sintaknya seperti di bawah:
.wraaper{
height: auto;
margin: auto;
}
.header{
background-color: black;
height: 100px;
width: 100%;
}
.navbar{
height: 100px;
width: 1200px;
margin: auto;
}
.logo{
width: 600px;
height: 100px;
float: left;
}
.imgfluid{
margin-left: 40px;
}
.menu{
width: 600px;
height: 100px;
float: right;
}
.menu ul li {
float: left;
margin-right: 30px;
list-style: none;
line-height: 60px;
color: white;
width: 50px;
text-decoration: none;
}
.li{
float: left;
margin-right: 30px;
list-style: none;
line-height: 60px;
color: white;
width: 50px;
text-decoration: none;
}
.data{
float: left;
margin-right: 30px;
list-style: none;
line-height: 60px;
color: white;
width: 50px;
text-decoration: none;
}
.menu ul li a{
height: 150px;
}
.menu ul li a:hover{
background-color: azure;
color: blue;
width: 100px;
cursor: pointer;
height: 300px;
}
.slider{
background-color: #0e458a;
height: 458px;
}
.slidercontent{
width: 1200px;
margin: auto;
}
.imageslider{
background-color:#33CC99;
max-width: 100%;
}
.imagesliderr{
width: 348px;
height: 300px;
max-width: 100%;
}
.content{
background-color: rgba(16, 117, 189, 0.5);
height: 430px;
margin-bottom: 40px;
}
.dataprestasi{
text-align: center;
color:black;
}
.content-gambar{
width: 1200px;
margin: auto;
height: 400px;
margin-top: 40px;
}
.image{
float: left;
width: 350px;
height: 400px;
margin-right: 50px;
}
.contentimage{
background-color:#33CC99;
height: 100px;
}
.fontimage{
text-align: center;
line-height: 70px;
color: white;
}
.content-yutube{
float: left;
width: 550px;
}
.content-map{
float: right;
width: 550px;
}
.blogswrap{
display: inline-block;
}
.contentatas{
width: 540px;
background-color:whitesmoke;
border:2px solid dimgrey;
float: left;
margin-left: 20px;
border-radius: 20px;
margin-right: 30px;
-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}
.imageblogs{
width: 250px;
float: left;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
margin-right: 10px;
}
.des{
text-align: center;
font-weight: bold;
}
.propwraper{
width: 1200px;
margin: auto;
margin-top: 20px;
}
.imageblogs2{
width: 250px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
margin-right: 10px;
}
.wraperform{
width: 1200px;
margin: auto;
}
.text{
width: 300px;
height: 25px;
border-radius: 50px;
}
.textarea{
width: 300px;
}
.button{
width: 300px;
background-color: cadetblue;
height: 35px;
border-radius: 50px;
}
.imgon {
width:300px;
margin:auto;
display:block;
}
.imgoff {
display:none;
}
.blogswrap2{
display: inline-block;
margin-top: 40px;
}
.contentatasb{
width: 250px;
background-color:whitesmoke;
border:2px solid dimgrey;
float: left;
margin-left: 20px;
border-radius: 20px;
margin-right: 10px;
-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}
.imageblogs23{
width: 250px;
border-radius: 20px;
margin-right: 10px;
}
8. jika sudah buka kembali terminal nya dan jalankan npm start
maka hasilnya seperti website babastudio.com
