Nëse i keni ndjekur hapat me rradhë atëherë keni përfunduar me ndërtimin e një uebfaqeje dhe mund të bëni ndryshimet e dëshiruara. Tani duhet që të gjitha informatat ti ndryshoni për ta përshtatur me temën tuaj. Gjithashtu ndryshoni sa më tepër dizajnet dhe kodet që të mund të mësoni më mirë elementet e HTML-së dhe dizajnet e CSS-së.
Por në qoftë se keni dëshirë atëherë mund të kopjoni kodin e mëposhtëm. Të gjitha faqet i kemi shënuar në verzionin e tyre final dhe mund ti kopjoni ato. Pastaj, përsëri ju sugjeroj që të bëni ndryshimet e dëshiruara.
styling.css
* {
font-family: "Times New Roman", Times, serif;
}
#header {
text-align: right;
}
#mylogo {
width: 100px;
height: 100px;
float: left;
padding-left: 25px;
padding-top: 25px;
}
#nav {
background-color: #247BA0;
height: 50px;
margin: 0;
}
#mybg {
background-image: url("bg.jpg");
}
#mybg2 {
background-image: url("bg2.jpg");
}
#mybg3 {
background-image: url("bg3.jpg");
}
#mybg4 {
background-image: url("bg4.jpg");
}
.bg {
background-size: cover;
height: 490px;
}
ul {
float: right;
background-color: #247BA0;
list-style-type: none;
margin: 0;
padding: 0;
}
li {
float: left;
}
li a {
display: block;
color: #5ADBFF;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #5ADBFF;
height: 22px;
color: #247BA0;
}
li a.active {
color: white;
background-color: #094074;
height: 22px;
}
#content {
margin-bottom: 300px;
text-align: center;
padding: 20px;
}
#footer {
background-color: #5ADBFF;
padding: 0.5em;
text-align: center;
}
table {
border-collapse: collapse;
width: 100%;
}
caption {
caption-side: bottom;
}
th, td {
text-align: center;
padding: 8px;
}
tr:nth-child(even){
background-color: #5ADBFF
}
tr:nth-child(odd){
background-color: #247BA0
}
th {
background-color: #094074;
color: white;
}
div.img {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
div.img:hover {
border: 1px solid #777;
}
div.img img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
input, select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
background-color: #247BA0;
color: white;
}
input:focus {
background-color: white;
color: black;
}
#myform {
border-radius: 5px;
background-color: #5ADBFF;
padding: 20px;
}
#mybutton{
background-color: #094074;
font-weight: bold;
font-size: 1.5em;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="styling.css">
<title>Kursi TechUP</title>
</head>
<body>
<div id="header">
<div>
<img src="logo.png" id="mylogo">
</div>
<div id="nav">
<ul>
<li><a href="index.html" class="active">Ballina</a></li>
<li><a href="gallery.html">Galeria</a></li>
<li><a href="about.html">Rreth nesh</a></li>
<li><a href="contact.html">Kontakt</a></li>
</ul>
</div>
<div id="mybg" class="bg">
</div>
</div>
<div id="content">
<h1>Tungjatjeta, unë jam pjesë e kursit TechUP</h1>
<p>
Këtë uebfaqe e kemi krijuar për të zhvilluar më tepër fushën e Informatikës në vendin tonë.
</p>
</div>
<div id="footer">
<p>© Copyright TechUP Macedonia</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="styling.css">
<title>Kursi TechUP</title>
</head>
<body>
<div id="header">
<div>
<img src="logo.png" id="mylogo">
</div>
<div id="nav">
<ul>
<li><a href="index.html">Ballina</a></li>
<li><a href="gallery.html" class="active">Galeria</a></li>
<li><a href="about.html">Rreth nesh</a></li>
<li><a href="contact.html">Kontakt</a></li>
</ul>
</div>
<div id="mybg2" class="bg">
</div>
</div>
<div id="content">
<h1>Galeria</h1>
<p>
Këtu do vendosim fotografitë tona që do i shfaqim për të tjerët.
</p>
<div class="img">
<img src="foto1.jpg" alt="Foto1">
<div class="desc">Sqarimi i fotos</div>
</div>
<div class="img">
<img src="foto2.jpg" alt="Foto2">
<div class="desc">Sqarimi i fotos</div>
</div>
<div class="img">
<img src="foto3.jpg" alt="Foto3">
<div class="desc">Sqarimi i fotos</div>
</div>
<div class="img">
<img src="foto4.jpg" alt="Foto4">
<div class="desc">Sqarimi i fotos</div>
</div>
</div>
<div id="footer">
<p>© Copyright TechUP Macedonia</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="styling.css">
<title>Kursi TechUP</title>
</head>
<body>
<div id="header">
<div>
<img src="logo.png" id="mylogo">
</div>
<div id="nav">
<ul>
<li><a href="index.html">Ballina</a></li>
<li><a href="gallery.html">Galeria</a></li>
<li><a href="about.html" class="active">Rreth nesh</a></li>
<li><a href="contact.html">Kontakt</a></li>
</ul>
</div>
<div id="mybg3" class="bg">
</div>
</div>
<div id="content">
<h1>Rreth nesh</h1>
<p>
Këtu do të shkruani rreth jush ndonjë informatë që dëshironi të lexohet nga të tjerët.
</p>
<table>
<caption>This is our contact information</caption>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Short Bio</th>
<th>Image</th>
</tr>
<tr>
<td>Arlind</td>
<td>Musliu</td>
<td>Bachelor of Business Informatics at the SEE University in Tetova, 2009-2012.</td>
<td><img src="fotojaime.jpg" width="150" height="150"></td> </tr>
</table>
</div>
<div id="footer">
<p>© Copyright TechUP Macedonia</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="styling.css">
<title>Kursi TechUP</title>
</head>
<body>
<div id="header">
<div>
<img src="logo.png" id="mylogo">
</div>
<div id="nav">
<ul>
<li><a href="index.html">Ballina</a></li>
<li><a href="gallery.html">Galeria</a></li>
<li><a href="about.html"gt;Rreth nesh</a></li>
<li><a href="contact.html" class="active"&>Kontakt</a></li>
</ul>
</div>
<div id="mybg3" class="bg">
</div>
</div>
<div id="content">
<h1>Kontakt</h1>
<p>
Këtu shënoni informatat e juaja për kontakt që vizituesit e faqes të mund të ju kontaktojnë juve.
</p>
<div id="myform">
<form>
<label for="fname">Emri</label>
<input type="text" id="fname" name="fname">
<label for="school">Në cilën shkollë mësoni</label>
<select id="school" name="school">
<option value="gjimnaz">Gjimnaz</option>
<option value="ekonomike">Ekonomike</option>
<option value="mjeksi">Mjeksi</option>
<option value="industriale">Industriale</option>
</select>
<input id="mybutton" type="submit" value="Submit">
</form>
</div>
</div>
<div id="footer">
<p>© Copyright TechUP Macedonia</p>
</div>
</body>
</html>
