Tugas Pertemuan 7 PWEB

-

Nama  : Moh. Rizky Rahmadian Makkani

NRP    : 5025231035

Kelas : PWEB E

Tugas Pertemuan 7 : PWEB


index.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>Web Pribadi Moh. Rizky Rahmadian Makkani</title>
</head>
<body>
    <nav>
        <h1>Rizky Rahmadian</h1>
    </nav>

    <!-- Title and Tag -->
    <div class="container">
        <h3>Personal Computer Science Tutorial</h3>
        <hr>
        <br>
        <h2>Portfolio</h2>

        <div class="row">
            <div class="column">
                <div class="content">
                    <img src="https://www.geeksforgeeks.org/wp-content/uploads/html.png"
                         alt="" style="width:100%">
                    <h3><a href="#">HTML Tutorials</a></h3>
                    <p>
                        HTML stands for Hyper Text Markup Language. It is used to design web
                        pages using markup language. HTML is the combination of Hypertext
                        and Markup language. Hypertext defines the link between the web pages.
                    </p>
                </div>
            </div>

            <div class="column">
                <div class="content">
                    <img src="https://www.geeksforgeeks.org/wp-content/uploads/CSS.png"
                         alt="" style="width:100%">
                    <h3><a href="#">CSS Tutorials</a></h3>
                    <p>
                        Cascading Style Sheets, fondly referred to as CSS, is a simply
                        designed language intended to simplify the process of making
                        web pages presentable. CSS allows you to apply styles to web pages.
                    </p>
                </div>
            </div>

            <div class="column">
                <div class="content">
                    <img src="https://www.geeksforgeeks.org/wp-content/uploads/php-1.png"
                         alt="" style="width:100%">
                    <h3><a href="#">PHP Tutorials</a></h3>
                    <p>
                        The term PHP is an acronym for PHP: Hypertext Preprocessor. PHP is a
                        server-side scripting language designed specifically for web development.
                        PHP can be easily embedded in HTML files.
                    </p>
                </div>
            </div>

            <div class="column">
                <div class="content">
                    <img src="https://www.geeksforgeeks.org/wp-content/uploads/javascript.png"
                         alt="" style="width:100%">
                    <h3><a href="#">JavaScript Tutorials</a></h3>
                    <p>
                        JavaScript was developed by Brendan Eich in 1995. At first, it was
                        called LiveScript but was later named JavaScript. JavaScript is
                        the muscle of the structure.
                    </p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

style.css

/* General Reset */
* {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

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

/* Navigation Bar */
nav {
    display: flex;
    justify-content: left;
    background-color: #412F21;
    padding: 10px 30px;
    font-family: sans-serif;
    align-items: center;
    opacity: 70%;
}

nav h1 {
    margin-right: 20%;
    color: white;
}

/* Container */
.container {
    padding-top: 25px;
    max-width: 1200px;
    margin: auto;
}

/* Anchor Tag Decoration */
a {
    text-decoration: none;
    color: #412F21;
}

a:hover {
    color: #b7a883;
}

/* Paragraph Tag Decoration */
p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}

/* Row and Column Decoration */
.row {
    margin: 0 -18px;
    padding: 8px;
}

.row > .column {
    padding: 6px;
}

.column {
    float: left;
    width: 20%;
    position: relative; /* Add position relative */
    transition: all 0.3s ease; /* Smooth transition */
}

.column:hover {
    width: 25%;
    top: -20px; /* Move up on hover */
    box-shadow: 0 14px 8px rgba(0, 128, 0, 0.5); /* Add box shadow on hover */
    border-radius: 15px;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Content Decoration */
.content {
    border-radius: 15px;
    background-color: white;
    padding: 10px;
    border: 1px solid gray;
}

/* Responsive Design */
@media screen and (max-width: 850px) {
    .column {
        width: 40%;
    }
}

@media screen and (max-width: 400px) {
    .column {
        width: 100%;
    }
}

Output :



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