teekaytech /
HTML-CSS-capstone-project
A static fully-responsive website built for a Forex Trading Company that shows a detailed description of an upcoming conference. Built with HTML5, CSS, Boostrap & Media Queries.
24/100 healthLoading repository data…
Bishwajit-2810 / repository
A detailed, static HTML and inline CSS recreation of a typical The New York Times homepage. This project serves as an exercise in front-end development.
A transparent discovery signal based on current public GitHub metadata.
This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.
A detailed, static HTML and inline CSS recreation of a typical The New York Times homepage. This project serves as an exercise in front-end development, focusing on replicating a complex newspaper layout using modern web design techniques like CSS Grid and Flexbox, all implemented directly through style attributes.
Georgia/Times New Roman) and a restrained, newspaper-style color palette.style attributes, showcasing proficiency with atomic styling or email-template-like construction.To illustrate the project, this table compares the original design (from original_page) to the final output (from build).
Original Page Reference (original_page/) | Final Built Page (build/) |
|---|---|
| Note: Assets are sourced from the respective folders. | The live preview above shows a rendering of the final HTML. |
style attributes for presentation, including Flexbox and CSS Grid)To run this project, simply save the provided HTML content and open it in a web browser. The core image assets required for local display are located in the images directory (as referenced in index.html).
Clone the repository:
git clone https://github.com/Bishwajit-2810/The_New_York_Times
cd The_New_York_Times
File Structure Check: Ensure the following directory structure is maintained:
.
├── build/ # Final output/screenshot images
├── images/ # Images used by index.html (1.png, 2.png, 3.png, 4.ico)
├── index.html # The main project file
└── original_page/ # Reference images
Open in Browser: Double-click index.html or drag the file into your preferred web browser.
Bishwajit Chakraborty
This project is a design exercise created by Bishwajit Chakraborty and is not affiliated with The New York Times Company. All rights and trademarks belong to their respective owners.
© 2025 The New York Times Company (Bishwajit Chakraborty). All rights reserved.
Selected from shared topics, language and repository description—not editorial ratings.
teekaytech /
A static fully-responsive website built for a Forex Trading Company that shows a detailed description of an upcoming conference. Built with HTML5, CSS, Boostrap & Media Queries.
24/100 healthWellington-lopes /
:star2: This is a static website project that showcases a personal resume built using HTML and CSS. This interactive resume provides detailed information about your experience, education, and skills in an elegant and easy-to-read format.
34/100 healthBlue-Rangoon /
Airline Ticket Booking System is a full-stack domestic flight reservation project that allows users to sign up, book tickets, select airlines, aircraft, class, and seats, and generate a detailed receipt. Built using Java (Spring Boot) and HTML, CSS, JavaScript, it demonstrates core OOP concepts without database integration.
48/100 healthjagadeesh-1431 /
LUNO is a multi-page static website built with HTML5 and CSS3, themed around lunar space exploration. It features a landing page with an animated login/register modal, a detailed Luna 25 mission overview (objectives, technical specs, instruments), a fictional Moon Rocket Services catalog, a contact form, and a developer about page.
55/100 healthshwetakumawat /
The goal of the application is: * To make it easier for golfers in cities to find a golf course near their location * To create a broader experience when booking tee times, not only pick a time, but also to read more about the golf course itself. The users goals are: * To easily find a tee time close to a big city. ## UX #### Ideal users are: * English speaking * Golfer * Living in/visiting Stockholm, Gothenburg or Malmö #### Users are searching for: * An application where they can browse golf courses in their area or big cities in Sweden * An application where they easily can book a tee time on the golf course of their coice #### This application make it easy for users to share and gain inspiraton because: * It is intuitive and easy to use * It contains only neccesary features, thus reaching the statement above * The application provides filter functionality which makes it easier for the user to find what they want #### User stories * As a new user I want to create an account to be able to book a tee time * As a user I want to get a brief information of each golf course (location, price, course description) * As a user I want to be able to view all courses in my area * As a user I want to be able to sort golf courses on rating, green fee price * As a user I want to see the available tee times when trying to book * As a user I want to pay my greenfee right after booking the tee time. * As a returning user I want to see what tee times I have booked and cancel or reschedule them. #### Balsamiq mockups To see the initial wireframes for the application click <a href="static/media/wireframes/big-city-golf-firstdraft.pdf" target="_blank">here</a> ## Featureas ### Navigation bar and footer <img src="static/media/demo/demonavbar.png" alt="Demonstration navbar" style="max-height:300px;"> On the top of the website we find a fixed navbar which conotains the optons "Home", "Courses, "About" and "Login/Signup". If the user is logged in the option "Profile" will appear which takes the logged in user to their profile page. If the user have a tee time in their 'shopping bag' the option "Pay greenfee" will appear on the top right. If the user us logged in, the "Login/Signup" button is changed to "Logout". The footer is a mirror of the top navbar but in a simpler format. The footer do not include the login buttons, profile option or the pay greenfee button. In the footer we also find a all rights revserved statement. ### Home page <img src="static/media/demo/demohomepage.png" alt="Demonstration hompage" style="max-height:300px;"> The home page is a clean page with little information and plenty of space between the different objects on the page. A welcoming video of a group of golfers is autoplaying and a short statement is presented next to it. Another button for signing up is added below the statement which is exhange for a "find tee time" button if user is logged in (which redirects the user to the courses page). further down on the page we find some quotes why golf is good for stress releif and a short presentation about the application. On the button of the page another golf picture with the button for searching the courses is presented. ### Courses page/Course detail page <img src="static/media/demo/democourses.png" alt="Demonstration courses" style="max-height:300px;"> On the courses page the user find all the courses in the database. The user can choose to sort the courses based on rating, price or location. The user can also search for a golf corse by passing in text in the input field. For each course a picture, price and rating is presented. The user can choose to read more about the specific course or book a tee time right away. If the user click "read more" the user is sent to a course detail page which include more detailed information about the specific course. If the user click book tee tinme, a modal pops up for the specifc course and the user then need to pass in what date and time he/she want to play. When the booking form is completed the user get redirected to the checkout page to complete their payment. ### Pay greenfee page <img src="static/media/demo/demopay.png" alt="Demonstration checkout" style="max-height:300px;"> The pay greenfee page (or the checkout page) is displaying the tee times the user want to book/pay for and the payment form (the information needed for passing the purchase to Stripe) If the payment form is completed correctly the user is redirected to their profile page. ### Profile page <img src="static/media/demo/demoprofile.png" alt="Demonstration profilepage" style="max-height:300px;"> On the users profile page, the user can see all the teetimes they have purchased and their profile information. The profile infomration is editable by using the presented form. For every booked tee time there is a delete tee time button. If clicked, a warning message appear which the user need to accept in order for the deletion of the tee time to be successful. ### About page The about page is a simple page whit a Big city golf logo and some statements what the 'company' stands for and wish to provide. ### Database <img src="static/media/demo/demodatabase.png" alt="Demonstration database" style="max-height:300px;"> The database used in development mode is sqllite3 and in Heroku PostgreSQL. The database has a hierarchical structure where UserProfile is dependent on User, Courses of Districts and so on. ## Existing features * Navigation bar - Collabsable when screen size is below 993 pixels, different options depending if user is logged in or not * Login functionality - Fully functional login and user registration process * CR(U)D - Users are able to upload, read and delete content in the database. * Sorting - Users are able to sort through golf courses. * Stripe payment functionality ## Features left to implement * Comments - to make the application more interactive a commenting functionality would be neccesary * A date time picker to make the choice of tee time simpler. * Webhooks to secure the Stripe payment functionality ## Technologies used * The website was built using HTML5 and CSS3. * JavaScript was used to build an interactive webpage and to connect to an API. * Python was used to build the structure and functionality of the back end. * Django was used as the framwork to make the development of the application more simplistic. * [Heroku](https://www.heroku.com/) was used to deploye the live version of the application. * [Bootstrap](https://www.bootstrap.com/) was used as a library for design and layout. * The website as built and developed using [GitPod](https://www.gitpod.io/) as IDE. * The logotype was created using [LogoMakr](https://logomakr.com). * [W3C's HTLM Validator](https://validator.w3.org/) were used to validate the websites HTML code. * [W3C's CSS Validator](https://validator.w3.org/) were used to validate the websites CSS code. * [JSHint](https://jshint.com/) were used to validate the websites JavaScript code.
27/100 health