[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

[Visual Design 1/3]

-
Image
1.  Create Visual Balance Using the text-align Property This section of the curriculum focuses on Applied Visual Design. The first group of challenges build on the given card layout to show a number of core principles. Text is often a large part of web content. CSS has several options for how to align it with the text-align property. text-align: justify; spaces the text so that each line has equal width. text-align: center; centers the text text-align: right; right-aligns the text And text-align: left; (the default) left-aligns the text. Let me Align the h4 tag's text, which says "Google", to the center. Then justify the paragraph tag which contains information about how Google was founded. 2. Adjust the Width of an Element Using the width Property You can specify the width of an element using the width property in CSS. Values can be given in relative length units (such as em), absolute length units (such as px), or as a percentage of its containing parent element. Here...
Read more