diff --git a/Wireframe/css/style.css b/Wireframe/css/style.css new file mode 100644 index 000000000..9bd5864d0 --- /dev/null +++ b/Wireframe/css/style.css @@ -0,0 +1,193 @@ +body { + margin: 0; + padding: 0; + display: inline; + font-size: 15px; + width: 500%; + font-family: "Manrope"; +} +#wire-header { + display: flex; + flex-direction: column; + align-items: center; +} +.readme { +display: flex; +flex-direction: column; +align-items: center; +padding: 20px; +background: #f7f7f5; +} +.img1 { + width: 800px; + margin: 5px auto 20px auto; +} +h2 { + font-size: 24px; +} +p{ + font-size: 15px; +} +.btn { + display:inline-block; + border-radius:4px; + background-color: rgb(53, 230, 53); + border: none; + text-align: center; + font-size: 20px; + font-weight: 600; + padding: 10px; + margin-right: 690px; +} +a { + text-decoration: none; + color: white; +} +.btn:hover{ + padding-right: 25px; + transition: 0.5; +} +.question1 { + margin-left: -218px; + margin-bottom: 1px; +} +/* section-structure*/ +#structure-section { + display: flex; + justify-content: center; + margin: 10px auto 50px; + padding: 10px; + width: 400px; +} +/*.git-structure { + padding: 20px; + margin-top: 30px; +}*/ +.img-structure { + margin-left: 2px; + padding: 0 6px; + width: 400px; +} +.branch-float{ + margin-left: 15px; + margin-right: 30px; +} +h3 { + font-size: 15px; + display: flex; + justify-content: left; +} +.paragraph { + float: left; + font-size: 12px; + width: 300px; +} +.btn-2 { + display: inline-block; + border-radius: 4px; + background: rgb(53, 230, 53); + border: none; + color: rgb(10, 10, 11); + text-align: center; + font-size: 22px; + font-weight: 600px; + padding: 10px; + cursor: pointer; + +} +.git-structure-2 { + display: block; + margin-top: 50px; +} +.footer { + display: flex; + justify-content: center; + font-style: italic; + background-color: rgb(53, 230, 53); + color: white; +} +/* section responsive*/ +@media (max-width: 768px) { + header #wire-header, + header h1, + header p { + float: none; + text-align: center; + width: 100%; +} +.readme { + float: none; + text-align: center; +} +.img1{ + width: 100%; +} +.question1{ + padding-left: 20px; + float: none; + text-align: center; + width: 100%; +} +.question1 h2{ + float: none; + text-align: center; + width: 100%; + margin-left: 60px; + font-size: 24%; +} +.question1 p { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + float: none; + padding-left: 100px; +} +.btn{ + display: block; + text-align: center; + margin-right: 10px; +} +/*article section*/ +#structure-section { + float: none; + text-align: center; + width: 100%; + display: block; +} +#structure-section .git-structure{ + float: none; + text-align: center; + width: 100%; + display: block; +} +#structure-section .img-structure{ + width: 100%; + margin-right: 80px; +} +.branch-float{ + float: none; + text-align: center; + width: 100%; +} +#structure-section .branch-float h3{ + float: none; + text-align: center; + width: 100%; +} +#structure-section .branch-float p{ + margin-right: 10px; + width: 100%; +} +#structure-section .git-structure-2{ + float: none; + text-align: center; + width: 100%; + display: block; +} +.footer{ + float: none; + text-align: center; + margin-left: 60px; +} +} \ No newline at end of file diff --git a/Wireframe/img/Readme.png b/Wireframe/img/Readme.png new file mode 100644 index 000000000..acd32b19b Binary files /dev/null and b/Wireframe/img/Readme.png differ diff --git a/Wireframe/img/frame.png b/Wireframe/img/frame.png new file mode 100644 index 000000000..4251d0735 Binary files /dev/null and b/Wireframe/img/frame.png differ diff --git a/Wireframe/img/structure.png b/Wireframe/img/structure.png new file mode 100644 index 000000000..0efe415cc Binary files /dev/null and b/Wireframe/img/structure.png differ diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..32685bc8b 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -4,30 +4,68 @@ Wireframe - + -
+

Wireframe

- This is the default, provided code and no changes have been made yet. + A wireframe is a basic, skeletal blueprint of a website.

-
- -

Title

+
+ readme +
+

What is the purpose of a README file ?

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + The readme file is used to explain what is uploaded and how we can install or use it.
It even allows the uploader to add images and videos to help the reader navigate through the project.

- Read more +
+
+
+
+ What is the purpose of a wireframe? + +
+

+ What is the purpose of a wireframe? +

+

+ Wireframes give you clarity about how your project will look, it help you in visualizing the layout and functionality. +

+ +
+
+
+ What is a branch in Git +
+

+ What is a branch in Git? +

+

+ a branch is like a separate workspace where you can make changes and try new ideas without affecting the main project. +

+ +
+
+ + +
-