Scribd
Upload
43 views

Coding

The document is an HTML page for registering on a website called SUKSIS. It contains the basic HTML structure and links to CSS files for styling. The main content includes a heading asking users to "Join the squad", a registration form collecting a name, student ID, and course, and a submit button to register. It is responsive, adjusting the layout on smaller screens to center elements.

Uploaded by

Siti Nursyaqirah
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
43 views

Coding

The document is an HTML page for registering on a website called SUKSIS. It contains the basic HTML structure and links to CSS files for styling. The main content includes a heading asking users to "Join the squad", a registration form collecting a name, student ID, and course, and a submit button to register. It is responsive, adjusting the layout on smaller screens to center elements.

Uploaded by

Siti Nursyaqirah
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 12

index.

html
<!DOCTYPE html> <img src="images/logo.png">
<html lang="en"> <div class="brand-logo-
name"></div>
<head>
</a>
<meta charset="UTF-8">
<nav class="main-nav">
<meta name="viewport"
content="width=device-width, initial- <ul>
scale=1.0">
<li><a
<meta http-equiv="X-UA-Compatible" href="join.html">Register</a></li>
content="ie=edge">
</ul>
<link href="styles.css"
</nav>
rel="stylesheet">
</header>
<link href="index.css" rel="stylesheet">
<title>SUKSIS</title>
<section class="home-main-section">
</head>
<div class="img-wrapper">
<style>
<div class="badge"></div>
body
</div>
{
background-image:
url('../cukcis/images/banner.png'); <div class="call-to-action">
background-repeat: no-repeat; <h1 class="title">Suksis UiTM
Kedah</h1>
background-attachment: fixed;
<span class="subtitle">Welcome to
background-size: cover;
Suksis Registration</span>
}
<a href="join.html"
</style> class="btn">Register Now</a>
<body class="container full-height- </div>
grow">
</section>
<header class="main-header">

</body>
<a href="index.html" class="brand-
</html>
logo">
index.css align-items: flex-start;
.home-main-section { margin: 1rem;
display: flex; align-self: center;
align-items: stretch; }
justify-content: space-between;
flex-grow: 1; @media (max-width: 900px) {
} .home-main-section .img-wrapper {
background-image:
url(images/badge.png);
.home-main-section .img-wrapper {
display: none;
flex-grow: 1;
}
flex-direction: column;
display: flex;
.home-main-section {
align-items: stretch;
justify-content: center;
justify-content: flex-end;
}
}
}

.home-main-section .badge {
background-image:
url(images/badge.png);
flex-grow: 1;
min-width: 25vw;
background-size: contain;
background-repeat: no-repeat;
background-position: right;
}

.home-main-section .call-to-action {
display: flex;
flex-direction: column;
join.html <img src="images/logo.png">
<!DOCTYPE html> <div class="brand-logo-
name"></div>
<html lang="en">
</a>
<head>
<nav class="main-nav">
<meta charset="UTF-8">
<ul>
<meta name="viewport"
content="width=device-width, initial- <li><a
scale=1.0"> href="join.html">Register</a></li>
<meta http-equiv="X-UA-Compatible" </ul>
content="ie=edge">
</nav>
<link href="styles.css"
</header>
rel="stylesheet">
<section class="join-main-section">
<link href="join.css" rel="stylesheet">
<h1 class="join-text">
<title>SUKSIS - Reg</title>
Join the
</head>
<span class="accent-
<style>
text">squad.</span>
body
</h1>
{
<form action="in.php"
background-image: method="POST" class="join-form">
url('../cukcis/images/banner.png');
<div class="input-group">
background-repeat: no-repeat;
<label
background-attachment: fixed; for="stu_name">Name:</label>
background-size: cover; <input type="text"
name="stu_name" id="stu_name"
}
required> <!----------buh php---------->
</style>
</div>
<body class="full-height-grow">
<div class="input-group">
<div class="container full-height- <!----------buh php---------->
grow">
<label>Student ID:</label>
<header class="main-header">
<input type="number"
<a href="index.html" class="brand- name="stu_id" id="stu_id" required>
logo">
</div> join.css
<div class="input-group"> .join-main-section {
<!----------buh php---------->
display: flex;
<label>Course:</label>
justify-content: space-between;
<input type="text"
align-items: center;
name="stu_course" id="stu_course
required> flex-grow: 1;
</div> }
<div class="input-group"> <br>
<br>
.join-text {
<button type="submit" class="btn"
>Register Now</button> font-size: 3.5em;

</div> font-weight: bold;

</form> margin: 0;

</section> }

</div>
.accent-text {

<footer class="main-footer"> color: #BC3A80;

<div class="container"> }

<nav class="footer-nav">
<ul> .join-form {

<li><a href="about.html">About background-color: #202027;


Us</a></li> width: 50vw;
</ul> max-width: 50%;
</nav> padding: 2rem 4rem;
</div> border-radius: 20px;
</footer> }
</body>
</html> .input-group {
margin-bottom: 2rem;
display: flex; .join-main-section {
flex-direction: column; flex-direction: column;
} justify-content: center;
}
.input-group:last-child {
margin-bottom: 0; .join-form {
} width: 80vw;
max-width: inherit;
.input-group label { margin: 2rem 0;
font-weight: bold; }
margin-bottom: .5rem; }
}

.input-group input {
outline: none;
background: none;
border: 1px solid #2E3852;
font-size: 1em;
padding: .5em;
color: inherit;
border-radius: 5px;
}

.input-group input:focus {
border-color: #596da0;
}

@media (max-width: 900px) {


in.php
<?php //statement
$stu_name = $_POST['stu_name']; $stmt = $conn-
>prepare($SELECT);
$stu_id = $_POST['stu_id'];
$stmt->bind_param("i", $stu_id);
$stu_course = $_POST['stu_course'];
$stmt->execute();
$stmt->bind_result($stu_id);
if (!empty($stu_name) || !empty($stu_id)
|| !empty($stu_course)) $stmt->store_result();
{ $rnum = $stmt->num_rows;
$host = "localhost"; if ($rnum==0)
$dbUsername = "root"; {
$dbPassword = ""; $stmt->close();
$dbname = "suksis"; $stmt = $conn->prepare($INSERT);
$stmt->bind_param("sis",
$stu_name, $stu_id, $stu_course);
$conn = new mysqli ($host,
$dbUsername, $dbPassword, $stmt->execute();
$dbname); //connection
echo "New record inserted
sucessfully";
if (mysqli_connect_error()) }
{ else
die('Connect Error('. {
mysqli_connect_errno().')'.
echo "Someone already register
mysqli_connect_error());
using this student ID";
}
}
else
$stmt->close();
{
$conn->close();
$SELECT = "SELECT stu_id From
}
student Where stu_id = ? Limit 1";
}
$INSERT = "INSERT Into student
(stu_name, stu_id, stu_course) else
values(?, ?, ?)";
{
echo "All field are }
required";
</style>
die();
}
<body class="full-height-grow">
?>
<div class="container full-height-
grow">
<!DOCTYPE html> <header class="main-header">
<html lang="en"> <a href="index.html" class="brand-
logo">
<img src="images/logo.png">
<head>
<div class="brand-logo-
<meta charset="UTF-8">
name"></div>
<meta name="viewport"
</a>
content="width=device-width, initial-
scale=1.0"> </header>
<meta http-equiv="X-UA-Compatible"
content="ie=edge">
<br><br><br>
<link href="styles.css"
rel="stylesheet">
<section class="list-main-section">
<link href="list.css" rel="stylesheet">
<div class="call-to-action">
<title>Success</title>
<h4 class="title">Student List</h4>
</head>
<a href="<?php echo
'list.php'; ?>" class="btn">List</a>
<style>
</div>
body
</section>
{
background-image:
</body>
url('../cukcis/images/banner.png');
</html>
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
connect.php <title>Suksis - List</title>
<?php </head>
$con=mysqli_connect('localhost','root','',' <style>
suksis');
body
if(!$con)
{
{
background-image:
die ("Connection Error"); url('../cukcis/images/banner.png');
} background-repeat: no-repeat;
?> background-attachment: fixed;
background-size: cover;
list.php }

<?php #customers {
include_once('connect.php'); border-collapse: collapse;
$query="select * from student"; width: 600px;
$result=mysqli_query($con,$query); line-height: 20px;
?> }

<!DOCTYPE html> #customers td, #customers th {


<html lang="en"> border: 1px solid #ddd;
<head> padding: 8px;
<meta charset="UTF-8"> }
<meta name="viewport"
content="width=device-width, initial-
#customers tr:nth-child(even)
scale=1.0">
{background-color: #340e59;}
<meta http-equiv="X-UA-Compatible"
content="ie=edge">
#customers tr:hover {background-color:
<link href="styles.css"
black;}
rel="stylesheet">
<link href="list.css" rel="stylesheet">
#customers th { <br><br><br>
padding-top: 12px;
padding-bottom: 12px; <table align="centre"
id="customers"> <!----------buh
text-align: left;
php---------->
background-color: #eb9d0c;
color: white;
<tr>
<th colspan="4"
</style> ><h2>Namelist Student Suksis</th>

<body class="full-height-grow"> </tr>

<div class="container full-height- <tr>


grow">
<th>No.</th>
<header class="main-header">
<th>Name</th>
<a href="index.html" class="brand-
<th>Student
logo">
ID</th>
<img src="images/logo.png">
<th>Course</th>
<div class="brand-logo-
</tr>
name"></div>
<?php
</a>
$number = 1;
</header>

<br><br><br> while($rows=mysqli_fetch_assoc($result
))
{
<section class="list-main-section">
?>
<div class="call-to-action">
<tr>
<h1 class="title">List of
student</h1>
<td><?php echo $number; ?
Thank you for joining Suksis. ></td>
</div>
</section> <td><?php echo
$rows['stu_name']; ?></td>
<td><?php echo $rows['stu_id']; ? }
></td>
.icon {
<td><?php echo
$rows['stu_course']; ?></td> display: flex;
<?php ++$number; ?> flex-direction: column;
</tr> justify-content: space-between;
<?php align-items: center;
} margin: .5rem;
?> padding: .75rem;
</table> width: 100px;
</div> height: 100px;
</body> background-color: #202027;
</html> margin-bottom: 2rem;
}
list.css .icon img {
.list-main-section { width: 40px;
display: flex; }
align-items: center; @media (max-width: 800px) {
justify-content: space-between; .list-main-section {
flex-grow: 1; flex-direction: column;
} justify-content: center;
.list-main-section .covers-image { }
width: 30vw;
margin-left: 2rem; .list-main-section .covers-image {
height: auto; margin-top: 2rem;
max-width: 350px; height: 30vh;
} width: auto;
.icon-section { }
display: flex; }
style.css
.brand-logo-name {
@import margin-left: 1rem;
url('https://fonts.googleapis.com/css?
}
family=Poppins:400,500,700');

.main-nav ul, .footer-nav ul {


*, *::before, *::after {
display: flex;
box-sizing: border-box;
margin: 0;
}
padding: 0;
body {
list-style: none;
padding: 0;
}
margin: 0;
background-color: #2F303A;
.main-nav a, .footer-nav a {
font-family: Poppins, sans-serif;
color: inherit;
font-size: 1.2rem;
text-decoration: none;
color: white;
padding: 1rem;
min-height: 100vh;
}
}
.main-nav a:hover, .footer-nav a:hover {
.full-height-grow {
color: #adadad;
display: flex;
}
flex-direction: column;
.main-header, .main-footer {
}
display: flex;
.brand-logo {
justify-content: space-between;
display: flex;
align-items: center;
align-items: center;
}
font-size: 1.25em;
color: inherit;
.main-header {
text-decoration: none;
height: 140px;
}
} margin-top: 0;
}
.main-footer {
height: 70px; .subtitle {
background-color: #202027; font-weight: 500;
font-weight: bold; font-size: 1.2em;
} margin-bottom: 2rem;
}
.social-link img {
width: 1em; .btn {
margin-right: .25rem; color: white;
} background-color: #1762A7;
padding: .75rem 1.5rem;
.main-footer .container { border-radius: .5rem;
display: flex; text-decoration: none;
justify-content: space-between; font-size: .9rem;
} outline: none;
.container { border: none;
max-width: 1200px; cursor: pointer;
margin: 0 auto; }
padding: 0 40px;
flex-grow: 1; .btn:hover {
} background-color: #2180d8;
}
.title {
font-weight: 500; .btn:focus {
font-size: 3em; background-color: #2796ff;
margin-bottom: 1rem; }

You might also like