Skip to content

Commit d3afc41

Browse files
ProgrammerGauravProgrammerGaurav
committed
Grid Framework Created
1 parent 249694f commit d3afc41

File tree

2 files changed

+222
-102
lines changed

2 files changed

+222
-102
lines changed

Diff for: ‎css/grid.min.css

+184
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
html{box-sizing:border-box;-ms-overflow-style:scrollbar}
2+
*,
3+
*::before,
4+
*::after{box-sizing:inherit}
5+
.container,
6+
.container-fluid,
7+
.container-sm,
8+
.container-md,
9+
.container-lg,
10+
.container-xl{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}
11+
@media (min-width:576px){
12+
.container,
13+
.container-sm{max-width:540px}
14+
}
15+
@media (min-width:768px){
16+
.container,
17+
.container-sm,
18+
.container-md{max-width:720px}
19+
}
20+
@media (min-width:992px){
21+
.container,
22+
.container-sm,
23+
.container-md,
24+
.container-lg{max-width:960px}
25+
}
26+
@media (min-width:1200px){
27+
.container,
28+
.container-sm,
29+
.container-md,
30+
.container-lg,
31+
.container-xl{max-width:1140px}
32+
}
33+
.row{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-15px;margin-left:-15px}
34+
.no-gutters{margin-right:0;margin-left:0}
35+
.no-gutters>.col,
36+
.no-gutters>[class*="col-"]{padding-right:0;padding-left:0}
37+
.col-1,
38+
.col-2,
39+
.col-3,
40+
.col-4,
41+
.col-5,
42+
.col-6,
43+
.col-7,
44+
.col-8,
45+
.col-9,
46+
.col-10,
47+
.col-11,
48+
.col-12,
49+
.col,
50+
.col-auto,
51+
.col-sm-1,
52+
.col-sm-2,
53+
.col-sm-3,
54+
.col-sm-4,
55+
.col-sm-5,
56+
.col-sm-6,
57+
.col-sm-7,
58+
.col-sm-8,
59+
.col-sm-9,
60+
.col-sm-10,
61+
.col-sm-11,
62+
.col-sm-12,
63+
.col-sm,
64+
.col-sm-auto,
65+
.col-md-1,
66+
.col-md-2,
67+
.col-md-3,
68+
.col-md-4,
69+
.col-md-5,
70+
.col-md-6,
71+
.col-md-7,
72+
.col-md-8,
73+
.col-md-9,
74+
.col-md-10,
75+
.col-md-11,
76+
.col-md-12,
77+
.col-md,
78+
.col-md-auto,
79+
.col-lg-1,
80+
.col-lg-2,
81+
.col-lg-3,
82+
.col-lg-4,
83+
.col-lg-5,
84+
.col-lg-6,
85+
.col-lg-7,
86+
.col-lg-8,
87+
.col-lg-9,
88+
.col-lg-10,
89+
.col-lg-11,
90+
.col-lg-12,
91+
.col-lg,
92+
.col-lg-auto,
93+
.col-xl-1,
94+
.col-xl-2,
95+
.col-xl-3,
96+
.col-xl-4,
97+
.col-xl-5,
98+
.col-xl-6,
99+
.col-xl-7,
100+
.col-xl-8,
101+
.col-xl-9,
102+
.col-xl-10,
103+
.col-xl-11,
104+
.col-xl-12,
105+
.col-xl,
106+
.col-xl-auto{position:relative;width:100%;padding-right:15px;padding-left:15px}
107+
.col{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;max-width:100%}
108+
.col-auto{-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:100%}
109+
.col-1{-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}
110+
.col-2{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}
111+
.col-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}
112+
.col-4{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}
113+
.col-5{-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}
114+
.col-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}
115+
.col-7{-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}
116+
.col-8{-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}
117+
.col-9{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}
118+
.col-10{-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}
119+
.col-11{-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}
120+
.col-12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}
121+
@media (min-width:576px){
122+
.col-sm{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;max-width:100%}
123+
.col-sm-auto{-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:100%}
124+
.col-sm-1{-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}
125+
.col-sm-2{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}
126+
.col-sm-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}
127+
.col-sm-4{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}
128+
.col-sm-5{-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}
129+
.col-sm-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}
130+
.col-sm-7{-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}
131+
.col-sm-8{-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}
132+
.col-sm-9{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}
133+
.col-sm-10{-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}
134+
.col-sm-11{-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}
135+
.col-sm-12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}
136+
}
137+
@media (min-width:768px){
138+
.col-md{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;max-width:100%}
139+
.col-md-auto{-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:100%}
140+
.col-md-1{-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}
141+
.col-md-2{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}
142+
.col-md-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}
143+
.col-md-4{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}
144+
.col-md-5{-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}
145+
.col-md-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}
146+
.col-md-7{-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}
147+
.col-md-8{-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}
148+
.col-md-9{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}
149+
.col-md-10{-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}
150+
.col-md-11{-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}
151+
.col-md-12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}
152+
}
153+
@media (min-width:992px){
154+
.col-lg{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;max-width:100%}
155+
.col-lg-auto{-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:100%}
156+
.col-lg-1{-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}
157+
.col-lg-2{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}
158+
.col-lg-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}
159+
.col-lg-4{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}
160+
.col-lg-5{-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}
161+
.col-lg-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}
162+
.col-lg-7{-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}
163+
.col-lg-8{-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}
164+
.col-lg-9{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}
165+
.col-lg-10{-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}
166+
.col-lg-11{-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}
167+
.col-lg-12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}
168+
}
169+
@media (min-width:1200px){
170+
.col-xl{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;max-width:100%}
171+
.col-xl-auto{-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:100%}
172+
.col-xl-1{-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}
173+
.col-xl-2{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}
174+
.col-xl-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}
175+
.col-xl-4{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}
176+
.col-xl-5{-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}
177+
.col-xl-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}
178+
.col-xl-7{-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}
179+
.col-xl-8{-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}
180+
.col-xl-9{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}
181+
.col-xl-10{-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}
182+
.col-xl-11{-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}
183+
.col-xl-12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}
184+
}

Diff for: ‎work.html

+38-102
Original file line numberDiff line numberDiff line change
@@ -2,121 +2,57 @@
22
<html lang="en">
33

44
<head>
5-
<!-- Global site tag (gtag.js) - Google Analytics -->
6-
7-
<title>ProgrammerGaurav | Gaurav Gupta | portfolio | Web Developer</title>
8-
<meta charset="utf-8">
9-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
10-
<link rel="stylesheet" href="css/style.css">
11-
<link rel="stylesheet" href="css/bootstrap.min.css">
12-
<link rel="stylesheet" href="css/animate.css">
13-
<link rel="stylesheet" href="css/owl.carousel.css">
14-
<link rel="stylesheet" href="css/responsive.css">
15-
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
16-
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
5+
<title>Programmer Gaurav | Gaurav Gupta | portfolio | Web Developer</title>
6+
<link rel="icon" href="img/icon.jpg">
7+
<!-- <link rel="stylesheet" href="css/bootstrap.min.css"> -->
8+
<link rel="stylesheet" href="../../TOOLS/grid.css">
9+
<link rel="stylesheet" href="css/owl.carousel.min.css">
10+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
11+
<link rel="stylesheet" href="css/animate.min.css" />
1712
<style>
18-
.myprotitle {
19-
font-size: 40px;
20-
}
21-
22-
.project p {
23-
color: #fff;
24-
font-size: larger;
25-
position: absolute;
26-
top: 50%;
27-
left: 50%;
28-
transform: translate(-50%, -50%);
29-
visibility: hidden;
30-
opacity: 0;
31-
transition: opacity 1s, visibility 1s;
32-
width: 100%;
33-
}
34-
35-
.project img {
36-
display: block;
37-
width: 100%;
38-
height: 100%;
39-
transition-duration: 1s;
40-
}
41-
42-
.project img {
43-
width: 100%;
13+
.workmodel {
14+
width: 90%;
15+
background-color: teal;
16+
height: 200px;
17+
margin: 10px;
4418
}
4519

46-
.project:hover img {
47-
filter: blur(5px) grayscale(100%);
48-
}
49-
50-
.project:hover p {
51-
visibility: visible;
52-
opacity: 1;
53-
}
54-
55-
.project p a {
56-
line-height: 50px;
57-
color: #8c43ff;
58-
padding: 10px 25px 10px 25px;
59-
border: 1px solid #8c43ff;
60-
border-radius: 25px;
61-
transition-duration: 1s;
62-
}
63-
64-
.project p a:hover {
65-
text-decoration: none;
66-
color: #fff;
67-
background-color: #8c43ff;
20+
.worksite {
21+
text-align: center;
22+
display: none;
6823
}
6924
</style>
7025
</head>
7126

7227
<body>
73-
<div class="container-fluid ">
74-
<div class="row text-center d-flex justify-content-center">
75-
<div class="col-12 myprotitle">
76-
My projects
77-
</div>
78-
<div class="col-12 col-xl-3 mx-1 my-3 project">
79-
<img src="img/ddos.png" alt="">
80-
<p>
81-
Happy Birthday
82-
<br>
83-
<a href="#">
84-
Visit
85-
</a>
86-
</p>
28+
<div class="container">
29+
<div class="row">
30+
<div class="col-3 workmodel">fdsa
31+
<span class="worksite">
32+
Visit Site
33+
</span>
8734
</div>
88-
<div class="col-12 col-xl-3 mx-1 my-3 project">
89-
<img src="img/ddos.png" alt="">
90-
<p>
91-
Happy Birthday
92-
<br>
93-
<a href="#">
94-
Visit
95-
</a>
96-
</p>
35+
<div class="workmodel col-3">fdsa
36+
<span class="worksite">
37+
Visit Site
38+
</span>
9739
</div>
98-
<div class="col-12 col-xl-3 mx-1 my-3 project">
99-
<img src="img/ddos.png" alt="">
100-
<p>
101-
Happy Birthday
102-
<br>
103-
<a href="#">
104-
Visit
105-
</a>
106-
</p>
40+
<div class="workmodel col-3">fdsa
41+
<span class="worksite">
42+
Visit Site
43+
</span>
10744
</div>
10845
</div>
10946
</div>
47+
<script src="js/jquery.min.js"></script>
48+
<script src="js/bootstrap.min.js"></script>
49+
<script src="js/owl.carousel.min.js"></script>
50+
<script src="js/wow.min.js"></script>
51+
<script>
52+
document.querySelector('.workmodel').addEventListener('click ', () => {
53+
alert('hi');
54+
})
55+
</script>
11056
</body>
111-
<script src="js/typed.min.js"></script>
112-
<script src="js/jquery.min.js"></script>
113-
<script src="js/popper.min.js"></script>
114-
<script src="js/owl.carousel.min.js"></script>
115-
<script src="js/bootstrap.min.js"></script>
116-
<script src="js/wow.min.js"></script>
117-
<script src="js/script.js"></script>
118-
<script>
119-
120-
</script>
12157

12258
</html>

0 commit comments

Comments
 (0)