Skip to content

Commit 9176895

Browse files
ebrajebraj
committed
gradient boxes added
1 parent 20590e8 commit 9176895

File tree

10 files changed

+281
-0
lines changed

10 files changed

+281
-0
lines changed

‎.DS_Store

6 KB
Binary file not shown.

‎Boxes/assets/fonts/TelegrafRegular.otf

44.1 KB
Binary file not shown.

‎Boxes/assets/fonts/TelegrafUltraBold.otf

46.6 KB
Binary file not shown.

‎Boxes/assets/images/arrow.svg

+11
Loading

‎Boxes/assets/images/github.svg

+6
Loading

‎Boxes/index.html

+137
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
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+
<title>Gradient Boxes | Grid & Flex</title>
8+
<link rel="stylesheet" href="./style.css" />
9+
</head>
10+
11+
<body>
12+
<div class="container-1000">
13+
<div class="grid__container">
14+
<div>
15+
<div>
16+
<div>
17+
<a
18+
href="https://pomodoro-timer-ebraj.netlify.app/"
19+
target="_blank"
20+
><img src="./assets/images/arrow.svg" alt="Link"
21+
/></a>
22+
</div>
23+
<div>
24+
<a
25+
href="https://github.com/Ebraj/pomodoro-timer-using-react"
26+
target="_blank"
27+
><img src="./assets/images/github.svg" alt="Github"
28+
/></a>
29+
</div>
30+
</div>
31+
<div>
32+
<h1>Pomodoro Timer.</h1>
33+
<p>REACT + SCSS</p>
34+
</div>
35+
</div>
36+
<div>
37+
<div>
38+
<div>
39+
<a href="https://weather-info-ebraj.netlify.app/" target="_blank"
40+
><img src="./assets/images/arrow.svg" alt="Link"
41+
/></a>
42+
</div>
43+
<div>
44+
<a href="https://github.com/Ebraj/weather-info" target="_blank"
45+
><img src="./assets/images/github.svg" alt="Github"
46+
/></a>
47+
</div>
48+
</div>
49+
<div>
50+
<h1>Weather Info.</h1>
51+
<p>HTML + SCSS + JS</p>
52+
</div>
53+
</div>
54+
<div>
55+
<div>
56+
<div>
57+
<a href="https://todo-app-ebraj.netlify.app/" target="_blank"
58+
><img src="./assets/images/arrow.svg" alt="Link"
59+
/></a>
60+
</div>
61+
<div>
62+
<a
63+
href="https://github.com/Ebraj/todo-app-using-react"
64+
target="_blank"
65+
><img src="./assets/images/github.svg" alt="Github"
66+
/></a>
67+
</div>
68+
</div>
69+
<div>
70+
<h1>Simple Todo App!</h1>
71+
<p>SCSS + REACT</p>
72+
</div>
73+
</div>
74+
<div>
75+
<div>
76+
<div>
77+
<a
78+
href="https://typing-speed-test-ebraj.netlify.app/"
79+
target="_blank"
80+
><img src="./assets/images/arrow.svg" alt="Link"
81+
/></a>
82+
</div>
83+
<div>
84+
<a
85+
href="https://github.com/Ebraj/typing-speed-test"
86+
target="_blank"
87+
><img src="./assets/images/github.svg" alt="Github"
88+
/></a>
89+
</div>
90+
</div>
91+
<div>
92+
<h1>Typing Speed Test.</h1>
93+
<p>HTML + SCSS + JS</p>
94+
</div>
95+
</div>
96+
<div>
97+
<div>
98+
<div>
99+
<a href="https://ebrajgrg.com.np/" target="_blank"
100+
><img src="./assets/images/arrow.svg" alt="Link"
101+
/></a>
102+
</div>
103+
<div>
104+
<a
105+
href="https://github.com/Ebraj/ebraj-portfolio-v1.0"
106+
target="_blank"
107+
><img src="./assets/images/github.svg" alt="Github"
108+
/></a>
109+
</div>
110+
</div>
111+
<div>
112+
<h1>Personal Portfolio!</h1>
113+
<p>REACT JS</p>
114+
</div>
115+
</div>
116+
<div>
117+
<div>
118+
<div>
119+
<a href="https://memory-game-ebraj.netlify.app/" target="_blank"
120+
><img src="./assets/images/arrow.svg" alt="Link"
121+
/></a>
122+
</div>
123+
<div>
124+
<a href="https://github.com/Ebraj/memory-game" target="_blank"
125+
><img src="./assets/images/github.svg" alt="Github"
126+
/></a>
127+
</div>
128+
</div>
129+
<div>
130+
<h1>Memory Game!</h1>
131+
<p>HTML + SCSS + JS</p>
132+
</div>
133+
</div>
134+
</div>
135+
</div>
136+
</body>
137+
</html>

‎Boxes/style.css

+127
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
/* CUSTOM FONTS */
2+
@font-face {
3+
font-family: TelegrafUltraBold;
4+
src: url(./assets/fonts/TelegrafUltraBold.otf);
5+
}
6+
@font-face {
7+
font-family: TelegrafRegular;
8+
src: url(./assets/fonts/TelegrafRegular.otf);
9+
}
10+
11+
/* FORMATTING */
12+
*,
13+
*::before,
14+
*::after {
15+
padding: 0;
16+
margin: 0;
17+
box-sizing: border-box;
18+
}
19+
html,
20+
body {
21+
height: 100%;
22+
width: 100%;
23+
}
24+
body {
25+
background-color: #000000;
26+
color: #eeeeff;
27+
font-family: TelegrafRegular;
28+
}
29+
a {
30+
text-decoration: none;
31+
}
32+
33+
/* OTHERS */
34+
.container-1000 {
35+
width: 100%;
36+
max-width: 1000px;
37+
min-height: 100vh;
38+
padding: 0px 20px;
39+
margin: 0 auto;
40+
display: flex;
41+
flex-direction: column;
42+
align-items: stretch;
43+
justify-content: center;
44+
}
45+
.container-1000 .grid__container {
46+
display: grid;
47+
grid-template-columns: repeat(3, 1fr);
48+
grid-gap: 40px;
49+
}
50+
.container-1000 .grid__container > div {
51+
height: 300px;
52+
color: #1d1d1d;
53+
display: flex;
54+
padding: 25px;
55+
flex-direction: column;
56+
align-items: flex-start;
57+
justify-content: space-between;
58+
border: 2px solid transparent;
59+
}
60+
.container-1000 .grid__container > div > div:nth-child(1) {
61+
align-self: flex-end;
62+
}
63+
.container-1000 .grid__container > div > div:nth-child(1) > div {
64+
display: inline-block;
65+
}
66+
.container-1000 .grid__container > div h1 {
67+
font-family: TelegrafUltraBold;
68+
font-size: 2.5rem;
69+
padding: 25px 0;
70+
line-height: 1.15;
71+
}
72+
.container-1000 .grid__container > div:nth-child(1) {
73+
background: #ffafbd;
74+
background: linear-gradient(66deg, #ffafbd 0%, #ffc3a0 100%);
75+
}
76+
.container-1000 .grid__container > div:nth-child(2) {
77+
background: #d6cff6;
78+
background: radial-gradient(circle, #d6cff6 0%, #b1a3d7 100%);
79+
}
80+
.container-1000 .grid__container > div:nth-child(3) {
81+
background: #93ff8f;
82+
background: radial-gradient(circle, #93ff8f 0%, #9ada98 48%, #8edb90 100%);
83+
}
84+
.container-1000 .grid__container > div:nth-child(4) {
85+
background: #fff062;
86+
background: radial-gradient(circle, #fff062 0%, #dbdb8e 100%);
87+
}
88+
.container-1000 .grid__container > div:nth-child(5) {
89+
background: #f9a29e;
90+
background: radial-gradient(circle, #f9a29e 0%, #f6b4a8 100%);
91+
}
92+
.container-1000 .grid__container > div:nth-child(6) {
93+
background: #62dcff;
94+
background: radial-gradient(circle, #62dcff 0%, #a8d5f6 100%);
95+
}
96+
.container-1000 .grid__container > div:hover {
97+
background: #000000;
98+
color: #eeeeff;
99+
border: 2px solid #eeeeff;
100+
position: relative;
101+
}
102+
.container-1000 .grid__container > div:hover img {
103+
filter: invert(1);
104+
}
105+
.container-1000 .grid__container > div:hover::after {
106+
position: absolute;
107+
content: "";
108+
top: 15px;
109+
left: -15px;
110+
height: 100%;
111+
width: 100%;
112+
border: 2px solid #eeeeff;
113+
z-index: -1;
114+
}
115+
116+
@media screen and (max-width: 900px) {
117+
.container-1000 .grid__container {
118+
grid-template-columns: repeat(2, 1fr);
119+
padding: 20px 0;
120+
}
121+
}
122+
@media screen and (max-width: 600px) {
123+
.container-1000 .grid__container {
124+
grid-template-columns: repeat(1, 1fr);
125+
padding: 40px 0;
126+
}
127+
}

‎Pricing Card/.DS_Store

6 KB
Binary file not shown.

‎Pricing Card/01-gradient-pricing-card/index.html renamed to ‎Pricing Card/Gradient Pricing Card/index.html

File renamed without changes.

‎Pricing Card/01-gradient-pricing-card/style.css renamed to ‎Pricing Card/Gradient Pricing Card/style.css

File renamed without changes.

0 commit comments

Comments
 (0)