Source code html toko online

1 years ago

Komentar: 0

Dibaca: 78

Table of Contents Show

Langkah langkah membuat website toko online?
Langkah langkah membuat website dengan HTML?
Langkah Awal Membuat Website dengan PHP?

Membuat Website dengan tampilan elegan sangatlah menarik para pembaca untuk mengunjungi website kalian nah lantas bagaimana membuat website toko online dengan tampilan yang elegen mari simak berikut penjelasannya.

Yang pertama kita buat rangkain tubuhnya, cara cepatnya simpan terlebih dahulu file tersebut lalu masukan tanda seru ‘!’ lalu enter maka akan otomatis membuat rangkain tubuh website.

Cara Membuat Tampilan Awal Webiste Toko Online HTML

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>E Store - eCommerce HTML Template</title>

<meta content="width=device-width, initial-scale=1.0" name="viewport">

<meta content="eCommerce HTML Template Free Download" name="keywords">

<meta content="eCommerce HTML Template Free Download" name="description">

<link href="img/favicon.ico" rel="icon">

<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400|Source+Code+Pro:700,900&display=swap" rel="stylesheet">

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">

<link href="lib/slick/slick.css" rel="stylesheet">

<link href="lib/slick/slick-theme.css" rel="stylesheet">

<link href="css/style.css" rel="stylesheet">

</head>

<body>

<div class="top-bar">

<div class="container-fluid">

<div class="row">

<div class="col-sm-6">

<i class="fa fa-envelope"></i>

</div>

<div class="col-sm-6">

<i class="fa fa-phone-alt"></i>

+012-345-6789

</div>

</div>

</div>

</div>

<div class="nav">

<div class="container-fluid">

<nav class="navbar navbar-expand-md bg-dark navbar-dark">

<a href="#" class="navbar-brand">MENU</a>

<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">

<span class="navbar-toggler-icon"></span>

</button>

<div class="collapse navbar-collapse justify-content-between" id="navbarCollapse">

<div class="navbar-nav mr-auto">

<a href="index.html" class="nav-item nav-link active">Home</a>

<a href="product-list.html" class="nav-item nav-link">Products</a>

<a href="product-detail.html" class="nav-item nav-link">Product Detail</a>

<a href="cart.html" class="nav-item nav-link">Cart</a>

<a href="checkout.html" class="nav-item nav-link">Checkout</a>

<a href="my-account.html" class="nav-item nav-link">My Account</a>

<div class="nav-item dropdown">

<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">More Pages</a>

<div class="dropdown-menu">

<a href="wishlist.html" class="dropdown-item">Wishlist</a>

<a href="login.html" class="dropdown-item">Login & Register</a>

<a href="contact.html" class="dropdown-item">Contact Us</a>

</div>

</div>

</div>

<div class="navbar-nav ml-auto">

<div class="nav-item dropdown">

<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">User Account</a>

<div class="dropdown-menu">

<a href="#" class="dropdown-item">Login</a>

<a href="#" class="dropdown-item">Register</a>

</div>

</div>

</div>

</div>

</nav>

</div>

</div>

<div class="bottom-bar">

<div class="container-fluid">

<div class="row align-items-center">

<div class="col-md-3">

<div class="logo">

<a href="index.html">

<img src="img/logo.png" alt="Logo">

</a>

</div>

</div>

<div class="col-md-6">

<div class="search">

<input type="text" placeholder="Search">

<button><i class="fa fa-search"></i></button>

</div>

</div>

<div class="col-md-3">

<div class="user">

<a href="wishlist.html" class="btn wishlist">

<i class="fa fa-heart"></i>

<span>(0)</span>

</a>

<a href="cart.html" class="btn cart">

<i class="fa fa-shopping-cart"></i>

<span>(0)</span>

</a>

</div>

</div>

</div>

</div>

</div>

<div class="header">

<div class="container-fluid">

<div class="row">

<div class="col-md-3">

<nav class="navbar bg-light">

<ul class="navbar-nav">

<li class="nav-item">

<a class="nav-link" href="#"><i class="fa fa-home"></i>Home</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#"><i class="fa fa-shopping-bag"></i>Best Selling</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#"><i class="fa fa-plus-square"></i>New Arrivals</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#"><i class="fa fa-female"></i>Fashion & Beauty</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#"><i class="fa fa-child"></i>Kids & Babies Clothes</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#"><i class="fa fa-tshirt"></i>Men & Women Clothes</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#"><i class="fa fa-mobile-alt"></i>Gadgets & Accessories</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#"><i class="fa fa-microchip"></i>Electronics & Accessories</a>

</li>

</ul>

</nav>

</div>

<div class="col-md-6">

<div class="header-slider normal-slider">

<div class="header-slider-item">

<img src="img/slider-1.jpg" alt="Slider Image" />

<div class="header-slider-caption">

<p>Some text goes here that describes the image</p>

<a class="btn" href=""><i class="fa fa-shopping-cart"></i>Shop Now</a>

</div>

</div>

<div class="header-slider-item">

<img src="img/slider-2.jpg" alt="Slider Image" />

<div class="header-slider-caption">

<p>Some text goes here that describes the image</p>

<a class="btn" href=""><i class="fa fa-shopping-cart"></i>Shop Now</a>

</div>

</div>

<div class="header-slider-item">

<img src="img/slider-3.jpg" alt="Slider Image" />

<div class="header-slider-caption">

<p>Some text goes here that describes the image</p>

<a class="btn" href=""><i class="fa fa-shopping-cart"></i>Shop Now</a>

</div>

</div>

</div>

</div>

<div class="col-md-3">

<div class="header-img">

<div class="img-item">

<img src="img/category-1.jpg" />

<a class="img-text" href="">

<p>Some text goes here that describes the image</p>

</a>

</div>

<div class="img-item">

<img src="img/category-2.jpg" />

<a class="img-text" href="">

<p>Some text goes here that describes the image</p>

</a>

</div>

</div>

</div>

</div>

</div>

</div>

Nah jika HTML sudah mari kita buat CSSnya

/**********************************/

/********** General CSS ***********/

/**********************************/

body {

color: #353535;

font-family: 'Open Sans', sans-serif;

font-weight: 400;

background: #f3f6ff;

}

a {

color: #FF6F61;

}

a:hover,

a:active,

a:focus {

color: #353535;

outline: none;

text-decoration: none;

}

h2 {

font-family: 'Source Code Pro', monospace;

font-weight: 900;

}

h2 {

font-family: 'Source Code Pro', monospace;

font-weight: 700;

}

@media(min-width: 992px) {

.container-fluid {

padding-right: 60px;

padding-left: 60px;

}

}

/**********************************/

/******** Back to Top CSS *********/

/**********************************/

.back-to-top {

position: fixed;

display: none;

background: #FF6F61;

color: #ffffff;

width: 40px;

height: 40px;

text-align: center;

line-height: 1;

font-size: 16px;

border-radius: 4px;

right: 15px;

bottom: 15px;

transition: background 0.5s;

z-index: 11;

}

.back-to-top i {

padding-top: 12px;

color: #ffffff;

}

/**********************************/

/********* Form Input CSS *********/

/**********************************/

.form-control,

.custom-select {

width: 100%;

height: 35px;

padding: 0 15px;

color: #999999;

border: 1px solid #dddddd;

margin-bottom: 15px

}

.form-control:focus,

.custom-select:focus {

box-shadow: none;

border-color: #FF6F61;

}

.custom-radio,

.custom-checkbox {

margin-bottom: 15px;

}

.custom-radio .custom-control-label::before,

.custom-checkbox .custom-control-label::before {

background: #dddddd;

border-color: #dddddd;

}

.custom-radio .custom-control-input:checked~.custom-control-label::before,

.custom-checkbox .custom-control-input:checked~.custom-control-label::before {

color: #ffffff;

background: #FF6F61;

border-color: #FF6F61;

box-shadow: none;

}

.btn {

color: #FF6F61;

background: #ffffff;

border: 1px solid #FF6F61;

}

.btn:hover,

.btn:active,

.btn:focus {

color: #ffffff;

background: #FF6F61;

box-shadow: none;

}

/**********************************/

/******* Normal Slider CSS ********/

/**********************************/

.normal-slider .slick-prev,

.normal-slider .slick-next {

width: 40px;

height: 40px;

z-index: 1;

opacity: 0;

transition: .5s;

background: rgba(255, 111, 97, .7);

border-radius: 4px;

}

.normal-slider .slick-prev {

left: 55px;

}

.normal-slider .slick-next {

right: 55px;

}

.normal-slider.slick-slider:hover .slick-prev {

left: 15px;

opacity: 1;

}

.normal-slider.slick-slider:hover .slick-next {

right: 15px;

opacity: 1;

}

.normal-slider .slick-prev:hover,

.normal-slider .slick-prev:focus,

.normal-slider .slick-next:hover,

.normal-slider .slick-next:focus {

background: rgba(0, 0, 0, .7);

}

.normal-slider .slick-prev:hover::before,

.normal-slider .slick-prev:focus::before,

.normal-slider .slick-next:hover::before,

.normal-slider .slick-next:focus::before {

color: #FF6F61;

}

.normal-slider .slick-prev::before,

.normal-slider .slick-next::before {

font-family: "Font Awesome 5 Free";

font-weight: 900;

font-size: 30px;

color: #ffffff;

}

.normal-slider .slick-prev::before {

content: "\f104";

}

.normal-slider .slick-next::before {

content: "\f105";

}

.normal-slider .slick-dots {

bottom: 15px;

}

.normal-slider .slick-dots li button:before {

color: #ffffff;

font-size: 15px;

}

.normal-slider .slick-dots li.slick-active button:before {

color: #FF6F61;

}

.slick-dotted.slick-slider {

margin-bottom: 0;

}

/**********************************/

/********** Top Bar CSS ***********/

/**********************************/

.top-bar {

padding: 3px 0;

font-size: 14px;

color: #FF6F61;

background: #000000;

}

.top-bar i {

margin-right: 5px;

}

.top-bar .col-sm-6:first-child {

text-align: left;

}

.top-bar .col-sm-6:last-child {

text-align: right;

}

@media (max-width: 575.98px) {

.top-bar {

border-bottom: 1px solid rgba(255,255,255,.1);

}

.top-bar .col-sm-6:first-child,

.top-bar .col-sm-6:last-child {

text-align: center;

}

}

/**********************************/

/*********** Nav Bar CSS **********/

/**********************************/

.nav {

position: relative;

}

@media (min-width: 992px) {

.nav .container-fluid {

padding-left: 52px;

padding-right: 52px;

}

}

.nav .navbar {

height: 100%;

padding: 0;

}

.nav .dropdown-menu {

margin-top: 0;

border: 0;

border-radius: 0;

background: #FF6F61;

}

.nav .dropdown-menu a.active {

color: #353535;

background: #f8f9fa;

}

@media (min-width: 768px) {

.nav,

.nav .navbar {

background: #FF6F61 !important;

}

.nav .navbar-brand {

display: none;

}

.nav .navbar-dark a.nav-link {

color: #ffffff;

font-size: 14px;

text-transform: uppercase;

}

.nav .navbar-dark a.nav-link:hover,

.nav .navbar-dark a.nav-link.active {

color: #000000;

}

}

@media (max-width: 768px) {

.nav {

padding: 5px 0;

}

.nav,

.nav .navbar {

background: #000000 !important;

}

.nav a.nav-link {

padding: 5px 0;

}

.nav .dropdown-menu {

box-shadow: none;

}

}

/**********************************/

/********* Bottom Bar CSS *********/

/**********************************/

.bottom-bar {

padding: 15px 0;

background: #ffffff;

margin-bottom: 30px;

}

.bottom-bar .logo {

text-align: left;

overflow: hidden;

}

.bottom-bar .logo a img {

max-height: 60px;

}

.bottom-bar .search {

width: 100%;

}

.bottom-bar .search input[type=text] {

width: 100%;

height: 40px;

padding: 0 15px;

color: #666666;

border: 1px solid #FF6F61;

border-radius: 4px;

}

.bottom-bar .search button {

position: absolute;

width: 40px;

height: 38px;

top: 1px;

right: 16px;

padding: 0 15px;

border: none;

background: none;

color: #FF6F61;

border-radius: 0 2px 2px 0;

}

.bottom-bar .search button:hover {

background: #FF6F61;

color: #ffffff;

}

.bottom-bar .user {

font-size: 0;

text-align: right;

}

.bottom-bar .user .wishlist {

margin-right: 15px;

}

.bottom-bar .user .cart i,

.bottom-bar .user .wishlist i {

color: #FF6F61;

}

.bottom-bar .user .cart span,

.bottom-bar .user .wishlist span {

color: #FF6F61;

font-size: 15px;

}

.bottom-bar .user .cart:hover i,

.bottom-bar .user .wishlist:hover i,

.bottom-bar .user .cart:hover span,

.bottom-bar .user .wishlist:hover span {

color: #ffffff;

}

@media (min-width: 768px) {

.bottom-bar {

max-height: 90px;

}

}

@media (max-width: 767.98px) {

.bottom-bar .logo,

.bottom-bar .search,

.bottom-bar .user {

text-align: center;

margin-bottom: 15px;

}

.bottom-bar .user {

margin-bottom: 0;

}

}

Langkah langkah membuat website toko online?

Cara Membuat Website Toko Online Sendiri dengan Mudah [2022].

Beli nama domain dan web hosting..

Install WordPress..

Instal plugin toko online (WooCommerce).

Sempurnakan website toko online Anda..

Mulai masukkan produk..

Promosikan web toko online Anda dan mulai jualan..

Langkah langkah membuat website dengan HTML?

Cara Membuat Halaman Web Sederhana dengan HTML.

Buka editor teks. ... .

Atur jenis dokumen untuk HTML. ... .

Tambahkan tab judul untuk halaman web kamu. ... .

Ketik di bawah tag "Head" yang tertutup. ... .

Selanjutnya membuat judul halaman. ... .

Tambahkan judul tambahan jika kamu mau. ... .

Membuat paragraf. ... .

Mengubah warna teks..

Langkah Awal Membuat Website dengan PHP?

Nah, cara membuat website dengan PHP dari awal bisa dilakukan dengan langkah berikut:.

Mempersiapkan software yang digunakan..

Membuat file index. php..

Membuat file style.css..

Membuat file home.php..

Membuat file about. php..

Membuat file contact.php..

Mencoba website di browser..