Skip to content

Commit 4d35480

Browse files
alsiamalsiam
committed
web projects: converted to responsive
1 parent 8948018 commit 4d35480

File tree

2 files changed

+34
-34
lines changed

2 files changed

+34
-34
lines changed

‎index.html‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
<!-- custom skeleton preloader -->
2222
<div id="preloader" class="fixed top-0 left-0 bg-slate-300 w-screen h-screen z-10">
2323
<div class="wrapper">
24-
<div class="max-w-screen-xl mx-auto h-14">
24+
<div class="mx-3 md:max-w-screen-xl md:mx-auto h-14">
2525
<div class="flex justify-between items-center pt-6">
2626
<div class="w-48 h-8 bg-slate-200 "></div>
2727
<div class="w-40 h-8 bg-slate-200 rounded-full"></div>
@@ -30,7 +30,7 @@
3030
<div class="bg-slate-200 p-6 pb-12 m-6">
3131
<div class="max-w-screen-xl mx-auto">
3232
<div class="bg-slate-100 h-12 p-1 mb-3"></div>
33-
<div class="grid grid-cols-3 gap-4">
33+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
3434
<div class="bg-slate-100 h-64"></div>
3535
<div class="bg-slate-100 h-64"></div>
3636
<div class="bg-slate-100 h-64"></div>
@@ -45,36 +45,36 @@
4545

4646
<!-- Header navigation bar-->
4747
<header class="bg-slate-200 pt-4">
48-
<div class="max-w-screen-xl mx-auto">
49-
<div class="text-center flex justify-between">
48+
<div class="mx-3 md:max-w-screen-xl md:mx-auto">
49+
<div class="text-center flex justify-between items-center">
5050
<a href="https://github.com/alsiam/web-projects"
51-
class="text-3xl pt-2 text-blue-500 text-center font-bold font-mono">
51+
class="text-xl md:text-3xl text-blue-500 text-center font-bold font-mono">
5252
AL PROJECTS :)
5353
</a>
5454

55-
<a class="bg-slate-800 hover:bg-slate-900 text-white font-medium py-2 px-4 rounded-full"
55+
<a class="bg-slate-800 hover:bg-slate-900 text-white font-medium py-1 px-2 md:py-2 md:px-4 rounded-full"
5656
href="https://github.com/alsiam/web-projects">
5757
Follow on GitHub
5858
</a>
5959
</div>
6060
</div>
6161
</header>
6262
<main class="bg-slate-200 p-1">
63-
<section class="bg-slate-100 p-6 pb-12 m-6">
63+
<section class="bg-slate-100 md:p-2 lg:p-6 pb-12 m-2 md:m-3 lg:m-6">
6464
<div class="max-w-screen-xl mx-auto">
65-
<h1 class="text-3xl text-slate-800 font-semibold font-mono border-b-2 text-center p-1 mb-3">Featured
66-
Projects -</h1>
67-
<div id="featured-projects" class="grid grid-cols-3 gap-4">
65+
<h1 class="text-xl lg:text-3xl text-slate-800 bg-slate-200 font-semibold border-b-2 text-center p-2 mb-3">6+ Featured
66+
Projects</h1>
67+
<div id="featured-projects" class="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
6868
<!-- Projects injecting by script.js -->
6969
</div>
7070
</div>
7171
</section>
7272

73-
<section class="bg-slate-100 p-6 pb-12 m-6">
73+
<section class="bg-slate-100 md:p-2 lg:p-6 pb-12 m-2 md:m-3 lg:m-6">
7474
<div class="max-w-screen-xl mx-auto">
75-
<h1 class="text-3xl text-slate-800 font-semibold font-mono border border-b-2 text-center mb-3">Total
76-
Projects -</h1>
77-
<div id="total-projects" class="grid grid-cols-3 gap-4">
75+
<h1 class="text-xl lg:text-3xl text-slate-800 bg-slate-200 font-semibold border-b-2 text-center p-2 mb-3">17+ Other
76+
Projects</h1>
77+
<div id="total-projects" class="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
7878
<!-- Projects injecting by script.js -->
7979
</div>
8080
</div>

‎script.js‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,12 @@ window.onload = () => {
66
<img src=${project.thumbnail} alt="hamburger food" class="w-full h-full">
77
</div>
88
<div class="flex justify-between items-center mt-3">
9-
<h1 class="text-slate-800 text-lg">${project.name}</h1>
9+
<h1 class="text-slate-800 text-sm md:text-lg font-semibold">${project.name}</h1>
1010
<div class="flex justify-between items-center gap-3">
11-
<a class="bg-slate-200 text-slate-800 py-1 px-3 hover:bg-slate-300 hover:text-slate-900 rounded"
11+
<a class="text-sm md:text-base bg-slate-300 text-slate-800 py-1 px-3 transition hover:bg-slate-800 hover:text-slate-100 rounded"
1212
href=${project.code}
1313
target="_blank">Source Code</a>
14-
<a class="bg-slate-200 text-slate-800 py-1 px-3 hover:bg-slate-300 hover:text-slate-900 rounded"
14+
<a class="text-sm md:text-base bg-slate-300 text-slate-800 py-1 px-3 transition hover:bg-slate-800 hover:text-slate-100 rounded"
1515
href=${project.preview} target="_blank">Preview
1616
Demo</a>
1717
</div>
@@ -24,29 +24,29 @@ window.onload = () => {
2424
featuredProjectList.join("");
2525
const totalProjectList = totalProjects.map((project) => {
2626
return `
27-
<div class="bg-slate-100 p-3 rounded shadow-lg">
28-
<div class="">
29-
<img src=${project.thumbnail} alt="hamburger food" class="w-full h-full">
30-
</div>
31-
<div class="flex justify-between items-center mt-3">
32-
<h1 class="text-slate-800 text-lg">${project.name}</h1>
33-
<div class="flex justify-between items-center gap-3">
34-
<a class="bg-slate-200 text-slate-800 py-1 px-3 hover:bg-slate-300 hover:text-slate-900 rounded"
35-
href=${project.code}
36-
target="_blank">Source Code</a>
37-
<a class="bg-slate-200 text-slate-800 py-1 px-3 hover:bg-slate-300 hover:text-slate-900 rounded"
38-
href=${project.preview} target="_blank">Preview
39-
Demo</a>
27+
<div class="bg-slate-100 p-3 rounded shadow-lg">
28+
<div class="">
29+
<img src=${project.thumbnail} alt="hamburger food" class="w-full h-full">
30+
</div>
31+
<div class="flex justify-between items-center mt-3">
32+
<h1 class="text-slate-800 text-sm md:text-lg font-semibold">${project.name}</h1>
33+
<div class="flex justify-between items-center gap-3">
34+
<a class="text-sm md:text-base bg-slate-300 text-slate-800 py-1 px-3 transition hover:bg-slate-800 hover:text-slate-100 rounded"
35+
href=${project.code}
36+
target="_blank">Source Code</a>
37+
<a class="text-sm md:text-base bg-slate-300 text-slate-800 py-1 px-3 transition hover:bg-slate-800 hover:text-slate-100 rounded"
38+
href=${project.preview} target="_blank">Preview
39+
Demo</a>
40+
</div>
4041
</div>
4142
</div>
42-
</div>
4343
`;
4444
});
4545

4646
document.getElementById("total-projects").innerHTML =
4747
totalProjectList.join("");
48-
48+
4949
setTimeout(() => {
50-
document.getElementById("preloader").style.display = "none";
51-
}, 2000);
50+
document.getElementById("preloader").style.display = "none";
51+
}, 2000);
5252
};

0 commit comments

Comments
 (0)