├── COLLABORATE.md
├── PROJECTS.md
├── PROJECTS
    ├── simple-website-auralcat
    │   ├── css
    │   │   └── main.css
    │   ├── img
    │   │   ├── card-photo.png
    │   │   └── header.jpeg
    │   └── index.html
    └── simple-website-lucianodacunha
    │   ├── README.md
    │   ├── article.html
    │   ├── css
    │       └── style.css
    │   └── index.html
└── README.md


/COLLABORATE.md:
--------------------------------------------------------------------------------
1 | ### Projects in progress.
2 | 
3 | [Gallery with pure CSS](https://github.com/manzolirch/gallery-pure-css)
4 | 


--------------------------------------------------------------------------------
/PROJECTS.md:
--------------------------------------------------------------------------------
1 | ### Projects created using the repository tips.
2 | 
3 | ## [Miriam Retka](https://github.com/Auralcat) <br>
4 | [Simple Website](/PROJECTS/simple-website-auralcat)
5 | 
6 | ## [Luciano da Cunha](https://github.com/lucianodacunha) <br>
7 | [Simple Website](/PROJECTS/simple-website-lucianodacunha), [Demo](https://htmlpreview.github.io/?https://github.com/lucianodacunha/create-with-pure-code/blob/master/PROJECTS/simple-website-lucianodacunha/index.html)


--------------------------------------------------------------------------------
/PROJECTS/simple-website-auralcat/css/main.css:
--------------------------------------------------------------------------------
 1 | .html {
 2 |   height: 100%;
 3 |   margin: -8px;
 4 | }
 5 | 
 6 | .body {
 7 |   font-family: Sans-Serif;
 8 | }
 9 | 
10 | .header {
11 |   text-align: center;
12 | }
13 | 
14 | .header__img {
15 |   width: 100%;
16 |   height: 10%;
17 | }
18 | 
19 | .nav-bar {
20 |   float: inline-end;
21 | }
22 | 
23 | .nav-bar__nav-items {
24 |   display: flex;
25 |   flex-flow: row;
26 |   margin: 0;
27 | }
28 | 
29 | .nav-items__list-item {
30 |   padding: 2px;
31 |   list-style-type: none;
32 | }
33 | 
34 | .nav-items__list-item__link {
35 |   padding: 4px;
36 |   text-decoration: none;
37 |   color: #000;
38 | }
39 | 
40 | .nav-items__list-item__link:hover {
41 |   background: #ffa500;
42 | }
43 | 
44 | .section {
45 |   clear: both;
46 |   margin: 12px;
47 |   padding-top: 8px;
48 | }
49 | 
50 | .section__h1 {
51 |   text-align: center;
52 | }
53 | 
54 | .section__p, .card__text-panel {
55 |   text-align: justify;
56 | }
57 | 
58 | .card {
59 |   box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.2);
60 |   border-radius: 5%;
61 |   width: 240px;                   /* Adjust card size here */
62 |   height: 100%;
63 |   display: flex;
64 |   flex-flow: row;
65 |   align-items: baseline;
66 |   text-align: center;
67 | }
68 | 
69 | .card__photo {
70 |   width: auto;
71 |   height: 80px;
72 |   margin: auto;
73 |   flex-grow: 1;
74 | }
75 | 
76 | .card__text-panel {
77 |   padding: 2px 16px;
78 |   flex-grow: 3;
79 |   text-align: left;
80 | }
81 | 
82 | .footer {
83 |   text-align: center;
84 |   padding: 16px;
85 | }
86 | 
87 | @media (max-width: 600px) {
88 |   .nav-bar {
89 |     float: none;
90 |   }
91 | 
92 |   .nav-bar__nav-items {
93 |     display: contents;
94 | 
95 |   }
96 | }
97 | 


--------------------------------------------------------------------------------
/PROJECTS/simple-website-auralcat/img/card-photo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/manzoliric/create-with-pure-code/6bf3dff37926c78fc894fb72b47f53503b5ee139/PROJECTS/simple-website-auralcat/img/card-photo.png


--------------------------------------------------------------------------------
/PROJECTS/simple-website-auralcat/img/header.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/manzoliric/create-with-pure-code/6bf3dff37926c78fc894fb72b47f53503b5ee139/PROJECTS/simple-website-auralcat/img/header.jpeg


--------------------------------------------------------------------------------
/PROJECTS/simple-website-auralcat/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html class="html" lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 7 |     <title>Simple website</title>
 8 |     <link href="css/main.css" rel="stylesheet" />
 9 | </head>
10 | 
11 | <body class="body">
12 |     <header class="header">
13 |         <img class="header__img" alt="Imagem do cabeçalho" src="img/header.jpeg" />
14 |         <nav class="nav-bar">
15 |             <ul class="nav-bar__nav-items">
16 |                 <li class="nav-items__list-item"><a class="nav-items__list-item__link" href="">Item 1</a></li>
17 |                 <li class="nav-items__list-item"><a class="nav-items__list-item__link" href="">Item 2</a></li>
18 |                 <li class="nav-items__list-item"><a class="nav-items__list-item__link" href="">Item 3</a></li>
19 |                 <li class="nav-items__list-item"><a class="nav-items__list-item__link" href="">Item 4</a></li>
20 |                 <li class="nav-items__list-item"><a class="nav-items__list-item__link" href="">Item 5</a></li>
21 |             </ul>
22 |         </nav>
23 |     </header>
24 |     <section class="section">
25 |         <h1 class="section__h1">Título do conteúdo</h1>
26 |         <p class="section__p">Tiramisu gummi cake dragée jujubes sweet pie bar canes tiramisu. Marshmallow lemon cake powder toffee canes roll soufflé sweet gummi marshmallow. Sesame snaps gingerbread tiramisu bar jujubes fruitcake pudding pie bear. Cake candy pie gingerbread drops roll marshmallow lollipop soufflé. Marshmallow beans powder tootsie tiramisu candy gummi carrot toffee pastry.</p>
27 |         <div class="card">
28 |             <img class="card__photo" alt="Card Photo" src="./img/card-photo.png"></img>
29 |             <div class="card__text-panel">
30 |                 <h3 class="card__text-panel__title">Card Title</h3>
31 |                 <p class="card__text-panel__p">Card Text</p>
32 |             </div>
33 |         </div>
34 |     </section>
35 |     <footer class="footer">
36 |         <p class="footer__p">2018 - Created By Auralcat</p>
37 |     </footer>
38 | </body>
39 | 
40 | </html>
41 | 


--------------------------------------------------------------------------------
/PROJECTS/simple-website-lucianodacunha/README.md:
--------------------------------------------------------------------------------
 1 | # Simple WebSite
 2 | 
 3 | Uma página simples onde procuro implementar os conceitos aprendidos em meus 
 4 | estudos sobre front-end.
 5 | 
 6 | ## TO-DO
 7 | 
 8 | Este é um lembrete das necessidades que são identificadas durante o projeto e 
 9 | que devem ser realizadas.
10 | 
11 | |Atividade                              |Status         |
12 | |:--                                    |:--            |
13 | |Melhorias no header                    |               |
14 | |Criar páginas contato e sobre          |               |
15 | |Implementar metodologia BEM            |Parcial        |
16 | |Implementar responsividade             |               |
17 | |Inserir tag viewport                   |               |
18 | |Melhorias na paleta de cores utilizada |               |
19 | |Adicionar efeitos                      |               |
20 | |Criar um diretório para imagens locais |               |
21 | 


--------------------------------------------------------------------------------
/PROJECTS/simple-website-lucianodacunha/article.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="pt-BR">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Simple Website</title>
 6 |     <link rel="stylesheet" type="text/css" href="css/style.css">
 7 | </head>
 8 | <body>
 9 |     <div class="ribbon">
10 |         <a href="https://github.com/lucianodacunha/create-with-pure-code"
11 |             target="_blank">
12 |             <img class="ribbon__img" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub">
13 |         </a>
14 |     </div>
15 |     <header class="header">
16 |         <h1 class="header__title">
17 |             <a class="header__link" href="/">Simple Website</a>
18 |         </h1>
19 |         <nav class="header__nav">
20 |             <ul class="header__list">
21 |                 <li class="header__item"><a href="/">Home</a></li>
22 |                 <li class="header__item"><a href="#">Contato</a></li>
23 |                 <li class="header__item"><a href="#">Sobre</a></li>
24 |             </ul>
25 |         </nav>
26 |                 <hr class="header__separator">
27 |             </div>
28 |         </div>
29 |     </header>
30 |     <section class="main">
31 |         <article class="main_article article">
32 |             <header class="article__header">
33 |                 <h1 class="article__title">
34 |                     Hendrerit dolor magna eget est lorem 
35 |                 </h1>
36 |             </header>
37 |             <section class="article__content"> 
38 |                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim nec dui nunc mattis enim. Ac turpis egestas maecenas pharetra convallis posuere morbi leo. Scelerisque varius morbi enim nunc faucibus. Nunc scelerisque viverra mauris in aliquam sem fringilla ut. Mauris rhoncus aenean vel elit. Etiam non quam lacus suspendisse faucibus interdum posuere lorem ipsum. Curabitur vitae nunc sed velit dignissim sodales ut. Nunc id cursus metus aliquam eleifend. Ac tincidunt vitae semper quis lectus.
39 | 
40 |                 <aside> 
41 |                     <section>
42 |                         <header>
43 |                             <h1>
44 |                                 Lectus sit amet est placerat in egestas erat
45 |                             </h1>
46 |                         </header>
47 |                         <q>Arcu felis bibendum ut tristique et. Hac habitasse   platea dictumst quisque. Convallis a cras semper auctor neque. Lacus sed turpis tincidunt id aliquet. Purus in massa tempor nec feugiat nisl pretium fusce id. Facilisi etiam dignissim diam quis. Et malesuada fames ac turpis egestas sed. Proin fermentum leo vel orci porta non pulvinar neque. In metus vulputate eu scelerisque felis.
48 |                         </q>
49 |                     </section>
50 |                 </aside>
51 | 
52 |                 Lectus urna duis convallis convallis. Vitae justo eget magna fermentum iaculis eu. Elit duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Quis vel eros donec ac odio tempor orci dapibus ultrices. Lacus laoreet non curabitur gravida. Et leo duis ut diam. Sit amet consectetur adipiscing elit duis. Nam libero justo laoreet sit amet cursus. Mi sit amet mauris commodo quis imperdiet massa. Pellentesque dignissim enim sit amet venenatis.
53 |             </section>
54 |         </article>        
55 |     </section>
56 |     <footer class="footer">
57 |         <p>
58 |             Feito com <span class="footer__heart">&#10084;</span>, 
59 |             <a class="footer__link" href="https://www.w3.org/html/" 
60 |                 target="_blank"> html  </a> e 
61 |             <a class="footer__link" href="https://www.w3.org/css/" 
62 |                 target="_blank">css</a> <br>
63 |             <small><span class="footer__copyleft">©</span> 2018</small>
64 |         </p>
65 |     </footer>
66 | </body>
67 | </html>


--------------------------------------------------------------------------------
/PROJECTS/simple-website-lucianodacunha/css/style.css:
--------------------------------------------------------------------------------
  1 | .header {
  2 |     text-align: center;
  3 | }
  4 | 
  5 | .header__title {
  6 |     font-weight: 900;
  7 | }
  8 | 
  9 | .header__list {
 10 |     padding: 0;
 11 | }
 12 | 
 13 | .header__item {
 14 |     display: inline-block;
 15 |     padding: 0 20px;
 16 | }
 17 | 
 18 | .header__separator {
 19 |     width: 300px;
 20 |     border: 5px solid #e4e4e4;
 21 | }
 22 | 
 23 | .main {
 24 |     height: 100%;
 25 |     width: 720px;
 26 |     line-height: 1.6em;
 27 |     margin-top: 40px;
 28 |     margin-bottom: 60px;
 29 |     margin-left: auto;
 30 |     margin-right: auto;
 31 |     padding: 0 30px;
 32 | }
 33 | 
 34 | .article {
 35 |     padding: 20px 0; 
 36 | }
 37 | 
 38 | .footer {
 39 |     font-size: 0.90em;
 40 |     text-align: center;
 41 |     height: 60px;
 42 |     width: 100%;
 43 |     padding: 18px 0;
 44 |     background-color: #F2F2F2;
 45 |     border-top: 1px solid #e4e4e4;
 46 | }
 47 | 
 48 | .footer_row {
 49 |     line-height: 1.5em;
 50 | }
 51 | 
 52 | .footer__heart {
 53 |     color: #c32222;
 54 |     font-size: 1.0em;
 55 | }
 56 | 
 57 | .footer__copyleft { 
 58 |     display: inline-block; 
 59 |     text-align: right; 
 60 |     margin: 0px; 
 61 |     -moz-transform: scaleX(-1); 
 62 |     -o-transform: scaleX(-1); 
 63 |     -webkit-transform: scaleX(-1); 
 64 |     transform: scaleX(-1); 
 65 |     filter: FlipH; 
 66 |     -ms-filter: “FlipH”; 
 67 | }
 68 | 
 69 | .ribbon {
 70 |     position: absolute;
 71 |     top: 0;
 72 |     right: 0;
 73 |     border: 0;
 74 |     z-index: 100;
 75 | }
 76 | 
 77 | header a {
 78 |     color: #000;
 79 |     text-decoration: none !important;
 80 | }
 81 | 
 82 | a:hover {
 83 |     color: #c32222;   
 84 | }
 85 | 
 86 | .footer a {
 87 |     color: rgba(0,0,0,.54)  ;
 88 |     text-decoration: none !important;
 89 | }
 90 | 
 91 | body {
 92 |     font-family: Arial, Helvetica, sans-serif;
 93 |     font-size: 1.1em;
 94 |     margin: 0;
 95 | }
 96 | 
 97 | aside {
 98 |     padding: 30px 60px 30px 60px;
 99 | }
100 | 
101 | aside h1 {
102 |     font-size: 1.2em;
103 |     margin: 0;
104 |     margin-bottom: 10px;
105 | }
106 | 
107 | section > article q {
108 |     font-size: 0.8em;
109 |     font-style: italic;    
110 | }
111 | 
112 | 


--------------------------------------------------------------------------------
/PROJECTS/simple-website-lucianodacunha/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="pt-BR">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Simple Website</title>
 6 |     <link rel="stylesheet" type="text/css" href="css/style.css">
 7 | </head>
 8 | <body>
 9 |     <div class="ribbon">
10 |         <a href="https://github.com/lucianodacunha/create-with-pure-code"
11 |             target="_blank">
12 |             <img class="ribbon__img" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub">
13 |         </a>
14 |     </div>
15 |     <header class="header">
16 |         <h1 class="header__title">
17 |             <a class="header__link" href="/">Simple Website</a>
18 |         </h1>
19 |         <nav class="header__nav">
20 |             <ul class="header__list">
21 |                 <li class="header__item"><a href="/">Home</a></li>
22 |                 <li class="header__item"><a href="#">Contato</a></li>
23 |                 <li class="header__item"><a href="#">Sobre</a></li>
24 |             </ul>
25 |         </nav>
26 |         <hr class="header__separator">
27 |     </header>
28 |         <section class="main">
29 |             <article class="main__article article">
30 |                 <header class="article__header">
31 |                     <h1 class="article__title">
32 |                         <a href="article.html">Hendrerit dolor magna eget est lorem</a> 
33 |                     </h1>
34 |                 </header>
35 |                 <section class="article__preview">
36 |                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim nec dui nunc mattis enim. Ac turpis egestas maecenas pharetra convallis posuere morbi leo. Scelerisque varius morbi enim nunc faucibus. 
37 |                 </section>
38 |             </article>
39 |             <article class="article">
40 |                 <header class="article__header">
41 |                     <h1 class="article__title">
42 |                         <a href="article.html">Hendrerit dolor magna eget est lorem</a> 
43 |                     </h1>
44 |                 </header>
45 |                 <section class="article__preview">
46 |                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim nec dui nunc mattis enim. Ac turpis egestas maecenas pharetra convallis posuere morbi leo. Scelerisque varius morbi enim nunc faucibus. 
47 |                 </section>
48 |             </article>
49 |             <article class="article">
50 |                 <header class="article__header">
51 |                     <h1 class="article__title">
52 |                         <a href="article.html">Hendrerit dolor magna eget est lorem</a> 
53 |                     </h1>
54 |                 </header>
55 |                 <section class="article__preview">
56 |                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim nec dui nunc mattis enim. Ac turpis egestas maecenas pharetra convallis posuere morbi leo. Scelerisque varius morbi enim nunc faucibus. 
57 |                 </section>
58 |             </article>
59 |             <article class="article">
60 |                 <header class="article__header">
61 |                     <h1 class="article__title">
62 |                         <a href="article.html">Hendrerit dolor magna eget est lorem</a> 
63 |                     </h1>
64 |                 </header>
65 |                 <section class="article__preview">
66 |                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim nec dui nunc mattis enim. Ac turpis egestas maecenas pharetra convallis posuere morbi leo. Scelerisque varius morbi enim nunc faucibus. 
67 |                 </section>
68 |             </article>
69 |         </section>
70 |     <footer class="footer">
71 |         <p class="footer_row">
72 |             Feito com <span class="footer__heart">&#10084;</span>, 
73 |             <a class="footer__link" href="https://www.w3.org/html/" 
74 |                 target="_blank"> html  </a> e 
75 |             <a class="footer__link" href="https://www.w3.org/css/" 
76 |                 target="_blank">css</a> <br>
77 |             <small><span class="footer__copyleft">©</span> 2018</small>
78 |         </p>
79 |     </footer>
80 | </body>
81 | </html>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Create with pure code!
 2 | 
 3 | For these projects, always use vanilla code. Avoid use any library or frameworks like jQuery, React, Angular, Vue, Bootstrap, Foundation, etc.
 4 | 
 5 | ## How To? 
 6 | Choose an idea in the repository, create, finalize, and send us to include in the [completed projects](/PROJECTS.md).
 7 | 
 8 | ## Collaborate with projects in progress
 9 | [Click here](/COLLABORATE.md) to see the projects that are in progress and contribute!
10 | 
11 | ## Ideas
12 | 
13 | ### Beginner
14 | #### Html, CSS and JavaScript
15 | - Create a Simple Website. (With Header, Nav, Article, Aside, Footer...) <br>
16 | - Create a Body Mass Index (BMI) Calculator. <br>
17 | - Copy a site you like, without looking at the source code. <br>
18 | - Create a To Do List. <br>
19 | - Create a Price Table like [this](https://cdn.dribbble.com/users/388581/screenshots/1294739/dr-price-table_1x.png) using FlexBox. <br>
20 | - Get your current position using the Geolocation API.<br>
21 | - Save your data to the browser using Local Storage API. <br>
22 | 
23 | #### JavaScript
24 | - Generate a Json (https://www.json-generator.com/) and use [XMLHttpRequest](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) to show the json file in your website.
25 | 
26 | #### CSS
27 | - Create a Photo Gallery. <br>
28 | - Look a [CodePen](codepen.io) and copy something that you think is nice, without seeing the code. <br>
29 | - See a layout in [dribbble](https://dribbble.com) and write the code. <br>
30 | - Create a Modal without JS. <br>
31 | - Create a text with gradient colorful. <br>
32 | 
33 | ### Intermediate
34 |  - Create a url shortner website (using a external shortner API)
35 |  
36 | ### Advanced
37 |  - Create a url shortner website (make your own API with node.js)
38 | #
39 | <br>
40 | <br>
41 | <br>
42 | 
43 | # Crie com código puro! 
44 | 
45 | Para este projeto, sempre utilize o código vanilla. Evite usar bibliotecas e frameworks como jQuery, React, Angular, Vue, Bootstrap, Foundation, etc.
46 | 
47 | ## Como fazer? 
48 | Escolha uma ideia do repositório, crie, finalize e envie para que nós possamos incuir nos [Projetos Completos](/PROJECTS.md).
49 | 
50 | ## Colabore com os projetos em progresso
51 | [Clique aqui](/COLLABORATE.md) para ver os projetos que estão em progresso e contribuir! 
52 | 
53 | ## Ideias
54 | 
55 | ### Iniciante
56 | #### Html, CSS e JavaScript
57 | - Crie um Website simples. (Que possua: Header, Nav, Article, Aside, Footer...) <br>
58 | - Crie uma Calculadora de Índice de Massa Corporal (IMC). <br>
59 | - Copie um site que você goste, sem utilizar o código fonte. <br>
60 | - Crie uma lista de afazeres. <br>
61 | - Crie uma tabela de preço como [esta](https://cdn.dribbble.com/users/388581/screenshots/1294739/dr-price-table_1x.png) utilizando o Flexbox.<br>
62 | - Utilize uma API para obter sua localização atual. <br>
63 | - Salve seus dados no navegador utilizando uma API de Armazenamento Local.
64 | 
65 | #### JavaScript
66 | - Crie um arquivo Json(https://www.json-generator.com/) e use [XMLHttpRequest](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) para mostrar o arquivo Json na sua página Web. 
67 | 
68 | #### CSS
69 | - Crie uma galeria de fotos. <br>
70 | - Pesquise no [CodePen](codepen.io) e copie algo que você acha interessante, sem utilizar o código fonte.<br>
71 | - Veja um layout no [dribbble](https://dribbble.com) e crie o código. <br>
72 | - Crie um Modal sem utilizar JavaScript. <br>
73 | - Crie um texto fazendo um gradiente de cores. <br>
74 | 
75 | ### Intermediário
76 |  - Crie um site que encurtem URL'S (utilizando uma API externa de encurtador de URL's)
77 |  
78 | ### Avançado
79 |  - Crie uma página que encurte URL'S (Faça sua própria API com Node.js)
80 | 


--------------------------------------------------------------------------------