Skip to content

Commit 8960317

Browse files
AmbratolmAmbratolm
Ambratolm
authored and
Ambratolm
committed
Added css-course
1 parent 75f2545 commit 8960317

File tree

7 files changed

+360
-0
lines changed

7 files changed

+360
-0
lines changed

‎css-course/flex.html

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Flex</title>
7+
</head>
8+
<body>
9+
<h1>CSS Course</h1>
10+
<div class="row" style="background: silver;">
11+
<div class="col" style="background: red;">
12+
A- Lorem ipsum dolor.
13+
</div>
14+
<div class="col" style="background: green;">
15+
B- Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus maxime officia fugit iusto ea ex aperiam earum, doloribus debitis quae tempore sunt corporis dignissimos, molestiae, at id harum laborum odit!
16+
</div>
17+
<div class="col" style="background: blue;">D- Lorem ipsum</div>
18+
<div class="col" style="background: skyblue;">E- Lorem ipsum</div>
19+
<div class="col" style="background: yellow;">
20+
<p>F-1 Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam perferendis cum quas quisquam aliquam culpa, quod, esse, recusandae voluptatibus sapiente amet. Vel repellendus perspiciatis necessitatibus, voluptas molestias ullam, hic ab.</p>
21+
<p>F-2 Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis voluptatum et eum provident eaque eius debitis quod maiores obcaecati impedit repellendus, inventore officiis necessitatibus sint sed nobis illum. Expedita, non.</p>
22+
</div>
23+
<div class="col" style="background: pink;">G- Lorem ipsum</div>
24+
</div>
25+
<h1>CSS Flex Property</h1>
26+
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Suscipit ab ex, mollitia odio quos, at. Voluptates itaque blanditiis eveniet repudiandae impedit ullam accusantium debitis esse facilis recusandae, similique non dolor.
27+
28+
<div class="row" style="background: silver;">
29+
<div class="col" style="background: darkred;">
30+
1- Hello World! It's flexbox.
31+
</div>
32+
<div class="col" style="background: olive;">
33+
2- Hello World! It's flexbox.
34+
</div>
35+
<div class="col" style="background: fuchsia;"></div>
36+
<div class="col" style="background: khaki;">
37+
4- Hello World! It's flexbox.
38+
</div>
39+
</div>
40+
</body>
41+
<style>
42+
.row {
43+
height: 200px;
44+
display: flex;
45+
justify-content: center;
46+
align-items: center;
47+
}
48+
.col {
49+
height: 100px;
50+
overflow-x: hidden;
51+
overflow-y: auto;
52+
/* flex-grow: 0;
53+
flex-shrink: 1;
54+
flex-basis: auto; */
55+
56+
/* flex: <grow> <shrink> <basis>; */
57+
/* flex: 1 1 100%; */
58+
}
59+
/* @media (max-width: 800px) {
60+
.row {
61+
flex-direction: column;
62+
}
63+
} */
64+
</style>
65+
</html>

‎css-course/float.html

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Float</title>
7+
</head>
8+
<body>
9+
<h1>CSS Course</h1>
10+
<div class="row">
11+
<div class="col" style="background: red;">
12+
Lorem ipsum dolor.
13+
</div>
14+
<div class="col" style="background: green;">
15+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus maxime officia fugit iusto ea ex aperiam earum, doloribus debitis quae tempore sunt corporis dignissimos, molestiae, at id harum laborum odit!
16+
</div>
17+
<div class="col" style="background: blue;">Lorem ipsum</div>
18+
<div class="col" style="background: skyblue;">Lorem ipsum</div>
19+
<div class="col" style="background: yellow;">
20+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam perferendis cum quas quisquam aliquam culpa, quod, esse, recusandae voluptatibus sapiente amet. Vel repellendus perspiciatis necessitatibus, voluptas molestias ullam, hic ab.</p>
21+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis voluptatum et eum provident eaque eius debitis quod maiores obcaecati impedit repellendus, inventore officiis necessitatibus sint sed nobis illum. Expedita, non.</p>
22+
</div>
23+
<div class="col" style="background: pink;">Lorem ipsum</div>
24+
</div>
25+
<h1>CSS Float Property</h1>
26+
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Suscipit ab ex, mollitia odio quos, at. Voluptates itaque blanditiis eveniet repudiandae impedit ullam accusantium debitis esse facilis recusandae, similique non dolor.
27+
</body>
28+
<style>
29+
.row .col {
30+
float: left;
31+
width: calc(100% / 3); /* One-Third */
32+
height: 200px;
33+
}
34+
.row::before,
35+
.row::after {
36+
display: table;
37+
content: " ";
38+
clear: both;
39+
}
40+
@media only screen and (max-width: 800px) {
41+
.row .col {
42+
width: 100%;
43+
}
44+
}
45+
</style>
46+
</html>

‎css-course/grid.html

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Grid</title>
7+
</head>
8+
<body>
9+
<div class="grid">
10+
<div class="cell">1</div>
11+
<div class="cell">2</div>
12+
<div class="cell">3</div>
13+
<div class="cell">4</div>
14+
<div class="cell">5</div>
15+
<div class="cell">6</div>
16+
<div class="cell">7</div>
17+
<div class="cell">8</div>
18+
<div class="cell">9</div>
19+
<div class="cell">10</div>
20+
</div>
21+
</body>
22+
<style>
23+
body {
24+
font-family: "Arial Black", sans-serif;
25+
font-size: 200%;
26+
background: linear-gradient(grey, #333);
27+
}
28+
.grid {
29+
display: grid;
30+
grid-gap: 5px;
31+
grid-template-columns: 50px repeat(2, 1fr);
32+
grid-template-rows: 100px 200px;
33+
}
34+
.cell:nth-child(1) {
35+
grid-row: 1 / 6;
36+
}
37+
.cell:nth-child(10) {
38+
grid-column: 2 / 4;
39+
}
40+
.cell {
41+
background: linear-gradient(silver, #EAEAEA);
42+
border: 3px solid black;
43+
border-radius: 5px;
44+
text-align: center;
45+
cursor: pointer;
46+
}
47+
.cell:hover {
48+
background: linear-gradient(lightyellow, yellow);
49+
box-shadow: 1px 1px 20px yellow;
50+
color: #949400;
51+
}
52+
</style>
53+
</html>

‎css-course/index.html

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>CSS-Course</title>
7+
<link rel="stylesheet" href="./style.css">
8+
</head>
9+
<body>
10+
<nav>
11+
<h1>Logo</h1>
12+
<a href="">Home</a>
13+
<a href="">News</a>
14+
<a href="">Creations</a>
15+
<a href="">Contact</a>
16+
<a href="">About</a>
17+
</nav>
18+
</body>
19+
</html>

‎css-course/position.html

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Position</title>
7+
</head>
8+
<body>
9+
<div class="msg-box">
10+
<div class="msg-box-title">Message</div>
11+
<div class="msg-box-content">
12+
This is an example message.
13+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora incidunt doloremque consectetur ipsa hic deserunt totam eveniet quibusdam, ipsam? Commodi ipsum, hic reiciendis temporibus, quisquam facilis voluptas ab sequi perspiciatis.
14+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro quaerat eligendi reiciendis fuga nostrum sunt consequatur ad, dolor aperiam delectus ex odit consequuntur officiis perspiciatis alias doloremque nesciunt tempore nam!
15+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, ipsum repudiandae? Neque, libero, ut quasi error nemo quia. Magni assumenda veniam, commodi eveniet atque, dolores deleniti esse quibusdam rerum quo?
16+
Are you sure about this ?
17+
</div>
18+
<button class="msg-box-btn">Yes</button>
19+
<button class="msg-box-btn">No</button>
20+
</div>
21+
<article></article>
22+
</body>
23+
<style>
24+
body {
25+
font-family: 'Century Gothic', sans-serif;
26+
background: grey;
27+
}
28+
.msg-box {
29+
background: silver;
30+
border: 1px solid black;
31+
box-shadow: 1px 1px 1px;
32+
max-width: 500px;
33+
margin-top: -250px;
34+
margin-left: -250px;
35+
/* max-height: 300px; */
36+
position: fixed;
37+
top: 50%;
38+
left: 50%;
39+
}
40+
.msg-box::after {
41+
content: "";
42+
display: table;
43+
clear: both;
44+
}
45+
.msg-box .msg-box-title {
46+
padding: 5px 20px;
47+
border-bottom: 1px solid black;
48+
box-shadow: 0px 1px 0px;
49+
background: skyblue;
50+
}
51+
.msg-box .msg-box-content {
52+
padding: 20px;
53+
margin: 20px 0;
54+
/* max-height: 100px; */
55+
/* overflow: auto; */
56+
}
57+
.msg-box .msg-box-btn {
58+
padding: 5px 20px;
59+
margin: 0 20px 15px 0;
60+
background: skyblue;
61+
border: 1px solid black;
62+
box-shadow: 1px 1px 1px;
63+
cursor: pointer;
64+
float: right;
65+
}
66+
.msg-box .msg-box-btn:hover {
67+
padding: 5px 20px;
68+
background: yellow;
69+
border: 1px solid black;
70+
cursor: pointer;
71+
}
72+
</style>
73+
<script>
74+
const article = document.querySelector("article");
75+
article.style.textAlign = "center";
76+
article.style.fontSize = "500%";
77+
for (let i = 0; i < 100; i++) {
78+
article.innerHTML += "حبيبي يا رسول الله <br />";
79+
}
80+
</script>
81+
</html>

‎css-course/selectors.html

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Selectors</title>
7+
</head>
8+
<body style="font-family: 'Century Gothic', sans-serif; font-size: 200%;">
9+
<div style="padding: 0 50px;">
10+
<div>Div</div>
11+
<p>Paragraph <a href="#">Link</a></p>
12+
<p>Paragraph</p>
13+
<section>
14+
Section
15+
<p>
16+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
17+
Paragraph
18+
</p>
19+
<div>
20+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
21+
Div
22+
</div>
23+
</section>
24+
<p>Paragraph </p>
25+
<div>Div</div>
26+
<div>Div</div>
27+
</div>
28+
</body>
29+
<style>
30+
div p {
31+
color: green;
32+
font-weight: bold;
33+
}
34+
div > p {
35+
text-decoration: underline lime 5px;
36+
}
37+
div + p {
38+
border: 3px solid red;
39+
}
40+
div ~ p {
41+
background: lightcyan;
42+
}
43+
div div:first-child {
44+
background: black;
45+
color: lime;
46+
}
47+
div div:last-child {
48+
background: black;
49+
color: red;
50+
}
51+
</style>
52+
</html>

‎css-course/style.css

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
:root {
2+
--color1: #BE7C4D;
3+
--color2: #92140C;
4+
--color3: #353238;
5+
--color4: #BE5A38;
6+
--color5: #C1B4AE;
7+
--color-light: #EEE;
8+
}
9+
body {
10+
/* font-family: "Century Gothic", sans-serif; */
11+
font-size: 120%;
12+
padding: 0;
13+
margin: 0;
14+
color: var(--color1);
15+
}
16+
a:link {
17+
color: var(--color2);
18+
text-decoration: none;
19+
}
20+
a:hover {
21+
color: var(--color3);
22+
text-decoration: underline;
23+
}
24+
25+
/* Navigation */
26+
nav {
27+
margin: 0;
28+
display: flex;
29+
align-items: center;
30+
justify-content: space-around;
31+
flex-flow: row wrap;
32+
}
33+
nav > * {
34+
padding: 0;
35+
margin: 0;
36+
text-align: center;
37+
flex: 1 0 auto;
38+
}
39+
nav > a {
40+
padding: 20px 20px;
41+
}
42+
nav > a:hover {
43+
background: var(--color-light);
44+
}

0 commit comments

Comments
 (0)