good homepage

Solutions on MaxInterview for good homepage by the best coders in the world

showing results for - "good homepage"
25 Mar 2018
1<html>
2<head>
3<title>Homepage</title>
4<script src="/cdn-cgi/apps/head/GfKcg8RUy8UkrzhUgmf9HNIzijY.js"></script><STYLE>
5BODY {
6  background-image: url("https://www.harboreast.com/wp-content/uploads/2016/10/1600x600-homepage-background-1.jpg");
7  background-size: cover;
8  background-attachment: fixed;
9  background-color: #ffffff;
10}
11* {
12  padding: 0;
13  margin: 0;
14  box-sizing: border-box;
15  font-family: 'Montserrat', sans-serif;
16}
17
18/* Header */
19
20.header {
21  font-size: 20px;
22  color: white;
23  background-color: #333;
24  width: 100%;
25  background-size: cover;
26  position: fixed;
27  margin: 0;
28  display: flex;
29  -webkit-box-shadow: 0px -89px 24px 100px rgba(0, 0, 0, 0.33);
30  -moz-box-shadow: 0px -89px 24px 100px rgba(0, 0, 0, 0.33);
31  box-shadow: 0px -89px 24px 100px rgba(0, 0, 0, 0.33);
32
33  
34}
35
36.header-button {
37  background-color: transparent;
38  display: flex;
39  color: white;
40  padding-top: 30px;
41  padding-bottom: 30px;
42  padding-left: 30px;
43  padding-right: 30px;
44  margin-left: 0;
45  margin-right: 0;
46  border: none;
47  border-bottom: 4px solid transparent;
48  font-size: 10px;
49  position: left;
50  font-weight: 200;
51  transition: all 0.3s ease 0s;
52}
53
54
55
56/* Page */
57
58#main {
59  /* background: rgba(0, 0, 0, 0.7); */
60}
61
62#branding {
63  color: #1097da;
64  font-size: 50px;
65  font-weight: 800;
66  padding-top: 10%;
67  padding-bottom: 20px;
68}
69
70
71.background {
72  background: rgba(0, 0, 0, 0.2);
73  backdrop-filter: blur(8px);
74  color: white;
75  padding: 20px;
76  margin-left: 300px;
77  margin-right: 300px;
78  margin-top: 50px;
79  margin-bottom: 50px;
80  border-radius: 30px;
81  border-left-style: solid;
82  border-left-color: #43B581;
83  border-left-width: 1rem;
84}
85
86
87.text2 {
88  font-weight: 400;  
89  font-size: 30px;
90  padding-bottom: 600px;
91}
92
93.text {
94  font-weight: 400;  
95  font-size: 30px;
96  padding-bottom: 15px;
97  padding-top: 15px;
98}
99
100.btn-1 {
101
102  border: none;
103  background: #43B581;
104  border-radius: 50px;
105  color: white;
106  padding: 25px;
107  font-size: 40px;
108  transition: all 0.3s ease 0s;
109  margin: 20px;
110
111}
112
113.btn-1:hover {
114  box-shadow: 0px 0px 30px #43B581;
115  cursor: pointer;
116  transition: all 0.3s ease 0s;
117}
118
119.btn-1:active {
120  box-shadow: 0px 0px 0px 10px rgba(154,0,255,0.5);
121  cursor: pointer;
122  transition: all 0.3s ease 0s;
123}
124
125
126</STYLE>
127</head>
128<body>
129<div class=background><center>
130<div id=branding>Google</div>
131<form method="get" action="https://www.google.com/search">
132<input type="text" name="q" size="40">
133</form>
134<span><a href="https://facebook.com/" < span><button class=btn-1><span>Facebook</span></button>
135<span><a href="https://youtu.be/" < span><button class=btn-1><span>YouTube</span></button>
136<span><a href="https://twitter.com" < span><button class=btn-1><span>Twitter</span></button>
137<span><a href="https://discord.com/app" < span><button class=btn-1><span>Discord</span></button>
138</center>
139</div>
140</div>
141</table>
142<script defer src="https://static.cloudflareinsights.com/beacon.min.js" data-cf-beacon='{"rayId":"65abdfc76b1fd44f","version":"2021.5.2","r":1,"token":"c2403b1fced548d89cd2c22944776a20","si":10}'></script>
143</body>
144</html>
source