Skip to content
This repository was archived by the owner on Apr 18, 2025. It is now read-only.

Feature/wireframe #201

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

Feature/wireframe #201

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1b94107
first basic sketch of HTML and CSS
FabioMedinaD Sep 23, 2024
5c8691e
add section "ReadMore" and first-child to highlight first article
FabioMedinaD Sep 23, 2024
108bdec
css + article summary
FabioMedinaD Sep 23, 2024
1438219
finish version 1.0
FabioMedinaD Sep 23, 2024
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
3 changes: 3 additions & 0 deletions Wireframe/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
body{
background-color:rgb(117, 13, 13);
}
46 changes: 46 additions & 0 deletions Wireframe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,5 +9,51 @@
<body>
<!-- Add your HTML markup here -->
<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
<header class="header">
<h1>GIT</h1>
<p class="main">Version Control System</p>
</header>
<main>
<section class="section1">
<article class="article1">
<h2>What is Git?</h2>
<div>
<img width:79% src="https://upload.wikimedia.org/wikipedia/commons/e/e0/Git-logo.svg">
</div>
<p>Git is a version control system used for tracking changes in computer files. It is generally used for source code management in software development.</p>
<div>
<br>
<a target="_blank" class="rdm-btn" href="https://www.simplilearn.com/tutorials/git-tutorial/what-is-git">Read More</a>
</div>
</article>
</section>
<section class="section2">
<article class="article2">
<h2>Why do developers need Git?</h2>
<div>
<img width=100% src="https://www.simplilearn.com/ice9/free_resources_article_thumb/business.JPG">
</div>
<p>Because let multiple developers work on a project where everyone can upload, edit and manage the source code. And can also work in parallel (with help of Branching and Merging) so that there are no code conflicts between them and all developers can work without losing or affecting each other’s work!.</p>
<br>
<a target="_blank" class="rdm-btn" href="https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell">Read More</a>
</article>
<article class="article3">
<h2>What is a branch in Git?</h2>
<div>
<img class="img-git" width=100% src="https://miro.medium.com/v2/resize:fit:720/format:webp/1*vOgcWxc9PW10b-E6VndtLQ.png">
</div>
<p>Branching means you diverge from the main line of development and continue to do work without messing with that main line</p>
<br>
<a target="_blank" class="rdm-btn" href="https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell">Read More</a>
</article>
</section>
</main>

<footer class="footer">
<hr />
<p>contacs</p>
<p>More informations</p>
</footer>

</body>
</html
70 changes: 70 additions & 0 deletions Wireframe/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
*{
margin:0;
padding: 0;
box-sizing: border-box;
}
.header{
height: 10%;
display:flex;
flex-direction:column;
justify-content: center;
align-items: center;


}
body{background-color: powderblue;}
.main{ text-align: center;
font-size: 1.5rem;}

main .section1 article:first-child{
color:lime;
background-color: black;
}

.section1{
height: 40%;

}

.section2{
height: 45%;
display:flex;
justify-content: space-between;

}
.article2{
width: 50%;
margin: 1% 1% 1% 1%;
padding: 1% 1% 1% 1%;
}

.article3{
width: 50%;
margin: 1% 1% 1% 1%;
padding: 1% 1% 5% 1%;
}


article{
border:4px solid;
padding:1% 1% 1% 1%;
margin-top: 3%;
}


h1{

font-family: 'Times New Roman', Times, serif;
font-size: 3rem;
}
h2{
font-family: 'Times New Roman', Times, serif;
font-size:1.5rem ;
}
.rdm-btn{
background-color: beige;
color:black;
padding: 0.50% 0.40%;
text-decoration: none;
border: 1px solid;}