Skip to content

London | May-2025 | Mohammadreza Babaei | Wireframe #472

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

London | May-2025 | Mohammadreza Babaei | Wireframe #472

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
8d9acae
Mo-reza_Wireframe
Moreza-event May 14, 2025
36d76f3
Mo-reza_wireframe
Moreza-event May 14, 2025
12d438d
Moreza_wireframe2
Moreza-event May 14, 2025
8492609
Form-control
Moreza-event May 14, 2025
8f69ca1
Fiexed
Moreza-event May 14, 2025
14bc9a6
Fixed2
Moreza-event May 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 47 additions & 6 deletions Form-Controls/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,56 @@ <h1>Product Pick</h1>
</header>
<main>
<form>
<!-- write your html here-->
<!--
try writing out the requirements first as comments
this will also help you fill in your PR message later-->

<label for="name">Full name:</label>
<input type="text" id:"name" name"name" type="text" required minlength="2" />
<br><br>



<label for="email">Email:</label>
<input type="email" id="email" name="email" required />
<br><br>


<fieldset>
<legend> Choose a colour</legend>
<label>
<input type="radio" name="colour" value="red" required />
Red
</label>

<label>
<input type="radio" name="coulour" value="blue" />
Blue
</label>
<label>
<input type="radio" name="colour" value="green" />
Green
</label>

</fieldset>
<br>


<label for="size"> Choose a size : </label>
<select name="size" id="size">
<option value="">Select a size</option>
<option value="XS">XS</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
<option value="XXL">XXL</option>
</select>
<br><br>


<button type="submit">Check Out</button>
</form>
</main>
<footer>
<!-- change to your name-->
<h2>By HOMEWORK SOLUTION</h2>
<h2>Homework</h2>
</footer>
</body>
</html>
35 changes: 25 additions & 10 deletions Wireframe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,25 +8,40 @@
</head>
<body>
<header>
<h1>Wireframe</h1>
<p>
This is the default, provided code and no changes have been made yet.
<h1>Wireframe Articles Website</h1>
<p class="h1-wireframe">
Some articles will be shown on this website as examples to explain the wireframe design.
</p>
</header>
<main>
<article>
<img src="placeholder.svg" alt="" />
<h2>Title</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
voluptates. Quisquam, voluptates.
<img src="https://cdn-learn.adafruit.com/assets/assets/000/112/346/large1024/programming_GFP_view_of_new_repository_after_creation.png?1655153215" alt="" />
<h2>What is the purpose of a README file?</h2>
<p class="h2-details">
A README file is a text file that contains information about a project. It typically includes details such as the project's purpose, how to install and use it, and any other relevant information. The README file is often the first thing that users see when they visit a project's repository, so it's important to make it clear and informative.
</p>
<a href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes" target="_blank">Read more</a>
</article>
<article>
<img src="https://cdn.sanity.io/images/599r6htc/regionalized/4c8605ad998d69b03a6eefb850cce5e23a0a96dc-2880x1440.png?w=2880&h=1440&q=75&fit=max&auto=format" alt="" />
<h2>What is the purpose of a wireframe?</h2>
<p class="h2-details">
A wireframe is a visual representation of a user interface. It serves as a blueprint for the design and layout of a website or application. Wireframes help designers and developers plan the structure and functionality of a project before moving on to the actual design and development phases. They are typically low-fidelity, focusing on layout and content rather than visual design.
</p>
<a href="https://www.productplan.com/glossary/wireframe/" target="_blank">Read more</a>
</article>
<article>
<img src="https://digitalvarys.com/wp-content/uploads/2019/06/GIT-Branchand-its-Operations.png" alt="" />
<h2>What is a branch in Git?</h2>
<p class="h2-details">
A branch in Git is a separate line of development within a repository. It allows developers to work on different features or fixes simultaneously without affecting the main codebase. Branches are often used to isolate changes, making it easier to manage and review code before merging it back into the main branch. This helps maintain a clean and organized project history.
</p>
<a href="">Read more</a>
<a href="https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-branches" target="_blank">Read more</a>
</article>
</main>
<footer>
<p>
This is the default, provided code and no changes have been made yet.
This project demonstrates the creation of a structured and accessible webpage using semantic HTML and CSS, guided by a provided wireframe. Key concepts covered include the purpose of README files, wireframes, and Git branches.
</p>
</footer>
</body>
Expand Down
29 changes: 28 additions & 1 deletion Wireframe/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,9 +50,12 @@ main {
margin: 0 auto calc(var(--space) * 4) auto;
}
footer {
position: fixed;
background: rgb(177, 177, 170);
position:static;
bottom: 0;
text-align: center;
font-size: 2rem;
padding: var(--space) 0;
}
/* ====== Articles Grid Layout ====
Setting the rules for how articles are placed in the main element.
Expand Down Expand Up @@ -87,3 +90,27 @@ article {
grid-column: span 3;
}
}

h1{

font-size: 5rem;
margin: var(--space) 0;
grid-column: span 3;
text-align: center;
}
.h1-wireframe {
font-size: 2rem;
text-align: center;
}

h2 {
font-size: 3rem;
margin: var(--space) 0;
text-align: center;
}

.h2-details {
font-size: 1.5rem;
margin: var(--space) 0;
text-align: left;
}
8 changes: 4 additions & 4 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,17 +26,17 @@
<main>
<ol>
<li>
<h2><a href="/Wireframe">Project 1: Wireframe</a></h2>
<h2><a href="Wireframe\index.html">Project 1: Wireframe</a></h2>
<p>
Mentors:
<a href="Wireframe/readme.md">open the assignment in a tab</a>
<a href="Wireframe\README.md">open the assignment in a tab</a>
</p>
</li>
<li>
<h2><a href="/Form-Controls">Project 2: Form Controls</a></h2>
<h2><a href="Form-Controls\index.html">Project 2: Form Controls</a></h2>
<p>
Mentors:
<a href="Form-Controls/readme.md">open the assignment in a tab</a>
<a href="Form-Controls\README.md">open the assignment in a tab</a>
</p>
</li>
</ol>
Expand Down