Differences
This shows you the differences between two versions of the page.
|
ii:labs:s2:02:tasks:01 [2022/04/14 14:51] radu.mantu created |
ii:labs:s2:02:tasks:01 [2024/03/17 18:24] (current) florin.stancu |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ==== 01. [??p] Reading the frame buffer ==== | + | ==== 01. [30p] Minor Design Changes ==== |
| + | Our customer wants to make some changes to the website's design: | ||
| + | |||
| + | * Add a header image with our logo at the top | ||
| + | * Several candidates are present inside ''public/images/''; | ||
| + | * You could either use the [[https://developer.mozilla.org/en-US/docs/Web/CSS/background-image|CSS background property]], or just the old-school ''<img>'' tag; | ||
| + | * **Hint:** check out ''style.css'' for existing definitions! | ||
| + | * Also change the background color of the ''<header>'' to match the chosen image on its margins (maybe something blue?); | ||
| + | * Make the content box have rounded borders (try ''15px''); | ||
| + | * ''border-radius'' *wink* | ||
| + | * Use the browser's Web Developer tools to find the HTML tag to select! | ||
| + | * Insert some dummy content text (e.g., use a [[https://loremipsum.io/|Lorem Ipsum generator]]); | ||
| + | |||
| + | <note tip> | ||
| + | Hint: search for TODOs inside HTML and CSS! | ||
| + | </note> | ||
| + | |||
| + | <note important> | ||
| + | For specifying URLs to other web resources (e.g., images for this task): recall Unix relative paths (''./path/to/file.jpg'')? | ||
| + | HTML also uses them (those URLs will be relative to your current file -- either the ''.html'' or the ''.css'')! | ||
| + | |||
| + | In some cases (webpage has sub-paths, e.g., ''/account/details.html''), you may also use absolute URLs (path begins with a ''/'' representing the server's root directory). | ||
| + | </note> | ||
