Skip to content

Commit e4cf954

Browse files
mayankvishnoi24mayankvishnoi24
committed
CSS Basics of Codewithmayank
1 parent e0d989b commit e4cf954

File tree

13 files changed

+177
-3
lines changed

13 files changed

+177
-3
lines changed

‎01.Backgound_property/index.html

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
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>Background Properties</title>
7+
<link rel="stylesheet" href="style.css" />
8+
<style>
9+
/* */
10+
</style>
11+
</head>
12+
<body>
13+
<div class="container">
14+
<div class="box1">
15+
<nav>
16+
<ul>
17+
<li>Home</li>
18+
<li>Service</li>
19+
<li>Blog</li>
20+
<li>Contact</li>
21+
<li>About</li>
22+
</ul>
23+
</nav>
24+
<div class="box2">
25+
<img src="/img/car-1.png" alt="" width="200px" height="200px" />
26+
<h1>Car1</h1>
27+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi laboriosam odio ipsa animi eos quam blanditiis exercitationem praesentium illo? Ex?</p>
28+
<img src="/img/car-1.png" alt="" width="200px" height="200px" />
29+
<h1>Car1</h1>
30+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi laboriosam odio ipsa animi eos quam blanditiis exercitationem praesentium illo? Ex?</p>
31+
<img src="/img/car-1.png" alt="" width="200px" height="200px" />
32+
<h1>Car1</h1>
33+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi laboriosam odio ipsa animi eos quam blanditiis exercitationem praesentium illo? Ex?</p>
34+
</div>
35+
</div>
36+
</div>
37+
</body>
38+
</html>

‎01.Backgound_property/style.css

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
.container {
2+
width: 100%;
3+
height: auto;
4+
border: 2px solid black;
5+
opacity: 0.5;
6+
}
7+
8+
nav,
9+
ul {
10+
list-style: none;
11+
display: flex;
12+
justify-content: center;
13+
align-items: center;
14+
}
15+
nav,
16+
ul,
17+
li {
18+
color: white;
19+
display: flex;
20+
text-transform: uppercase;
21+
margin-left: 40px;
22+
/* justify-content: space-between;
23+
align-items: center; */
24+
}
25+
.box1 {
26+
border: 2px solid red;
27+
padding: 20px;
28+
z-index: auto;
29+
background-color: black;
30+
background-image: url(/img/car-1.png);
31+
background-position: center;
32+
background-attachment: fixed;
33+
height: 100vh;
34+
background-repeat: no-repeat;
35+
background-size: cover;
36+
}
37+
38+
.box2{
39+
border: 2px solid yellow;
40+
color: white;
41+
justify-content: space-around;
42+
display: flex;
43+
align-items: center;
44+
}

‎Basics of CSS/index.html

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
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 Master Code</title>
7+
8+
<link rel="stylesheet" href="style.css" />
9+
<!-- external css
10+
11+
Creates the external css using the external file create..
12+
13+
-->
14+
15+
<style>
16+
/* internal css */
17+
</style>
18+
</head>
19+
<body>
20+
<!-- There are some types of css -->
21+
<!-- 1. internal -->
22+
<!-- 2. inline -->
23+
<!-- 3. external -->
24+
25+
<!-- <h1 style="color: red;"></h1> inline css -->
26+
</body>
27+
</html>

‎Basics of CSS/style.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
/*
2+
External Css file creates
3+
*/

‎Intro CSS/index.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>Intro CSS</title>
7+
<link rel="stylesheet" href="style.css" />
8+
<style>
9+
h1 {
10+
color: red;
11+
}
12+
p {
13+
color: blue;
14+
}
15+
</style>
16+
</head>
17+
<body>
18+
<!-- CSS : Cascading stylesheet. It is a creates the webpage designable. -->
19+
20+
<h1 style="border: 2px solid red">Welcome to our CSS</h1>
21+
<p style="border: 3px solid rebeccapurple">
22+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente odio
23+
quisquam nesciunt fugit ipsa reprehenderit soluta nobis dolorem illo, in
24+
nam, voluptatum quibusdam dolores omnis iste id obcaecati exercitationem
25+
beatae!
26+
</p>
27+
<p style="border: 3px solid rebeccapurple">
28+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente odio
29+
quisquam nesciunt fugit ipsa reprehenderit soluta nobis dolorem illo, in
30+
nam, voluptatum quibusdam dolores omnis iste id obcaecati exercitationem
31+
beatae!
32+
</p>
33+
<p style="border: 3px solid rebeccapurple">
34+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente odio
35+
quisquam nesciunt fugit ipsa reprehenderit soluta nobis dolorem illo, in
36+
nam, voluptatum quibusdam dolores omnis iste id obcaecati exercitationem
37+
beatae!
38+
</p>
39+
<p style="border: 3px solid rebeccapurple">
40+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente odio
41+
quisquam nesciunt fugit ipsa reprehenderit soluta nobis dolorem illo, in
42+
nam, voluptatum quibusdam dolores omnis iste id obcaecati exercitationem
43+
beatae!
44+
</p>
45+
<p style="border: 3px solid rebeccapurple">
46+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente odio
47+
quisquam nesciunt fugit ipsa reprehenderit soluta nobis dolorem illo, in
48+
nam, voluptatum quibusdam dolores omnis iste id obcaecati exercitationem
49+
beatae!
50+
</p>
51+
</body>
52+
</html>

‎Intro CSS/style.css

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/* reset css */
2+
3+
p{
4+
padding: 20px;
5+
border-radius: 20px
6+
}
7+
8+
h1{
9+
padding: 20px;
10+
text-transform: uppercase;
11+
border-top-right-radius: 20px;
12+
border-bottom-right-radius: 20px;
13+
}

‎README.MD

Whitespace-only changes.

‎README.md

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎img/car-1.png

1.27 MB
Loading

‎img/pic-1.jpg

329 KB
Loading

0 commit comments

Comments
 (0)