Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ajustar a Pagina para Smartphone #137

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open

Ajustar a Pagina para Smartphone #137

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
4904f33
Desafio Concluido
Jamiesbrown Jan 30, 2025
4a62fad
Desafio Concluido-Comentado
Jamiesbrown Jan 30, 2025
8f0cdf1
Desafio concluido - Comentada
Jamiesbrown Jan 30, 2025
7db931d
Desafio concluido - Comentado
Jamiesbrown Jan 30, 2025
109fb36
Desafio Concluido - Comentado
Jamiesbrown Jan 30, 2025
7a549e7
Desafio CSS - Explicado
Jamiesbrown Jan 30, 2025
c5aab6e
README.md
Jamiesbrown Jan 31, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 64 additions & 0 deletions Desafio-CSS.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>1º Deafio CSS - DIO</title>
<link rel="stylesheet" href="./assets/CSS/DesafioCSS.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
</head>
<body>
<header class="banner">
<div class="banner-content">
<div class="logo">
<img src="assets/images/logo.png" title="Logotipo Trilha de CSS DIO" alt="Logotipo Trilha de CSS DIO">
</div>
<h1>Trilha de CSS da DIO</h1>
<p>A nova Trilha de CSS da DIO está disponível. Acesse já e aprenda do zero como desenvolver sites profissionais.</p>
<a href="https://www.dio.me/sign-up">
<button>Quero me inscrever</button>
</a>
</div>
</header>
<main>
<section id="course-content">
<h2>O que vou aprender?</h2>
<p>
Temos 3 módulos recheados de conteúdos do básico ao avançado para que você aprenda a
desenvolver sites profissionais utilizando somente HTML e CSS: sem nenhuma biblioteca ou framework a mais.
</p>
<div class="modules-list">
<div class="module">
<span>Módulo 01:</span> primeiros passos com CSS
</div>
<div class="module">
<span>Módulo 02:</span> trabalhando com layouts no CSS
</div>
<div class="module">
<span>Módulo 03:</span> refinando os estilos CSS das nossas páginas
</div>
</div>
</section>
<section id="transform-world">
<p>TRANSFORME O MUNDO COM A GENTE</p>
</section>
<section id="professional-challenges">
<h2>Evolua e encare novos desafios profissionais</h2>
<img src="assets/images/professional-challenges.png" title="Homem lendo depoimentos em um tablet" alt="Homem lendo depoimentos em um tablet">
<p>
Junte-se ao nosso ecossistema e transforme o mundo com a gente! Todos os dias dezenas de empresas
acessam a nossa plataforma em busca dos talentos mais criativos, dinâmicos e colaborativos,
além do conhecimento técnico.
A nossa missão é te preparar para que você conecte-se com as melhores oportunidades.
</p>
</section>
</main>
<footer>
<img class="dio-logo" src="assets/images/dio-logo.png" title="Logotipo DIO com o texto make the change" alt="Logotipo DIO com o texto make the change">
<p>Acesse <a href="https://dio.me">dio.me</a> e se cadastre agora</p>
</footer>
</body>
</html>
2 changes: 2 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
# Desafio 01: Criando sua primeira Landing Page com HTML e CSS


Bem vindo(a) ao primeiro desafio da Trilha de CSS da DIO! Nela, você vai construir sua primeira Landing Page com HTML e CSS, colocando em prática os fundamentos do CSS,
as propriedades básicas da linguagem de estilização, além de trabalhar com as unidades de medidas relativas e absolutas que aprendemos ao longo da trilha.

Expand All @@ -15,6 +16,7 @@ de estilo para que o resultado da estilização funcione.
[Link do Figma](https://www.figma.com/file/3PiokoJj9IhGDnNiWAJbz7/DIO---Desafio-01?node-id=2%3A6) contendo o protótipo do desafio para
que você possa se basear.


*Observações: para aplicar os textos em gradiente, utilize a propriedade CSS background-clip, porém, para funcionar em alguns navegadores,
é necessário utilizar a propriedade -webkit-background-clip: text;*

Expand Down
186 changes: 186 additions & 0 deletions assets/CSS/DesafioCSS.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,186 @@
body {
background-color: black; /* Fundo da Pagina*/
}

* {
font-family: 'Raleway', serif; /* Fonte ultilizada em toda pagina */
box-sizing: border-box; /* Garante que padding e borda sejam incluídos na largura e altura do elemento */
margin: 0; /* Remove margens padrão dos elementos */
}

section {
margin: 100px auto; /* Define espaçamento ao redor das seções */
}
.banner {

background-image: linear-gradient(rgba(0, 0, 0, 0.6),rgba(49, 168, 211, 0.2), rgba(0, 0, 0, 0.6) ), /* Background aplicando cor gradiente na imagem*/
url('../images/banner.png'); /* Caminho para a imagem */
background-size: cover; /* Ajusta a imagem para cobrir todo o espaço disponível */
background-position: center; /* Centraliza a imagem */
background-repeat: no-repeat; /* Evita repetição */
padding-top: 60px; /* Define o preenchimento superior (espaço) de um elemento */
height: 605px; /* ADefine altura do banner */
border: 1px solid rgba(51, 168, 219, 0.5); /* Borda azul */
position: relative; /* Permite o uso de propriedades como "top" e "left" */
}

.logo {
background-color: rgba(0, 0, 0, 0.2); /* Fundo semi-transparente */
width: 248px;
height: 214px;
margin: auto;
border-radius: 55%; /* Deixa a borda arredondada */
padding: 16px; /* Espaçamento interno */
margin-bottom: 16px; /* Espaço abaixo do logo */

}

.banner .banner-content {
display: flex; /* Layout para organizar itens em linhas ou colunas. */
flex-direction: column; /* Organiza os elementos em coluna */
justify-content: center; /* Centraliza os itens verticalmente */
align-items: center; /* Centraliza os itens horizontalmente */
text-align: center; /* Centraliza o texto */
gap: 16px; /* Espaçamento entre os elementos */
color: white;
width: 600px;
margin: auto;
}

.banner p {
font-size: 20px; /* Define o tamanho do texto */
margin: 16px 0 24px; /* Define espaçamentos ao redor do parágrafo */
}

p {
color: white;
}

.banner h1 {

font-family: "Raleway", serif;
font-optical-sizing: auto;
font-size: 40px;
font-weight: 900;
text-transform: uppercase; /* Transforma todos os caracteres em maiusculo */
background: linear-gradient(rgba(51, 168, 219, 1) , rgba(20, 114, 183, 1));
-webkit-background-clip: text; /* Garante que o fundo do texto receba o gradiente para alguns navegadores */
-webkit-text-fill-color: transparent; /* Torna o fundo do texto visível */
}

.banner .logo img {
margin: auto;
width: 100%; /* Faz a imagem ocupar toda a largura do contêiner */
height: 100%; /* Ajusta a altura da imagem */
object-fit: contain; /* Garante que a imagem se ajuste sem distorção */
}

.banner-content button {
color: rgb(49, 168, 221); /* Define a cor do texto do botão */
font-size: 16px;
font-weight: bold; /* Deixa o texto em negrito */
padding: 16px 32px;
text-transform: uppercase; /* Transforma o texto do botão em maiúsculas */
background-color: transparent; /* Define o fundo do botão como transparente */
border-image: linear-gradient(rgba(59,161,205,1), rgba(21, 144, 183, 1)); /* Adiciona um efeito gradiente na borda */
border-image-slice: 10; /* Define a "parte" da borda para o gradiente */
border-radius: 30px; /* Arredonda as bordas do botão */
}


#course-content {
width: 800px;
text-align: center;
margin: auto;

}

#course-content .modules-list {
margin: 25px 0; /* Define espaçamento acima e abaixo da lista de módulos */
}

h2 {
font-size: 32px;
color: rgb(51, 168, 219);
font-weight: bold;
letter-spacing: 4px; /* Define espaçamento entre letras */
text-transform: uppercase;
margin-bottom: 24px; /* Define espaçamento abaixo do título */
}


#course-content .modules-list .module {
color: white;
width: 600px;
margin: 0 auto 24px; /* Centraliza e adiciona espaçamento abaixo */
border: 1px solid rgb(51, 168, 219);
background-color: rgb(37, 37, 37);
padding: 16px;
border-radius: 100px;
box-shadow: inset -5px 6px 8px rgba(0, 0, 0, 0.7); /* Adiciona sombra interna */
}

.module:hover /* Não tem no layout original do desafio */
{
transition: all 0.3s ease-in-out; /* Suaviza a transição dos efeitos */
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2); /* Adiciona efeito de relevo */
transform: translateY(-5px); /* Eleva o módulo ao passar o mouse */
text-transform: uppercase; /* Transforma o texto em maiúsculas */
}


#course-content .modules-list .module span {
color: rgb(51, 169, 219);
font-size: 20px;
}

#transform-world {
height: 560px;
background-size: cover; /* Faz a imagem cobrir toda a seção */
background-image: url('../images/woman-code.png');
background-attachment: fixed; /* Mantém o fundo fixo ao rolar a página */
border-top: 1px solid rgba(51, 174, 219, 0.8);
border-bottom: 1px solid rgba(51, 174, 219, 0.8);
padding: 200px;
}

#transform-world p {
font-weight: 900;
font-size: 40px;
text-transform: lowercase; /* Mantém o texto em minúsculas */
max-width: 250px;
text-shadow: 3px 2px rgb(1, 117, 170); /* Adiciona sombra ao texto */

}

#professional-challenges {
text-align: center;
width: 800px;
}

#professional-challenges img {
margin: 32px 0;
}

footer {
padding: 60px 0;
text-align: center;
background-image: linear-gradient(rgba(50, 168, 219, 0), rgba(50, 168, 219, 0.2));
border-top: 1px solid rgba(51, 174, 219, 0.8) ;

}

footer .dio-logo {
width: 300px;

}
footer a {
color: rgb(51, 174, 219);
font-weight: bold; /* Define fonte em negrito */
text-decoration: none; /* Remove sublinhado do link */
}

button /* Não tem no layout original do desafio */
{
cursor: pointer; /* Altera o cursor para a "mãozinha" ao passar sobre o botão */
}
54 changes: 3 additions & 51 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,58 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trilha de CSS - DIO</title>
<meta http-equiv="refresh" content="0; url=./Desafio-CSS.html">
<title>Redirecionando...</title>
</head>
<body>
<header class="banner">
<div class="banner-content">
<div class="logo">
<img src="assets/images/logo.png" title="Logotipo Trilha de CSS DIO" alt="Logotipo Trilha de CSS DIO">
</div>
<h1>Trilha de CSS da DIO</h1>
<p>A nova Trilha de CSS da DIO está disponível. Acesse já e aprenda do zero como desenvolver sites profissionais.</p>
<button>Quero me inscrever</button>
</div>
</header>
<main>
<section id="course-content">
<h2>O que vou aprender?</h2>
<p>
Temos 3 módulos recheados de conteúdos do básico ao avançado para que você aprenda a
desenvolver sites profissionais utilizando somente HTML e CSS: sem nenhuma biblioteca ou framework a mais.
</p>
<div class="modules-list">
<div class="module">
<span>Módulo 01:</span> primeiros passos com CSS
</div>
<div class="module">
<span>Módulo 02:</span> trabalhando com layouts no CSS
</div>
<div class="module">
<span>Módulo 03:</span> refinando os estilos CSS das nossas páginas
</div>
</div>
</section>
<section id="transform-world">
<p>TRANSFORME O MUNDO COM A GENTE</p>
</section>
<section id="professional-challenges">
<h2>Evolua e encare novos desafios profissionais</h2>
<img src="assets/images/professional-challenges.png" title="Homem lendo depoimentos em um tablet" alt="Homem lendo depoimentos em um tablet">
<p>
Junte-se ao nosso ecossistema e transforme o mundo com a gente! Todos os dias dezenas de empresas
acessam a nossa plataforma em busca dos talentos mais criativos, dinâmicos e colaborativos,
além do conhecimento técnico.
A nossa missão é te preparar para que você conecte-se com as melhores oportunidades.
</p>
</section>
</main>
<footer>
<img class="dio-logo" src="assets/images/dio-logo.png" title="Logotipo DIO com o texto make the change" alt="Logotipo DIO com o texto make the change">
<p>Acesse <a href="https://dio.me">dio.me</a> e se cadastre agora</p>
</footer>
<p>Se não for redirecionado automaticamente, <a href="./Desafio-CSS.html">clique aqui</a>.</p>
</body>
</html>