2023 Web Development Bootcamp: Intermediate CSS Part 2 -- Day 6

-

 I started learning about the CSS box model, the CSS display property, and CSS static and relative positioning. This was a lot of information to absorb( ingest) in one sitting.  While the topic was interesting and is important to master, I decided to just learn by doing.  So I downloaded 2 new photos to display at the top of my website.


CSS Images and Relative Positioning

Here is the code that I used:


.logo{
    height: 400px;
    position: relative;
    left: 100px;

     
}



.team{
    height: 400px;
    position: relative;
    left: 150px;
    top: 10px;
}


And here is the result:




Here is the new page:





Note: The trophy photo's width is 100% of the browser screen so this is why it is being pulled across the whole screen. This is my opinion.


Comments

Post a Comment

Popular posts from this blog

Maze Game in Python using Turtle

-
Image
This is my first attempt at a maze game in Python. The white squares are the walls and the blue circle is the first player. I will continue on with the game and post the final version.  After learning how to make basic games in Python using Turtle, I plan to move on to making simple games using Pygame.
Read more

Space Wars- Python 3

-
Image
Space wars - Python 3 This is my first version of Space Wars  in Python 3 using C. Thomson's ideas and Turtle. I made this a few weeks ago but am only getting around to post it today.  It doesn't have any sound. CT developed his program on the Mac.  However, the sound code doesn't work with windows.  The program was developed using Turtle. I am using Python's turtle module to develop games now. I play to start with Pygame before the end of the year.
Read more