User:ZUZU/Study/Web02: Difference between revisions
(→Day 04) |
(→Day 03) |
||
| Line 69: | Line 69: | ||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== <p style="font-family:Helvetica Neue; color: grey;font-size: 24px;">DOM </p> == | |||
=<p style="font-family:Helvetica Neue; font-size: 36px;">Day 04</p>= | =<p style="font-family:Helvetica Neue; font-size: 36px;">Day 04</p>= | ||
== <p style="font-family:Helvetica Neue; color: grey;font-size: 24px;">events </p> == | == <p style="font-family:Helvetica Neue; color: grey;font-size: 24px;">events </p> == | ||
Latest revision as of 10:35, 12 March 2024
I find that sorting by week isn't very logical.Next, I will organize it by days.
Day 01
Header
<!DOCTYPE html>
<header class="header">
<div class="left-section">
<div class="logo">logoooo</div>
</div>
<div class="middle-section">
<input class="search-bar" type="text" placeholder=" ">
<button class="search-button">
<img class="search-icon" src="icons/search-icon.svg">
</button>
</div>
<div class="right-section">
<div class="button1-container">
<img src="icons/Star.svg">
<div class="tooltip">i dont know what is this</div>
</div>
<div class="button2-container"><img src="icons/Polygon.svg"></div>
<div class="button3-container"><img src="icons/Ellipse.svg"></div>
</div>
</header>
.header {
height: 15vh; /* 15% of the viewport's height */
min-height: 160px;
display: flex; /* Turns the header into a flex container */
flex-direction: row; /* Sets the direction of the flex items to be in a row (horizontal) */
justify-content: space-between; /* justify-content used to style elements according to the main axis*/
position: fixed;
top: 0; /* there is default gap between header and edge ,so it need to set them to 0 */
left: 0;
right: 0;
z-index: 100;
}
Sidebar
Day 02
Article flow
Day 03
Add font to webpage
- upload font files to web server or a CDN
- define @font-face rules in css
@font-face {
font-family: 'CentSchbook BT';
src: url('path/to/CentSchbook-BT.woff2') format('woff2'),
url('path/to/CentSchbook-BT.woff') format('woff');
}