Skip to content

Commit 39dd081

Browse files
Divi03Divi03
authored
Added index.html (#60)
* Added index.html * Delete script.js * improved script.js * Update script.js * Update script.js
1 parent d1176c8 commit 39dd081

File tree

3 files changed

+225
-0
lines changed

3 files changed

+225
-0
lines changed

‎index.html

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="style.css">
8+
<title>Frontend-Projects</title>
9+
10+
</head>
11+
<body>
12+
<div class="headder">
13+
<span>Frontend-Projects</span>
14+
</div>
15+
16+
<!-- Projet List-->
17+
<div class="row" id = "rowEl">
18+
19+
20+
</div>
21+
<script src="./script.js"></script>
22+
</body>
23+
</html>

‎script.js

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
const rowEl = document.getElementById("rowEl");
2+
3+
// Function to fetch data from api and send to manageData().
4+
function getData(){
5+
fetch('https://api.github.com/repos/devvsakib/Frontend-Projects/contents')
6+
.then(response => response.json()
7+
)
8+
.then(data => {
9+
//Data = data;
10+
//console.log(data); // Prints result
11+
manageData(data);
12+
13+
})
14+
.catch(error => console.error(error))
15+
}
16+
17+
// Function to manage data and set button link for each project.
18+
function manageData(data){
19+
data.forEach((array , idx) =>{
20+
//console.log(data.name);
21+
if(array.name[0]!=".")
22+
{
23+
//console.log(array.name);
24+
rowEl.innerHTML += `
25+
<div class="column">
26+
<div id = "card-${idx}" class="card">
27+
<form action='https://devvsakib.github.io/Frontend-Projects/${array.name}'>
28+
<input id="button-29" class="button-29" type="submit" value="${array.name}" />
29+
</form>
30+
31+
<div calss="gitLink">
32+
<a href= "${array.html_url}" ><svg height="32" aria-hidden="true" viewBox="0 0 16 16" version="1.1" width="32" data-view-component="true" class="octicon octicon-mark-github v-align-middle">
33+
<path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
34+
</svg></a>
35+
</div>
36+
</div>
37+
</div>
38+
`
39+
}
40+
})
41+
}
42+
43+
getData()

‎style.css

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
@import url(https://fonts.googleapis.com/css?family=Dosis:200,300,400,500,600,700,800);
2+
* {
3+
box-sizing: border-box;
4+
}
5+
6+
body {
7+
font-family: Arial, Helvetica, sans-serif;
8+
overflow-x: hidden;
9+
-ms-overflow-style: none; /* Internet Explorer 10+ */
10+
scrollbar-width: none;
11+
}
12+
13+
body::-webkit-scrollbar {
14+
display: none; /* Safari and Chrome */
15+
}
16+
17+
18+
.headder{
19+
z-index: 1;
20+
width: 100vw;
21+
background: rgb(240, 240, 240);
22+
border: 1px solid black;
23+
padding-top: 1rem;
24+
padding-bottom: 1rem;
25+
margin-bottom: 3rem;
26+
text-align: center;
27+
margin-top:-0.5rem;
28+
margin-left: -0.5rem;
29+
position: sticky;
30+
top:0;
31+
}
32+
33+
34+
.headder span{
35+
z-index: 1;
36+
height:fit-content ;
37+
font-family: 'Dosis';
38+
font-weight: 800;
39+
text-align: center;
40+
font-size: 5vh;
41+
border:1px solid black;
42+
background: linear-gradient(to right, #30CFD0 0%, #330867 100%);
43+
-webkit-background-clip: text;
44+
-webkit-text-fill-color: transparent;
45+
-webkit-text-stroke-width: 1px;
46+
-webkit-text-stroke-color: black;
47+
overflow: hidden;
48+
49+
}
50+
51+
52+
53+
54+
/* Float four columns side by side */
55+
.column {
56+
float: left;
57+
width: 25%;
58+
padding: 0 2.5rem;
59+
padding-bottom: 1rem;
60+
}
61+
62+
63+
/* Remove extra left and right margins, due to padding in columns */
64+
.row {margin: 0 ;}
65+
66+
/* Clear floats after the columns */
67+
.row:after {
68+
content: "";
69+
display: table;
70+
clear: both;
71+
}
72+
73+
/* Style the counter cards */
74+
.card {
75+
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* this adds the "card" effect */
76+
padding: 16px;
77+
text-align: center;
78+
background: rgb(0,212,255);
79+
background: radial-gradient(circle, rgb(255, 255, 255) 0%, rgb(243, 117, 117) 50%, rgb(76, 128, 223) 100%);
80+
border: 2px solid gold;
81+
border-radius: 1rem;
82+
height:20rem;
83+
width:15rem;
84+
line-height: 5rem;
85+
}
86+
87+
.gitLink
88+
{
89+
margin-top: 5rem;
90+
}
91+
.card form{
92+
padding-top: 5.8rem;
93+
display: flex;
94+
justify-content: center;
95+
justify-items: center;
96+
text-justify: auto;
97+
word-wrap: break-word;
98+
}
99+
100+
101+
.button-29 {
102+
appearance: none;
103+
background-image: radial-gradient(100% 100% at 100% 0, #5adaff 0, #5468ff 100%);
104+
border: 0;
105+
border-radius: 6px;
106+
box-shadow: rgba(45, 35, 66, .4) 0 2px 4px,rgba(45, 35, 66, .3) 0 7px 13px -3px,rgba(58, 65, 111, .5) 0 -3px 0 inset;
107+
box-sizing: border-box;
108+
color: #fff;
109+
cursor: pointer;
110+
display:inline-block;
111+
font-family: "JetBrains Mono",monospace;
112+
height: auto;
113+
min-height: 50px;
114+
width:100%;
115+
justify-content: center;
116+
line-height: 1;
117+
list-style: none;
118+
overflow:hidden;
119+
padding-left: 16px;
120+
padding-right: 16px;
121+
position: relative;
122+
text-align: center;
123+
text-decoration: none;
124+
transition: box-shadow .15s,transform .15s;
125+
user-select: none;
126+
-webkit-user-select: none;
127+
touch-action: manipulation;
128+
white-space: initial;
129+
will-change: box-shadow,transform;
130+
font-size: 18px;
131+
}
132+
133+
134+
135+
.button-29:focus {
136+
box-shadow: #3c4fe0 0 0 0 1.5px inset, rgba(45, 35, 66, .4) 0 2px 4px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
137+
}
138+
139+
.button-29:hover {
140+
box-shadow: rgba(45, 35, 66, .4) 0 4px 8px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
141+
transform: translateY(-2px);
142+
}
143+
144+
145+
.button-29:active {
146+
box-shadow: #3c4fe0 0 3px 7px inset;
147+
transform: translateY(2px);
148+
}
149+
150+
151+
152+
/* Responsive columns - one column layout (vertical) on small screens */
153+
@media screen and (max-width: 600px) {
154+
.column {
155+
width: 100%;
156+
display: block;
157+
margin-bottom: 20px;
158+
}
159+
}

0 commit comments

Comments
 (0)