NRP : 05111740000174
Source code html:
<!DOCTYPE html>
<html>
<head>
<title>TECHINASIA</title>
<link rel="stylesheet" href="technews.css"/>
</head>
<body>
<div class="header">
<div class="jarak">
<h2>TECH IN ASIA</h2>
<h2>Always give you an up to date news!</h2>
</div>
</div>
<div class="menu">
<ul>
<li><a href="#">News</a></li>
<li><a href="#">Jobs</a></li>
<li><a href="#">Companies</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
<div class="content">
<div class="jarak">
<!-- kiri -->
<div class="kiri">
<!-- blog -->
<div class="border">
<div class="jarak">
<img src="https://cdn.techinasia.com/wp-content/uploads/2017/07/jack-ma-alibaba.jpg" alt="JackMa" height="100px" width="100px" float: left>
<h3>Jack Ma co-founded Alibaba with 17 other people. Here are their stories.</h3>
<p>Jack Ma has announced his retirement from Alibaba Group at 54. He led the 19-year-old company from humble begginings in his apartment to an ecommerce giant...</p>
<button class="btn"><a href="https://www.techinasia.com/talk/jack-ma-17-alibaba-co-founders">Read More</a></button>
</div>
</div>
<!-- end blog -->
<!-- blog -->
<div class="border">
<div class="jarak">
<img src="https://cdn.techinasia.com/wp-content/uploads/2018/09/protopie.png" alt="TonyKim" height="100px" width="100px" float: left>
<h3>He ditched a dream job at Google to build a tool used by thousands of designer</h3>
<p>Tony Kim is an artist. As a product designer at Naver and Google in South Korea, his work had a direct impact on millions of consumers. But he dreamed of building a...</p>
<button class="btn"><a href="https://www.techinasia.com/ditched-dream-job-google-build-tool-thousands-designers">Read More</a></button>
</div>
</div>
<!-- end blog -->
<!-- blog -->
<div class="border">
<div class="jarak">
<img src="https://cdn.techinasia.com/wp-content/uploads/2018/09/dna-3539309_1280-750x375.jpg" alt="DNA" height="100px" width="100px" float: left>
<h3>The startup that lets businesses build products using DNA data</h3>
<p>Tomohiro Takano is the CEO and founder of Awakens, a B2B and B2C DNA marketplace that tries to open up the genome and make it more accessible to users and businesses. Here's how...</p>
<button class"btn"><a href="https://www.techinasia.com/talk/tomohiro-takano-awakens">Read More</a></button>
</div>
</div>
<!-- end blog -->
</div>
<!-- kiri -->
<!-- kanan -->
<div class="kanan">
<div class="jarak">
<h3>Other Newspage</h3>
<hr/>
<p><a href="https://www.bbc.com/news/world" class="undercor">BBC News</a></p>
<p><a href="https://www..cnn.com/">CNN News</a></p>
<p><a href="https://www.foxnews.com/">Fox News</a></p>
<p><a href="https://www.straitstimes.com/world/">Straits Times</a></p>
</div>
</div>
<!-- kanan -->
</div>
</div>
<div class="footer">
<div class="jarak">
<p>copyrigt 2018 belajarbersama all reserved</p>
</div>
</div>
</body>
</html>
Source code CSS:
body
{
background: #FBFAFA;
color: #333;
width: 100%;
height: 100%;
font-family: wildwest;
margin:0 auto;
}
.header
{
margin: 0;
background: #fff
}
.content
{
width: 85%
margin: auto;
height: 420px
padding: 0.1px;
background: #fff;
color: #333;
}
.kiri
{
width: 70%;
float: left;
margin: auto;
background: #fff;
height: 420px;
}
.kanan
{
width: 25%;
float: left;
margin:auto;
background: #fff;
height: 420px;
}
.border
{
border: 3px solid #000;
margin-top:pc;
padding-bottom:1pc;
padding-left:2pc;
padding-right:2pc;
}
.undercor
{
text-decoration:none;
}
.footer
{
width: 100%;
margin: auto;
height: 30px;
line-height: 30px;
background: #F0EEEE;
}
.menu
{
background-color: #F0EEEE;
height: 60px;
line-height: 60px;
position: relative;
width: 90%;
margin: 0 auto;
padding:0 auto;
}
.jarak
{
padding: 0 2pc;
}
.menu ul
{
list-style:none;
}
.menu ul li a
{
float:left;
width:70px;
display:block;
text-align:center;
color:#A4A4A4;
text-decoration:none;
}
.menu ul li a:hover
{
background-color: #DDDCDC;
display: block;
}
Hasil:
Tidak ada komentar:
Posting Komentar