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

London<Leili Heidarishizari<User-Focused-Data Module<Wireframe<Week 1 #180

Closed
Show file tree
Hide file tree
Changes from all commits
Commits
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
90 changes: 90 additions & 0 deletions Wireframe/css/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@

body{
background-color:white;
border: 3px solid black;
}

.git-info {
text-align: center;
display: block;
margin: 0 auto;
}
.git-link {
margin-bottom: 50px;
}
.git-logo {
width: 300px;
height: auto;
}

h1:first-child {
color: purple;

}
h1 {
color: green;
font-size: 30px;
}
p {
font-size: 20px;

}
.container {
text-align: center;
display: block;

}
#git-branch {
color:green;
}

.articles-container {
display: flex;
justify-content: space-between;

}

.article {
flex: 1;
border: 3px ;
padding: 25px;
padding-top:20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
gap: 20px;
margin-left:20px ;
margin-right:0px;
;
}

.article img {

width: 450px;
height: 300px;
object-fit: cover;
padding-right: 0px;
margin-top: 50px;

}

.article-summary {
color: #555;
font-size: 17px;
}

.footer {
display: flex;
justify-content: center;
align-items: center;
height: 60px;
background-color: #f1f1f1;
margin-top: 15px;
}
#nav {
@media (max-width: 600px) {
a {
padding: 16px 32px; /* Larger buttons on mobile */
}
}
}


70 changes: 66 additions & 4 deletions Wireframe/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,72 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wireframe</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<section class="git-info" first-child pseudo-class>
<h1> All about GIT </h1>
<p>In this article,we are going to learn about <b>GIT</b> and its <b>FUNCTION</b>.
</p>
<img class="git-logo"
src="https://git-scm.com/images/logos/downloads/Git-Logo-2Color.png"
alt="git logo" >
</section>
</header>
<main>
<article>
<div class="container">
<h1>What is Git?</h1>
<p>
Git is a distributed version control system that allows developers to
track changes in their code and collaborate on projects efficiently.
It enables multiple contributors to work on the same project
simultaneously while keeping a complete history of changes, making it
easy to revert to previous versions if needed.
</p>
<a class="git-link"
href="https://www.w3schools.com/git/default.asp" target="_blank">Read more</a>
</div>
</article>
<div class="articles-container">
<div class="article">
<img class="developer-image"
src="https://media.licdn.com/dms/image/D5612AQEh7cKWUmFWWw/article-cover_image-shrink_720_1280/0/1700239521256?e=2147483647&v=beta&t=x7Cur2gMdYg2nSnNvQVxgxhd6tWU0lGqCzUvbmzLfPI"
alt="a man who is sitting in front of his computer thinking about what is git?">
<h1 class="topic"> Why do developers need Git?</h1>
<p class="article-summary">
Git supports branching and merging, allowing developers to experiment
with new features without affecting the main codebase. Its
decentralized nature means that every contributor has a full copy of
the repository, enhancing collaboration and minimizing the risk of
data loss.
</p>
<a href="https://www.nobledesktop.com/blog/what-is-git-and-why-should-you-use-it" target="_blank">Read more</a>
</div>
<div class="article">
<img class="git-branch-image"
src="https://user-images.githubusercontent.com/21223421/111696461-03056580-883d-11eb-82c4-7f8d926629e6.png"
alt="">
<h1 id="git-branch">What is a branch in Git?</h1>
<p class="article-summary"> In Git, a branch is a new/separate version of the main repository also,In Git, a branch is essentially a pointer to a specific snapshot (commit) of your project. It allows you to work on different versions or features of a project simultaneously without affecting the main codebaseA branch is essentially a lightweight movable pointer to one of the commits.</p>
<a href="https://www.w3schools.com/git/git_branch.asp#:~:text=In%20Git%2C%20a%20branch%20is%20a,new%2Fseparate%20version%20of%20the%20main%20repository." target="_blank">Read more</a>
</div>
</main>
<footer class="footer">
<p>&copy; 2024 My Awesome Website. All rights reserved.</p>
<nav id="nav">
<ul>
<li><a href="privacy.html">Privacy Policy </a></li>
<li><a href="terms.html">Terms of Service </a></li>
<li><a href="contact.html">Contact Us </a></li>
</ul>
</nav>
</footer>

</body>

<!-- Add your HTML markup here -->
<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
</body>
</html


</html>