troca de logo e adicao de nova secao

andressablima · Jun 5, 2023 · a9f990c · a9f990c
1 parent f9f7d1d
commit a9f990c
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 15 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/images/banner.png b/images/banner.png
diff --git a/images/logo.svg b/images/logo.svg
diff --git a/images/logo1.png b/images/logo1.png
diff --git a/index.html b/index.html
@@ -11,7 +11,7 @@
 </head>
 <body>
   <header>
-    <img src="./images/logo.svg">
+    <img src="./images/logo1.png">
     <menu>
       <ul>
         <li><a href="#">Menu</a></li>
@@ -20,6 +20,9 @@
       </ul>
     </menu>
   </header>
+  <div class="banner">
+    <img id="banner" src="./images/banner.png">
+  </div>
   <main class="content">
     <section>
       <div class="container-slider">

diff --git a/styles/index.css b/styles/index.css
@@ -4,17 +4,13 @@
     box-sizing: border-box;
     font-family: 'Inter', sans-serif;
 }
-:root {
-    --main-bg-color: #fff;
-    --var-prim-color: hsl(240, 38%, 20%);
-    --var-sec-color: hsl(240, 18%, 77%);
-    --var-ter-color: hsl(240, 52%, 49%);
-}
+
 body{
     display: grid;
     grid-template-columns: repeat(1,1fr);
     grid-template-areas:
      "header"
+     "banner"
      "slider"
      "form"
      "footer";
@@ -45,23 +41,30 @@ ul{
 
 ul > li a{
     text-decoration: none;
-    color: var(--var-prim-color);
+    color: black;
     transition: 0.4s;
 }
 
 ul > li a:hover{
-    color: var(--var-ter-color);
+    color: #2E6D84; 
+}
+/* Banner */
+.banner{
+    grid-area: banner;
+}
+#banner{
+    width: 100vw;
 }
 /* Slider CSS */
 .container-slider{
     display: flex;
     width: 100%;
-    height: 100%;
+    height: 100vh;
     align-items: center;
     justify-content: center;
     gap: 1rem;
     grid-area: slider;
-    background-color: hsl(240, 18%, 77%);
+    background-color: #2E6D84;
 }
 
 .container-test{
@@ -74,13 +77,13 @@ ul > li a:hover{
 }
 #test{
     position: absolute;
-    top: 12vh;
+    top: 10vh;
     left: 1vw;
 }
 
 #img-testi{
     width: 300px;
-    height: 280px;
+    height: 300px;
     position: relative;
     left: 8vw;
     border-radius: 15px;
@@ -117,7 +120,7 @@ ul > li a:hover{
 }
 .info{
     color:white;
-    padding-top: 5px;
+    padding-top: 8px;
 }
 .info span{
     font-weight: 700;
@@ -169,9 +172,17 @@ input[type="submit"]{
     background-color: hsl(240, 48%, 53%);
     color: #fff;
 }
+input[type="submit"]:hover{
+    background-color: #2E6D84;
+}
 textarea[id="coment"]{
     border: 2px solid hsl(240, 48%, 53%);
 }
+textarea[id="coment"]:focus{
+    outline: none;
+    border: none;
+    border-bottom: 2px solid hsl(240, 52%, 49%);
+}
 .attribution { 
     font-size: 11px; 
     text-align: center;