KOKINIO - MANAGER
Edit File: README.md
# USC 2023 - Association of Mechanical Engineering Students Welcome to the documentation for the USC 2023 website! This README file provides an overview of the HTML structure and the CSS used to create the website. The website is designed for the "University Scholars Conference" (USC) organized by the Association of Mechanical Engineering Students (AMES). ## HTML Structure The website is built using standard HTML5 elements. Below is a summary of the main sections and their corresponding IDs used in the HTML file: 1. **Home Section**: The main landing section of the website. - ID: `home` 2. **About Event Section**: Provides information about the USC event and its importance. - ID: `about-event` 3. **About Organizer Section**: Introduces the Association of Mechanical Engineering Students (AMES). - ID: `about-organizer` 4. **Conference Chair Section**: Presents information about Prof. Dr. Hari Prasad Neopane, the conference chair for USC 2023. - ID: `conferencechair` 5. **Organizing Team Section**: Displays the members of the organizing team. - ID: `orgainizing-team` 6. **Key Dates Section**: Lists the important dates for USC 2023. - ID: `key-dates` 7. **Downloads Section**: Provides download links for abstract papers and the call for papers. - ID: `downloads` 8. **Venue Section**: Displays the event venue at Kathmandu University, Dhulikhel. - ID: `venue` 9. **Footer Section**: Contains contact and location information for the event. - ID: `footer` ## Classes: 1. `.preloader`: A container for the preloader animation that displays before the website loads. This class is used to style and position the preloader. 2. `.navbar`: Styles the navigation bar at the top of the page. This class is applied to the container that holds the navigation links. 3. `.logo`: Styles the logo container within the navigation bar. This class is used to apply styles to the logo image. 4. `.links`: Styles the links container within the navigation bar for desktop view. This class is applied to the container that holds navigation links visible on larger screens. 5. `.dropdown`: Styles the links container within the navigation bar for mobile view. This class is applied to the container that holds navigation links visible on smaller screens, and it appears as a dropdown menu when the toggle button is activated. 6. `.toggle-btn`: Styles the toggle button (hamburger icon) used to toggle the mobile navigation menu. This class is applied to the element representing the toggle button. 7. `.home-text`: Styles the content container for the home section. This class is applied to the container that holds the main title and subtitle of the home section. 8. `.title`: Styles the main title throughout the website. This class is used to apply consistent styling to the main titles across the website. 9. `.sub-title`: Styles the sub-title (or subtitle) throughout the website. This class is used to apply consistent styling to the subtitles across the website. 10. `.about-event-content`: Styles the content container for the "About Event" section. This class is applied to the container that holds the content of the "About Event" section. 11. `.about-organizer-content`: Styles the content container for the "About Organizer" section. This class is applied to the container that holds the content of the "About Organizer" section. 12. `.conference-chair-content`: Styles the content container for the "Conference Chair" section. This class is applied to the container that holds the content of the "Conference Chair" section. 13. `.our-team`: Styles the container for the organizing team section. This class is applied to the container that holds the entire organizing team section. 14. `.item`: Styles each individual team member within the organizing team section. This class is applied to each element representing an individual team member. 15. `.key-dates-content`: Styles the content container for the "Key Dates" section. This class is applied to the container that holds the content of the "Key Dates" section. 16. `.list-container`: Styles the container for the list items within the "Key Dates" section. This class is applied to the container that holds the list of important dates. 17. `.download-container`: Styles the container for the download buttons within the "Downloads" section. This class is applied to the container that holds the download buttons. 18. `.venue-container`: Styles the container for the venue information within the "Venue" section. This class is applied to the container that holds the venue information. 19. `.footer-container`: Styles the container for the footer section. This class is applied to the container that holds the entire footer section. 20. `.location`: Styles the contact location information within the footer. This class is applied to the element that holds the contact location. 21. `.contact`: Styles the contact information within the footer. This class is applied to the element that holds the contact information. ## CSS Styling The website uses several CSS files to style its content. Below is a summary of the CSS files used: 1. **style.css**: The main CSS file, responsible for styling various elements throughout the website. 2. **tablet.css**: Contains styles specific to tablet devices (between 501px and 900px screen width). 3. **smartphone.css**: Contains styles specific to smartphones (max-width: 500px). 4. **pre-site.css**: Styles used for the preloader animation. 5. **all.min.css**: External CSS file imported from a Content Delivery Network (CDN) for the Font Awesome icon library. ## External Resources The website also utilizes the Font Awesome library through a CDN to provide scalable vector icons. 1. **Font Awesome**: Version 6.2.0 (https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css) ------------------------------