Skip to content

Commit

Permalink
Feat: Added header and footer
Browse files Browse the repository at this point in the history
  • Loading branch information
@carlosfrontend
carlosfrontend committed Mar 2, 2024
1 parent 30ddc38 commit b232aae
Show file tree
Hide file tree
Showing 7 changed files with 45 additions and 14 deletions.
2 changes: 1 addition & 1 deletion dist/index.html
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>Image Slider</title><script defer="defer" src="main.483654f107884c0d38a1.js"></script><link href="main.849dd733527a5301daea.css" rel="stylesheet"></head><body><div class="pictures-frame"><div class="image"><div class="arrows-container"><i id="preview" class="bi bi-caret-left"></i><i id="next" class="bi bi-caret-right"></i></div></div><div class="circles-container"><div tabindex="0" class="circle"></div><div tabindex="1" class="circle"></div><div tabindex="2" class="circle"></div><div tabindex="3" class="circle"></div><div tabindex="4" class="circle"></div></div></div><div class="attributions"><h3 class="credits">Attributions</h3><div>Photo by <a href="https://unsplash.com/es/@aperturevintage?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Aperture Vintage</a> in <a href="https://unsplash.com/es/fotos/ilustracion-de-la-galaxia-de-mercurio-GFKx0wazemc?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a></div><div>Photo by <a href="https://unsplash.com/es/@daniele71043?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Daniele Colucci</a> in <a href="https://unsplash.com/es/fotos/arena-marron-bajo-el-cielo-azul-durante-la-noche-OtXJhYjbKeg?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a></div><div>Photo by <a href="https://unsplash.com/es/@denisdegioanni?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Denis Degioanni</a> in <a href="https://unsplash.com/es/fotos/via-lactea-en-las-montanas-9wH624ALFQA?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a></div><div>Photo by <a href="https://unsplash.com/es/@guanju23?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Ju Guan</a> in <a href="https://unsplash.com/es/fotos/juguete-robot-blanco-y-gris-D-jLxBtEwaA?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a></div><div>Photo by <a href="https://unsplash.com/es/@flousentimental?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Thanh Nguyen</a> in <a href="https://unsplash.com/es/fotos/foto-en-escala-de-grises-de-una-estructura-redonda-de-hormigon-XZj8Z6Elmz4?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a></div></div></body></html>
<!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>Image Slider</title><script defer="defer" src="main.483654f107884c0d38a1.js"></script><link href="main.dd4b5d19364e46006df2.css" rel="stylesheet"></head><body><header><h1 class="title">Image Slider</h1></header><div class="pictures-frame"><div class="image"><div class="arrows-container"><i id="preview" class="bi bi-caret-left"></i><i id="next" class="bi bi-caret-right"></i></div></div><div class="circles-container"><div tabindex="0" class="circle"></div><div tabindex="1" class="circle"></div><div tabindex="2" class="circle"></div><div tabindex="3" class="circle"></div><div tabindex="4" class="circle"></div></div></div><div class="attributions"><h3 class="credits">Attributions</h3><div>Photo by <a href="https://unsplash.com/es/@aperturevintage?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Aperture Vintage</a> in <a href="https://unsplash.com/es/fotos/ilustracion-de-la-galaxia-de-mercurio-GFKx0wazemc?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a></div><div>Photo by <a href="https://unsplash.com/es/@daniele71043?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Daniele Colucci</a> in <a href="https://unsplash.com/es/fotos/arena-marron-bajo-el-cielo-azul-durante-la-noche-OtXJhYjbKeg?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a></div><div>Photo by <a href="https://unsplash.com/es/@denisdegioanni?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Denis Degioanni</a> in <a href="https://unsplash.com/es/fotos/via-lactea-en-las-montanas-9wH624ALFQA?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a></div><div>Photo by <a href="https://unsplash.com/es/@guanju23?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Ju Guan</a> in <a href="https://unsplash.com/es/fotos/juguete-robot-blanco-y-gris-D-jLxBtEwaA?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a></div><div>Photo by <a href="https://unsplash.com/es/@flousentimental?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Thanh Nguyen</a> in <a href="https://unsplash.com/es/fotos/foto-en-escala-de-grises-de-una-estructura-redonda-de-hormigon-XZj8Z6Elmz4?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a></div></div><footer class="footer"><a class="footer-link" target="_blank" href="https://github.com/carlosfrontend"><i class="fa-brands fa-github-alt"></i><small> Coded by Carlosfrontend</small> &copy;</a></footer></body></html>
2 changes: 0 additions & 2 deletions dist/main.849dd733527a5301daea.css
View file

This file was deleted.

1 change: 0 additions & 1 deletion dist/main.849dd733527a5301daea.css.map
View file

This file was deleted.

2 changes: 2 additions & 0 deletions dist/main.dd4b5d19364e46006df2.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions dist/main.dd4b5d19364e46006df2.css.map
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

12 changes: 12 additions & 0 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,9 @@
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<header>
<h1 class="title">Image Slider</h1>
</header>
<div class="pictures-frame">
<div class="image">
<div class="arrows-container">
Expand Down Expand Up @@ -84,5 +87,14 @@ <h3 class="credits">Attributions</h3>
>
</div>
</div>
<footer class="footer">
<a
class="footer-link"
target="_blank"
href="https://github.com/carlosfrontend"
><i class="fa-brands fa-github-alt"></i><small> Coded by Carlosfrontend</small>
&copy;</a
>
</footer>
</body>
</html>
39 changes: 29 additions & 10 deletions src/styles/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,7 @@
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0,0,0,0);

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html,
body {
Expand All @@ -15,18 +14,19 @@ body {
justify-content: space-evenly;
align-items: center;
}


.attributions{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
.title{
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.attributions {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.credits{
.credits {
text-align: center;
}

.attributions > *:not(.credits){
margin: .8em 0;
.attributions > *:not(.credits) {
margin: 0.8em 0;
}

.pictures-frame,
Expand Down Expand Up @@ -71,7 +71,7 @@ body {
border-radius: 50%;
cursor: pointer;
}
.circle:focus{
.circle:focus {
background-color: #ffffff;
outline: none;
}
Expand Down Expand Up @@ -113,3 +113,22 @@ body {
border-radius: 50%;
}
}

footer {
display: grid;
align-content: center;
justify-content: center;
text-align: center;
text-decoration: none;
}

footer > a {
color: #000000;
font-size: 1.8em;
text-decoration: none;
font-family: monospace;
}

footer a:hover {
color: dodgerblue;
}

0 comments on commit b232aae

Please sign in to comment.