Tugas Pertemuan 3 Pweb
Blog Membuat Web Pembelajaran Pemrograman Web
Nama : Muhammad Ahyun Irsyada
Kelas : Pweb - A
NRP : 5025211251
Tahun : 2023
Membuat Portofolio
Tugas untuk membuat portofolio menggunakan CSS dan HTML Berikut adalah bukti dari hasil yang saya kerjakan :
Berikut adalah source code nya :
<!DOCTYPE html>
<html>
<style>
/* wildcard styling */
* {
box-sizing: border-box;
}
/* padding for whole body */
body {
padding: 15px;
}
/* styling body */
.container {
max-width: 1200px;
margin: auto;
}
h1 {
color: green;
}
/* anchor tag decoration */
a {
text-decoration: none;
color: #5673C8;
}
a:hover {
color: lightblue;
}
/* paragraph tag decoration */
p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
}
/* row and column decoration */
.row {
margin: 0px -18px;
padding: 8px;
}
.row > .column {
padding: 6px;
}
.column {
float: left;
width: 25%;
}
.row:after {
content: "";
display: table;
clear: both;
}
/* content decoration */
.content {
background-color: white;
padding: 10px;
border: 1px solid gray;
}
/* window size 850 width set */
@media screen and (max-width: 850px) {
.column {
width: 50%;
}
}
/* window size 400 width set */
@media screen and (max-width: 400px) {
.column {
width: 100%;
}
}
</style>
<head>
<title>
Create a Portfolio Gallery
using HTML and CSS
</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
</head>
<body>
<!-- title and tag -->
<div class="container">
<h1>GeeksforGeeksz</h1>
<h3>A Computer Science Portal for Geeks</h3>
<hr>
<!-- Content of the body-->
<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 name to
JavaScript. JavaScript is the muscle
of the structure
</p>
</div>
</div>
</div>
</div>
</body>
</html>
Komentar
Posting Komentar