Integrasi Sign Up Tab?! Masih Halaman Berita yang sama!
Minggu ini, saya diberikan tugas untuk melengkapi tab pada halaman berita yang saya buat minggu lalu. Saya membuat form Sign Up tersebut dalam bentuk pop-up. Klik link ini untuk melihat halaman berita yang saya buat.
CSS
Tampilan
Source Code
HTML <!DOCTYPE html>
<html>
<head>
<title>Cafe Corner</title>
<link rel="stylesheet" type="text/css" href="custom-1.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 onclick="document.getElementById('id01').style.display='block'">Sign Up</a></li>
</ul>
</div>
<!-- The Modal (contains the Sign Up form) -->
<div id="id01" class="modal">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">X</span>
<form class="modal-content">
<div class="container">
<h1 align="center">Sign Up to Cafe Corner</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="fullname"><b>Full Name</b></label>
<input type="text" placeholder="Enter Full Name" name="fullname" maxlength="50" required>
<label for="address"><b>Address</b></label>
<input type="text" placeholder="Enter Street Name, Number, City" name="address" required>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required>
<label for="phone"><b>Phone No.</b></label>
<input type="text" placeholder="Enter Phone Number" name="phone" min="10" max="12" required>
<label for="birth"><b>Date of Birth</b></label><br>
<input type="Date" placeholder="Enter Birth Date [DD/MM/YYYY]" name="birth" required><br><br>
<label for="gender"><b>Gender</b></label>
<div style="padding-top: 10px">
<input type="radio" name="gender" value="Pria"> Male <br>
<input type="radio" name="gender" value="Wanita"> Female
</div>
<br>
<div>
<label><b>Favorite Rubric</b></label><br>
<select name="rubric" required>
<option name="rubric" selected>Select: </option>
<option name="rubric">Opinions</option>
<option name="rubric">Sports</option>
<option name="rubric">Economics</option>
<option name="rubric">Politics</option>
<option name="rubric">Others</option>
</select>
</div> <br>
<label for="psw"><b>Password</b></label>
<input id="myInput" type="password" placeholder="Enter Password" name="psw" required>
<p id="text">Capslock is ON</p>
<script>
var input = document.getElementById("myInput");
var text = document.getElementById("text");
input.addEventListener("keyup", function(event) {
if (event.getModifierState("CapsLock")) {
text.style.display = "block";
} else {
text.style.display = "none"
}
});
</script>
<label for="psw-repeat"><b>Repeat Password</b></label>
<input id="myInput" type="password" placeholder="Repeat Password" name="psw-repeat" required>
<p id="text">Capslock is ON</p>
<script>
var input = document.getElementById("myInput");
var text = document.getElementById("text");
input.addEventListener("keyup", function(event) {
if (event.getModifierState("CapsLock")) {
text.style.display = "block";
} else {
text.style.display = "none"
}
});
</script>
<label>
<input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px"> Remember me
</label>
<p>By creating an account you agree to our <a href="#" style="color:dodgerblue">Terms & Privacy</a>.</p>
<div class="clearfix">
<button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
<button class="signupbtn" onclick="thisisalert()">Sign Up</button>
<script type="text/javascript">
function thisisalert(){
alert("You've been successfully signed up!");
}
</script>
</div>
</div>
</form>
</div>
<!-- end of form -->
<div class="content">
<div class="jarak">
<!-- kiri -->
<div class="kiri">
<!-- blog -->
<div class="border">
<div class="jarak">
<img src="1-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-1.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-1.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;
}
/*css of form*/
* {box-sizing: border-box}
/* Full-width input fields */
input[type=text], input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
/* Add a background color when the inputs get focus */
input[type=text]:focus, input[type=password]:focus {
background-color: #ddd;
outline: none;
}
/* Set a style for all buttons */
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
button:hover {
opacity:1;
}
/* Extra styles for the cancel button */
.cancelbtn {
padding: 14px 20px;
background-color: #f44336;
}
/* Float cancel and signup buttons and add an equal width */
.cancelbtn, .signupbtn {
float: left;
width: 50%;
}
/* Add padding to container elements */
.container {
padding: 16px;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: dimgrey;
padding-top: 50px;
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* Style the horizontal ruler */
hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
/* The Close Button (x) */
.close {
position: absolute;
right: 35px;
top: 15px;
font-size: 40px;
font-weight: bold;
color: pink;
}
.close:hover,
.close:focus {
color: #f44336;
cursor: pointer;
}
/* Clear floats */
.clearfix::after {
content: "";
clear: both;
display: table;
}
/* Change styles for cancel button and signup button on extra small screens */
@media screen and (max-width: 300px) {
.cancelbtn, .signupbtn {
width: 100%;
}
}
#text {display:none;color:red}
Komentar
Posting Komentar