Business Website by @connor.halde - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

<pre>Indica una parte di testo preformattato
widthImposta la larghezza di un elemento HTML
rowspanDefinisce il numero di righe su cui una cella di una tabella deve estendersi.
crossoriginGestisce richieste tra documenti provenienti da origini differenti.
<aside>Definisce un contenuto separato dal testo perincipale
acceptDefinisce e filtra il formato dei file per il tag <input type=file>

Users

Log in to search for users

Explore

Find inspiration

LEZIONE 1 BOLLEAN

GreenBox - Giardinaggio a casa tua

le miniere di nuxis

Countdown fine anno

Young Corporate Lawyer - Experienc

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Business Website</title>
    <!-- Linking to external CSS -->
    <link rel="stylesheet" href="styles.css">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>

    <!-- Header Section -->
    <header>
        <div class="logo">
            <img src="data:image/png;base64,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" alt="Business Logo">
        </div>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#about">About Us</a></li>
                <li><a href="https://mail.google.com/mail/u/0/#inbox?compose=XBcJkvfTjVgsFgCKjJzRLKbKZdLjmrmwZThvjbXXSGhSplkxlrxPDVCshMgKDHFfxgDCRhvJZcnXPmVl">Contact</a></li>
            </ul>
        </nav>
    </header>

    <!-- Main Content Section -->
    <main>
        <!-- Headline -->
        <h1>DIY Projects</h1>

        <!-- Paragraph -->
        <p>I offer helpful and useful DIY projects that you can do by yourself or with your kids!</p>

        <!-- Two Div Sections -->
        <div class="service-card">
            <h2>Consulting Services</h2>
            <p>We provide links and tips that help construct your project.</p>
        </div>

        <div class="service-card">
            <h2>Marketing Strategies</h2>
            <p>We create helpful tips and tricks to help you find easier ways around things.</p>
        </div>
    </main>

    <!-- Footer Section -->
    <footer>
        <p>&copy; 2024 All Your Needed DIYs | All Rights Reserved</p>
    </footer>

</body>
</html>

body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
}

h1, h2 {
    color: #2c3e50;
}

/* Header Styling */
header {
    background-color: #1262b3;
    padding: 10px;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header .logo img {
    width: 50px;
    height: auto;
}

nav ul {
    list-style-type: none;
    padding: 0;
    display: flex;
    gap: 15px;
}

nav a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
}

nav a:hover {
    text-decoration: underline;
}

/* Main Section Styling */
main {
    padding: 20px;
}

.service-card {
    background-color: #fff;
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Footer Styling */
footer {
    background-color: #34495e;
    color: #fff;
    text-align: center;
    padding: 10px;
}

/* CSS Font Properties */
h1 {
    font-size: 2.5rem;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
}

p {
    font-size: 1rem;
    line-height: 1.6;
}

.service-card h2 {
    font-size: 1.8rem;
    font-weight: 700;
}

/* Page Properties */
body {
    background-color: #f4f4f4;
}

header {
    background-color: #34495e;
    padding: 15px;
}

footer {
    background-color: #34495e;
    padding: 15px;
}

/* Pseudo-Selector for Anchor Hover Effect */
nav a:hover {
    color: #f39c12;
}

/* Box Model Modifications */
.service-card {
    padding: 20px;
    margin: 15px;
    border-radius: 8px;
}

header .logo img {
    max-width: 100%;
    height: auto;
}

/* Position Properties */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

main {
    margin-top: 70px; /* To prevent content from being hidden under fixed header */
}
Explanation of Requirements and How They're Implemented:
HTML Structure:

Image: The logo image is added in the header section with the img tag.
Head: Includes the title of the page, a link to the external CSS file, and a link to the Google Fonts API for the 'Roboto' font.
Header and Footer: A header and footer are provided to structure the top and bottom of the page. The header also contains navigation links, including an email link (mailto:).
Paragraph Tag: Used in the main content area for a brief description of services.
Headline Tag: <h1> for the main headline and <h2> for section headings in each service card.
Two Divs: Two service cards are created using div elements, each with a heading and description.
Anchor to Email: The Contact link in the navigation bar is a mailto link, allowing users to send an email directly.
CSS Styling:

Font Properties: The website uses the 'Roboto' font, with styling applied to headings and paragraph tags.
Page Properties: The background color for the page and header/footer colors are set for a clean and professional look.
Pseudo Selector: A :hover effect is applied to anchor links to change their color when the user hovers over them.
Box Modifications: Service cards have padding, margin, and border-radius applied to make them more visually appealing.
Position Properties: The header is fixed at the top of the page using position: fixed, and the main content has a top margin to prevent overlap with the fixed header.