Scribd
Upload
51 views5 pages

Mockup Portofolio

This document contains a mockup portfolio created by Gusti Ahmad Hafi. It includes the CSS code that defines the page layout and styles, divided into sections for media queries, general styles, and grid column widths. It also includes the HTML code for the portfolio page, with the logo, title, header image, featured work section with three project images and titles. The output of this code would be a single page portfolio website with the defined content and layout.

Uploaded by

GUSTI AHMAD HAFI A1317025
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
51 views5 pages

Mockup Portofolio

This document contains a mockup portfolio created by Gusti Ahmad Hafi. It includes the CSS code that defines the page layout and styles, divided into sections for media queries, general styles, and grid column widths. It also includes the HTML code for the portfolio page, with the logo, title, header image, featured work section with three project images and titles. The output of this code would be a single page portfolio website with the defined content and layout.

Uploaded by

GUSTI AHMAD HAFI A1317025
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

PEMROGRAMAN WEB 1

MOCKUP PORTOFOLIO

Oleh :

Gusti Ahmad Hafi

A1317025

PROGRAM STUDI TEKNIK INFORMATIKA


POLITEKNIK NEGERI TANAH LAUT
PELAIHARI
2018
A. CSS

@media only screen and (max-width: 500px) {


p{
display: none;
}
}

body {
font-family: 'Lato', sans-serif;
text-align: center;
}

*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

.grid {
margin: 0 auto;
max-width: 1200px;
width: 100%;
}

.row {
width: 100%;
margin-bottom: 0px;
display: flex;
}

.kolom1 {
width: 8.33%;
}

.kolom2 {
width: 16.66%;
}

.kolom3 {
width: 25%;
}

.kolom4 {
width: 33.33%;
}

.kolom5 {
width: 41.66%;
}

.kolom6 {
width: 50%;
}

.kolom7 {
width: 58.33%;
}

.kolom8 {
width: 66.66%;
}

.kolom9 {
width: 75%;
}

.kolom10 {
width: 83.33%;
}

.kolom11 {
width: 91.66%;
}

.kolom12 {
width: 100%;
}

B. HTML

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<form>
<div class="row">

<div class="kolom6">
<img src="logo u.png" width="120px"
height="120px">
</div>

<div class="kolom4">
<h1 style="color: #747704; text-align: right;">JANE
DOETTE</h1>
<h4 style="color: #747704; text-align:
right;">Front-end Ninja</h4>
<div class="kolom4"></div>
</div>

</div>
<hr width="75%" style="color: #BCBBBB;">
<div class="kolom12">
<img style="width: 960px; height: 350px;" src="1.png">
</div>
<div class="row">
<div class="kolom4">
<h2 style="color: #BCBBBB;">Featured Work</h2>
</div>
</div>
<div class="row">
<div class="kolom4">
<img src="2.png">
<h3 style="color: #747704;">APPIFY</h3>
</div>
<div class="kolom4">
<img src="3.png">
<h3 style="color:
#747704;">SUNFLOWER</h3>
</div>
<div class="kolom4">
<img src="4.png">
<h3 style="color:
#747704;">BOKEH</h3>
</div>
</div>
</form>

</body>
</html>
C. Hasil/Output

You might also like