Halaman Berita? HTML & CSS!
Minggu ini saya belajar HTML dan CSS. Saya juga mendapat tugas untuk membuat sebuah halaman berita, contohnya website TECHINASIA. Berikut adalah tampilan dari website tersebut.
Berikut adalah tampilan dari halaman berita yang saya buat.
Header-Content
Content-Footer
Source Code
HTML
<!DOCTYPE html>
<html>
<head>
<title>Cafe Corner</title>
<link rel="stylesheet" type="text/css" href="custom.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
</head>
<body>
<div class="header">
<h2>CAFE CORNER</h2>
</div>
<div class="menu">
<ul>
<li><a class="active" href="#">News<a></li>
<li><a href="#">Jobs</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Highlight</a></li>
<li style="float:right;padding-right:30px"><a href="#">Login</a></li>
<li style="float:right;padding-right:20px"><a href="#">SignUp</a></li>
</ul>
</div>
<div class="content">
<div class="jarak">
<!-- kiri -->
<div class="kiri">
<!-- blog -->
<div class="border">
<div class="jarak">
<img src="1.jpg">
<div class="con">
<h3>US is putting a knife to China's neck, says trade negotiator</h3>
<p>China's deputy trade negotiator on Tuesday acknowledged the challenge in resuming negotiations with the US, saying: "How could you negotiate with someone when he puts a knife on your neck?" [...]</p>
<button class="btn">Read More</button>
</div>
</div>
</div>
<!-- end blog -->
<!-- blog -->
<div class="border">
<div class="jarak">
<img src="2.jpg">
<div class="con">
<h3>Fan Bingbing's disappearance shows no one is safe from Beijing</h3>
<p>Fan Bingbing, one of China's most famous actresses, known internationally for films such as "X-Men: Days of Future Past", has not been seen in public since June. [...]</p>
<button class="btn">Read More</button>
</div>
</div>
</div>
<!-- end blog -->
<!-- blog -->
<div class="border">
<div class="jarak">
<img src="3.jpg">
<div class="con">
<h3>The world's best-connected airports for 2018</h3>
<p>Atlanta might have the busiest airport and Asia might have the most in-demand flight routes, but when it comes to the world's best-connected megahubs, London's Heathrow Airport is king. [...]</p>
<button class="btn">Read More</button>
</div>
</div>
</div>
<!-- end blog -->
</div>
<!-- kiri -->
<!-- kanan -->
<div class="kanan">
<div class="jarak">
<h3>CATEGORY</h3>
<hr/>
<p><a href="#" class="undercor">Economy</a></p>
<p><a href="#" class="undercor">Politics</a></p>
<p><a href="#" class="undercor">Humanity</a></p>
<p><a href="#" class="undercor">Entertainment</a></p>
<p><a href="#" class="undercor">Sports</a></p>
<p><a href="#" class="undercor">Lifestyle</a></p>
<p><a href="#" class="undercor">Technology</a></p>
</div>
</div>
<!-- kanan -->
</div>
</div>
<div class="footer">
<div class="jarak">
<h5>Copyright 2018 Hazimi</h5>
<i class="fab fa-instagram"></i>
<i class="fab fa-youtube"></i>
<i class="fab fa-facebook-square"></i>
<i class="fab fa-twitter"></i>
</div>
</div>
</body>
</html>
CSS
@import url('https://fonts.googleapis.com/css?family=Abel');
@import url('https://fonts.googleapis.com/css?family=Questrial');
@import url('https://fonts.googleapis.com/css?family=Righteous');
body{
background: #f3f3f3;
color: #333;
width: 100%;
font-family: sans-sherif;
margin: 0 auto;
}
.header{
background-image: url("4.jpeg");
background-repeat: no-repeat;
background-size: cover;
width: 90%;
margin: auto;
height: 300px;
line-height: 270px;
color: #fff;
text-align: center;
background-position: center;
font-size: 50px;
color: black;
font-family: 'Questrial', sans-serif;
}
.content{
width: 90%;
margin: auto;
height: 800px;
padding: 0.1px;
background: #fff;
color: #333;
}
.kiri{
width: 85%;
float: left;
margin: auto;
background: #fff;
height: 420px;
}
.kanan{
width: 15%;
float: left;
margin: auto;
background: #fff;
height: 420px;
position: sticky;
text-align: center;
padding-top: 30px;
}
.border{
border: 2px solid rgb(192,192,192);
margin-top: 1pc;
padding-bottom: 1pc;
padding-left: 2pc;
padding-right: 2pc;
height: 220px;
}
.undercor{
text-decoration: none;
border: 2px solid grey;
border-radius: 20px;
padding: 5px;
background-color: grey;
color: white;
}
h3{
font-family: 'Oswald', sans-serif;
}
p{
font-family: 'Abel', sans-serif;
}
h5{
color: #fff;
font-family: 'Righteous', cursive;
font-size: small;
}
.footer{
width: 90%;
margin: auto;
height: 40px;
line-height: 40px;
background: black;
}
.menu{
background-color: black;
height: 50px;
line-height: 50px;
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: #fff;
text-decoration: none;
}
.menu ul li a:hover{
background-color: lightpink;
display: block;
}
.con{
margin-left: 400px;
}
img{
float: left;
width: 350px;
border-radius: 10px;
}
.btn{
background-color: rgb(192,192,192);
width: 80px;
padding: 5px;
border: 2px solid black;
border-radius: 20px;
cursor: pointer;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 10px 0 rgba(0, 0, 0, 0.19);
}
.btn:hover{
background-color: lightpink;
}
@media (max-width: 768px){
img{
float: none;
width: 250px;
}
.con{
margin-left: 0;
}
.kiri{
width: 75%;
}
.border{
padding-top: 20px;
height: 400px;
}
.content{
height: 1400px;
}
}
.active {
background-color: grey;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 10px 0 rgba(0, 0, 0, 0.19);
}
.fab{
color: pink;
margin-right: 10px;
}
.footer h5{
margin: 0;
float: left;
width: 85%;
height: auto;
}
Local News Subscription with Discount: Discount on news subscription from local portals covering regional and community news for complete info visit our website https://sites.google.com/view/168news
BalasHapusExclusive Access: Get articles and investigative reports available only to premium subscribers. For more information, visit our website https://sites.google.com/view/168news
BalasHapus"Want to know what's viral? Click here and read the hottest news that's trending all over the world!" For complete information, visit our website https://beritamantul.jimdosite.com/
BalasHapus