News Website

News site Website ( Responsive down to 750px) Mobile (375px touch friendly web app future proof) Everything must be coded so that the data (image / text/ title) can be changed and still hold the exact same design. (code will be added that injects content automatically{You will NOT be coding this part}) Keep scalability in mind while coding this for front End & Back End. Back end for publishing news article as well as regulating comments and users. Fast turn around (2 weeks, no excuses) News timeline: This timeline auto scrolls slowly. When a user mouse enters the area, it stops, and when they hover on an article, it expands and shows an icon. This can be grabbed and slide left or right with the mouse. When the mouse exits, auto scrolling starts again. All scenarios have been comped out and in Zeplin. I will be reviewing your code myself and making sure design is followed down to the em. You will be using best coding practices, bootstrap 4, svgs, CSS3, and will be keeping code in their perspective sub folders. Top Story Carousel: Website ( A user can click on the next card, hit the next chevron, or slide the card to get to the next one). Mobile ( user slides the slider with their finger) Twitter / Listen/ Shows Website ( users scrolls the bottom or clicks on the card/circle to move the top to what you clicked on) Mobile (users slides it with their finger) Video player: Play, pause, pick from the slider below Instagram Web/Mobile ( images scroll along the area slowly. User taps or clicks to open up to the Instagram viewer. A user can like it or slide images below it and then click on it to change the main image. Search Web Only (User can search the database for older news stories but name (code hint used / and further refine search by month). Gray Boxes Web/Mobile ( Google Adds go here) Account User can use Facebook/Twitter/Google to make an account as well as manually making one. The can also log in via these social sites. Web (User will see how many comments they have made, likes people have liked of their comments and how many top comments. A user can change where they live, username and have notifications or not if someone likes their comments, responds to their comment or they get top comment. Furthermore the will have ranks of participation. There will be a list of recent activity bellow it. (this is only on web, mobile will just have notifications). Header Log in or sign up modal Notifications modal. (web only / Mobile with be inside of account) Account dropdown (web only) News tip modal Search box Comments Comments will only show when a user taps load comments. Amount of comments will show above User must be signed in to comment. A user can choose newest or top comment for sort (web only / mobile will only have top comment) Every 10 comments a user will have to hit load more comments to show more. After 4 comment response, we will hide it with a cta to hide the rest, but on tap will show 4 more. A user can access their account here as well with an account dropdown from the username. A user can choose from a list of emojis to place at the right of their name. The rank of the user will go under their icon A User icon with be the first letter of their first name. When a user gets 10 or more likes, they will reach “top comment” and will be placed at the top of the article with a “top Comment” badge, as well as show at the top of the comments bellow. Article Page Image / article / author/ comments / top comment / google ads Side bar area ( trending, listen, Instagram) Write Us A user can choose from the 4 options for the subject of the email. Then it sends to an email. Donate A user can enter credit card info to make a donation. This will done with stripe integration.