HTML5, CSS3, Atom

Community feedback

• 

  

  Chamu•13,860

  @ChamuMutezva

  Posted almost 4 years ago

  • a span (an inline ) element should not be a parent to a div (block element)
  • the following should be an interactive element , it looks like it should be an anchor element not a div element. A div has no semantic meaning and should not be used over a more suitable element, it can be improved though by use of aria attributes.

  <div class="cancel-order">
        Cancel Order
      </div>
  

  Well done and congratulations for completing your first challenge, you have to work on the responsive aspect for mobile viewers who happens to be the majority of viewers. Here are some changes that you might need to effect ,you will have to adjust accordingly with design

  • on the body element set some padding to have some breathing space between the body and the content.

  body {
  	background-image: url("images/pattern-background-desktop.svg");
  	background-repeat: no-repeat;
  	background-size: auto;
  	text-align: center;
  	font-family: 'Red Hat Display', sans-serif;
  	cursor: auto;
  	padding: 3rem 1.5rem; // add padding here, adjust accordingly to design
  }
  

  • card. the current code is the following . we are going to make a few changes to it

  .card {
  	width: 25%; // remove this - see next code
  	margin: 3% auto; //see updated code below
  	border-radius: 15px 15px;
  	box-shadow: 1px 4px 10px rgba(211,211,211,0.4),-1px 4px 10px rgba(211,211,211,0.4);
  	background-color: white;
  }
  

  • i have changed the width to max-width and margin to be only auto

  .card {
  	max-width: 25rem; //new values
  	margin: auto; //new values
  	border-radius: 15px 15px;
  	box-shadow: 1px 4px 10px rgba(211,211,211,0.4),-1px 4px 10px rgba(211,211,211,0.4);
  	background-color: white;
  }
  

  This should give a solution that is a bit responsive from small devices to large screens

  Good lucky and happy coding

  21

  Marked as helpful
• 

  Ahmed Faisal•5,095

  @afrussel

  Posted almost 4 years ago

  As your first challenge its good. Background image is missing. Use this below code for bg image

  body{ background-color: var(--pale-blue); background-image: url("images/pattern-background-desktop.svg"); background-repeat: no-repeat; background-size: 100% 50%; display: -ms-grid; display: grid; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: center; align-content: center; }

  21

  Marked as helpful