Sitio web de cartera personal de una sola página -- html campo con css camp codereview Relacionados El problema

Single-page personal portfolio website


5
vote

problema

Español

No estoy seguro de si estoy en lo mismo preguntándolo aquí, pero tengo un gran sitio, pero siento que el código es muy desordenado. Estoy usando CSS liso para hacer las cosas. No quiero agregar marcos y cosas así. Quiero obtener este código más ordenado sin duplicaciones, mientras que aún se puede leer.

  * {     margin: 0;     padding: 0;     border: 0;     outline: 0;     box-sizing: border-box }  html {     height: 100%;     width: 100% }  body {     -webkit-box-orient: vertical;     -webkit-box-direction: normal;     -ms-flex-direction: column;     flex-direction: column;     font-family: 'Raleway', sans-serif;     min-height: 100vh;     line-height: 1.5;     font-size: 10px;     background: #2284c6;     background: -webkit-linear-gradient(left, rgba(34, 132, 198, 1) 0%, rgba(130, 67, 193, 1) 100%);     background: linear-gradient(to right, rgba(34, 132, 198, 1) 0%, rgba(130, 67, 193, 1) 100%) }  :root {     --mainblack: #2d2d2d;     --hover-color: #ffbb42 }  body, .header, .header > ul, .section, .skills, .projectwrapper, .contactlist, #mailform, .iconrow {     display: -webkit-box;     display: -ms-flexbox;     display: flex }  html::-webkit-scrollbar {     width: 10px }  html::-webkit-scrollbar-track-piece {     background-color: #4d4d4d }  html::-webkit-scrollbar-thumb {     background-color: rgba(255, 187, 66, .5);     border-radius: 50px }  html::-webkit-scrollbar-thumb:hover {     background-color: rgba(255, 187, 66, 1) }  @-webkit-keyframes growABit {     0% {         -webkit-transform: scale(1, 1);         transform: scale(1, 1)     }      50% {         -webkit-transform: scale(1.2, 1.2);         transform: scale(1.2, 1.2)     }      100% {         -webkit-transform: scale(1, 1);         transform: scale(1, 1)     } }  @keyframes growABit {     0% {         -webkit-transform: scale(1, 1);         transform: scale(1, 1)     }      50% {         -webkit-transform: scale(1.1, 1.1);         transform: scale(1.1, 1.1)     }      100% {         -webkit-transform: scale(1, 1);         transform: scale(1, 1)     } }  @-webkit-keyframes growBigger {     0% {         -webkit-transform: scale(1, 1);         transform: scale(1, 1)     }      50% {         -webkit-transform: scale(1.3, 1.3);         transform: scale(1.3, 1.3)     }      100% {         -webkit-transform: scale(1, 1);         transform: scale(1, 1)     } }  @keyframes growBigger {     0% {         -webkit-transform: scale(1, 1);         transform: scale(1, 1)     }      50% {         -webkit-transform: scale(1.3, 1.3);         transform: scale(1.3, 1.3)     }      100% {         -webkit-transform: scale(1, 1);         transform: scale(1, 1)     } }  @-webkit-keyframes showOnLoad {     0% {         opacity: 0     }      100% {         opacity: 1     } }  @keyframes showOnLoad {     0% {         opacity: 0     }      100% {         opacity: 1     } }  @-webkit-keyframes upAndDown {     0% {         -webkit-transform: translateY(0);         transform: translateY(0)     }      50% {         -webkit-transform: translateY(20px);         transform: translateY(20px)     }      100% {         -webkit-transform: translateY(0);         transform: translateY(0)     } }  @keyframes upAndDown {     0% {         -webkit-transform: translateY(0);         transform: translateY(0)     }      50% {         -webkit-transform: translateY(20px);         transform: translateY(20px)     }      100% {         -webkit-transform: translateY(0);         transform: translateY(0)     } }  .buttons:hover {     -webkit-animation: growABit;     animation: growABit }  .contactlist img:hover {     -webkit-animation: growBigger;     animation: growBigger }  .buttons:hover, .contactlist img:hover {     -webkit-animation-duration: 1000ms;     animation-duration: 1000ms;     -webkit-animation-timing-function: ease-in-out;     animation-timing-function: ease-in-out;     -webkit-animation-iteration-count: infinite;     animation-iteration-count: infinite }  .header, .header > ul {     -webkit-box-align: center;     -ms-flex-align: center;     align-items: center;     -webkit-box-orient: horizontal;     -webkit-box-direction: normal;     -ms-flex-direction: row;     flex-direction: row;     -webkit-box-pack: center;     -ms-flex-pack: center;     justify-content: center }  .header > ul > li > a > img {     height: 70px;     width: auto;     margin-top: 50px }  .header > ul {     height: 40px;     list-style: none;     width: 100%;     margin-top: 10px; }  .header > ul > li {     -webkit-box-flex: 1;     -ms-flex: 1;     flex: 1;     text-align: center }  .header > ul > li > a {     color: #fff;     display: inline-block;     text-decoration: none;     width: 100%;     height: 100% }  .header > ul > li > a, .header > ul > li > a:hover, p > a, p > a:hover {     -webkit-transition-duration: 300ms;     transition-duration: 300ms }  .header > ul > li > a:hover, p > a:hover {     color: var(--hover-color, #ffbb42) }  .main {     min-height: 100% }  .section {     -webkit-box-orient: vertical;     -webkit-box-direction: normal;     -ms-flex-direction: column;     flex-direction: column;     -webkit-box-pack: center;     -ms-flex-pack: center;     justify-content: center;     width: 100%;     min-height: 100vh }  .section:last-child {     min-height: 90vh; }  h1, h2, h3 {     font-family: 'Nixie One', cursive;     margin-top: 5px }  h1, h2, h3, .section > p, .dropdown {     text-align: center }  .section h1, .section > p, p > a {     color: #fff }  .section > h1 {     font-size: 30px; }  .buttons, input, textarea, .dropdown-content > p {     font-size: 14px }  .section:last-child > p {     max-width: 90vw;     margin: 0 auto }  .section:first-child a#aboutmelink {     height: auto;     width: 20px;     margin: 20px auto 0 }  .section:first-child img {     width: inherit;     -webkit-animation: upAndDown;     animation: upAndDown;     -webkit-animation-iteration-count: infinite;     animation-iteration-count: infinite;     -webkit-animation-duration: 3s;     animation-duration: 3s;     -webkit-animation-timing-function: ease;     animation-timing-function: ease }  .buttons, input[name="submitmail"], input[name="reset"] {     background-color: #fff;     border-radius: 5px;     color: var(--mainblack, #2d2d2d);     cursor: pointer;     height: 40px;     width: 90vw }  .buttons, .buttons:hover {     box-shadow: 0 7px 0 0 rgba(250, 250, 250, .75);     -webkit-transition-duration: 300ms;     transition-duration: 300ms }  .buttons:active, .buttons:focus {     box-shadow: 0 3px 0 0 rgba(250, 250, 250, .75);     -webkit-transform: translate(0, 3px);     transform: translate(0, 3px);     -webkit-animation: none;     animation: none }  button:hover, button:focus, .dropdown-content {     border: 1px solid #fff;     background-color: var(--hover-color, #ffbb42) }  .dropdown {     display: inline-block;     margin: 10px auto;     position: relative }  .dropdown-content {     border-radius: 5px;     display: none;     left: 0;     margin: 20px auto 0;     padding: 0 10px 10px;     position: relative;     right: 0;     width: 90vw;     background: rgba(255, 255, 255, .5); }  .dropdown-content a:last-child:hover {     color: var(--mainblack, #2d2d2d) }  .show {     display: block }  .projectbtn + .dropdown-content img {     box-shadow: 0 0 25px 0 rgba(255, 255, 255, 0.8);     border-radius: 5px;     display: block;     width: 100%;     margin: 10px 0 }  .introduction {     width: 90%;     margin: 5px auto;     color: #fff }  .introduction h1 {     font-size: 25px;     margin: 10px 0 5px;     border-bottom: 1px solid #fff }  .introduction p, .dropdown-content {     text-align: justify;     text-indent: 30px; }  .iconrow {     -webkit-box-orient: horizontal;     -webkit-box-direction: normal;     flex-direction: row;     -webkit-box-pack: justify;     -ms-flex-pack: justify;     justify-content: space-between;     margin: 0 auto;     width: 90% }  .iconrow img {     display: block;     height: 50px;     margin: 10px auto;     width: 50px }  .showAnimation {     opacity: 0;     -webkit-animation: showOnLoad;     animation: showOnLoad;     -webkit-animation-duration: 2s;     animation-duration: 2s;     -webkit-animation-fill-mode: forwards;     animation-fill-mode: forwards }  .skills {     -webkit-box-align: center;     -ms-flex-align: center;     align-items: center;     -webkit-box-orient: horizontal;     -webkit-box-direction: normal;     -ms-flex-direction: row;     flex-direction: row;     -webkit-box-pack: justify;     -ms-flex-pack: justify;     justify-content: space-between;     margin: 10px auto;     width: 60% }  .skills img {     height: 40px;     width: 35px;     display: inline-block }  [name="colorflipped"] {     -webkit-filter: invert(100%);     filter: invert(100%) }  .skillstars {     display: inherit;     -webkit-box-orient: vertical;     -webkit-box-direction: normal;     -ms-flex-direction: inherit;     flex-direction: inherit;     height: 20px }  .skillstars img {     height: inherit;     width: 20px }  .introduction li {     list-style-type: none;     margin-bottom: 5px;     text-align: center; }  .introduction li:nth-child(2), .skills:nth-of-type(2) {     -webkit-animation-delay: 1s;     animation-delay: 1s }  .introduction li:nth-child(3), .skills:nth-of-type(3) {     -webkit-animation-delay: 2s;     animation-delay: 2s }  .introduction li:nth-child(4) {     -webkit-animation-delay: 3s;     animation-delay: 3s }  #moreprojectsbutton {     background-color: var(--hover-color, #ffbb42);     cursor: not-allowed;     color: #fff;     margin: 10px auto;     opacity: .5;     width: 40%; }  .contactlist {     list-style-type: none;     justify-content: space-around;     width: 100% }  .maildownbtn {     margin-bottom: 1px }  #mailform {     -webkit-box-align: center;     -ms-flex-align: center;     align-items: center;     -webkit-box-orient: vertical;     -webkit-box-direction: normal;     -ms-flex-direction: column;     flex-direction: column;     margin: 0 auto 10px;     width: 90% }  #mailform > h3 {     align-self: flex-start }  input[name], textarea[name="message"] {     border-radius: 5px;     height: 30px;     padding: 5px;     width: 100% }  input[name]:focus:required:invalid, textarea[name="message"]:focus:required:invalid {     color: #dc143c;     border: 2px solid #dc143c }  input[name]:focus:required:valid, textarea[name="message"]:focus:required:valid {     color: green;     border: 2px solid green }  input[name="submitmail"], input[name="reset"] {     width: 30%;     margin-top: 20px }  input[name="submitmail"]:hover {     border: 1px solid #32cd32;     color: #32cd32;     background-color: #fff }  input[name="reset"]:hover {     border: 1px solid #dc143c;     color: #dc143c;     background-color: #fff }  textarea[name="message"] {     height: 80px;     max-width: 100%;     text-align: left }  footer {     border-top: 1px solid #fff;     font-size: 12px;     color: #fff;     padding: 10px;     position: relative;     text-align: center }  @media screen and (min-width: 1024px) {     h1, h2, h3 {         font-size: 200%     }      p {         font-size: 120%     }      .header > ul > li:first-child {         margin-right: 50vw;     }      .buttons {         width: 25vw     }      .introduction {         width: 60vw     }      .skills {         width: 30%     }      .introduction p, .dropdown-content {         text-indent: 0     }      #moreprojectsbutton {         width: 20vw     }      .iconrow {         -webkit-box-pack: justify;         -ms-flex-pack: justify;         justify-content: space-between;         width: 30vw     }      .contactlist {         -webkit-box-pack: justify;         -ms-flex-pack: justify;         justify-content: space-between     }      .dropdown-content {         margin: 20px auto 0;         width: 40vw     }      .dropdown-content a {         width: 90%     }      .dropdown-content p {         max-width: 80%;         margin-left: 10%     }      .image-link {         display: block;         margin: 0 auto     }      .projectimage {         -o-object-fit: cover;         object-fit: cover     }      .section:last-child > p {         max-width: 40%     } }  
  <!DOCTYPE html> <html lang=en> <head>     <title>Homepage - Maikel van Veen</title>     <meta charset=utf-8>     <meta content="width=device-width,initial-scale=1" name=viewport>     <meta name="description"           content="The official portfolio website of Maikel van Veen. On this website you can find all the information you should know about me, and what I can do for you!">     <link href=assets/css/index.css rel=stylesheet>     <link href="https://fonts.googleapis.com/css?family=Raleway:600&subset=latin-ext" rel=stylesheet>     <link href="https://fonts.googleapis.com/css?family=Nixie+One" rel="stylesheet">     <link rel="shortcut icon" href="/assets/img/icons/favicon.ico"> </head> <body> <header class=header>     <ul>         <li>             <a href=#contact>                 <img src=assets/img/icons/logo.png alt=Logo>             </a>         </li>         <li>             <a href=#aboutme>                 About Me             </a>         </li>         <li>             <a href=#portfolio>                 Portfolio             </a>         </li>         <li>             <a href=#contact>                 Contact             </a>         </li>     </ul> </header> <main class=main>     <section class=section>         <h1>Maikel van Veen</h1>         <p>             Vanilla Web Development, Design and <a href=#projects>more</a>!         </p>         <a href="#aboutme" id="aboutmelink"><img src="assets/img/icons/arrow-down.png" alt="Animated Arrow"></a>     </section>     <section class=section id=aboutme>         <h1>About Me</h1>         <section class="introduction">             <h1>Who Am I?</h1>             <p>                 I am a 20-year-old Dutch student of Communication & Multimedia Design.                 Besides studying, I am working hard on becoming a professional web developer.                 I have always had a thing for development, but since this year that became a passion!                 I am still learning and gaining experience, however there are a few projects on this website shown                 already!                 I hope that you will find interesting things between my projects and feel free to send me a message via                 one                 of the social media platforms I am on.             </p>         </section>         <section class="introduction">             <h1>My Languages</h1>             <p>                 If I say so myself I get progressively better at all these languages everyday!                 Below you can find the languages I use, along with the amount of skill in them given with the amount                 of stars. The minimum is 1 and the maximum is 5 stars.             </p>             <div class=skills>                 <img src="assets/img/icons/css3.png" name="colorflipped" title="CSS3">                 <div class=skillstars>                     <img src=assets/img/icons/star.svg alt="Rating Star Image">                     <img src=assets/img/icons/star.svg alt="Rating Star Image">                     <img src=assets/img/icons/star.svg alt="Rating Star Image">                 </div>             </div>             <div class=skills>                 <img src="assets/img/icons/html5.png" title="HTML5">                 <div class=skillstars>                     <img src=assets/img/icons/star.svg alt="Rating Star Image">                     <img src=assets/img/icons/star.svg alt="Rating Star Image">                     <img src=assets/img/icons/star.svg alt="Rating Star Image">                 </div>             </div>             <div class=skills>                 <img src="assets/img/icons/JS.png" title="JavaScript">                 <div class=skillstars>                     <img src=assets/img/icons/star.svg alt="Rating Star Image">                     <img src=assets/img/icons/star.svg alt="Rating Star Image">                 </div>             </div>         </section>         <section class="introduction">             <h1>I can do the following for you:</h1>             <ul>                 <li>Create a custommade, new website.</li>                 <li>Code a PSD template into a working website.</li>                 <li>Rework an outdated website.</li>                 <li>Clean up messy code of a website.</li>             </ul>         </section>     </section>     <section class=section id="portfolio">         <h1>Portfolio</h1>         <div class=dropdown>             <button class="buttons projectbtn" onclick='dropDownFunction("dropdownone")'>PSD to Bussiness Site                 (01-2017)             </button>             <div class="dropdown-content" id=dropdownone>                 <h2>Bussiness Web-template<br>(01-2017)</h2>                 <a href=projects/bussinessTemp/templatetwo.html class=image-link>                     <img src=assets/img/projects/template2.png alt="Bussiness Template Project Image"                          class=projectimage>                 </a>                 <p>A big coding project. I did a lot of work on getting this website (almost) exactly the same as the                     template I styled it after. Besides that, it is also responsive, so when you get a smaller screen                     you get a better feel of control in the site. The main goal of me making this, was getting familiar                     with making PSD templates into working code.                     <br>Take a look at the website by clicking                     <a href=projects/bussinessTemp/templatetwo.html>here</a> or on the picture above.                 </p>             </div>         </div>         <div class=dropdown>             <button class="buttons projectbtn" onclick='dropDownFunction("dropdowntwo")'>Watch and Code To-Do List                 (01-2017)             </button>             <div class=dropdown-content id=dropdowntwo>                 <h2>Watch And Code To-Do List<br>(01-2017)</h2>                 <a href=projects/watchandcode/watchandcode.html class=image-link>                     <img src=assets/img/projects/watchandcode.png alt="Watch and Code Project Image" class=projectimage>                 </a>                 <p>This was a learning project for myself, getting used to using Practical Javascript. Gordon Zhu (owner                     of Watch and Code) did a good job teaching how to create a todo-list from scratch. The styling                     applied was not part of the course.                     <br>Take a look at the website by clicking                     <a href=projects/watchandcode/watchandcode.html>here</a> or on the picture above.                 </p>             </div>         </div>         <div class=dropdown>             <button class="buttons projectbtn" onclick='dropDownFunction("dropdownthree")'>Next Web (Study-Related)                 (01-2017)             </button>             <div class=dropdown-content id=dropdownthree>                 <h2>Next Web Module Website<br>(01-2017)</h2>                 <a href=projects/nextweb/nextwebIndex.html class=image-link>                     <img src=assets/img/projects/nextweb.png alt="Next Web Project Image" class=projectimage>                 </a>                 <p>This project was all about design and coding. My interest in coding sky-rocketed after this project.                     The goal was to make a prototype website for a responsive 'web-app'-like website.                     <br>Take a look at the website by clicking                     <a href=projects/nextweb/nextwebIndex.html>here</a> or on the picture above.                 </p>             </div>         </div>         <button type=submit disabled id=moreprojectsbutton class="buttons">More To Come!</button>     </section>     <section class=section id="contact">         <h1>Contact Me</h1>         <p>If you want me to make something for you, or just get to know me better, you can contact me via:</p>         <div class=iconrow>             <ul class=contactlist>                 <li>                     <a target=_blank href="https://www.facebook.com/MaikelvV?ref=bookmarks">                         <img src=assets/img/socials/facebook.png alt="Facebook Logo">                     </a>                 </li>                 <li>                     <a target=_blank href=https://github.com/Maikxx>                         <img src=assets/img/socials/github.png alt="Github Logo">                     </a>                 </li>                 <li>                     <a target=_blank href=https://www.instagram.com/maikvv/ >                         <img src=assets/img/socials/instagram.png alt="Instagram Logo">                     </a>                 </li>                 <li>                     <a target=_blank href=https://www.linkedin.com/in/maikel-van-veen-821721109/ >                         <img src=assets/img/socials/linkedin.png alt="LinkedIn Logo">                     </a>                 </li>                 <li>                     <a target=_blank href=https://www.reddit.com/user/Maikxx10/>                         <img src=assets/img/socials/reddit.png alt="Reddit Logo">                     </a>                 </li>             </ul>         </div>         <div class=dropdown>             <button class="buttons maildownbtn" onclick='dropDownFunction("dropdownseven")'>You can also send me a mail                 here!             </button>             <div class=dropdown-content id=dropdownseven>                 <form id=mailform action="mailto:maikel.van.veen@outlook.com?subject=Maikel_van_Veen" enctype=text/plain                       method=post>                     <h3>Name:</h3>                     <input name=name oninput='setCustomValidity("")'                            oninvalid='this.setCustomValidity("Please enter your name here!")' required>                     <h3>E-Mail:</h3>                     <input name=email type=email oninput='setCustomValidity("")'                            oninvalid='this.setCustomValidity("Please enter your email address here!")' required>                     <h3>Message:</h3>                     <textarea form=mailform maxlength=1000 name=message oninput='setCustomValidity("")'                               oninvalid='this.setCustomValidity("Please enter a clear descriptive message here!")'                               required rows=10></textarea>                     <input name=submitmail type=submit value="Submit!">                     <input name=reset type=reset value="Reset!">                 </form>             </div>         </div>     </section> </main> <footer class=footer>     All content © 2017 by Maikel van Veen. All rights reserved, coded with love by Maikel van Veen. </footer> <script>!function (e, t, a, n, c, o, s) {     e.GoogleAnalyticsObject = c, e[c] = e[c] || function () {             (e[c].q = e[c].q || []).push(arguments)         }, e[c].l = 1 * new Date, o = t.createElement(a), s = t.getElementsByTagName(a)[0], o.async = 1, o.src = n, s.parentNode.insertBefore(o, s) }(window, document, "script", "https://www.google-analytics.com/analytics.js", "ga"), ga("create", "UA-90941042-1", "auto"), ga("send", "pageview")</script> <script src=assets/js/script.js></script>  
Original en ingles

I am not sure if I am right by asking this here, but I have got a big site, but I feel like the code is very messy. I am using plain CSS to get things done. I don't want to add frameworks and stuff like that. I want to get this code more tidy without duplications, while still be readable.

* {     margin: 0;     padding: 0;     border: 0;     outline: 0;     box-sizing: border-box }  html {     height: 100%;     width: 100% }  body {     -webkit-box-orient: vertical;     -webkit-box-direction: normal;     -ms-flex-direction: column;     flex-direction: column;     font-family: 'Raleway', sans-serif;     min-height: 100vh;     line-height: 1.5;     font-size: 10px;     background: #2284c6;     background: -webkit-linear-gradient(left, rgba(34, 132, 198, 1) 0%, rgba(130, 67, 193, 1) 100%);     background: linear-gradient(to right, rgba(34, 132, 198, 1) 0%, rgba(130, 67, 193, 1) 100%) }  :root {     --mainblack: #2d2d2d;     --hover-color: #ffbb42 }  body, .header, .header > ul, .section, .skills, .projectwrapper, .contactlist, #mailform, .iconrow {     display: -webkit-box;     display: -ms-flexbox;     display: flex }  html::-webkit-scrollbar {     width: 10px }  html::-webkit-scrollbar-track-piece {     background-color: #4d4d4d }  html::-webkit-scrollbar-thumb {     background-color: rgba(255, 187, 66, .5);     border-radius: 50px }  html::-webkit-scrollbar-thumb:hover {     background-color: rgba(255, 187, 66, 1) }  @-webkit-keyframes growABit {     0% {         -webkit-transform: scale(1, 1);         transform: scale(1, 1)     }      50% {         -webkit-transform: scale(1.2, 1.2);         transform: scale(1.2, 1.2)     }      100% {         -webkit-transform: scale(1, 1);         transform: scale(1, 1)     } }  @keyframes growABit {     0% {         -webkit-transform: scale(1, 1);         transform: scale(1, 1)     }      50% {         -webkit-transform: scale(1.1, 1.1);         transform: scale(1.1, 1.1)     }      100% {         -webkit-transform: scale(1, 1);         transform: scale(1, 1)     } }  @-webkit-keyframes growBigger {     0% {         -webkit-transform: scale(1, 1);         transform: scale(1, 1)     }      50% {         -webkit-transform: scale(1.3, 1.3);         transform: scale(1.3, 1.3)     }      100% {         -webkit-transform: scale(1, 1);         transform: scale(1, 1)     } }  @keyframes growBigger {     0% {         -webkit-transform: scale(1, 1);         transform: scale(1, 1)     }      50% {         -webkit-transform: scale(1.3, 1.3);         transform: scale(1.3, 1.3)     }      100% {         -webkit-transform: scale(1, 1);         transform: scale(1, 1)     } }  @-webkit-keyframes showOnLoad {     0% {         opacity: 0     }      100% {         opacity: 1     } }  @keyframes showOnLoad {     0% {         opacity: 0     }      100% {         opacity: 1     } }  @-webkit-keyframes upAndDown {     0% {         -webkit-transform: translateY(0);         transform: translateY(0)     }      50% {         -webkit-transform: translateY(20px);         transform: translateY(20px)     }      100% {         -webkit-transform: translateY(0);         transform: translateY(0)     } }  @keyframes upAndDown {     0% {         -webkit-transform: translateY(0);         transform: translateY(0)     }      50% {         -webkit-transform: translateY(20px);         transform: translateY(20px)     }      100% {         -webkit-transform: translateY(0);         transform: translateY(0)     } }  .buttons:hover {     -webkit-animation: growABit;     animation: growABit }  .contactlist img:hover {     -webkit-animation: growBigger;     animation: growBigger }  .buttons:hover, .contactlist img:hover {     -webkit-animation-duration: 1000ms;     animation-duration: 1000ms;     -webkit-animation-timing-function: ease-in-out;     animation-timing-function: ease-in-out;     -webkit-animation-iteration-count: infinite;     animation-iteration-count: infinite }  .header, .header > ul {     -webkit-box-align: center;     -ms-flex-align: center;     align-items: center;     -webkit-box-orient: horizontal;     -webkit-box-direction: normal;     -ms-flex-direction: row;     flex-direction: row;     -webkit-box-pack: center;     -ms-flex-pack: center;     justify-content: center }  .header > ul > li > a > img {     height: 70px;     width: auto;     margin-top: 50px }  .header > ul {     height: 40px;     list-style: none;     width: 100%;     margin-top: 10px; }  .header > ul > li {     -webkit-box-flex: 1;     -ms-flex: 1;     flex: 1;     text-align: center }  .header > ul > li > a {     color: #fff;     display: inline-block;     text-decoration: none;     width: 100%;     height: 100% }  .header > ul > li > a, .header > ul > li > a:hover, p > a, p > a:hover {     -webkit-transition-duration: 300ms;     transition-duration: 300ms }  .header > ul > li > a:hover, p > a:hover {     color: var(--hover-color, #ffbb42) }  .main {     min-height: 100% }  .section {     -webkit-box-orient: vertical;     -webkit-box-direction: normal;     -ms-flex-direction: column;     flex-direction: column;     -webkit-box-pack: center;     -ms-flex-pack: center;     justify-content: center;     width: 100%;     min-height: 100vh }  .section:last-child {     min-height: 90vh; }  h1, h2, h3 {     font-family: 'Nixie One', cursive;     margin-top: 5px }  h1, h2, h3, .section > p, .dropdown {     text-align: center }  .section h1, .section > p, p > a {     color: #fff }  .section > h1 {     font-size: 30px; }  .buttons, input, textarea, .dropdown-content > p {     font-size: 14px }  .section:last-child > p {     max-width: 90vw;     margin: 0 auto }  .section:first-child a#aboutmelink {     height: auto;     width: 20px;     margin: 20px auto 0 }  .section:first-child img {     width: inherit;     -webkit-animation: upAndDown;     animation: upAndDown;     -webkit-animation-iteration-count: infinite;     animation-iteration-count: infinite;     -webkit-animation-duration: 3s;     animation-duration: 3s;     -webkit-animation-timing-function: ease;     animation-timing-function: ease }  .buttons, input[name="submitmail"], input[name="reset"] {     background-color: #fff;     border-radius: 5px;     color: var(--mainblack, #2d2d2d);     cursor: pointer;     height: 40px;     width: 90vw }  .buttons, .buttons:hover {     box-shadow: 0 7px 0 0 rgba(250, 250, 250, .75);     -webkit-transition-duration: 300ms;     transition-duration: 300ms }  .buttons:active, .buttons:focus {     box-shadow: 0 3px 0 0 rgba(250, 250, 250, .75);     -webkit-transform: translate(0, 3px);     transform: translate(0, 3px);     -webkit-animation: none;     animation: none }  button:hover, button:focus, .dropdown-content {     border: 1px solid #fff;     background-color: var(--hover-color, #ffbb42) }  .dropdown {     display: inline-block;     margin: 10px auto;     position: relative }  .dropdown-content {     border-radius: 5px;     display: none;     left: 0;     margin: 20px auto 0;     padding: 0 10px 10px;     position: relative;     right: 0;     width: 90vw;     background: rgba(255, 255, 255, .5); }  .dropdown-content a:last-child:hover {     color: var(--mainblack, #2d2d2d) }  .show {     display: block }  .projectbtn + .dropdown-content img {     box-shadow: 0 0 25px 0 rgba(255, 255, 255, 0.8);     border-radius: 5px;     display: block;     width: 100%;     margin: 10px 0 }  .introduction {     width: 90%;     margin: 5px auto;     color: #fff }  .introduction h1 {     font-size: 25px;     margin: 10px 0 5px;     border-bottom: 1px solid #fff }  .introduction p, .dropdown-content {     text-align: justify;     text-indent: 30px; }  .iconrow {     -webkit-box-orient: horizontal;     -webkit-box-direction: normal;     flex-direction: row;     -webkit-box-pack: justify;     -ms-flex-pack: justify;     justify-content: space-between;     margin: 0 auto;     width: 90% }  .iconrow img {     display: block;     height: 50px;     margin: 10px auto;     width: 50px }  .showAnimation {     opacity: 0;     -webkit-animation: showOnLoad;     animation: showOnLoad;     -webkit-animation-duration: 2s;     animation-duration: 2s;     -webkit-animation-fill-mode: forwards;     animation-fill-mode: forwards }  .skills {     -webkit-box-align: center;     -ms-flex-align: center;     align-items: center;     -webkit-box-orient: horizontal;     -webkit-box-direction: normal;     -ms-flex-direction: row;     flex-direction: row;     -webkit-box-pack: justify;     -ms-flex-pack: justify;     justify-content: space-between;     margin: 10px auto;     width: 60% }  .skills img {     height: 40px;     width: 35px;     display: inline-block }  [name="colorflipped"] {     -webkit-filter: invert(100%);     filter: invert(100%) }  .skillstars {     display: inherit;     -webkit-box-orient: vertical;     -webkit-box-direction: normal;     -ms-flex-direction: inherit;     flex-direction: inherit;     height: 20px }  .skillstars img {     height: inherit;     width: 20px }  .introduction li {     list-style-type: none;     margin-bottom: 5px;     text-align: center; }  .introduction li:nth-child(2), .skills:nth-of-type(2) {     -webkit-animation-delay: 1s;     animation-delay: 1s }  .introduction li:nth-child(3), .skills:nth-of-type(3) {     -webkit-animation-delay: 2s;     animation-delay: 2s }  .introduction li:nth-child(4) {     -webkit-animation-delay: 3s;     animation-delay: 3s }  #moreprojectsbutton {     background-color: var(--hover-color, #ffbb42);     cursor: not-allowed;     color: #fff;     margin: 10px auto;     opacity: .5;     width: 40%; }  .contactlist {     list-style-type: none;     justify-content: space-around;     width: 100% }  .maildownbtn {     margin-bottom: 1px }  #mailform {     -webkit-box-align: center;     -ms-flex-align: center;     align-items: center;     -webkit-box-orient: vertical;     -webkit-box-direction: normal;     -ms-flex-direction: column;     flex-direction: column;     margin: 0 auto 10px;     width: 90% }  #mailform > h3 {     align-self: flex-start }  input[name], textarea[name="message"] {     border-radius: 5px;     height: 30px;     padding: 5px;     width: 100% }  input[name]:focus:required:invalid, textarea[name="message"]:focus:required:invalid {     color: #dc143c;     border: 2px solid #dc143c }  input[name]:focus:required:valid, textarea[name="message"]:focus:required:valid {     color: green;     border: 2px solid green }  input[name="submitmail"], input[name="reset"] {     width: 30%;     margin-top: 20px }  input[name="submitmail"]:hover {     border: 1px solid #32cd32;     color: #32cd32;     background-color: #fff }  input[name="reset"]:hover {     border: 1px solid #dc143c;     color: #dc143c;     background-color: #fff }  textarea[name="message"] {     height: 80px;     max-width: 100%;     text-align: left }  footer {     border-top: 1px solid #fff;     font-size: 12px;     color: #fff;     padding: 10px;     position: relative;     text-align: center }  @media screen and (min-width: 1024px) {     h1, h2, h3 {         font-size: 200%     }      p {         font-size: 120%     }      .header > ul > li:first-child {         margin-right: 50vw;     }      .buttons {         width: 25vw     }      .introduction {         width: 60vw     }      .skills {         width: 30%     }      .introduction p, .dropdown-content {         text-indent: 0     }      #moreprojectsbutton {         width: 20vw     }      .iconrow {         -webkit-box-pack: justify;         -ms-flex-pack: justify;         justify-content: space-between;         width: 30vw     }      .contactlist {         -webkit-box-pack: justify;         -ms-flex-pack: justify;         justify-content: space-between     }      .dropdown-content {         margin: 20px auto 0;         width: 40vw     }      .dropdown-content a {         width: 90%     }      .dropdown-content p {         max-width: 80%;         margin-left: 10%     }      .image-link {         display: block;         margin: 0 auto     }      .projectimage {         -o-object-fit: cover;         object-fit: cover     }      .section:last-child > p {         max-width: 40%     } }
<!DOCTYPE html> <html lang=en> <head>     <title>Homepage - Maikel van Veen</title>     <meta charset=utf-8>     <meta content="width=device-width,initial-scale=1" name=viewport>     <meta name="description"           content="The official portfolio website of Maikel van Veen. On this website you can find all the information you should know about me, and what I can do for you!">     <link href=assets/css/index.css rel=stylesheet>     <link href="https://fonts.googleapis.com/css?family=Raleway:600&subset=latin-ext" rel=stylesheet>     <link href="https://fonts.googleapis.com/css?family=Nixie+One" rel="stylesheet">     <link rel="shortcut icon" href="/assets/img/icons/favicon.ico"> </head> <body> <header class=header>     <ul>         <li>             <a href=#contact>                 <img src=assets/img/icons/logo.png alt=Logo>             </a>         </li>         <li>             <a href=#aboutme>                 About Me             </a>         </li>         <li>             <a href=#portfolio>                 Portfolio             </a>         </li>         <li>             <a href=#contact>                 Contact             </a>         </li>     </ul> </header> <main class=main>     <section class=section>         <h1>Maikel van Veen</h1>         <p>             Vanilla Web Development, Design and <a href=#projects>more</a>!         </p>         <a href="#aboutme" id="aboutmelink"><img src="assets/img/icons/arrow-down.png" alt="Animated Arrow"></a>     </section>     <section class=section id=aboutme>         <h1>About Me</h1>         <section class="introduction">             <h1>Who Am I?</h1>             <p>                 I am a 20-year-old Dutch student of Communication & Multimedia Design.                 Besides studying, I am working hard on becoming a professional web developer.                 I have always had a thing for development, but since this year that became a passion!                 I am still learning and gaining experience, however there are a few projects on this website shown                 already!                 I hope that you will find interesting things between my projects and feel free to send me a message via                 one                 of the social media platforms I am on.             </p>         </section>         <section class="introduction">             <h1>My Languages</h1>             <p>                 If I say so myself I get progressively better at all these languages everyday!                 Below you can find the languages I use, along with the amount of skill in them given with the amount                 of stars. The minimum is 1 and the maximum is 5 stars.             </p>             <div class=skills>                 <img src="assets/img/icons/css3.png" name="colorflipped" title="CSS3">                 <div class=skillstars>                     <img src=assets/img/icons/star.svg alt="Rating Star Image">                     <img src=assets/img/icons/star.svg alt="Rating Star Image">                     <img src=assets/img/icons/star.svg alt="Rating Star Image">                 </div>             </div>             <div class=skills>                 <img src="assets/img/icons/html5.png" title="HTML5">                 <div class=skillstars>                     <img src=assets/img/icons/star.svg alt="Rating Star Image">                     <img src=assets/img/icons/star.svg alt="Rating Star Image">                     <img src=assets/img/icons/star.svg alt="Rating Star Image">                 </div>             </div>             <div class=skills>                 <img src="assets/img/icons/JS.png" title="JavaScript">                 <div class=skillstars>                     <img src=assets/img/icons/star.svg alt="Rating Star Image">                     <img src=assets/img/icons/star.svg alt="Rating Star Image">                 </div>             </div>         </section>         <section class="introduction">             <h1>I can do the following for you:</h1>             <ul>                 <li>Create a custommade, new website.</li>                 <li>Code a PSD template into a working website.</li>                 <li>Rework an outdated website.</li>                 <li>Clean up messy code of a website.</li>             </ul>         </section>     </section>     <section class=section id="portfolio">         <h1>Portfolio</h1>         <div class=dropdown>             <button class="buttons projectbtn" onclick='dropDownFunction("dropdownone")'>PSD to Bussiness Site                 (01-2017)             </button>             <div class="dropdown-content" id=dropdownone>                 <h2>Bussiness Web-template<br>(01-2017)</h2>                 <a href=projects/bussinessTemp/templatetwo.html class=image-link>                     <img src=assets/img/projects/template2.png alt="Bussiness Template Project Image"                          class=projectimage>                 </a>                 <p>A big coding project. I did a lot of work on getting this website (almost) exactly the same as the                     template I styled it after. Besides that, it is also responsive, so when you get a smaller screen                     you get a better feel of control in the site. The main goal of me making this, was getting familiar                     with making PSD templates into working code.                     <br>Take a look at the website by clicking                     <a href=projects/bussinessTemp/templatetwo.html>here</a> or on the picture above.                 </p>             </div>         </div>         <div class=dropdown>             <button class="buttons projectbtn" onclick='dropDownFunction("dropdowntwo")'>Watch and Code To-Do List                 (01-2017)             </button>             <div class=dropdown-content id=dropdowntwo>                 <h2>Watch And Code To-Do List<br>(01-2017)</h2>                 <a href=projects/watchandcode/watchandcode.html class=image-link>                     <img src=assets/img/projects/watchandcode.png alt="Watch and Code Project Image" class=projectimage>                 </a>                 <p>This was a learning project for myself, getting used to using Practical Javascript. Gordon Zhu (owner                     of Watch and Code) did a good job teaching how to create a todo-list from scratch. The styling                     applied was not part of the course.                     <br>Take a look at the website by clicking                     <a href=projects/watchandcode/watchandcode.html>here</a> or on the picture above.                 </p>             </div>         </div>         <div class=dropdown>             <button class="buttons projectbtn" onclick='dropDownFunction("dropdownthree")'>Next Web (Study-Related)                 (01-2017)             </button>             <div class=dropdown-content id=dropdownthree>                 <h2>Next Web Module Website<br>(01-2017)</h2>                 <a href=projects/nextweb/nextwebIndex.html class=image-link>                     <img src=assets/img/projects/nextweb.png alt="Next Web Project Image" class=projectimage>                 </a>                 <p>This project was all about design and coding. My interest in coding sky-rocketed after this project.                     The goal was to make a prototype website for a responsive 'web-app'-like website.                     <br>Take a look at the website by clicking                     <a href=projects/nextweb/nextwebIndex.html>here</a> or on the picture above.                 </p>             </div>         </div>         <button type=submit disabled id=moreprojectsbutton class="buttons">More To Come!</button>     </section>     <section class=section id="contact">         <h1>Contact Me</h1>         <p>If you want me to make something for you, or just get to know me better, you can contact me via:</p>         <div class=iconrow>             <ul class=contactlist>                 <li>                     <a target=_blank href="https://www.facebook.com/MaikelvV?ref=bookmarks">                         <img src=assets/img/socials/facebook.png alt="Facebook Logo">                     </a>                 </li>                 <li>                     <a target=_blank href=https://github.com/Maikxx>                         <img src=assets/img/socials/github.png alt="Github Logo">                     </a>                 </li>                 <li>                     <a target=_blank href=https://www.instagram.com/maikvv/ >                         <img src=assets/img/socials/instagram.png alt="Instagram Logo">                     </a>                 </li>                 <li>                     <a target=_blank href=https://www.linkedin.com/in/maikel-van-veen-821721109/ >                         <img src=assets/img/socials/linkedin.png alt="LinkedIn Logo">                     </a>                 </li>                 <li>                     <a target=_blank href=https://www.reddit.com/user/Maikxx10/>                         <img src=assets/img/socials/reddit.png alt="Reddit Logo">                     </a>                 </li>             </ul>         </div>         <div class=dropdown>             <button class="buttons maildownbtn" onclick='dropDownFunction("dropdownseven")'>You can also send me a mail                 here!             </button>             <div class=dropdown-content id=dropdownseven>                 <form id=mailform action="mailto:maikel.van.veen@outlook.com?subject=Maikel_van_Veen" enctype=text/plain                       method=post>                     <h3>Name:</h3>                     <input name=name oninput='setCustomValidity("")'                            oninvalid='this.setCustomValidity("Please enter your name here!")' required>                     <h3>E-Mail:</h3>                     <input name=email type=email oninput='setCustomValidity("")'                            oninvalid='this.setCustomValidity("Please enter your email address here!")' required>                     <h3>Message:</h3>                     <textarea form=mailform maxlength=1000 name=message oninput='setCustomValidity("")'                               oninvalid='this.setCustomValidity("Please enter a clear descriptive message here!")'                               required rows=10></textarea>                     <input name=submitmail type=submit value="Submit!">                     <input name=reset type=reset value="Reset!">                 </form>             </div>         </div>     </section> </main> <footer class=footer>     All content xc2xa9 2017 by Maikel van Veen. All rights reserved, coded with love by Maikel van Veen. </footer> <script>!function (e, t, a, n, c, o, s) {     e.GoogleAnalyticsObject = c, e[c] = e[c] || function () {             (e[c].q = e[c].q || []).push(arguments)         }, e[c].l = 1 * new Date, o = t.createElement(a), s = t.getElementsByTagName(a)[0], o.async = 1, o.src = n, s.parentNode.insertBefore(o, s) }(window, document, "script", "https://www.google-analytics.com/analytics.js", "ga"), ga("create", "UA-90941042-1", "auto"), ga("send", "pageview")</script> <script src=assets/js/script.js></script>
     
 
 

Lista de respuestas

3
 
vote

He revisado su código y puedo comentar sobre algunas cosas:

Tengo un sitio personal similar y puedo decirle que no hay muchas cosas que realmente pueda cortar para hacer que el código sea más ordenado sin recurrir a los marcos. Inevitablemente, ya que este es un sitio web estático, tendrá una duplicación, especialmente si desea tener esos prefijos automáticos.

Colores

Me gustaría criticar el uso de colores en su sitio web. En mi opinión, se ven fechados. Trate de usar un color azul más claro en el fondo o use un esquema de color plano de Adobe Kuler.

Enlaces

No puedo ver ninguno de sus enlaces porque tienen un color similar con el fondo. Si planea tonera, convirtiéndose en un gran diseñador web, tendrá que prestar atención a las cosas a medida que se destacan.

Botones y animaciones

No uses esos botones 3D se ven horribles. Hazlos planos o al menos con un gradiente y sombra suaves y por favor Deshabilitar las animaciones!

Fuentes

Cambia la fuente a algo más popular de las fuentes de Google y no convertir algo de la ardilla de la fuente. También los hacen un tamaño ligeramente más grande.

Fondo

Agregar sección en la parte superior del sitio con una imagen de fondo de algo que le guste similar con algunos artículos de blog medio. Asegúrese de que sea de buena resolución y calidad. Si puede hacerlo estático cuando se desplaza aún mejor.

En general

En general, estoy seguro con mucho trabajo y pasión, se convertirá en un gran diseñador. Solo tiene que mantener la atención importante a los detalles y hacer su propia declaración mostrando su cartera. Buena suerte!

 

I've reviewed your code and i can comment on some things:

I have a similar personal site and I can tell you there is not many things you can really cut in order to make the code more tidy without resorting to frameworks. Inevitably as this is a static website you will have duplication especially if you want to have those auto-prefixes.

Colors

I would like to criticize the use of colors in your website. In my opinion they look dated. Try to use a lighter blue color in the background or use a flat color scheme from adobe kuler.

Links

I cannot see any of your links because they have similar color with the background. If you plan ton becoming a great web designer you will have to pay attention to those things as they stand out.

Buttons and Animations

Don't use those 3d buttons they look horrible. Make them flat or at least with a smooth gradient and shadow and please disable the animations!

Fonts

Change the font to something more popular from Google fonts and not convert something from Font Squirrel. Also make them slightly bigger in size.

Background

Add section on the top of the site with a background image of something that you like similar with example some medium blog articles. Make sure its of good resolution and quality. If you can make it static when you scroll even better.

Overall

Overall I'm sure with a lot of work and passion you will become one great designer. You just have to keep strong attention to detail and make your own statement by showcasing your portfolio. Good luck!

 
 
 
 

Relacionados problema

2  Abriendo una navegación  ( Opening a navigation ) 
El objetivo de esta función es abrir un menú con una clase CSS (la animación se realiza a través de la transición CSS), llame a una superposición en la parte ...

6  ¿Cómo optimizar mi página web CSS / HTML?  ( How to optimize my css html webpage ) 
Estoy trabajando en un sitio web (HTML / CSS) para mejorar mis habilidades, pero no estoy seguro de si lo estoy haciendo de la manera correcta, porque tengo m...

5  CSS & JS PIECHART  ( Css js piechart ) 
Hice un public class Question { public static void main(String[] args) { //A hypothetical list of tasks to run asynchronously List<Call...

4  Desplazamiento horizontal receptivo en la posición del mouse  ( Responsive horizontal scroll on mouse position ) 
Estoy haciendo un Responsive Scroll Horizontal Ui . La posición de desplazamiento horizontal se calcula de acuerdo con la posición horizontal del mouse: ...

1  Sitio web construido con HTML y CSS  ( Website built with html and css ) 
Por favor revise esto: 99887766555443312 ...

2  Limpiando una galería de imágenes rotativas  ( Cleaning up a rotating image gallery ) 
He creado una pequeña galería de imágenes para la web. Me propuse querer 3 cosas. 1. Toda la galería tenía una capacidad de respuesta a nivel básica. 2. La ga...

3  Inclinación en la imagen de flores  ( Tilt on hover image ) 
Estoy solicitando una revisión de este código para ver si estoy siguiendo las mejores prácticas comunes o si hay una mejor manera de realizar el objetivo esta...

1  Sube y arrastra la imagen dentro de una imagen de máscara  ( Upload and drag the image inside a mask image ) 
Estoy permitiendo a los usuarios subir y arrastrar imágenes con este código. Dame una revisión de esto. Codepen $part = '@CRC := MD5(CONCAT_WS('#', COA...

3  Estructuración simple HTML5 / CSS3 / Javascript Math Aplicación web  ( Structuring simple html5 css3 javascript math web app ) 
Soy nuevo en las aplicaciones web y estoy teniendo dificultades para estructurar mis aplicaciones. Puse una aplicación web de matemáticas muy simple que deseo...

8  Div en la lista desordenada - buena práctica?  ( Div in unordered list good practice ) 
Quiero hacer un formulario que se parece a esto: public interface IAds { void ShowVideoAd(); void PreLoadVideoAd(); bool IsAdAvailable(); } 3...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos