Business Website by @connor.halde - Codewith.it

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

Referenze

minImposta il valore numerico o temporale minimo per un elemento input
<address> Definisce una sezione contenente indirizzi, contatti e informazioni
<thead>Definisce un gruppo di intestazione all'interno di una tabella.
animation-directionProprietà CSS per definire la direzione di esecuzione di un'animazione
classDefinisce una o più classi per elemento
<select>Usato per creare un menu a tendina.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Con nome bandiera

inserimento immagini in un testo

One Magic Moment - Eventi Unici

CAPODANNO SENZA LUCI

Form per il torneo misto dis

Appunti Informatica

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!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.