Syntax sederhana website online shop




INDEX HALAMAN UTAMA (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hanina Fashion Shop</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200;400&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <style>
body {
  background-color:#ddd;
}

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}
</style>
</head>
<body>

    <div class="container">

        <header class="header">
            <div class="hero">
                <h2 class="heading">Hanina Fashion Shop</h2>
                <p class="sub-heading">Cardigan, Hijab, Rok Plisket</p>
            </div>
                
            <div class="features feature-1">
                <h4 class="price">IDR 50K</h4>
                <p class="item">Cardigan</p>
            </div>
                
            <div class="features feature-2">
                <h4 class="price">IDR 45K</h4>
                <p class="item">Plisket</p>
            </div>
                
        </header>

        <nav class="menu">
            <div class="menu-toggle">
                <input type="checkbox" />
                <span></span>
                <span></span>
                <span></span>
            </div>
            <div class="brand">
                <h1>Hanina Fashion</h1>
            </div>
            
            <ul class="menu-list">
                <li><a href="">Home</a></li>
                <li><a href="">Produk</a></li>
                <li><a href="">About</a></li>
                <li><a href="slide/index.html">Gallery</a></li>
                <li><a href="formlogin.php">Login</a></li>
            </ul>
        </nav>

        <section class="services">
            <div class="service">
                <div class="icon">💻</div>
                <h3>Tutorial</h3>
                <p>Cek in Youtube (Hanina Sapira)</p>
            </div>

            <div class="service">
                <div class="icon">🎼</div>
                <h3>Music</h3>
                <p>Play Now</p>
            </div>

            <div class="service">
                <div class="icon">🎬</div>
                <h3>Podcase</h3>
                <p>Cek In Youtube (Hanina Sapira)</p>
            </div>

            <div class="service">
                <div class="icon">⌚</div>
                <h3>Mercendaise</h3>
                <p>Give A Way dan Voucher</p>
            </div>
        </section>

        <section class="gallery">
            <h2>Gallery</h2>
           
            <img src="img/pashmina.jpg" alt="">
            <img src="img/padu.jpg" alt="">
            <img src="img/awal.jpeg" alt="">
            <img src="img/baru.jpg" alt="">
            <img src="img/hijab.jpeg" alt="">
            <img src="img/cardigan1.jpeg" alt="">
            <img src="img/plisket.jpeg" alt="">
            <img src="img/rok.jpeg" alt="">
            <img src="img/rok1.jpeg" alt="">
            <img src="img/buket2.jpg" alt="">
            <img src="img/buket3.jpg" alt="">
            <img src="img/buket4.jpg" alt="">
        </section>
    </div>
    <script>
        const menuToggle = document.querySelector('.menu-toggle');
        const nav = document.querySelector('nav ul');

        menuToggle.addEventListener('click', function() {
            nav.classList.toggle('slide');
        });
    </script>
</body>
</html>


CSS HALAMAN UTAMA (style.css)

*{
    margin: 0;
    padding: 0;
}

img {
    width: 100%;
}

body {
    font-size: 18px;
    font-family: 'Oswald' Arial, Helvetica, sans-serif;
    margin: 50px;
}


/*container*/

.container {
    display: grid;
    gap: 10px;
}

/* Header */
.header {
    display: grid;
    grid-template-areas: 
    'hero hero feature-1'
    'hero hero feature-2';
}

.hero {
    grid-area: hero;
    min-height: 300px;
    background-image: url(img/awal1.jpg);
    background-size: cover;
    background-position: center;
    padding: 50px;
}

.hero > * {
    display: none;
}

.features {
    background-color:black;
    color: black;
    display: grid;
    /*justify-content: center;
    align-content: center; */
    place-content: center;
    text-align: center;
    cursor: pointer;
}

.feature-1 {
    grid-area: feature-1;
    background-image: url(img/cardigan1.jpeg);
    background-size: cover;
}

.feature-2 {
    grid-area: feature-2;
    background-image: url(img/plisket.jpeg);
    background-size: cover;
}

.features .price{
    font-size: 3em;
    font-weight: 200;
}

.menu {
    order: -1;
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: center;
}

.menu .brand {
    font-size: 1.3em;
    color: #333;
}

.menu ul {
    list-style: none;
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(100px, 1fr));
    gap: 5px;
    
}

.menu a {
    display: block;
    background-color: #333;
    color: white;
    text-decoration: none;
    text-align: center;
    padding: 5px;
    text-transform: uppercase;
    font-size: 0.9em;
}

/*hamberger menu */

.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    height: 20px;
    /*background-color: black; */
    position: relative;
    z-index: 999;
}

.menu-toggle span {
    display: block;
    width: 20px;
    height: 3px;
    background: black;
    border-radius: 3px;
    transition: all 0.5s;
}

.menu-toggle input {
    display: block;
    position: absolute;
    background-color: black;
    width: 40px;
    height: 28px;
    left: -5px;
    top: -5px;
    cursor: pointer;
    opacity: 0;
    z-index: 2;
}

/*hamburger menu animasi */
.menu-toggle span:nth-child(2) {
    transform: 0 0;
}
.menu-toggle span:nth-child(4){
    transform: 0 100%;
}

.menu-toggle input:checked ~ span:nth-child(2) {
    background-color: white;
    transform: rotate(45deg) translate(-1px, -1px);
}

.menu-toggle input:checked ~ span:nth-child(4) {
    background-color: white;
    transform: rotate(-45deg) translate(-1px, 0);
}

.menu-toggle input:checked ~ span:nth-child(3) {
    opacity: 0;
    transform: scale(0);
}

/*Services*/

.services{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap:20px;
}

.service{
    background-color:   white;
    padding:    15px;
    text-align:     center;
    border:1px solid #aaa;
    border-radius:3px;
    box-shadow: 0 0 2px rgba(0,0,0,0.3);
}

.service.icon{
    font-size:  3em;
}

.service h3{
    font-size:  1.5em;
}

.service p{
    font-weight:    200;
    letter-spacing:     1px;
    font-size:  0.8em;
}

/*Gallery*/
.gallery{
    margin-top:     100px;
    display:    grid;
    grid-template-columns:  repeat(auto-fit, minmax(200px, 1fr));
    gap:5px;
}

.gallery h2{
    grid-column:    1/-1;
    text-align:     center;
    margin-bottom:  20px;
}

/*Responsive Breakpoint*/
@media(max-width:1024px){
.menu{
    order:inherit;
    grid-template-columns:1fr;
}

.menu.brand{
    display:    none;   
}

.hero > *{
    display:    block;
    background-color:   black;
    color:  white;
    padding:    5px;
    margin-bottom:  5px;
}

.hero{
    display:    flex;
    flex-direction:     column; 
    align-items:    start;
    justify-content:    center;
}
}

@media (max-width:  768px){
    .menu{
        order:  -1;
        justify-items:end;
    }
    .menu-toggle{
        display:    flex;   
    }
    .menu ul{
        display:    flex;   
        position:   absolute;
        right:  0;
        height: 100vh;
        top: 0;
        background-color:   black;
        width:  100%;
        flex-direction:     column;
        justify-content:    space-evenly;
        align-items:    center;
        z-index:    1;
        transform: translateY( -100%);
        opacity:    0;
        transition:     all 1s;
    }
    .menu ul.slide{
        opacity:    1;
        transform:  translateY( 0);
    }
}

@media (max-width:  600px){
    .body{
        margin:     15px;
    }
    .header{
        grid-template-areas:    
        'hero'
        'feature-1'
        'feature-2';
    }
}



INDEX CAROUSEL/SLIDE (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type ="text/css" href="style.css">
    <title>Slide</title>
</head>
<body>
<h1><center>GALLERY SLIDE</center></h1>

<section class="carousel" aria-label="Gallery">
  <ol class="carousel__viewport">
    <li id="carousel__slide1"
        tabindex="0"
        class="carousel__slide">
      <div class="carousel__snapper">
        <a href="#carousel__slide4"
           class="carousel__prev">Go to last slide</a>
        <a href="#carousel__slide2"
           class="carousel__next">Go to next slide</a>
        <img src="../img/padu.jpg" width="auto" height="auto">
      </div>
    </li>
    <li id="carousel__slide2"
        tabindex="0"
        class="carousel__slide">
      <div class="carousel__snapper">
      <a href="#carousel__slide1"
         class="carousel__prev">Go to previous slide</a>
      <a href="#carousel__slide3"
         class="carousel__next">Go to next slide</a>
        <img src="../img/awal.jpeg" width="auto" height="auto">
    </div>
    </li>
    <li id="carousel__slide3"
        tabindex="0"
        class="carousel__slide">
      <div class="carousel__snapper">
      <a href="#carousel__slide2"
         class="carousel__prev">Go to previous slide</a>
      <a href="#carousel__slide4"
         class="carousel__next">Go to next slide</a>
      <img src="../img/baru.jpg" width="auto" height="auto">
    </div>
    </li>
    <li id="carousel__slide4"
        tabindex="0"
        class="carousel__slide">
      <div class="carousel__snapper">
      <a href="#carousel__slide3"
         class="carousel__prev">Go to previous slide</a>
      <a href="#carousel__slide5"
         class="carousel__next">Go to first slide</a>
      <img src="../img/cardigan.jpeg" width="auto" height="auto">
    </div>
     <li id="carousel__slide5"
        tabindex="0"
        class="carousel__slide">
      <div class="carousel__snapper">
      <a href="#carousel__slide4"
         class="carousel__prev">Go to previous slide</a>
      <a href="#carousel__slide6"
         class="carousel__next">Go to first slide</a>
      <img src="../img/hijab.jpeg" width="auto" height="auto">
    </div>
    </li>
     <li id="carousel__slide6"
        tabindex="0"
        class="carousel__slide">
      <div class="carousel__snapper">
      <a href="#carousel__slide5"
         class="carousel__prev">Go to previous slide</a>
      <a href="#carousel__slide7"
         class="carousel__next">Go to first slide</a>
      <img src="../img/rok.jpeg" width="auto" height="auto">
    </div>
    </li>
    <li id="carousel__slide7"
        tabindex="0"
        class="carousel__slide">
      <div class="carousel__snapper">
      <a href="#carousel__slide6"s
         class="carousel__prev">Go to previous slide</a>
      <a href="#carousel__slide1"
         class="carousel__next">Go to first slide</a>
      <img src="../img/rok1.jpeg" width="auto" height="auto">
    </div>
    </li>
  </ol>
  <aside class="carousel__navigation">
    <ol class="carousel__navigation-list">
      <li class="carousel__navigation-item">
        <a href="#carousel__slide1"
           class="carousel__navigation-button">Go to slide 1</a>
      </li>
      <li class="carousel__navigation-item">
        <a href="#carousel__slide2"
           class="carousel__navigation-button">Go to slide 2</a>
      </li>
      <li class="carousel__navigation-item">
        <a href="#carousel__slide3"
           class="carousel__navigation-button">Go to slide 3</a>
      </li>
      <li class="carousel__navigation-item">
        <a href="#carousel__slide4"
           class="carousel__navigation-button">Go to slide 4</a>
      </li>
      <li class="carousel__navigation-item">
        <a href="#carousel__slide5"
           class="carousel__navigation-button">Go to slide 5</a>
      </li>
      <li class="carousel__navigation-item">
        <a href="#carousel__slide6"
           class="carousel__navigation-button">Go to slide 6</a>
      </li>
      <li class="carousel__navigation-item">
        <a href="#carousel__slide7"
           class="carousel__navigation-button">Go to slide 7</a>
      </li>
    </ol>
  </aside>
</section>
      <h3><a href="../index.html">Kembali ke Halaman Sebelumnya</a></h3>
</body>
</html>



CSS CAROUSEL (style.css)


@keyframes tonext {
  75% {
    left: 0;
  }
  95% {
    left: 100%;
  }
  98% {
    left: 100%;
  }
  99% {
    left: 0;
  }
}

@keyframes tostart {
  75% {
    left: 0;
  }
  95% {
    left: -300%;
  }
  98% {
    left: -300%;
  }
  99% {
    left: 0;
  }
}

@keyframes snap {
  96% {
    scroll-snap-align: center;
  }
  97% {
    scroll-snap-align: none;
  }
  99% {
    scroll-snap-align: none;
  }
  100% {
    scroll-snap-align: center;
  }
}

body {
  max-width: 37.5rem;
  margin: 0 auto;
  padding: 0 1.25rem;
  font-family: 'Lato', sans-serif;
  background-color: #ddd;
}

* {
  box-sizing: border-box;
  scrollbar-color: transparent transparent; /* thumb and track color */
  scrollbar-width: 0px;
}

*::-webkit-scrollbar {
  width: 0;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: transparent;
  border: none;
}

* {
  -ms-overflow-style: none;
}

ol, li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.carousel {
  position: relative;
  padding-top: 75%;
  filter: drop-shadow(0 0 10px #0003);
  perspective: 100px;
}

.carousel__viewport {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  overflow-x: scroll;
  counter-reset: item;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}

.carousel__slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  background-color: #f99;
  counter-increment: item;
}

.carousel__slide:nth-child(even) {
  background-color: #99f;
}

.carousel__slide:before {
  content: counter(item);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%,-40%,70px);
  color: #fff;
  font-size: 2em;
}

.carousel__snapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  scroll-snap-align: center;
}

@media (hover: hover) {
  .carousel__snapper {
    animation-name: tonext, snap;
    animation-timing-function: ease;
    animation-duration: 4s;
    animation-iteration-count: infinite;
  }

  .carousel_slide:last-child .carousel_snapper {
    animation-name: tostart, snap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .carousel__snapper {
    animation-name: none;
  }
}

.carousel:hover .carousel__snapper,
.carousel:focus-within .carousel__snapper {
  animation-name: none;
}

.carousel__navigation {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
}

.carousel__navigation-list,
.carousel__navigation-item {
  display: inline-block;
}

.carousel__navigation-button {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #333;
  background-clip: content-box;
  border: 0.25rem solid transparent;
  border-radius: 50%;
  font-size: 0;
  transition: transform 0.1s;
}

.carousel::before,
.carousel::after,
.carousel__prev,
.carousel__next {
  position: absolute;
  top: 0;
  margin-top: 37.5%;
  width: 4rem;
  height: 4rem;
  transform: translateY(-50%);
  border-radius: 50%;
  font-size: 0;
  outline: 0;
}

.carousel::before,
.carousel__prev {
  left: -1rem;
}

.carousel::after,
.carousel__next {
  right: -1rem;
}

.carousel::before,
.carousel::after {
  content: '';
  z-index: 1;
  background-color: #333;
  background-size: 1.5rem 1.5rem;
  background-repeat: no-repeat;
  background-position: center center;
  color: #fff;
  font-size: 2.5rem;
  line-height: 4rem;
  text-align: center;
  pointer-events: none;
}

.carousel::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='0,50 80,100 80,0' fill='%23fff'/%3E%3C/svg%3E");
}

.carousel::after {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='100,50 20,100 20,0' fill='%23fff'/%3E%3C/svg%3E");
}


formlogin.php


<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<link rel="stylesheet" type="text/css" href="stylelogin.css">
    
</head>
<body class="bg-transparent">
<br/>
<br/>
<center>
  <h2>Hanina Fashion</h2></center>
<br/>
<div class="login">
<br/>
<form action="login.php" method="post" onSubmit="return validasi()" >
<div>
<label>Username:</label>
<input type="text" name="txtusername" id="txtusername"  />
</div>
<div>
<label>Password:</label>
<input type="password" name="txtpassword" id="txtpassword" />
</div>
<div>
<input type="submit" value="Login" class="tombol">
</div>
</form>
</div>
</body>

<script type="text/javascript">
function validasi() {
var username = document.getElementById("txtusername").value;
var password = document.getElementById("txtpassword").value;
if (username != "" && password!="") {
return true;
}else{
alert('Username dan Password harus di isi !');
return false;
}
}

</script>
</html>



login.php

<?php 
include "koneksi.php";

$username = $_POST['txtusername'];
$password = $_POST['txtpassword'];

$login = mysqli_query($con,"select * from petugas where username='$username' and password='$password'");
$cek = mysqli_num_rows($login);

if($cek > 0){
session_start();
$_SESSION['username'] = $username;
$_SESSION['status'] = "login";
header("location:halamanadmin\index.html");
}else{
echo "<center><strong>Login Gagal!!</strong></center>";
echo "<meta http-equiv='refresh' content='0;url=formlogin.php'>";
}

?>



koneksi.php


<?php

$host="localhost"; //TEMPAT SERVER BERADA
$user="root"; //NAMA USER UNTUK MASUK KE APLIKASI SERVER
$pass=""; //PASSWORD UNTUK MASUK KE APLIKASI SERVER
$dbase="hanina_fashion"; //NAMA DATABASE YANG DIPILIH

$con=mysqli_connect($host,$user,$pass,$dbase)or die("GAGAL TERKONEKSI KE SERVER!!!");

?>



stylelogin.php


@charset "utf-8";
/* CSS Document */

body {
  width:100%;
  background-image: url(img/pashmina.jpg);
  background-size: strenght;
  font-family: sans-serif;
}

h2 {
  color:#000;
}

.login {
  padding: 1em;
  margin: 2em auto;
  width: 17em;
  background:white;
  border-radius:10px;
}

label {
font-size: 10pt;
color: #666;
font-weight: bold;
}

input[type="text"],
input[type="password"],
textarea {
  padding: 8px;
  width: 95%;
  background: #efefef;
  border: 1;
  font-size: 10pt;
  margin: 6px 0px;
}

.tombol {
  background: #3498db;
  color: #fff;
  border: 1;
  padding: 5px 8px;
  margin: 20px 0px;
  
}
.tombol:hover{
background-color:#9C0;
}
input[type="submit"]{
border-radius:5px;
}

Komentar

Posting Komentar

Postingan populer dari blog ini

Membuat Objek 2 Dimensi Grafika Komputer

Gambar
Membuat Objek 2 Dimensi Grafika Komputer  Assalamualaikum Warahmatullahi Wabarakatuh.... Kali ini mimin mau share ilmu tentang Pemrograman Grafik,  sebelum ke pembahasan mimin mau menampilkan hasil mimin belajar pemrograman grafik. Grafika Komputer     Pengertian grafika komputer Grafika komputer adalah bagian dari ilmu komputer yang berkaitan dengan pembuatan dan manipulasi gambar (visual) secara digital. Bentuk sederhana dari grafika komputer adalah grafika komputer 2D yang kemudian berkembang menjadi grafika komputer 3D, pemrosesan citra (image processing), dan pengenalan pola (pattern recognition). Grafika komputer sering dikenal juga dengan istilah visualisasi data.Istilah grafika komputer ditemukan sekitar tahun 1960 oleh William Fetter.   Pengertian Open GL open gl : suatu spefikasi grafik yang low level yang menyediakan fungsi untuk mempermudah pekerjaan/ untuk keperluan-keperluan pemrograman grafis (Graphics programming /g...
Baca selengkapnya

Sejarah Tasikmalaya

Gambar
Sejarah berdirinya Kota Tasikmalaya sebagai daerah otonomi tidak terlepas dari sejarah berdirinya  Kabupaten Tasikmalaya  sebagai daerah kabupaten induknya. Sebelumnya, kota ini merupakan ibukota dari Kabupaten Tasikmalaya, kemudian meningkat statusnya menjadi  Kota Administratif  tahun 1976, pada waktu A. Bunyamin menjabat sebagai Bupati Tasikmalaya, dan kemudian menjadi pemerintahan kota yang mandiri pada masa Pemerintahan Kabupaten Tasikmalaya dipimpin oleh bupatinya saat itu H. Suljana W.H. Sang Mutiara dari Priangan Timur itulah julukan bagi kota Tasikmalaya. Kota Tasikmalaya adalah salah satu kota di Provinsi Jawa Barat. Kota ini terletak pada 108° 08′ 38″ – 108° 24′ 02″ BT dan 7° 10′ – 7° 26′ 32″ LS di bagian Tenggara wilayah Provinsi Jawa Barat. Kota ini dahulu adalah sebuah kabupaten, namun seiring dengan perkembangan, maka terbentuklah 2 buah bentuk pemerintahan yaitu Pemerintahan Kabupaten dan Pemerintahan Kota Tasikmalaya. Tonggak sejarah lahi...
Baca selengkapnya