User:ZUZU/Study/Web02: Difference between revisions
No edit summary |
(→Day 03) |
||
| (4 intermediate revisions by the same user not shown) | |||
| Line 11: | Line 11: | ||
[https://hub.xpub.nl/chopchop/~zz1/personal-exercise/index.html practice web page] | [https://hub.xpub.nl/chopchop/~zz1/personal-exercise/index.html practice web page] | ||
== <p style="font-family:Helvetica Neue; color: grey;font-size: 24px;" >Header</p> == | == <p style="font-family:Helvetica Neue; color: grey;font-size: 24px;" >Header</p> == | ||
<syntaxhighlight lang="html"> | |||
<!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> | |||
</syntaxhighlight> | |||
<syntaxhighlight lang="css"> | |||
.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; | |||
} | |||
</syntaxhighlight> | |||
== <p style="font-family:Helvetica Neue; color: grey;font-size: 24px;">Sidebar</p> == | == <p style="font-family:Helvetica Neue; color: grey;font-size: 24px;">Sidebar</p> == | ||
=<p style="font-family:Helvetica Neue ;font-size: 36px;">Day 02</p>= | =<p style="font-family:Helvetica Neue ;font-size: 36px;">Day 02</p>= | ||
== <p style="font-family:Helvetica Neue; color: grey;font-size: 24px;">Article flow </p> == | == <p style="font-family:Helvetica Neue; color: grey;font-size: 24px;">Article flow </p> == | ||
=<p style="font-family:Helvetica Neue; font-size: 36px;">Day 03</p>= | |||
== <p style="font-family:Helvetica Neue; color: grey;font-size: 24px;">Add font to webpage </p> == | |||
*upload font files to web server or a CDN | |||
*define @font-face rules in css | |||
<syntaxhighlight lang="css"> | |||
@font-face { | |||
font-family: 'CentSchbook BT'; | |||
src: url('path/to/CentSchbook-BT.woff2') format('woff2'), | |||
url('path/to/CentSchbook-BT.woff') format('woff'); | |||
} | |||
</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; color: grey;font-size: 24px;">events </p> == | |||
Latest revision as of 09: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');
}