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

Commit fe53b25

Browse files
MarcusZagorskiMarcusZagorski
committed
Test For My Dad
1 parent 39b0af0 commit fe53b25

2 files changed

Lines changed: 145 additions & 1 deletion

File tree

‎Wireframe/css/style.css‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200;0,300;0,400;0,500;1,200;1,300;1,400;1,500&display=swap');
2+
* {
3+
padding: 0;
4+
margin: 0;
5+
box-sizing: border-box;
6+
}
7+
8+
body {
9+
padding-top: 2%;
10+
font-family: "Karla";
11+
font-weight: 200;
12+
}
13+
14+
header {
15+
text-align: center;
16+
}
17+
18+
h1 {
19+
padding-bottom: 1%;
20+
}
21+
22+
section {
23+
width: 80%;
24+
margin: 0 auto;
25+
}
26+
27+
/* Main Section - What is git? */
28+
29+
.what-is-git-container {
30+
display: grid;
31+
grid-template-rows: repeat(2, auto);
32+
margin-top: 2rem;
33+
}
34+
35+
.what-is-git-img {
36+
width: 100%;
37+
border-top-left-radius: 16px;
38+
border-top-right-radius: 16px;
39+
align-self: center;
40+
}
41+
42+
.title-desc-btn {
43+
padding: 1% 0 1% 1%;
44+
color: #f8f9fa;
45+
background-color: #495057;
46+
border-bottom-left-radius: 16px;
47+
border-bottom-right-radius: 16px;
48+
}
49+
50+
.read-more-btn {
51+
margin-top: 1.4%;
52+
padding: 8px 16px;
53+
font-size: 18px;
54+
background-color: #40c057;
55+
border: none;
56+
color: black;
57+
border-radius: 6px;
58+
cursor: pointer;
59+
transition: background-color 1.2s, color 1.2s;
60+
}
61+
62+
.read-more-btn:hover,
63+
.read-more-btn:active {
64+
background-color: #51cf66;
65+
color: white;
66+
}
67+
68+
/* Section 2 - Why do developers need git? */
69+
70+
.why-do-devs-and-branch-container {
71+
display: grid;
72+
grid-template-rows: repeat(2, auto);
73+
grid-template-columns: repeat(2, auto);
74+
margin-top: 1rem;
75+
column-gap: 4rem;
76+
}
77+
78+
.why-do-devs-img {
79+
width: 100%;
80+
border-top-left-radius: 16px;
81+
border-top-right-radius: 16px;
82+
}
83+
84+
.-title-desc-btn {
85+
grid-column: 2 / 1;
86+
grid-row: 2 / 3;
87+
}
88+
89+
/* Section 2a - What is a branch in Git */
90+
91+
.what-is-branch-img {
92+
width: 100%;
93+
border-top-left-radius: 16px;
94+
border-top-right-radius: 16px;
95+
grid-row: 1 / 2;
96+
grid-column: 2 / 3;
97+
}
98+
99+
.--title-desc-btn {
100+
grid-column: 2 / 3;
101+
}

‎Wireframe/index.html‎

Lines changed: 44 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,52 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Wireframe</title>
7-
<link rel="stylesheet" href="style.css">
7+
<link rel="stylesheet" href="css/style.css">
88
</head>
99
<body>
10+
<section>
11+
<header>
12+
<h1>Page Title</h1>
13+
Add Short Description
14+
</header>
15+
<main>
16+
<div class="what-is-git-container">
17+
<img src="https://static.vecteezy.com/system/resources/previews/017/119/660/original/github-logo-git-hub-icon-with-text-on-white-and-black-background-free-vector.jpg" class="what-is-git-img"/>
18+
<div class="title-desc-btn">
19+
<h1>What is Git?</h1>
20+
<h4>Article Title</h4>
21+
<a href="#">
22+
<button class="read-more-btn">Read More</button>
23+
</a>
24+
</div>
25+
</div>
26+
</main>
27+
</section>
28+
29+
<section>
30+
<div class="why-do-devs-and-branch-container">
31+
<img
32+
src="https://static.vecteezy.com/system/resources/previews/017/119/660/original/github-logo-git-hub-icon-with-text-on-white-and-black-background-free-vector.jpg"
33+
class="why-do-devs-img" />
34+
<div class="-title-desc-btn">
35+
<h1>Why do developers need Git?</h1>
36+
<h4>Article Title</h4>
37+
<a href="#">
38+
<button class="read-more-btn">Read More</button>
39+
</a>
40+
</div>
41+
42+
<img
43+
src="https://static.vecteezy.com/system/resources/previews/017/119/660/original/github-logo-git-hub-icon-with-text-on-white-and-black-background-free-vector.jpg"
44+
class="what-is-branch-img" />
45+
<div class="--title-desc-btn">
46+
<h1>What is a branch in Git?</h1>
47+
<h4>Article Title</h4>
48+
<a href="#">
49+
<button class="read-more-btn">Read More</button>
50+
</a>
51+
</div>
52+
</section>
1053
<!-- Add your HTML markup here -->
1154
<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
1255
</body>

0 commit comments

Comments
 (0)