[PWEB-3.2] Portfolio Gallery

Pada pertemuan ketiga mata kuliah Pemrograman Web, kami juga mendapat tugas untuk membuat portfolio gallery menggunakan HTML dan CSS. Berikut adalah code yang digunakan beserta outputnya.


Repository: GitHub


HTML code:

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <title>
  6.         Create a Portfolio Gallery
  7.         using HTML and CSS
  8.     </title>
  9.  
  10.     <meta name="viewport"
  11.           content="width=device-width, initial-scale=1">
  12.  
  13.     <link rel="stylesheet" href="style.css">
  14. </head>
  15.  
  16. <body>
  17.  
  18. <!-- title and tag -->
  19. <div class="container">
  20.     <h1>GeeksforGeeks</h1>
  21.     <h3>A Computer Science Portal for Geeks</h3>
  22.     <hr>
  23.  
  24.     <!-- Content of the body-->
  25.     <h2>Portfolio</h2>
  26.     <div class="row">
  27.         <div class="column">
  28.             <div class="content">
  29.                 <img src=
  30.                              "https://www.geeksforgeeks.org/wp-content/uploads/html.png"
  31.                      alt="" style="width:100%">
  32.                 <h3>
  33.                     <a href="#">HTML Tutorials</a>
  34.                 </h3>
  35.  
  36.  
  37.  
  38.  
  39.                 <p>
  40.                     HTML stands for Hyper Text Markup
  41.                     Language. It is used to design web
  42.                     pages using markup language. HTML
  43.                     is the combination of Hypertext and
  44.                     Markup language. Hypertext defines
  45.                     the link between the web pages.
  46.                 </p>
  47.  
  48.  
  49.  
  50.  
  51.             </div>
  52.         </div>
  53.  
  54.         <div class="column">
  55.             <div class="content">
  56.                 <img src=
  57.                              "https://www.geeksforgeeks.org/wp-content/uploads/CSS.png"
  58.                      alt="" style="width:100%">
  59.                 <h3>
  60.                     <a href="#">CSS Tutorials</a>
  61.                 </h3>
  62.  
  63.  
  64.  
  65.  
  66.  
  67.                 <p>
  68.                     Cascading Style Sheets, fondly referred
  69.                     to as CSS, is a simply designed language
  70.                     intended to simplify the process of
  71.                     making web pages presentable. CSS allows
  72.                     you to apply styles to web pages.
  73.                 </p>
  74.  
  75.  
  76.  
  77.  
  78.             </div>
  79.         </div>
  80.  
  81.         <div class="column">
  82.             <div class="content">
  83.                 <img src=
  84.                              "https://www.geeksforgeeks.org/wp-content/uploads/php-1.png"
  85.                      alt="" style="width:100%">
  86.                 <h3>
  87.                     <a href="#">PHP Tutorials</a>
  88.                 </h3>
  89.  
  90.  
  91.  
  92.  
  93.  
  94.                 <p>
  95.                     The term PHP is an acronym for PHP:
  96.                     Hypertext Preprocessor. PHP is a
  97.                     server-side scripting language
  98.                     designed specifically for web
  99.                     development. PHP can be easily
  100.                     embedded in HTML files.
  101.                 </p>
  102.  
  103.  
  104.  
  105.  
  106.             </div>
  107.         </div>
  108.  
  109.         <div class="column">
  110.             <div class="content">
  111.                 <img src=
  112.                              "https://www.geeksforgeeks.org/wp-content/uploads/javascript.png"
  113.                      alt="" style="width:100%">
  114.                 <h3>
  115.                     <a href="#">JavaScript Tutorials</a>
  116.                 </h3>
  117.  
  118.  
  119.  
  120.  
  121.  
  122.                 <p>
  123.                     Javascript was developed by Brendan
  124.                     Eich in 1995. At first, it was called
  125.                     LiveScript but was later name to
  126.                     JavaScript. JavaScript is the muscle
  127.                     of the structure
  128.                 </p>
  129.  
  130.  
  131.  
  132.  
  133.             </div>
  134.         </div>
  135.     </div>
  136. </div>
  137. </body>
  138.  
  139. </html>


CSS code:

  1. /* wildcard styling */
  2. * {
  3.     box-sizing: border-box;
  4. }
  5.  
  6. /* padding for whole body */
  7. body {
  8.     padding: 15px;
  9. }
  10.  
  11. /* styling body */
  12. .container {
  13.     max-width: 1200px;
  14.     margin: auto;
  15. }
  16.  
  17. h1 {
  18.     color: green;
  19. }
  20.  
  21. /* anchor tag decoration */
  22. a {
  23.     text-decoration: none;
  24.     color: #5673C8;
  25. }
  26.  
  27. a:hover {
  28.     color: lightblue;
  29. }
  30.  
  31. /* paragraph tag decoration */
  32. p {
  33.     display: -webkit-box;
  34.     -webkit-box-orient: vertical;
  35.     -webkit-line-clamp: 4;
  36.     overflow: hidden;
  37.  
  38. }
  39.  
  40. /* row and column decoration */
  41. .row {
  42.     margin: 0px -18px;
  43.     padding: 8px;
  44. }
  45.  
  46. .row > .column {
  47.     padding: 6px;
  48. }
  49.  
  50. .column {
  51.     float: left;
  52.     width: 25%;
  53. }
  54.  
  55. .row:after {
  56.     content: "";
  57.     display: table;
  58.     clear: both;
  59. }
  60.  
  61. /* content decoration */
  62. .content {
  63.     background-color: white;
  64.     padding: 10px;
  65.     border: 1px solid gray;
  66. }
  67.  
  68. /* window size 850 width set */
  69. @media screen and (max-width: 850px) {
  70.     .column {
  71.         width: 50%;
  72.     }
  73. }
  74.  
  75. /* window size 400 width set */
  76. @media screen and (max-width: 400px) {
  77.     .column {
  78.         width: 100%;
  79.     }
  80. }


Output:



Referensi:

https://www.geeksforgeeks.org/how-to-create-a-portfolio-gallery-using-html-and-css/









Komentar

Posting Komentar

Postingan Populer