How to create a Portfolio Gallery using HTML and CSS ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>create a port folio gallery</title>
<link rel="stylesheet" href="style.Css"> == use this if make seperate css cheet
<style>
body {
padding: 15px;
}
.container {
max-width: 1200px;
margin: auto;
}
h1 {
color: green;
}
a {
text-decoration: none;
color: #5673C8;
}
a:hover {
color: lightblue;
}
p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
}
.row {
margin: 0px -18px;
padding: 8px;
}
.row> .column {
padding: 6px;
}
.column {
float: left;
width: 23%;
}
,row:after {
content: "";
display: table;
clear: both;
}
.content {
background-color: white;
padding: 10px;
border: 1px solid grey;
}
@media screen and (max-width: 850px) {
.column {
width: 50%;
}
}
@media screen and (max-width: 400px) {
.column {
width: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<h1>Create port folio</h1>
<h3>simple portfolio</h3><hr>
<h2>port folio</h2>
<div class="row">
<div class="column">
<div class="content">
<img src="html.png" alt="" style="width:100%">
<h3><a href="#">HTML Tutorial</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="css.png" alt="" style="width:100%">
<h3><a href="#">CSS Tutorial</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="php1.png" alt="" style="width:100%">
<h3><a href="#">PHP Tutorial</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="js1.png" aria-multiline="" style="width:100%">
<h3><a href="#">JAVASCRIPT Tutorial</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>
Comments
Post a Comment