Skip to main content
Code Review

Return to Question

Tweeted twitter.com/StackCodeReview/status/1245274878535761920
Title edit
Link
timlwsk
  • 91
  • 1
  • 6

First "real" HTML/CSS/JS project. Gallery Website | Feedback on design/code please and code

Typo
Source Link
timlwsk
  • 91
  • 1
  • 6

The full website is hosted under timlwsk.bplaced.net timlwsk.bplaced.net (good domain coming soon). The contact form isn't working yet.

The full website is hosted under timlwsk.bplaced.net (good domain coming soon). The contact form isn't working yet.

The full website is hosted under timlwsk.bplaced.net (good domain coming soon). The contact form isn't working yet.

Added full code
Source Link
timlwsk
  • 91
  • 1
  • 6

The js code for the darkmode only:index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1′′>
 <script src="https://kit.fontawesome.com/43017aa80c.js" crossorigin="anonymous"></script>
 <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"></script>
 <link href="https://fonts.googleapis.com/css?family=Chivo&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="./css/master.css">
 <title>timlwsk</title>
 </head>
 <body>
 <div class="container">
 <div class="item header" id="header-l">
 <h1>timlwsk</h1>
 </div>
 <div class="item header" id="header-r">
 <ul>
 <li><a href="#contact">Contact</a></li>
 <li><span title="Twitter"><a href="https://twitter.com/timlwsk" target="_blank"><i class="fab fa-twitter"></i></a></span></li>
 <li><span title="Instagram"><a href="https://instagram.com/lwskdesign" target="_blank"><i class="fab fa-instagram"></i></a></span></li>
 <li><span title="Unsplash"><a href="https://unsplash.com/@lwskphotography" target="_blank"><i class="fa fa-camera"></i></a></span></li>
 <li><span title="Reddit"><a href="https://reddit.com/u/timlwsk" target="_blank"><i class="fab fa-reddit-alien"></i></a></span></li>
 <li><span title="Toggle Dark Mode"><a href="#" onclick="darkMode()"><i class="fas fa-moon"></i></a></span></li>
 </ul>
 </div>
 <div class="gallery">
 <div class="img-wrapper"><img src="./images/15.jpg" title="everybody gets high" alt="gallery image 15"></div>
 <div class="img-wrapper"><img src="./images/14.jpg" title="spilt blood" alt="gallery image 14"></div>
 <div class="img-wrapper"><img src="./images/13.jpg" title="drippin' gold" alt="gallery image 13"></div>
 <div class="img-wrapper"><img src="./images/12.jpg" title="suffocated (white)" alt="gallery image 12"></div>
 <div class="img-wrapper"><img src="./images/11.jpg" title="suffocated (black)" alt="gallery image 11"></div>
 <div class="img-wrapper"><img src="./images/10.jpg" title="hannover" alt="gallery image 10"></div>
 <div class="img-wrapper"><img src="./images/09.jpg" title="head in the clouds" alt="gallery image 09"></div>
 <div class="img-wrapper"><img src="./images/08.jpg" title="arm" alt="gallery image 08"></div>
 <div class="img-wrapper"><img src="./images/07.jpg" title="wilted" alt="gallery image 07"></div>
 <div class="img-wrapper"><img src="./images/06.jpg" title="Honey, I am drowning" alt="gallery image 06"></div>
 <div class="img-wrapper"><img src="./images/05.jpg" title="discobolus" alt="gallery image 05"></div>
 <div class="img-wrapper"><img src="./images/04.jpg" title="AF1" alt="gallery image 04"></div>
 <div class="img-wrapper"><img src="./images/03.jpg" title="sadness" alt="gallery image 03"></div>
 <div class="img-wrapper"><img src="./images/02.jpg" title="happiness" alt="gallery image 02"></div>
 <div class="img-wrapper"><img src="./images/01.jpg" title="嗳 (Love)" alt="gallery image 01"></div>
 </div>
 <div class="contact" id="contact">
 <form class="contact-form" action="email.php" method="post">
 <label for="name">Your Name</label>
 <input type="text" name="name">
 <label for="email">Your Email</label>
 <input type="text" name="email">
 <label for="message">Your Messages</label>
 <textarea name="messahge"></textarea>
 <input type="submit"></input>
 </form>
 </div>
 <div class="footer">
 <p>Copyright 2020</p>
 </div>
 </div>
 <script src="./js/darkmode.js"></script>
 </body>
</html>

master.css

/* grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>; */
:root, [data-theme="light"] {
 --bg-color: #ffffff;
 --bg-color-inv: #000000;
 --outline-color: #000000;
 --text-primary: #000000;
 --text-primary-inv: #ffffff;
 --text-secondary: #a4a4a4;
 --text-secondary-hover: #000000;
 --chivo: 'Chivo', sans-serif;
}
[data-theme="dark"] {
 --bg-color: #121212;
 --bg-color-inv: #dadada;
 --outline-color: #dadada;
 --text-primary: #dadada;
 --text-primary-inv: #000000;
 --text-secondary: #919191;
 --text-secondary-hover: #dadada;
}
html {
 margin: 0;
 padding: 0;
 font-family: 'Chivo', sans-serif;
 color: var(--text-primary);
 background-color: var(--bg-color);
 font-size: 100%;
 scroll-behavior: smooth;
}
/* Transitions */
html, #header-r ul li a:link, #header-r ul li a:visited, #header-r ul li a:hover, input[type=submit], input[type=submit]:hover, html {
 -webkit-transition: .5s;
 -moz-transition: .5s;
 -o-transition: .5s;
 transition: .5s;
}
.container {
 display: grid;
 grid-template-columns: 10% auto 10%;
 grid-template-rows: auto;
}
#header-l {
 grid-area: 1/2/1/2;
 justify-self: left;
 align-self: center;
 margin-top: 5%;
 margin-bottom: 5%;
}
#header-r {
 grid-area: 1/2/1/2;
 justify-self: right;
 align-self: center;
}
#header-r ul li {
 list-style: none;
 float: left;
 margin-left: 22px;
}
#header-r ul li a:link, #header-r ul li a:visited {
 color: var(--text-secondary);
 text-decoration: none;
 text-transform: uppercase;
}
#header-r ul li a:hover {
 color: var(--text-secondary-hover);
}
.gallery {
 font-size: 0;
 grid-column: 2/2;
}
.img-wrapper {
 width: calc(100%/1);
 display: inline-block;
}
.img-wrapper img {
 max-width: 100%;
 max-height: 100%;
}
.contact {
 grid-area: 3/2/3/2;
 justify-self: center;
 align-self: center;
 width: calc(2/3);
 margin-top: 10%;
}
label {
 font-size: 100%;
 display: inline-block;
}
input[type=text], textarea{
 margin-bottom: 30px;
}
input[type=text], input[type=submit], select, textarea {
 font-size: 100%;
 font-family: var(--chivo);
 border: 1px solid var(--outline-color);
 width: 100%;
 background-color: var(--background-color);
 padding: 10px;
 border-radius: 2px;
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 color: var(--text-primary);
}
input[type=submit]:hover {
 background-color: var(--bg-color-inv);
 color: var(--text-primary-inv);
}
textarea {
 height: 20vh;
}
.footer {
 grid-area: 4/2/4/2;
 justify-self: center;
 align-self: center;
 margin-top: 5%;
 margin-bottom: 5%;
}
@media (min-width: 1080px) /* Large Devices */ {
 html {
 font-size: 1rem;
 }
 .img-wrapper {
 width: calc(100%/3);
 }
}
@media (min-width: 2560px) /* Large Devices */ {
 html {
 font-size: 1.25rem;
 }
 .img-wrapper {
 width: calc(100%/5);
 }
}

darkmode.js

The js code for the darkmode only:

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1′′>
 <script src="https://kit.fontawesome.com/43017aa80c.js" crossorigin="anonymous"></script>
 <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"></script>
 <link href="https://fonts.googleapis.com/css?family=Chivo&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="./css/master.css">
 <title>timlwsk</title>
 </head>
 <body>
 <div class="container">
 <div class="item header" id="header-l">
 <h1>timlwsk</h1>
 </div>
 <div class="item header" id="header-r">
 <ul>
 <li><a href="#contact">Contact</a></li>
 <li><span title="Twitter"><a href="https://twitter.com/timlwsk" target="_blank"><i class="fab fa-twitter"></i></a></span></li>
 <li><span title="Instagram"><a href="https://instagram.com/lwskdesign" target="_blank"><i class="fab fa-instagram"></i></a></span></li>
 <li><span title="Unsplash"><a href="https://unsplash.com/@lwskphotography" target="_blank"><i class="fa fa-camera"></i></a></span></li>
 <li><span title="Reddit"><a href="https://reddit.com/u/timlwsk" target="_blank"><i class="fab fa-reddit-alien"></i></a></span></li>
 <li><span title="Toggle Dark Mode"><a href="#" onclick="darkMode()"><i class="fas fa-moon"></i></a></span></li>
 </ul>
 </div>
 <div class="gallery">
 <div class="img-wrapper"><img src="./images/15.jpg" title="everybody gets high" alt="gallery image 15"></div>
 <div class="img-wrapper"><img src="./images/14.jpg" title="spilt blood" alt="gallery image 14"></div>
 <div class="img-wrapper"><img src="./images/13.jpg" title="drippin' gold" alt="gallery image 13"></div>
 <div class="img-wrapper"><img src="./images/12.jpg" title="suffocated (white)" alt="gallery image 12"></div>
 <div class="img-wrapper"><img src="./images/11.jpg" title="suffocated (black)" alt="gallery image 11"></div>
 <div class="img-wrapper"><img src="./images/10.jpg" title="hannover" alt="gallery image 10"></div>
 <div class="img-wrapper"><img src="./images/09.jpg" title="head in the clouds" alt="gallery image 09"></div>
 <div class="img-wrapper"><img src="./images/08.jpg" title="arm" alt="gallery image 08"></div>
 <div class="img-wrapper"><img src="./images/07.jpg" title="wilted" alt="gallery image 07"></div>
 <div class="img-wrapper"><img src="./images/06.jpg" title="Honey, I am drowning" alt="gallery image 06"></div>
 <div class="img-wrapper"><img src="./images/05.jpg" title="discobolus" alt="gallery image 05"></div>
 <div class="img-wrapper"><img src="./images/04.jpg" title="AF1" alt="gallery image 04"></div>
 <div class="img-wrapper"><img src="./images/03.jpg" title="sadness" alt="gallery image 03"></div>
 <div class="img-wrapper"><img src="./images/02.jpg" title="happiness" alt="gallery image 02"></div>
 <div class="img-wrapper"><img src="./images/01.jpg" title="嗳 (Love)" alt="gallery image 01"></div>
 </div>
 <div class="contact" id="contact">
 <form class="contact-form" action="email.php" method="post">
 <label for="name">Your Name</label>
 <input type="text" name="name">
 <label for="email">Your Email</label>
 <input type="text" name="email">
 <label for="message">Your Messages</label>
 <textarea name="messahge"></textarea>
 <input type="submit"></input>
 </form>
 </div>
 <div class="footer">
 <p>Copyright 2020</p>
 </div>
 </div>
 <script src="./js/darkmode.js"></script>
 </body>
</html>

master.css

/* grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>; */
:root, [data-theme="light"] {
 --bg-color: #ffffff;
 --bg-color-inv: #000000;
 --outline-color: #000000;
 --text-primary: #000000;
 --text-primary-inv: #ffffff;
 --text-secondary: #a4a4a4;
 --text-secondary-hover: #000000;
 --chivo: 'Chivo', sans-serif;
}
[data-theme="dark"] {
 --bg-color: #121212;
 --bg-color-inv: #dadada;
 --outline-color: #dadada;
 --text-primary: #dadada;
 --text-primary-inv: #000000;
 --text-secondary: #919191;
 --text-secondary-hover: #dadada;
}
html {
 margin: 0;
 padding: 0;
 font-family: 'Chivo', sans-serif;
 color: var(--text-primary);
 background-color: var(--bg-color);
 font-size: 100%;
 scroll-behavior: smooth;
}
/* Transitions */
html, #header-r ul li a:link, #header-r ul li a:visited, #header-r ul li a:hover, input[type=submit], input[type=submit]:hover, html {
 -webkit-transition: .5s;
 -moz-transition: .5s;
 -o-transition: .5s;
 transition: .5s;
}
.container {
 display: grid;
 grid-template-columns: 10% auto 10%;
 grid-template-rows: auto;
}
#header-l {
 grid-area: 1/2/1/2;
 justify-self: left;
 align-self: center;
 margin-top: 5%;
 margin-bottom: 5%;
}
#header-r {
 grid-area: 1/2/1/2;
 justify-self: right;
 align-self: center;
}
#header-r ul li {
 list-style: none;
 float: left;
 margin-left: 22px;
}
#header-r ul li a:link, #header-r ul li a:visited {
 color: var(--text-secondary);
 text-decoration: none;
 text-transform: uppercase;
}
#header-r ul li a:hover {
 color: var(--text-secondary-hover);
}
.gallery {
 font-size: 0;
 grid-column: 2/2;
}
.img-wrapper {
 width: calc(100%/1);
 display: inline-block;
}
.img-wrapper img {
 max-width: 100%;
 max-height: 100%;
}
.contact {
 grid-area: 3/2/3/2;
 justify-self: center;
 align-self: center;
 width: calc(2/3);
 margin-top: 10%;
}
label {
 font-size: 100%;
 display: inline-block;
}
input[type=text], textarea{
 margin-bottom: 30px;
}
input[type=text], input[type=submit], select, textarea {
 font-size: 100%;
 font-family: var(--chivo);
 border: 1px solid var(--outline-color);
 width: 100%;
 background-color: var(--background-color);
 padding: 10px;
 border-radius: 2px;
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 color: var(--text-primary);
}
input[type=submit]:hover {
 background-color: var(--bg-color-inv);
 color: var(--text-primary-inv);
}
textarea {
 height: 20vh;
}
.footer {
 grid-area: 4/2/4/2;
 justify-self: center;
 align-self: center;
 margin-top: 5%;
 margin-bottom: 5%;
}
@media (min-width: 1080px) /* Large Devices */ {
 html {
 font-size: 1rem;
 }
 .img-wrapper {
 width: calc(100%/3);
 }
}
@media (min-width: 2560px) /* Large Devices */ {
 html {
 font-size: 1.25rem;
 }
 .img-wrapper {
 width: calc(100%/5);
 }
}

darkmode.js

Source Link
timlwsk
  • 91
  • 1
  • 6
Loading
lang-css

AltStyle によって変換されたページ (->オリジナル) /