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;
}
Komentar
Posting Komentar