Skip to content

Adicionando exercicio 2 Javascript #208

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

Open
marisavieira wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Adicionando exercicio 2 Javascript #208

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
93aaf31
adicionando exercicio 1 e 2 de css
marisavieira Sep 15, 2020
99501db
entrega exericio aula 1 de lógica de programação
marisavieira Sep 17, 2020
35df4e1
adicionando exericio 2 de logica
marisavieira Sep 20, 2020
bcb336e
exercicio 1 javascript
marisavieira Sep 23, 2020
d9079d4
adicionando exercicio numero 2
marisavieira Sep 30, 2020
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
92 changes: 92 additions & 0 deletions aula-css/exercicios/photo-grid/aula-1/css/details.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap');

html, body{
font-family: 'Quicksand', sans-serif;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
background-color: #f4f4f4;
width: 100%;
}


header{
width:70%;
display: flex;
align-items: center;
}
.voltar{
text-decoration: none;
font-size: 25px;
font-weight: bold;
color: black;
}
header h1{
margin-left: 30%;
}

.container{
background-color: white;
width: 350px;
display: flex;
flex-direction: column;
margin-bottom: 30px;
}
.img1, .img2, .img3, .img4, .img5, .img6{
background-size: cover;
background-position: center;
width: 350px;
height: 350px;
background-color: white;
}
.img1{
background-image: url("https://media1.popsugar-assets.com/files/thumbor/RR37Tcj_OHT944v5gq8wyiq9BbM/fit-in/2048xorig/filters:format_auto-!!-:strip_icc-!!-/2020/09/09/688/n/1922564/22df9f7ef43433d2_AL1020_SELENA_4_1_/i/Selena-Gomez-wearing-Romeo-Hunte-jacket-Way-We-Wore-vintage.jpg");
}
.img2{
background-image: url("https://pbs.twimg.com/media/EheWr2GXsAEMBN2.jpg");
}
.img3{
background-image: url("https://pbs.twimg.com/media/EheXmrcXcAYI4aY.jpg");
}
.img4{
background-image: url("https://i.pinimg.com/originals/b7/c3/4f/b7c34f0c9a0f402a6e7d81fbf4776dbb.jpg");
}
.img5{
background-image: url("https://4.bp.blogspot.com/-gtNbN4zmOdU/Ur2dG6Un_2I/AAAAAAAAA5c/strbZDqWCCo/s1600/selena-gomez-teen-vogue-december-2013-hq-03.jpg");
background-size: cover;
background-position: top;
width: 300px;
height: 300px;
background-color: white;
}
.img6{
background-image: url("https://www.mendozapost.com/files/image/136/136903/59b408eb93060_1420_!.jpg?s=1aa678c551c88ac8ba559968214e5047&d=1504987597");
}

.card-lateral{
border: 1px solid gray;
border-left: none;
width: 349px;
background-color: white;
}
.perfil{
display: flex;
align-items: center;
padding-left: 20px;
border-bottom: 1px solid gray;
height: 90px;
}
.imgPerfil{
height: 40px;
border-radius: 50%;
}
.usuario{
margin-left: 15px;
font-weight: bold;
font-size: 18px;
}
.legenda{
margin: 30px 40px;
}
97 changes: 97 additions & 0 deletions aula-css/exercicios/photo-grid/aula-1/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap');

html, body{
font-family: 'Quicksand', sans-serif;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
background-color: #f4f4f4;
}

body{
margin-bottom: 30px;
}

header{
padding: 50px;
width:90%;
display: flex;
align-items: center;
}
.divImg{
width: 150px;
height: 150px;
}
.imgPerfil{
width: 150px;
border-radius: 50%;
}
.divBio{
color: black;
margin-left: 50px;
height: 150px;
}
.divBio p{
font-weight: bold;
}


.container{
display: flex;
flex-direction: column;
align-content: center;
}
.card{
margin: 15px 15px 0 15px;
text-decoration: none;
}
.foto-conteudo{
text-decoration: none;
}
.descricao{
display: flex;
align-items: center;;
background-color: white;
padding: 0 15px;
}
.descricao img{
width: 30px;
}
.descricao p{
color: black;
margin-left: 15px;
font-weight: bold;
font-size: 15px;
}
.img1, .img2, .img3, .img4, .img6{
background-size: cover;
background-position: center;
width: 300px;
height: 300px;
background-color: white;
}
.img1{
background-image: url("https://media1.popsugar-assets.com/files/thumbor/RR37Tcj_OHT944v5gq8wyiq9BbM/fit-in/2048xorig/filters:format_auto-!!-:strip_icc-!!-/2020/09/09/688/n/1922564/22df9f7ef43433d2_AL1020_SELENA_4_1_/i/Selena-Gomez-wearing-Romeo-Hunte-jacket-Way-We-Wore-vintage.jpg");
}
.img2{
background-image: url("https://pbs.twimg.com/media/EheWr2GXsAEMBN2.jpg");
}
.img3{
background-image: url("https://pbs.twimg.com/media/EheXmrcXcAYI4aY.jpg");
}
.img4{
background-image: url("https://i.pinimg.com/originals/b7/c3/4f/b7c34f0c9a0f402a6e7d81fbf4776dbb.jpg");
}
.img5{
background-image: url("https://4.bp.blogspot.com/-gtNbN4zmOdU/Ur2dG6Un_2I/AAAAAAAAA5c/strbZDqWCCo/s1600/selena-gomez-teen-vogue-december-2013-hq-03.jpg");
background-size: cover;
background-position: top;
width: 300px;
height: 300px;
background-color: white;
}
.img6{
background-image: url("https://www.mendozapost.com/files/image/136/136903/59b408eb93060_1420_!.jpg?s=1aa678c551c88ac8ba559968214e5047&d=1504987597");
}
Binary file added aula-css/exercicios/photo-grid/aula-1/imagens/coracao.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
67 changes: 67 additions & 0 deletions aula-css/exercicios/photo-grid/aula-1/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Photo-Grid</title>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<header>
<div class="divImg">
<img class="imgPerfil" src="https://avatars2.githubusercontent.com/u/58489737?s=460&u=c97b0b2544cbd78d5d1970e94a4819d3efb3c6f0&v=4">
</div>
<div class="divBio">
<h1> Marisa's Photo Grid </h1>
<p class="bio"> 8/8 Ciência da Computação, Passos - MG </p>
</div>
</header>

<section class=container>
<a class="card" href="paginas/detalhes-01.html">
<div class="img1" alt="Selena Gomez "></div>
<div class="descricao">
<img src="imagens/coracao.png"/>
<p>Selena Gomez posa para ...</p>
</div>
</a>
<a class="card" href="paginas/detalhes-02.html">
<div class="img2" alt="Selena Gomez "></div>
<div class="descricao">
<img src="imagens/coracao.png"/>
<p>Selena Gomez diz ter controle ...</p>
</div>
</a>
<a class="card" href="paginas/detalhes-03.html">
<div class="img3" alt="Selena Gomez "></div>
<div class="descricao">
<img src="imagens/coracao.png"/>
<p>Rare Beauty, marca de Selena ...</p>
</div>
</a>
</section>
<section class=container>
<a class="card" href="paginas/detalhes-04.html">
<div class="img4" alt="Selena Gomez "></div>
<div class="descricao">
<img src="imagens/coracao.png"/>
<p>Em consequência da Lúpus, ...</p>
</div>
</a>
<a class="card" href="paginas/detalhes-05.html">
<div class="img5" alt="Selena Gomez "></div>
<div class="descricao">
<img src="imagens/coracao.png"/>
<p>Selena Marie Gomez é uma c ...</p>
</div>
</a>
<a class="card" href="paginas/detalhes-06.html">
<div class="img6" alt="Selena Gomez"></div>
<div class="descricao">
<img src="imagens/coracao.png"/>
<p>Selena Gomez nasceu em ...</p>
</div>
</a>
</section>
</body>
</html>
26 changes: 26 additions & 0 deletions aula-css/exercicios/photo-grid/aula-1/paginas/detalhes-01.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Photo-Grid | Details </title>
<link href="../css/details.css" rel="stylesheet">
</head>
<body>
<header>
<a class="voltar" href="../index.html"> < Voltar </a>
<h1> Marisa's Photo Grid </h1>
</header>

<section class=container>
<div class="img1" alt="Selena Gomez "></div>
<div class="card-lateral">
<div class="perfil">
<img class="imgPerfil" src="https://avatars2.githubusercontent.com/u/58489737?s=460&u=c97b0b2544cbd78d5d1970e94a4819d3efb3c6f0&v=4">
<p class="usuario"> marisavieira </p>
</div>
<p class="legenda"> Selena posta para a revista Allure para capa de Outubro e responde a algumas perguntas sobre seus produtos favoritos e os maiores segredos da beleza em sua entrevista exclusiva para a revista. </p>
</div>
</section>
</body>
</html>
26 changes: 26 additions & 0 deletions aula-css/exercicios/photo-grid/aula-1/paginas/detalhes-02.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Photo-Grid | Details </title>
<link href="../css/details.css" rel="stylesheet">
</head>
<body>
<header>
<a class="voltar" href="../index.html"> < Voltar </a>
<h1> Marisa's Photo Grid </h1>
</header>

<section class=container>
<div class="img2" alt="Selena Gomez "></div>
<div class="card-lateral">
<div class="perfil">
<img class="imgPerfil" src="https://avatars2.githubusercontent.com/u/58489737?s=460&u=c97b0b2544cbd78d5d1970e94a4819d3efb3c6f0&v=4">
<p class="usuario"> marisavieira </p>
</div>
<p class="legenda"> Selena Gomez diz ter controle total de sua vida. Para a revista Allure a estrela pop, atriz, produtora e agora empresária de beleza, diz que ainda não encontrou um desafio que não consiga dominar. </p>
</div>
</section>
</body>
</html>
26 changes: 26 additions & 0 deletions aula-css/exercicios/photo-grid/aula-1/paginas/detalhes-03.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Photo-Grid | Details </title>
<link href="../css/details.css" rel="stylesheet">
</head>
<body>
<header>
<a class="voltar" href="../index.html"> < Voltar </a>
<h1> Marisa's Photo Grid </h1>
</header>

<section class=container>
<div class="img3" alt="Selena Gomez "></div>
<div class="card-lateral">
<div class="perfil">
<img class="imgPerfil" src="https://avatars2.githubusercontent.com/u/58489737?s=460&u=c97b0b2544cbd78d5d1970e94a4819d3efb3c6f0&v=4">
<p class="usuario"> marisavieira </p>
</div>
<p class="legenda"> Rare Beauty, marca de Selena Gomez está arrecadando 100 milhões de dólares para serviços de saúde mental. </p>
</div>
</section>
</body>
</html>
26 changes: 26 additions & 0 deletions aula-css/exercicios/photo-grid/aula-1/paginas/detalhes-04.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Photo-Grid | Details </title>
<link href="../css/details.css" rel="stylesheet">
</head>
<body>
<header>
<a class="voltar" href="../index.html"> < Voltar </a>
<h1> Marisa's Photo Grid </h1>
</header>

<section class=container>
<div class="img4" alt="Selena Gomez "></div>
<div class="card-lateral">
<div class="perfil">
<img class="imgPerfil" src="https://avatars2.githubusercontent.com/u/58489737?s=460&u=c97b0b2544cbd78d5d1970e94a4819d3efb3c6f0&v=4">
<p class="usuario"> marisavieira </p>
</div>
<p class="legenda"> Em consequência da Lúpus, doença auto-imune que Selena é portadora, no dia 19 de junho de 2017, ela teve que realizar um transplante de rim doado por uma das suas melhores amigas, Francia Raísa. Apesar de ter sido uma cirurgia com algumas complicações, felizmente, Selena conseguiu sobreviver. </p>
</div>
</section>
</body>
</html>
Loading