CSS-reference/page.html at master · hacktoberfest2k20/CSS-reference · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
  	<meta charset="utf-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<title>My first page</title>
	<meta name="description" content="My first page">
</head>
<style>
body{
  background-image: url("https://images.unsplash.com/photo-1531265726475-52ad60219627?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1068&q=80");
  overflow-x: hidden;
}
img{
    height: 80vh;
    width: 100vw;
    padding-top: 0px;

}
.para{
  color: yellow;
  font-size: 40px;
  font-family: chiller;
  display: inline;
}
#yelpic{
  padding-top: 20px;
}
#circle{
  height:50px;
  width: 200px;
  border-top-right-radius: 50%;
  border-bottom-left-radius: 50%;
  background-color: rgb(23, 68, 99);
  margin-bottom: 5px;
}
.parallax {
  background-image: url("https://images.unsplash.com/photo-1516035069371-29a1b244cc32?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=80");
  height: 500px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
#carpara{
  color: cyan;
  font-size: 50px;
}
#cars{
  height: 70px;
  width: 100px;
  border-top-right-radius: 50%;
  border-bottom-left-radius: 50%;
  background-color: black;
  margin-bottom: 5px;
}
#bmw{
  height: 350px;
  width:  400px;
    clear: right;
}
#parallax2{
  background-image: url("https://images.unsplash.com/photo-1542308160-57866b7c095c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80");
  height: 500px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.btn {
  background-color: DodgerBlue;
  border: none;
  color: white;
  padding: 10px 80px;
  font-size: 30px;
  cursor: pointer;
  font-family: chiller;
}
.btn:hover {
  background-color: rgb(46, 184, 158);
}
  </style>
<body>
	<center><div id="circle"><p class="para">Pixels Pool</p></div></center>

	<button class="btn"><i class="fa fa-home"></i> Home</button>
<button class="btn"><i class="fa fa-bars"></i> Menu</button>
<button class="btn"><i class="fa fa-trash"></i> Trash</button>
<button class="btn"><i class="fa fa-close"></i> Close</button>
<button class="btn"><i class="fa fa-folder"></i> Folder</button>

<img id="yelpic" src="https://images.unsplash.com/photo-1505739998589-00fc191ce01d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">


<div class="parallax"></div>


<div id="parallax2"></div>

</html>