style: ajustes nos estilos e no arquivo README.MD

Readme.md

@@ -1,15 +1,23 @@
-=== SOBRE O PROJETO ===
+<h1 align="center">
+  💻<br>NodeProp
+</h1>
 
-Esse foi um projeto de um curso de Design Responsivo do canal Node Studio Treinamentos, nele é ensinado a desenvolver o layout começando pelo tamanho de tela de um smartphone até chegar em desktop. Usando apenas HTML, CSS e um pouco de JQUERY.
+![Design preview for the blog-codar](./assets/images/project-image.png)
 
-=== OBSERVAÇÃO ===
+<h4 align="center"><a href="https://centro-boa-forma-nu.vercel.app/" target="_blank">Clique para visitar o projeto</a></h4>
 
-Nesse projeto o professor faz uso total da propriedade FLOAT, então resolvi por conta própria usar a propriedade FLEXBOX em alguns momentos que achei mais vantajoso e por ser uma propriedade mais recomendada.
+## 📚 Sobre o projeto
 
-=== LINK DO CURSO ===
+Esse foi um projeto de um curso de Design Responsivo do canal Node Studio Treinamentos, nele é ensinado a desenvolver o layout começando pelo tamanho de tela de um smartphone até chegar em desktop.
 
-https://www.youtube.com/watch?v=Z7z8J12hMco&list=PLwXQLZ3FdTVFi6oHo_K4IYDcwCU5-f1x5
+💡<b>Observação</b>: Nesse projeto o professor faz uso total da propriedade FLOAT para posicionamento dos elementos, então resolvi usar a abordagem mais moderna com a propriedade <strong>Flexbox</strong> nos momentos que achei mais vantajoso. 🚀
+
+## 🛠️ Tecnologias utilizadas
 
-=== LINK DO SITE ===
+• HTML<br>
+• CSS<br>
+• Jquery
 
-https://lucasgabriell97.github.io/NodeProp/
+## 🔗 Link do curso
+
+https://www.youtube.com/watch?v=Z7z8J12hMco&list=PLwXQLZ3FdTVFi6oHo_K4IYDcwCU5-f1x5

css/style.css

@@ -1,4 +1,4 @@
-/*=========== RESET ==========*/
+/*=========== RESET ===*/
 * {
     margin: 0; 
     padding: 0; 
@@ -18,28 +18,24 @@ ul {list-style: none;}
 
 img {max-width: 100%;}
 
-/*=========== CONTAINER ==========*/
-
+/*=========== CONTAINER ===*/
 .container {
     width: 100%; 
-    float: left; 
     padding: 3% 4%; 
     text-align: center;
 }
-/*=========== BG COLORS ==========*/
 
+/*=========== BG COLORS ===*/
 .bg-gradient {background: linear-gradient(to right,#ce2e3c,#da6709);}
 
 .bg-black {background-color: #130400;}
 
 .bg-white {background-color: #fff;}
 
-/*=========== HELPERS ==========*/
-
+/*=========== HELPERS ===*/
 .radius {border-radius: 7px;}
 
 /* HEADER */
-
 .cabecalho {
     display: flex;
     justify-content: space-between;
@@ -48,22 +44,20 @@ img {max-width: 100%;}
 .logo {
     width: 56px; 
     height: 56px; 
-    /*float: left;*/ 
-    background: url(../img/logo-mobile.png) center center/56px no-repeat;
+    background: url(../assets/images/logo-mobile.png) center center/56px no-repeat;
     font-size: 0;
 }
 
 .btn-menu {
     width: 56px; 
     height: 56px; 
-    /*float: right;*/ 
     text-align: center; 
     color: #fff; 
     border-radius:56px; 
     cursor: pointer;
 }
-/* MENU */
 
+/* MENU */
 .menu {
     display: none; 
     width: 100%; 
@@ -77,14 +71,14 @@ img {max-width: 100%;}
 .btn-close {
     font-size: 1.5em; 
     color: #fff; 
-    float: right; 
+    float: right;
     cursor: pointer; 
     margin: 2% 3% 0 0;
 }
 
 .menu ul {
     width: 100%; 
-    float: left; 
+    float: left;
     text-align: center;
 }
 
@@ -99,8 +93,7 @@ img {max-width: 100%;}
 .menu li a:hover {border:1px solid #da6709;}
 
 /* BANNER */
-
-.banner {background: url(../img/bg.jpg) no-repeat fixed;}
+.banner {background: url(../assets/images/bg.jpg) no-repeat fixed;}
 
 .title {width: 100%;}
 
@@ -119,7 +112,6 @@ img {max-width: 100%;}
     display: flex;
     flex-direction: column;
     width: 100%; 
-    /*margin-top: 2%;*/
 }
 
 .btn {
@@ -136,12 +128,11 @@ img {max-width: 100%;}
 }
 
 .btn-sobre {
-    color:#fff ; 
+    color:#fff; 
     margin-top: 2%;
 }
 
 /* SERVIÇOS */
-
 .servico {
     width: 100%;  
     text-align: left;  
@@ -172,7 +163,6 @@ img {max-width: 100%;}
 }
 
 /* NEWSLETTER */
-
 .newsletter h2 {
     font-size: 1.5em; 
     color: #fff; 
@@ -199,7 +189,6 @@ img {max-width: 100%;}
 }
 
 /* FOOTER */
-
 .social-icons a {
     font-size: 1.5em; 
     color: rgba(255,255,255,0.7); 
@@ -238,18 +227,16 @@ Para impressoras. Muito usado para dar uma versão de impressão do site.
 /* ========== MOBILE FIRST ==========*/
 
 /* SMALL DEVICES - SMARTPHONES */
-
 @media screen and (min-width: 480px) {
     .logo {
         width: 214px; 
-        background: url(../img/logo.png) center center/214px no-repeat;
+        background: url(../assets/images/logo.png) center center/214px no-repeat;
     }
 
     .btn {font-size: 2em;}
 }
 
 /* SMALL DEVICES - TABLETS*/
-
 @media screen and (min-width: 768px) {
     .servicos {
         display: flex;
@@ -285,7 +272,6 @@ Para impressoras. Muito usado para dar uma versão de impressão do site.
 }
 
 /* MEDIUM DEVICES - TABLETS & DESKTOPS*/
-
 @media screen and (min-width: 960px) {
     .banner {display: flex;}
 

index.html

@@ -11,7 +11,7 @@
     	<link rel="stylesheet" href="css/style.css">
     	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
     	<link href='https://fonts.googleapis.com/css?family=Lato:400,300,700' rel='stylesheet' type='text/css'>
-    	<link rel="icon" href="img/icon.png">
+    	<link rel="icon" href="assets/images/icon.png">
     </head>
     <body>
         <!-- CABEÇALHO --> 
@@ -45,7 +45,7 @@ <h3> Criamos experiências e estabelecemos ações estratégicas que conectam ma
         <!-- SERVICOS --> 
         <main class="servicos container">
             <article class="servico bg-white radius">
-               <a href="#"><img src="img/criacoes.jpg" alt="Campanhas publicitárias"></a>
+               <a href="#"><img src="assets/images/criacoes.jpg" alt="Campanhas publicitárias"></a>
                <div class="inner">
                    <a href="#"> Campanhas Publicitárias </a>
                    <h4>Impressos, VTs e Jingles</h4>
@@ -54,7 +54,7 @@ <h4>Impressos, VTs e Jingles</h4>
                </div>
             </article>
             <article class="servico bg-white radius">
-               <a href="#"><img src="img/md.jpg" alt="Marketing Digital"></a>
+               <a href="#"><img src="assets/images/md.jpg" alt="Marketing Digital"></a>
                <div class="inner">
                    <a href="#"> Marketing Digital </a>
                    <h4>Administração de Redes Sociais</h4>
@@ -65,7 +65,7 @@ <h4>Administração de Redes Sociais</h4>
                </div>
             </article>
             <article class="servico bg-white radius">
-               <a href="#"><img src="img/cs.jpg" alt="Criação de Sites"></a>
+               <a href="#"><img src="assets/images/cs.jpg" alt="Criação de Sites"></a>
                <div class="inner">
                    <a href="#"> Criação de Sites </a>
                    <h4> Sites Administráveis </h4>