Tugas Pertemuan 5 PWEB

-

Nama  : Moh. Rizky Rahmadian Makkani

NRP    : 5025231035

Kelas : PWEB E

Tugas Pertemuan 4 : PWEB



HTML :

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <meta charset="UTF-8">
    <meta name="author" content="Rizky Rahmadian">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inna Snack</title>
</head>
<body>
    <div class="navigation">
        <nav>
            <h1>Inna Snack</h1>
            <ul>
                <li>
                    <a href="#home"><b>Home</b></a>
                </li>
                <li>
                    <a href="#about"><b>About</b></a>
                </li>
                <li>
                    <a href="#product"><b>Product</b></a>
                </li>
                <li>
                    <a href="#gallery"><b>Gallery</b></a>
                </li>
                <li>
                    <a href="#contact"><b>Contact</b></a>
                </li>
            </ul>
        </nav>
    </div>
    <div class="container">
        <div class="main">
            <div class="content">
                <div class="contentimage">
                    <img src="src\teri crispy.jpg" width="120px">
                </div>
                <div class="contenttext">
                    <h2>Teri Crispy</h2>
                    <p>Teri crispy adalah camilan menyehatkan juga bisa dijadikan sebagai lauk. Diolah dari teri segar yang langsung diproses sehingga dijamin tanpa mengandung formalin. Kandungan dalam teri nasi yang kaya protein dan omega 3 sangat baik dijadikan camilan anak dalam masa pertumbuhan.</p>
                </div>
            </div>
            <div class="content">
                <div class="contentimage">
                    <img src="src\balado teri.jpg" width="120px">
                </div>
                <div class="contenttext">
                    <h2>Balado Teri Nasi</h2>
                    <p>Balado teri nasi merupakan salah satu olahan ikan laut dari perairan madura. Camilan yang kaya protein dan omega 3. Diolah dengan bumbu cabe asli , gula aren dengan minyak goreng yg berkualitas tanpa menggunakan bahan pengawet.sehingga sangat aman dikonsumsi oleh anak anak maupun dewasa.</p>    
                </div>
            </div>
            <div class="content">
                <div class="contentimage">
                    <img src="src\teri crispy.jpg" width="120px">
                </div>
                <div class="contenttext">
                    <h2>Teri Crispy</h2>
                    <p>Teri crispy adalah camilan menyehatkan juga bisa dijadikan sebagai lauk. Diolah dari teri segar yang langsung diproses sehingga dijamin tanpa mengandung formalin. Kandungan dalam teri nasi yang kaya protein dan omega 3 sangat baik dijadikan camilan anak dalam masa pertumbuhan.</p>
                </div>
            </div>
            <div class="content">
                <div class="contentimage">
                    <img src="src\balado teri.jpg" width="120px">
                </div>
                <div class="contenttext">
                    <h2>Balado Teri Nasi</h2>
                    <p>Balado teri nasi merupakan salah satu olahan ikan laut dari perairan madura. Camilan yang kaya protein dan omega 3. Diolah dengan bumbu cabe asli , gula aren dengan minyak goreng yg berkualitas tanpa menggunakan bahan pengawet.sehingga sangat aman dikonsumsi oleh anak anak maupun dewasa.</p>    
                </div>
            </div>
        </div>
        <div class="sidemenu">
            <div class="sidebar">
            <h2>Populer Product</h2>
            <ul>
                <li><a href="#"><b>Teri Crispy</b></a></li>
                <li><a href="#"><b>Teri Nasi</b></a></li>
                <li><a href="#"><b>Balado Teri Kacang</b></a></li>
                <li><a href="#"><b>Balado Kalapan</b></a></li>
            </ul>
            </div>
            <div class="contacts">
                <h2>Contact Us</h2>
                <ul>
                    <li>WA : <a href="#">wa.me/628123456789</a></li>
                    <li>Instagram :<a href="#">@abcde</a></li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

CSS:

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #E8DDBF;
    margin: 0;
    height: 100%;
    justify-content: center; /* Centers horizontally */
    align-items: center;    /* Centers vertically */
}

nav {
    display: flex;
    justify-content: space-evenly;
    background-color: #412F21;
    padding: 10px;
    font-family: sans-serif;
    align-items: center;
    opacity: 60%;
}

nav h1{
    margin-right: 20%;
    color: #e0dbd8;
}
nav ul {
    display: flex;
    justify-content: space-between;
    list-style: none;
    margin-left: 25%;
    margin-right: 10%;
}
 
nav li {
    margin-left: 30px;
}

nav a {
    text-decoration: none;
    color: #e0dbd8;
}
 
nav a:hover,
td a:hover{
    text-decoration: none;
    color:#E8DDBF;
    border-bottom: 2px solid white;
}

.container {
    display: flex;
}

.main{
  height: 100vh;
  width: 60%;
  text-align: center;
  display: flex;
  /* justify-content: center; */
  align-items: center;
  flex-direction: column;
  background-color: aliceblue;
  margin-left: 200px;
  border-right: 2px solid black;
}

.sidemenu {
  height: 100vh;
  width: 20%;
  text-align: center;
  display: flex;
  /* justify-content: center; */
  align-items: center;
  flex-direction: column;

}

.content{
    text-align: left;
    align-items: center;
    margin-left: 5%;
    margin-top: 5%;
    display:flex
}

.contenttext {
    margin-left: 20px;
    margin-right: 100px;
    /* border: 2px solid black; */
}

.sidebar, .contacts {
    justify-content: space-between;
    list-style: none;
    margin-top: 10%;
    margin-left: 15%;
    margin-bottom: 15%;
    /* border: 2px solid black; */
}
.sidebar ul {
    list-style: none;
}

.sidebar li,
.sidebar a, .contacts a {
    /* border: 1px solid black; */
    font-size: 17px;
    margin: 10px;
    text-decoration: none;
    color: #513423;
}

.sidebar a:hover, .contacts a:hover{
    border-bottom: 2px solid rgba(129, 41, 41, 0.804);
}

.contacts li{
    list-style: none;
    text-align: center;
    margin: 10px;
    font-weight: bold;
}

Komentar

Posting Komentar

Postingan populer dari blog ini

Tugas 2 PBO : Konsep OOP

-
Gambar
 Nama : Moh. Rizky Rahmadian Makkani NRP : 5025231035 Kelas : PBO A Tugas Pertemuan 2 : Konsep OOP 1. Apa itu C lass?      Class adalah konsep dasar dalam pemrograman berbasis objek (OOP) yang berfungsi sebagai cetak biru atau blueprint untuk menciptakan objek, membuat pemrograman menjadi lebih terstruktur dan efisien.      Analoginya, class seperti gambar desain yang digunakan oleh seorang arsitek untuk membangun sebuah rumah. Gambar arsitektur tersebut mendefinisikan struktur, tata letak, dan bentuk rumah yang akan dibangun. Secara serupa, class dalam pemrograman mendefinisikan struktur dan perilaku dari object yang akan diciptakan. 2. Apa itu Object?      Yang dimaksud dengan objek pada java adalah sekumpulan software yang terdiri dari variable dan method-method yang terkait. Objek juga merupakan benda nyata yang di buat berdasarkan rancangan yang di definisikan di dalam class      Object adalah instance dari class. Jik...
Baca selengkapnya

Tugas Pertemuan 14 PBO

-
Gambar
Nama    : Moh. Rizky Rahmadian Makkani NRP     : 5025231035 Kelas : PBO A Tugas Pertemuan 14 : PBO 1. Membuat frame windows user login dan password. Code LoginWindow.java : import javax.swing.*; import java.awt.*; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; public class LoginWindow { public static void main (String[] args) { // Membuat frame JFrame frame = new JFrame( "Login" ); frame.setSize( 300 , 150 ); frame.setDefaultCloseOperation(JFrame. EXIT_ON_CLOSE ); frame.setLayout( new GridLayout( 3 , 2 , 5 , 5 )); // Komponen GUI JLabel usernameLabel = new JLabel( "Username:" ); JTextField usernameField = new JTextField(); JLabel passwordLabel = new JLabel( "Password:" ); JPasswordField passwordField = new JPasswordField(); JButton loginButton = new JButton( "Login" ); JButton cancelButton = new JButton( "Cancel"...
Baca selengkapnya

Tugas Pertemuan 10 PBO

-
Gambar
  Nama    : Moh. Rizky Rahmadian Makkani NRP     : 5025231035 Kelas : PBO A Tugas Pertemuan 10 : PBO Code SalesItem.java : import java.util.ArrayList; import java.util.Iterator; public class SalesItem { private String name ; private int price ; // in cents private ArrayList<Comment> comments ; public SalesItem (String name, int price) { this . name = name; this . price = price; comments = new ArrayList<Comment>(); } public String getName () { return name ; } public int getPrice () { return price ; } public int getNumberOfComments () { return comments .size(); } public boolean addComment (String author, String text, int rating) { if (ratingInvalid(rating)) { // reject invalid ratings return false ; } if (findCommentByAuthor(author) != null ) { return false ; } comments .add(...
Baca selengkapnya