Skip to content

Commit 5555c7c

Browse files
sharifulcodersharifulcoder
authoredDec 27, 2019
Add files via upload
1 parent cefc303 commit 5555c7c

File tree

8 files changed

+625
-0
lines changed

8 files changed

+625
-0
lines changed
 

‎css/style.css

+293
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,293 @@
1+
2+
3+
*{
4+
margin: 0;
5+
padding: 0;
6+
}
7+
8+
/* Main Section Styled */
9+
.element-section{
10+
width: 100%;
11+
background: #fff;
12+
}
13+
.element-contain{
14+
max-width: 1140px;
15+
margin: auto;
16+
display: block;
17+
border: 5px solid red;
18+
margin-bottom: 70px;
19+
}.bg-color-1{
20+
background: #f2f2f2;
21+
}.bg-color-2{
22+
background: #2222;
23+
}
24+
25+
.title{
26+
width: 100%;
27+
background: #1967d2;
28+
padding: 20px 0px;
29+
color: white;
30+
text-align: center;
31+
}
32+
33+
34+
35+
36+
/*CSS Layout Design Default*/
37+
.flex-container{
38+
39+
}
40+
41+
.item{
42+
background: #BECCCD;
43+
margin: 5px;
44+
padding: 15px;
45+
}
46+
47+
48+
49+
50+
/*Layout Display Flex*/
51+
.flex-container-1{
52+
background: #4C4A48;
53+
display: flex;
54+
}
55+
.item1{
56+
background: #BECCCD;
57+
margin: 5px;
58+
padding: 15px;
59+
}
60+
61+
62+
/*Layout Display Inline Flex*/
63+
.flex-container-2{
64+
background: #4C4A48;
65+
display: inline-flex;
66+
}
67+
.item2{
68+
background: #BECCCD;
69+
margin: 5px;
70+
padding: 15px;
71+
}
72+
73+
74+
75+
76+
77+
78+
/*Flex Direction*/
79+
.flex-container-direction1{
80+
background: #4C4A48;
81+
display: flex;
82+
flex-direction: row;
83+
}
84+
.item3{
85+
background: #BECCCD;
86+
margin: 5px;
87+
padding: 15px;
88+
}
89+
90+
/*Flex Wrap*/
91+
.flex-container-wrap{
92+
background: #4C4A48;
93+
display: flex;
94+
flex-direction: row;
95+
flex-wrap: wrap;
96+
}
97+
.item4{
98+
background: #BECCCD;
99+
margin: 5px;
100+
padding: 15px;
101+
}
102+
103+
/*Flex flow*/
104+
.flex-container-flow{
105+
background: #4C4A48;
106+
display: flex;
107+
flex-flow: row wrap;
108+
}
109+
.item5{
110+
background: #BECCCD;
111+
margin: 5px;
112+
padding: 15px;
113+
}
114+
115+
116+
117+
118+
119+
120+
121+
/*Justify Content*/
122+
.flex-container-jcontent{
123+
background: #4C4A48;
124+
display: flex;
125+
flex-direction: row;
126+
flex-wrap: wrap;
127+
justify-content: space-around;
128+
}
129+
130+
.item6{
131+
background: #BECCCD;
132+
margin: 5px;
133+
padding: 15px;
134+
}
135+
136+
137+
/*align item*/
138+
.flex-container-aitem{
139+
background: #4C4A48;
140+
display: flex;
141+
flex-direction: row;
142+
height: 200px;
143+
justify-content: space-around;
144+
align-items: flex-end;
145+
}
146+
.item7{
147+
background: #BECCCD;
148+
margin: 5px;
149+
padding: 25px;
150+
}
151+
152+
153+
/*align content*/
154+
.flex-container-acontent{
155+
background: #4C4A48;
156+
display: flex;
157+
flex-direction: row;
158+
height: 500px;
159+
flex-wrap: wrap;
160+
align-content: center;
161+
}
162+
.item8{
163+
background: #BECCCD;
164+
margin: 5px;
165+
padding: 25px;
166+
width: 300px;
167+
height: 70px;
168+
}
169+
170+
171+
172+
173+
174+
175+
176+
177+
178+
179+
/*Flexbox order*/
180+
.flex-container-order{
181+
background: #4C4A48;
182+
display: flex;
183+
padding: 50px 0px;
184+
flex-direction: row;
185+
}
186+
.item-order{
187+
background: #BECCCD;
188+
margin: 5px;
189+
padding: 25px;
190+
width: 300px;
191+
height: 70px;
192+
}
193+
.order-3{
194+
order: -1
195+
}
196+
197+
198+
/*Flexbox grow*/
199+
.flex-container-grow{
200+
background: #4C4A48;
201+
display: flex;
202+
203+
}
204+
.item-grow{
205+
background: #BECCCD;
206+
margin: 5px;
207+
padding: 25px;
208+
}
209+
.grow2{
210+
flex-grow: 1;
211+
}
212+
.grow4{
213+
flex-grow: 2;
214+
}
215+
216+
217+
218+
219+
/*Flexbox Flex 01*/
220+
.flex-container-1{
221+
background: #4C4A48;
222+
display: flex;
223+
flex-direction: row;
224+
flex-wrap: wrap;
225+
}
226+
.flex-container-1 *{
227+
flex: 1;
228+
}
229+
.item-flex1{
230+
background: #BECCCD;
231+
padding: 15px;
232+
}
233+
.item-flex2{
234+
background: #ddd;
235+
padding: 15px;
236+
}
237+
.item-flex3{
238+
background: #BECCCD;
239+
padding: 15px;
240+
}
241+
/*Flexbox Flex 02*/
242+
.flex-container-2{
243+
background: #4C4A48;
244+
display: flex;
245+
flex-direction: row;
246+
flex-wrap: wrap;
247+
}
248+
.flex-item1{
249+
flex: 1;
250+
background: #BECCCD;
251+
padding: 15px;
252+
}
253+
.flex-item2{
254+
flex: 2;
255+
background: #ddd;
256+
padding: 15px;
257+
}
258+
.flex-item3{
259+
flex: 1;
260+
background: #BECCCD;
261+
padding: 15px;
262+
}
263+
264+
265+
266+
/*Flexbox Flex-basis*/
267+
.basis-container-1{
268+
background: #4C4A48;
269+
display: flex;
270+
flex-direction: row;
271+
flex-wrap: wrap;
272+
273+
}
274+
.basis-item1{
275+
background: #BECCCD;
276+
padding: 15px 0px;
277+
flex-basis: 20%;
278+
}
279+
.basis-item2{
280+
background: #ddd;
281+
padding: 15px 0px;
282+
flex-basis: 30%;
283+
}
284+
.basis-item3{
285+
background: #BECCCD;
286+
padding: 15px 0px;
287+
flex-basis: 50%;
288+
}
289+
290+
291+
292+
293+

‎images/favi.png

6.53 KB
Loading

‎images/favicon.png

2.66 KB
Loading

‎images/img_flwr.jpg

9.19 KB
Loading

‎images/logo.jpg

3.11 KB
Loading

‎images/paper.jpg

2.75 KB
Loading

‎images/team1.jpg

34.3 KB
Loading

0 commit comments

Comments
 (0)
Please sign in to comment.