Jump to content

888

Members
  • Content Count

    2
  • Joined

  • Last visited

  1. 888

    My Logo

    The shadow needs a bit of blur to make it realistic, now it is just the same motif with a grey colour. The gradient colours do not reflect where "light" hits the surface. There is a lack of natural flow to the colour gradient. The two colours also fight with each other. West Ham United fans might like you!😄
  2. Hi New to the forum and if I make a mistake such as posting in the wrong place, please let me know. I am learning CSS grid and there are supposed to be six columns and 3 rows, but the last 3 columns seems to be smaller. Please explain why. Your help is much appreciated. <!DOCTYPE html> <html> <head> <script defer src="https://use.fontawesome.com/releases/v5.5.0/js/all.js"></script> <style> :root {margin:0;padding:0; --primary: #ccc; --dark:#333; --light:#fff; } html {box-sizing: border-box; text-align: center; font-size:1.5rem; font-family: Arial black; } .weather {grid-area:weather;} .snow {grid-area:snow; } .sun {grid-area:sun; } .rain {grid-area:rain; } .bolt {grid-area:bolt; } .wrapper { display: grid; grid-template-areas: 'weather weather weather weather weather weather' 'snow snow snow sun sun sun' 'rain rain rain bolt bolt bolt'; grid-gap: 10px; background: #def; padding: 10px; } .wrapper > div {background:var(--primary); color:var(--dark); padding: 1rem; font-family: Arial, sans-serifs; grid-gap: 5px; box-shadow: var(--shadow); border:0.8px solid blue; justify-content: center; } </style></head> <body> <div class="wrapper"> <p>This grid layout contains six columns and three rows:</p> <div class="weather"><h1>Weather<h1></div> <div class="snow" ><i class="fas fa-snowflake fa-4x"></i><h3>snow<h3></div> <div class="sun"><i class="fas fa-sun fa-4x"></i><h3>sun</h3></div> <div class="rain"><i class="fas fa-cloud-rain fa-4x"></i><h3>rain</h3></div> <div class="bolt"> <i class="fas fa-bolt fa-4x"></i><h3>bolt</h3></div> </div> </body> </html> !itemA.html
×