[Project] Build a Tribute Page

-

Project 

Build a Tribute Page

https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-tribute-page 



https://codepen.io/wincooo/pen/OJQMdjJ


solution for 

"The <img> element should be centered within its parent element."

 

in CSS 

display:block; margin:auto




then image is going to be centered. 



Popular posts from this blog

Lists on the main page, linking to the certain direction ! {{% Django %}}

-
Image
In  this Chapter, we're going to learn about making lists on the page and link to the certain pages.  GO to views.py and let me make some lists !  rooms = [     { 'id' : 1 , 'name' : 'Head' },     { 'id' : 2 , 'name' : 'Face' },     { 'id' : 3 , 'name' : 'Neck' }, ] we're going to use room.html. That's why I named "rooms" here  So we want to be able to render this data out inside of the template.  def home ( request ):     context = { 'rooms' : rooms }     return render ( request , 'base/home.html' , context ) we can add in as many as we want and  'rooms'  we specify how we want to address it in the template and then  : rooms we specify what we're passing in.  Going to home.html  {% extends 'main.html' %} {% block content %} < h1 > Home Template </ h1 > < div >     < div >         {% for room in rooms%}         ...
Read more

[Visual Design 2/3]

-
Image
1. Push Elements Left or Right with the float Property The next positioning tool does not actually use position, but sets the float property of an element. Floating elements are removed from the normal flow of a document and pushed to either the left or right of their containing parent element. It's commonly used with the width property to specify how much horizontal space the floated element requires. The given markup would work well as a two-column layout, with the section and aside elements next to each other.  Let me   Give the #left item a float of left and the #right item a float of right. 2. Change the Position of Overlapping Elements with the z-index Property When elements are positioned to overlap (i.e. using position: absolute | relative | fixed | sticky), the element coming later in the HTML markup will, by default, appear on the top of the other elements. However, the z-index property can specify the order of how elements are stacked on top of one another. It ...
Read more

[CSS 3/3] Body Element, Override, Hex, RGB, Fallback, Inherit(Root)

-
Image
1. Style the HTML Body Element Now let's start fresh and talk about CSS inheritance. Every HTML page has a body element. We can prove that the body element exists here by giving it a background-color of black. We can do this by adding the following to our style element: body { background-color : black ; } it shows background black  2. Inherit Styles from the Body Element Now we've proven that every HTML page has a body element, and that its body element can also be styled with CSS. Remember, you can style your body element just like any other HTML element, and all your other elements will inherit your body element's styles. like this; < style >    body  {      background-color:   black ;      color:   green ;      font-family:   monospace ;   } </ style > < h1 > Hello World </ h1 > 3. Prioritize One Style Over Another Sometimes your HTML elements wi...
Read more