Develop landing page begunfx - Work in progress #109
Conversation
…better consistency.
…ed section-styling width to 100% instead of 100vw.
* develop-landing-page: Remove extra indent space Add participate section
| font-weight: 300; | ||
|
|
||
| h1 { | ||
| font-size: 4em; |
There was a problem hiding this comment.
The font size should be different for mobile
There was a problem hiding this comment.
Done. Added:
h1 { font-size: 2.5em; }
to our Mobile setting block. Let me know if you need this value tweaked. I just took a guess for alternate size.
There was a problem hiding this comment.
It's a little too extreme compared to the comps. Be sure to check out https://projects.invisionapp.com/share/HXN9A66V3ZE#/screens/311675692 as a reference for mobile behavior. If you want to preview the size for mobile you can always reduce the browser width or use the dev tools as described here: https://superuser.com/questions/1214829/how-can-i-view-the-mobile-version-of-a-webpage-in-google-chrome-for-desktop
| <div class= "center-div"> | ||
| <h1 align="center">Participate</h1> | ||
| <p> | ||
| <div class="bold-text">Join the open source project</div> |
There was a problem hiding this comment.
The text should all be centered, a bit smaller, and have less left/right padding for this section on mobile. https://projects.invisionapp.com/share/HXN9A66V3ZE#/screens/311675692
There was a problem hiding this comment.
This looks a little too small too. As I said in the other comment, you should preview changes in the browser (I usually use 360 width). You can compare how the text is laid out for the wireframe compared to the browser.
src/ctree-app/ctree-landing.html
Outdated
| <div class="col-7 table-cell"> | ||
| <div id="copyright"> | ||
| <p> | ||
| Nulla facilisi. Donec felis ligula, feugiat nec imperdiet vitae, gravida quis felis. Aliquam ultrices ultrices eros, sit amet tristique dui ultrices quis. Vivamus semper mauris eget mauris lacinia, sit amet interdum neque mollis. Suspendisse potenti. Phasellus ut eros tempus, cursus nulla id, accumsan diam. Phasellus rhoncus metus sit amet mattis mollis. Donec elementum in magna ut vehicula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
There was a problem hiding this comment.
Based on the wireframes it looks like this section should have a grid of labels with the copyright below. Also, on mobile there's supposed to be a horizontal line separating it from the social media icon bar.
There was a problem hiding this comment.
What should the labels contain? It's not clear in the wireframe.
There was a problem hiding this comment.
You can just put anything (ex. test1, test2, test3, etc.). Just add enough to showcase the grid.
…features, ctree and participate sections.
…d social media icons center for mobile.
|
Hey @begunfx, are you still working on the comments from the 23rd? |
|
Sorry for the delay. I'll be jumping back on this this weekend. |
…d. icons to not wrap just before we hit our mobile screen size. Other formatting tweaks.
…le to better match wireframes.
…grid (full screen).
This is a work in progress of the landing page. Some overall fixes were made to the page. Participate section completed. Footer section just needs some formatting tweaks to where the copyright message on the right side would go.
Social Media icons found here:
https://www.iconfinder.com/social-media-icons?price=free&order_by=popularity&page=2
Issues: #60 & #62