diff --git a/smma/landing_page_hugo.md b/smma/landing_page_hugo.md new file mode 100644 index 0000000..f25a797 --- /dev/null +++ b/smma/landing_page_hugo.md @@ -0,0 +1,143 @@ +# Hugo CSS SEO-optimized landing page + +Project Structure: +``` +landing-page/ +├── archetypes/ +│ └── default.md +├── content/ +│ └── _index.md +├── layouts/ +│ ├── _default/ +│ │ ├── baseof.html +│ │ └── landing.html +│ └── partials/ +│ ├── header.html +│ ├── footer.html +│ └── cta.html +├── static/ +│ ├── css/ +│ │ └── main.css +│ └── images/ +└── config.toml +``` + +Explanation: +- The `archetypes` directory contains the default template for new content pages. +- The `content` directory holds the content for the landing page, typically in Markdown format. +- The `layouts` directory contains the HTML templates for the landing page. + - `_default/baseof.html` is the base template that defines the overall structure of the page. + - `_default/landing.html` is the specific template for the landing page. + - The `partials` directory contains reusable HTML components such as the header, footer, and CTA. +- The `static` directory holds static assets such as CSS stylesheets and images. +- The `config.toml` file contains the configuration settings for the Hugo site. + +CSS Code Base: +1. Reset and base styles: +```css +/* Reset default browser styles */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* Set base font styles */ +body { + font-family: Arial, sans-serif; + font-size: 16px; + line-height: 1.5; + color: #333; +} +``` + +2. Layout and spacing: +```css +/* Set a max-width for the content */ +.container { + max-width: 1200px; + margin: 0 auto; + padding: 20px; +} + +/* Add spacing between sections */ +section { + margin-bottom: 40px; +} +``` + +3. Typography: +```css +/* Style headings */ +h1 { + font-size: 32px; + font-weight: bold; + margin-bottom: 20px; +} + +h2 { + font-size: 24px; + font-weight: bold; + margin-bottom: 15px; +} + +/* Style paragraphs */ +p { + margin-bottom: 15px; +} +``` + +4. Call-to-action (CTA) button: +```css +/* Style the CTA button */ +.cta-button { + display: inline-block; + padding: 12px 24px; + background-color: #007bff; + color: #fff; + text-decoration: none; + border-radius: 4px; + font-weight: bold; + transition: background-color 0.3s ease; +} + +.cta-button:hover { + background-color: #0056b3; +} +``` + +5. Responsive design: +```css +/* Media queries for responsive layout */ +@media screen and (max-width: 768px) { + .container { + padding: 10px; + } + + h1 { + font-size: 28px; + } + + h2 { + font-size: 20px; + } +} +``` + +These are just a few examples of CSS styles you can apply to your landing page. You'll need to customize and expand upon them based on your specific design requirements. + +Remember to optimize your CSS for performance by minimizing file size, using efficient selectors, and leveraging browser caching. + +In the Hugo templates, you'll include the CSS file in the `` section of your `baseof.html` file: + +```html + + + +``` + +This assumes that your CSS file is located at `static/css/main.css`. + +You can then structure your landing page content in the `landing.html` template using HTML and Hugo's template language. Use the appropriate HTML tags and classes to apply the CSS styles to your content. + +Remember to test your landing page across different devices and browsers to ensure a consistent and responsive experience. \ No newline at end of file