Para crear una galería de portafolios solo necesitaremos HTML y CSS. También podemos usar JavaScript, pero en este artículo se establecen límites, por lo que solo usaremos HTML y CSS. Divida todo el artículo en dos secciones diferentes en la primera sección, crearemos la estructura para la galería del portafolio y en la segunda sección, nos aseguraremos de que la galería se vea atractiva. La galería de cartera es útil cuando su sitio web contiene diferentes tipos de contenido o demasiado contenido. Con la ayuda de una galería de cartera, puede mostrar fácilmente todos los contenidos en su página principal al usuario.
Creación de la estructura: en esta sección, crearemos la estructura básica del sitio web del portafolio. Aquí, adjuntaremos el atributo de título para que el usuario pueda saber cuál será el tipo de contenido en cada cuadrícula del portafolio.
- Código HTML: En esta sección, diseñaremos la estructura básica de la Galería de Portafolio.
HTML
<!DOCTYPE html> <html> <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>GeeksforGeeks</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>
Estructura de diseño: en la sección anterior, creamos la estructura del sitio web básico y ahora vamos a usar CSS para diseñar la estructura de la página web.
- Código CSS:
CSS
<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>
Combinación del código HTML y CSS: combinación de código de sección HTML y CSS para crear una galería de cartera completa.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Create a Portfolio Gallery
using HTML and CSS
</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<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>
<body>
<!-- title and tag -->
<div class="container">
<h1>GeeksforGeeks</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>
Producción:
Navegador compatible:
- Google Chrome
- Borde de Microsoft
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por Sabya_Samadder y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA