diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..771ac4393 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -3,31 +3,46 @@ - Wireframe + feature/wireframe
-

Wireframe

+

Readme,Wireframe and Branch

- This is the default, provided code and no changes have been made yet. + On this web page we try to explain and give some examples about Readme file,Wireframe and branch.

-
- -

Title

+
+ image describe book selected for reading +

Readme File

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + A README file is meant to explain a project to anyone who opens it for the first time. Its purpose is to give clear context so the reader quickly understands what the project is, why it exists, and how to use or work with it.

- Read more + Read more +
+
+ image describe wireframe in different platform +

Wireframe

+

+ wireframe is to visually outline the structure and layout of a product so designers and stakeholders can plan functionality and user flow before development begins. +

+ Read more +
+
+ image describe the logo of branch +

Branch

+

+ A branch in Git is a separate line of development that allows you to work on features or changes independently without affecting the main codebase. +

+ Read more
- + \ No newline at end of file diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..2d4d0d6f0 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -1,82 +1,64 @@ -/* Here are some starter styles -You can edit these or replace them entirely -It's showing you a common way to organise CSS -And includes solutions to common problems -As well as useful links to learn more */ - -/* ====== Design Palette ====== - This is our "design palette". - It sets out the colours, fonts, styles etc to be used in this design - At work, a designer will give these to you based on the corporate brand, but while you are learning - You can design it yourself if you like - Inspect the starter design with Devtools - Click on the colour swatches to see what is happening - I've put some useful CSS you won't have learned yet - For you to explore and play with if you are interested - https://web.dev/articles/min-max-clamp - https://scrimba.com/learn-css-variables-c026 -====== Design Palette ====== */ :root { - --paper: oklch(7 0 0); + --paper: rgba(139, 139, 47, 0.562) ; --ink: color-mix(in oklab, var(--color) 5%, black); --font: 100%/1.5 system-ui; --space: clamp(6px, 6px + 2vw, 15px); --line: 1px solid; --container: 1280px; } -/* ====== Base Elements ====== - General rules for basic HTML elements in any context */ +h1 { +text-align: center; +border-bottom: ver(--line); +font-family: 'Times New Roman', Times, serif ; +} body { background: var(--paper); color: var(--ink); font: var(--font); + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: larger; } a { - padding: var(--space); - border: var(--line); + padding: 15px; + color: rgba(10, 10, 10, 0.842); + border-radius: 20px; + background-color: rgba(160, 164, 49, 0.543); + border: 3px solid rgb(74, 48, 79); + font-weight: bold; max-width: fit-content; } img, svg { width: 100%; + border-radius: 15px; object-fit: cover; } -/* ====== Site Layout ====== -Setting the overall rules for page regions -https://www.w3.org/WAI/tutorials/page-structure/regions/ -*/ main { - max-width: var(--container); + max-width: 1200px; margin: 0 auto calc(var(--space) * 4) auto; } footer { position: fixed; + font-family: Georgia, 'Times New Roman', Times, serif; + border-top: var( line); bottom: 0; text-align: center; + width: 100%; } -/* ====== Articles Grid Layout ==== -Setting the rules for how articles are placed in the main element. -Inspect this in Devtools and click the "grid" button in the Elements view -Play with the options that come up. -https://developer.chrome.com/docs/devtools/css/grid -https://gridbyexample.com/learn/ -*/ main { display: grid; - grid-template-columns: 1fr 1fr; - gap: var(--space); - > *:first-child { - grid-column: span 2; + justify-content: space-between; + grid-template-columns: 0.5fr 0.5fr; + :first-child { + grid-column: span 3; } } -/* ====== Article Layout ====== -Setting the rules for how elements are placed in the article. -Now laying out just the INSIDE of the repeated card/article design. -Keeping things orderly and separate is the key to good, simple CSS. -*/ article { - border: var(--line); - padding-bottom: var(--space); + border: 2px solid; + margin-bottom: 40px ; + border-radius: 15px; + padding-bottom: 20px; + font-style: italic; text-align: left; display: grid; grid-template-columns: var(--space) 1fr var(--space); @@ -87,3 +69,9 @@ article { grid-column: span 3; } } +.sectionOne{ + margin-bottom: 40px; +} +.sectionThree{ + margin-left: 50px; +}