Skip to content

Commit d492f23

Browse files
Camilla HallbergCamilla Hallberg
Camilla Hallberg
authored and
Camilla Hallberg
committed
added grid in stylesheet
1 parent 1c58b7b commit d492f23

2 files changed

Lines changed: 84 additions & 50 deletions

File tree

‎code/index.html‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,19 @@
2020

2121
<body>
2222
<header>
23-
<h1>GitHub Tracker</h1>
23+
<div class="header">
24+
<h1>GitHub Tracker</h1>
25+
</div>
2426
</header>
2527

26-
<section class="userData" id="userData"></section>
28+
<section class="user-data" id="userData"></section>
2729

28-
<main class="projects-wrapper" id="projects">
30+
<!-- behöver eventuellt inte klassen här-->
31+
<section class="project-headline">
2932
<h2>&#128071;&#127997; Technigo Projects &#128071;&#127997;</h2>
30-
</main>
33+
</section>
34+
35+
<section class="projects-wrapper" id="projects"></section>
3136

3237
<!-- This will be used to draw the chart 👇 -->
3338
<div id="canvas" class="chart-container">

‎code/style.css‎

Lines changed: 75 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ body {
44

55
h1 {
66
font-family: 'Shizuru', cursive;
7-
font-size: 72px;
7+
font-size: 48px;
88
color: palevioletred;
99
text-align: center;
1010
cursor: pointer;
@@ -41,7 +41,7 @@ h4 {
4141
.img {
4242
width: 96px;
4343
border-radius: 4px;
44-
border: 8px solid floralwhite;
44+
border: 8px solid #FDCEB9;
4545
}
4646

4747
.projects-card {
@@ -65,57 +65,86 @@ a {
6565
color: black;
6666
}
6767

68-
/* Footer Styling */
68+
/* --- FOOTER --- */
6969
.made-by {
7070
font-family: 'Shippori Antique B1', sans-serif;
7171
font-size: 12px;
7272
color: #694E4E;
7373
text-align: center;
7474
}
7575

76-
/* TABLET VIEW */
76+
/* --- TABLET VIEW --- */
7777
@media (min-width: 667px) and (max-width: 1024px) {
7878

79-
h1 {
80-
font-size: 96px;
81-
}
82-
83-
h2 {
84-
font-size: 48px;
85-
}
86-
87-
h3 {
88-
font-size: 36px;
79+
h1 {
80+
font-size: 96px;
81+
}
82+
83+
h2 {
84+
font-size: 48px;
85+
}
86+
87+
h3 {
88+
font-size: 36px;
89+
}
90+
91+
h4, p {
92+
font-size: 18px;
93+
}
94+
95+
.img {
96+
width: 200px;
97+
}
98+
99+
.default-branch {
100+
font-size: 24px;
101+
}
102+
103+
.projects-wrapper {
104+
display: grid;
105+
grid-template-columns: repeat(2, 1fr);
106+
grid-template-rows: repeat(2, 1fr);
107+
gap: 1rem;
108+
}
109+
}
110+
111+
/* --- DESKTOP VIEW --- */
112+
@media (min-width: 1025px) {
113+
.projects-wrapper {
114+
display: grid;
115+
grid-template-columns: repeat(3, 1fr);
116+
grid-template-rows: repeat(2, 1fr);
117+
gap: 1rem;
118+
}
119+
120+
.projects-card {
121+
transition: transform .6s;
122+
}
123+
124+
.projects-card:hover {
125+
background-color:#D885A3;
126+
transform: scale(1.2);
127+
}
128+
129+
.default-branch {
130+
color: lightpink;
131+
}
132+
133+
.user-data {
134+
display: flex;
135+
justify-content: space-around;
136+
padding: 48px;
137+
}
138+
139+
.img {
140+
width: 150px;
141+
}
142+
143+
h1 {
144+
font-size: 96px;
145+
}
146+
147+
h2 {
148+
font-size: 48px;
149+
}
89150
}
90-
91-
h4 {
92-
font-size: 18px;
93-
}
94-
95-
p {
96-
font-size: 18px;
97-
}
98-
99-
.img {
100-
width: 192px;
101-
}
102-
103-
.default-branch {
104-
font-size: 24px;
105-
}
106-
107-
/* .projects-wrapper { */
108-
/* display: flex; */
109-
/* flex-direction: column; */
110-
/* flex-wrap: wrap; */
111-
/* justify-content: center; */
112-
/* max-width: 50%; */
113-
/* align-items: center; */
114-
/* padding: 18px; */
115-
/* } */
116-
117-
/* .projects-card { */
118-
119-
/* } */
120-
121-
}

0 commit comments

Comments
 (0)