My fist challenge
Tags: frontendchallenge, devchallenge, css
Published: 2024-04-28 21:52:32

It's my first participation. Regardless of the result, he hopes to continue participating in new competitions.

_This is a submission for [Frontend Challenge v24.04.17](https://dev.to/devteam/join-us-for-the-next-frontend-challenge-earth-day-edition-52e4), CSS Art: Earth Day._

## Inspiration
<!-- What are you highlighting today? -->

## Demo 
<!-- Show us your CSS Art! You can directly embed an editor into this post (see the FAQ section of the challenge page) or you can share an image of your project and share a public link to the code. -->

`/* Estilo global */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header {
    background-color: #87CEEB;
    color: #fff;
    padding: 80px;
    text-align: center;
}

h1 {
    font-size: 3em;
    font-weight: 30%;
    transition: 0.5s ease-in-out;
    text-shadow: 1px 1px var(--shadow-colors);
    display: flex;
    justify-content: center;
    align-items: center;
    --texts: #333;
    --background: #fdfdfd;
    --background-semi: #f6f6f6c0;
    --background-card: #f8f8f8;
    --shadow-colors: #33333380;
    --color-line: #33333340;
}

section {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 10px auto;
    max-width: 800px; /* Ajuste conforme necessário */
}

article {
    flex: 0 1 calc(30% - 20px); /* Calcula a largura de cada coluna */
    border-radius: 5px;
    margin-bottom: 20px;
    background-color: #f9f9f9;
    padding: 20px;
    box-shadow: 1px 1px 4px 1px #87CEEB;
}

/* Ajuste para dispositivos móveis */
@media screen and (max-width: 600px) {
    section {
        flex-direction: column; /* Altera para uma coluna */
    }

    article {
        flex: 1 0 auto; /* Volta para uma coluna completa */
    }
}

/* Estilo das imagens */
.article-image {
    border-radius: 5px;
    width: 100%; /* Garante que a imagem ocupe toda a largura do article */
    height: auto; /* Permite que a altura seja ajustada automaticamente, mantendo a proporção original */
    max-height: 200px; /* Altura máxima para garantir que as imagens não fiquem muito grandes */
    object-fit: cover; /* Mantém a proporção da imagem e corta o excesso */
}

/* Efeito de destaque no hover */
article:hover {
    transform: scale(1.02); /* Aumenta o tamanho do article no hover */
}

h2 {
    color: #34495e;
    font-weight: 30%;
    transition: 0.5s ease-in-out;
    text-shadow: 1px 1px var(--shadow-colors);
    display: flex;
    justify-content: center;
    align-items: center;
    --texts: #333;
    --background: #fdfdfd;
    --background-semi: #f6f6f6c0;
    --background-card: #f8f8f8;
    --shadow-colors: #f4f0f080;
    --color-line: #33333340;
}

.action-call {
    background-color: #3498db;
    color: #fff;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    width: 100%;
}

.action-call a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    border: 0.51px solid #fff;
    padding: 10px 20px;
    border-radius: 10px;
    background-color: #2ecc71;

    
}

.action-call a:hover {
    text-decoration: none;
    background-color: #fff;
    color: #3498db;
}

.testimonial, .events {
    background-color: #ecf0f1;
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px;
}

.testimonial p:first-child {
    font-style: italic;
    margin-bottom: 10px;
}

/* Estilo do rodapé */
footer {
    background-color: #34495e;
    color: #fff;
    padding: 20px;
    text-align: center;
}

/* Estilo das listas */
ul {
    list-style-type: none;
    padding: 0;
}

li {
    margin-bottom: 10px;
}

/* Estilo dos links */
a {
    color: #3498db;
    text-decoration: none;
}

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zlnuw6d7q9s5ynmjn37q.png)

[https://neppersac.github.io/EarthDay/]


## Journey 
<!-- Tell us about your process, what you learned, anything you are particularly proud of, what you hope to do next, etc. -->

<!-- Team Submissions: Please pick one member to publish the submission and credit teammates by listing their DEV usernames directly in the body of the post. -->

<!-- We encourage you to consider adding a license for your code. -->

<!-- Don't forget to add a cover image to your post (if you want). -->

<!-- Thanks for participating! -->