Skip to content

Commit

Permalink
first-commit-aluraplay
Browse files Browse the repository at this point in the history
  • Loading branch information
zzSalvatore committed Jul 10, 2023
0 parents commit ca9144f
Show file tree
Hide file tree
Showing 6,691 changed files with 626,699 additions and 0 deletions.
The diff you're trying to view is too large. We only load the first 3000 changed files.
19 changes: 19 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<p align="center"> <img src="https://imgur.com/J3hD21O.png" alt="Javascript: criando requisições"> </p>

<hr>

<p align="center"> <img src="https://github.com/MonicaHillman/aluraplay-requisicoes/blob/main/img/logo.png" alt="Logo da Alura"> </p>
<p align="center">Página inicial e formulário de cadastro de vídeos da AluraPlay, uma plataforma de compartilhamento de vídeos.</p>

## Tecnologias utilizadas durante o curso
* Javascript
* NodeJS
* Json-server

## Tecnologias utilizadas no projeto
* HTML
* CSS

## Screenshots
![Screenshot da tela inicial do AluraPlay](https://imgur.com/aymxEsh.png)
![Screenshot da tela do formulário do AluraPlay](https://imgur.com/ShNADf2.png)
48 changes: 48 additions & 0 deletions css/estilos-form.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
.container {
display: grid;
align-items: center;
justify-content: center;
height: 100vh;
}

.container__formulario {
margin: 3em 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: initial;
}

.formulario__campo {
margin: 1em;
font-size: 1.6em;
}

.formulario__titulo {
color: var(--azul-medio);
font-weight: bold;
font-size: 21px;
}

.campo__escrita {
width: 50vw;
border-radius: 24px;
display: block;
color: black;
padding: 1em
}

.campo__etiqueta {
line-height: 1.5;
padding: 0 0 .1em 1em;
font-weight: 700;
color: var(--azul-medio);
}

.formulario__botao {
padding: 1em 3em;
margin: 2em 0;
border-radius: 24px;
background-color: var(--azul-escuro);
}
108 changes: 108 additions & 0 deletions css/estilos.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
*,
*::before,
*::after {
--azul-escuro: #154580;
--azul-medio: #3970BE;
--azul-claro: #E5F1FF;
--cinza-texto: #444444;
--cinza-claro: #ECECEC;
box-sizing: border-box;
}

body {
font-family: Roboto, Arial, Helvetica, sans-serif;
background-color: var(--azul-claro);
position: relative;
width: 100%;
height: 100vh;
overflow: auto;
font-size: 14px;
color: white;
box-sizing: border-box;
text-align: center;
}

/* ESTILOS DO HEADER */

.cabecalho {
background-color: white;
position: fixed;
top: 0;
height: 80px;
width: 100%;
padding: 0 25px;
z-index: 2;
}

.logo {
background-image: url(../img/cabecalho/Logo.png);
background-repeat: no-repeat;
padding: 15px 65px;
cursor: pointer;
}


.cabecalho__videos {
background-image: url(../img/cabecalho/video_call.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
padding: 15px;
}

/* ESTILOS DA SEÇÃO VÍDEOS */

.videos__container {
color: black;
}

.mensagem {
display: grid;
align-items: center;
justify-content: center;
height: 100vh;
}

.mensagem__imagem {
width: 30%;
}

.mensagem__titulo {
color: var(--azul-medio);
font-weight: bold;
font-size: 21px;
}

.pesquisar__input {
width: 260px;
height: 32px;
border: 1px solid rgb(211, 211, 211);
font-size: 16px;
padding: 3px 8px;
border: 1px solid rgb(211, 211, 211);
color: var(--azul-escuro);
}

.pesquisar__botao {
background-image: url(../img/cabecalho/search.png);
background-repeat: no-repeat;
background-position: center;
border: 1px solid rgb(211, 211, 211);
background-color: #F9F9F9;
border-left: none;
padding: 15px 15px;
cursor: pointer;
}

.cabecalho__pesquisar {
display: flex;
justify-content: center;
}

@media(min-width: 834px) {

body {
height: 100vh;
}

}
74 changes: 74 additions & 0 deletions css/flexbox.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
/* Aula 1 */
.cabecalho {
display: flex;
justify-content: space-between;
align-items: center;
}






/* SEÇÃO VÍDEOS */

.videos__container {
display: flex;
flex-wrap: wrap;
gap: 10px;
z-index: 1;
padding: 153px 20px 10px 20px;
}

.videos__item {
flex-grow: 1;
height: 303px;
width: 300px;
}

/* grid vídeos */

.descricao-video {
margin-top: 1rem;
display: grid;
text-align: start;
column-gap: 1rem;
row-gap: 10px;
grid-template-columns: auto 1fr;
}

.descricao-video img {
grid-area: 1 / 1 / 3 / 2;
}

.descricao-video h3 {
grid-area: 1 / 2 / 2 / 3;
font-weight: 700;
color: #444444;
}

.descricao-video p {
grid-area: 2 / 2 / 3 / 3;
font-size: 14px;
color: #444444;
}

.descricao-video img {
width: 2em;
height: 2em;
border-radius: 100%;
}

@media(min-width: 834px) {

.videos__container {
padding-left: 10%;
padding-right: 10%;
}
}

@media(min-width: 1440px) {
.videos__item {
width: 288px;
}
}
86 changes: 86 additions & 0 deletions css/reset.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

a {
color: inherit;
text-decoration: none;
}

img {
width: inherit;
}

button {
font-family: inherit;
font-size: inherit;
color: inherit;
font-weight: inherit;
padding: 0;
border: none;
background-color: unset;
}

input {
border: none;
color: inherit;
font-size: inherit;
font-weight: inherit;
font-family: inherit;
}

textarea {
border: none;
color: inherit;
font-size: inherit;
font-weight: inherit;
font-family: inherit;
}

select {
border: none;
color: inherit;
font-size: inherit;
font-weight: inherit;
font-family: inherit;
}
Loading

0 comments on commit ca9144f

Please sign in to comment.