\$\begingroup\$
\$\endgroup\$
5
My goal was to create a portfolio site for my motion design work. The website should be modern and intuitive, yet pose a good gallery. Please also comment on the dark mode functionality and responsiveness.
The full website is hosted under timlwsk.bplaced.net (good domain coming soon). The contact form isn't working yet.
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
var isOn = false;
function darkMode () {
document.documentElement.setAttribute('data-theme', ['dark', 'light'][+isOn]);
isOn = !isOn;
}
timlwsk
-
1\$\begingroup\$ Is the code posted in the question working? If so remove the comment about the contact form which makes the question off-topic. \$\endgroup\$pacmaninbw– pacmaninbw ♦2020年02月18日 16:09:05 +00:00Commented Feb 18, 2020 at 16:09
-
\$\begingroup\$ Just an FYI, if you are first starting out with a new website, then a content management system such as WordPress or Drupal is a better way to go. There will be a lot less code required to implement it. \$\endgroup\$pacmaninbw– pacmaninbw ♦2020年02月18日 16:10:24 +00:00Commented Feb 18, 2020 at 16:10
-
\$\begingroup\$ @BCdotWEB done, I edited the title! \$\endgroup\$timlwsk– timlwsk2020年02月18日 17:14:26 +00:00Commented Feb 18, 2020 at 17:14
-
\$\begingroup\$ @pacmaninbw Sorry, but I am not quite sure why the question becomes off-topic, when I state that a part of the website isn't coded yet. Furthermore, I love to code but thanks for the tip! \$\endgroup\$timlwsk– timlwsk2020年02月18日 17:14:29 +00:00Commented Feb 18, 2020 at 17:14
-
1\$\begingroup\$ To explain why a comment about the code not working would make the question off-topic please see our help center on how to ask a good question. codereview.stackexchange.com/help. Content management systems simply reduce the amount of code necessary, they don't remove the need for code unless the site doesn't do anything. I can code in HTML, CSS and JavaScript, but if I was starting a new website I would use a content management system to reduce the amount of work. \$\endgroup\$pacmaninbw– pacmaninbw ♦2020年02月18日 17:55:03 +00:00Commented Feb 18, 2020 at 17:55
1 Answer 1
\$\begingroup\$
\$\endgroup\$
2
First of all: good job! I like the simple layout and only-one-breakpoint-design. But like always there are some little things I would change.
1 HTML5 Semantic Elements
Tell your browser what is a header, section, footer and so on.
<header>
<div class="container">
<div class="center-vertically justify-space-between">
<div>Logo</div>
<div>Stuff</div>
</div>
</div>
</header>
<section id="gallery" class="panel">
<div class="container">
<div class="grid grid-3-3-3">
<div class="grid-item"><img src="" alt=""></div>
<div class="grid-item"><img src="" alt=""></div>
<div class="grid-item"><img src="" alt=""></div>
<div class="grid-item"><img src="" alt=""></div>
<div class="grid-item"><img src="" alt=""></div>
<div class="grid-item"><img src="" alt=""></div>
<div class="grid-item"><img src="" alt=""></div>
<div class="grid-item"><img src="" alt=""></div>
<div class="grid-item"><img src="" alt=""></div>
</div>
</div>
</section>
<section id="contact">
<div class="container">
<form action=""></form>
</div>
</section>
<footer id="footer">
<div class="container">
</div>
</footer>
2 Grid
I think it isn't necessary to make your whole container a CSS grid. I think it makes it harder to build on top of it/less scalable. For example if, at some point, you would like to add a full width section you would need to work with negative margins. Of course this is possible, but I think it is kind of "hacky". I would suggest to use a container class in every section. That way there would be no problem to add a full width section without the container class in the future. These programmers... always trying to predict the future...
Also, if you like to expand your knowledge, you could have a look at Sass. It helps you to keep your CSS modular. Here is an example how I use Sass. I know you didn't ask for that, but I hope it is interesting for you nonetheless .
variables.sass
// TYPOGRAPHY
$primaryFont: 'Public Sans', 'Helvetica', Arial, sans-serif
$secondaryFont: 'Public Sans', 'Helvetica', Arial, sans-serif
$baseTextSize: 1.6rem
$textColor: #222
// MARGINS
$margin: 2rem
$margin-2: 4rem
// BREAKPOINTS
$mobileS: "max-width: 374px"
$mobileM: "min-width: 375px"
$tablet: "min-width: 768px"
layout.sass
.container
margin: 0 auto
@media($mobileS)
.container
width: 100%
@media($tablet)
.container
width: 700px
helper-classes.sass
.justify-space-between
display: flex
justify-content: space-between
.center-vertically
display: flex
align-items: center
answered Feb 26, 2020 at 19:02
-
\$\begingroup\$ Hi Dennis! Thank you for your feedback, I really appreciate it! I actually tried to have a look at Sass but was quickly turned down by the lack of good-looking apps for windows. Do you got any recommendations (using atom atm)? \$\endgroup\$timlwsk– timlwsk2020年02月27日 20:28:04 +00:00Commented Feb 27, 2020 at 20:28
-
\$\begingroup\$ I'm not on Windows, so I don't really know what is popular there. But maybe this might help you: atom.io/packages/sass-autocompile \$\endgroup\$Moglash– Moglash2020年02月27日 22:46:21 +00:00Commented Feb 27, 2020 at 22:46
lang-css