Convert hand-drawn mockup to HTML & CSS - you can choose colours, fonts, etc.

[yochannah]

Task

Convert hand-drawn homepage mock to basic html and css.

1. Comment on this task stating that you intend to complete this task
2. When you're ready, add your html mocks to the static directory and create a pull request.
3. Bask in glory and email me your address if you'd like to have some codeisscience stickers for your trouble.

Basic tech and design specs:

1. Pure native HTML5 & CSS please. No CSS frameworks (e.g. no bootstrap) or font icons (inline svg icons are great though, and can be added to https://github.com/yochannah/code-is-science/blob/master/static/symbol-defs.svg).
2. Bonus points for responsive, but not mandatory!
3. Design: There are no colours in the mocks, so use your own imagination! Try to make them generally go well with logo model 1 or model 2: https://github.com/yochannah/code-is-science/tree/master/static/logos and use material colours: http://materialuicolors.co/
4. Ensure the design is accessible as possible

Page details:

Homepage:

• logo can be found in this repo's /static/logos/model-1 folder
• header with links title text: (don't worry about the correct href value yet, just leave blank)
  • open source journals
  • contact
  • about
  • search field with magnifying glass icon
• body
  • sidebar with radio box filters
  • main content:
    • filterable list with headers for journal name, discipline, OSS
    • journal name is a link to an external site
    • oss value is either a checkmark for yes or x for no.
• footer
• (c) codeisssciencecom 2017
• links to contact page, twitter @ codeisscience, github.com/codeissscience.

If at any point my handwriting is unclear, please clarify on this issue!

If you complete this issue, please consider also following on with the second submit-a-journal page.

https://i.imgur.com/QPMmsJJ.jpg

[shmishtopher]

I can get to work on this, just one question: Can you please clarify the footer layout?

[yochannah]

Hey @shmishtopher and thanks for volunteering to pick it up! sorry, I know the footer is a little bit scribbled-over and messy. It should be just a single straight element with copyright codeisscience and links to contact, twitter, and github - similar to the github footer at the bottom of this issue :) the line I scribbled out shouldn't be in the design.

Does that help?

[shmishtopher]

Yes, I'll submit a pr tonight.

[itsfreddyrb]

Hey! I know I'm not like an official contributor on this repository hehe, but I would like to look at the design so I can give my $0.02! If you need! Thanks!

[yochannah]

Of course, I'd love your input!! :)

[ikayz]

Can I still take up this task? It'll be my first contribution to any GitHub project which is not my own. I'm new to open source and GitHub.

[yochannah]

@ikayz yes, absolutely! :) shmishtofer made a start on this but I think wasn't able to finish it; you can see the details here: #15 - it's merged already, but it's up to you if you'd like to continue the work where it dropped off or make your own version

Feel free to ping me here if you have any questions or need any input!

[ikayz]

@yochannah I have looked at shmishtofers' code and I'll make my own version. For any questions I'll surely ask you.