Skip to content

Commit ef97fdc

Browse files
eazook10003eazook10003
authored
Add files via upload
0 parents  commit ef97fdc

File tree

3 files changed

+261
-0
lines changed

3 files changed

+261
-0
lines changed

‎index.css

+202
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
h1 {
2+
position: relative;
3+
padding: 0;
4+
margin: 0;
5+
font-family: "Raleway", sans-serif;
6+
font-weight: 300;
7+
font-size: 40px;
8+
color: #080808;
9+
-webkit-transition: all 0.4s ease 0s;
10+
-o-transition: all 0.4s ease 0s;
11+
transition: all 0.4s ease 0s;
12+
}
13+
14+
h1 span {
15+
display: block;
16+
font-size: 0.5em;
17+
line-height: 1.3;
18+
}
19+
h1 em {
20+
font-style: normal;
21+
font-weight: 600;
22+
}
23+
24+
.title h1 {
25+
text-align: center;
26+
text-transform: uppercase;
27+
padding-bottom: 5px;
28+
}
29+
.title h1:before {
30+
width: 28px;
31+
height: 5px;
32+
display: block;
33+
content: "";
34+
position: absolute;
35+
bottom: 3px;
36+
left: 50%;
37+
margin-left: -14px;
38+
background-color: #b80000;
39+
}
40+
.title h1:after {
41+
width: 100px;
42+
height: 1px;
43+
display: block;
44+
content: "";
45+
position: relative;
46+
margin-top: 25px;
47+
left: 50%;
48+
margin-left: -50px;
49+
background-color: #b80000;
50+
}
51+
.navbar {
52+
overflow: hidden;
53+
background-color: #333;
54+
font-family: Arial, Helvetica, sans-serif;
55+
}
56+
57+
.navbar a {
58+
float: left;
59+
font-size: 16px;
60+
color: white;
61+
text-align: center;
62+
padding: 14px 16px;
63+
text-decoration: none;
64+
}
65+
66+
.dropdown {
67+
float: left;
68+
overflow: hidden;
69+
}
70+
71+
.dropdown .dropbtn {
72+
font-size: 16px;
73+
border: none;
74+
outline: none;
75+
color: white;
76+
padding: 14px 16px;
77+
background-color: inherit;
78+
font-family: "Raleway", sans-serif;
79+
margin: 0;
80+
}
81+
82+
.navbar a:hover, .dropdown:hover .dropbtn {
83+
background-color: red;
84+
}
85+
86+
.dropdown-content {
87+
display: none;
88+
position: absolute;
89+
background-color: #f9f9f9;
90+
min-width: 160px;
91+
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
92+
z-index: 1;
93+
}
94+
95+
.dropdown-content a {
96+
float: none;
97+
color: black;
98+
padding: 12px 16px;
99+
text-decoration: none;
100+
display: block;
101+
text-align: left;
102+
}
103+
104+
.dropdown-content a:hover {
105+
background-color: #ddd;
106+
}
107+
108+
.dropdown:hover .dropdown-content {
109+
display: block;
110+
}
111+
112+
.navbar input[type=text] {
113+
float: right;
114+
padding: 6px;
115+
border: none;
116+
margin-top: 8px;
117+
margin-right: 16px;
118+
font-size: 17px;
119+
}
120+
121+
@media screen and (max-width: 600px) {
122+
.navbar a, .navbar input[type=text] {
123+
float: none;
124+
display: block;
125+
text-align: left;
126+
width: 100%;
127+
margin: 0;
128+
padding: 14px;
129+
}
130+
.navbar input[type=text] {
131+
border: 1px solid #ccc;
132+
}
133+
}
134+
135+
body {margin: 10px}
136+
.where {
137+
display: block;
138+
margin: 25px 15px;
139+
font-size: 11px;
140+
color: #000;
141+
text-decoration: none;
142+
font-family: verdana;
143+
font-style: italic;
144+
}
145+
.filebox {display:inline-block; margin-right: 10px;}
146+
147+
.filebox label {
148+
display: inline-block;
149+
padding: .5em .75em;
150+
color: black;
151+
font-size: inherit;
152+
line-height: normal;
153+
vertical-align: middle;
154+
background-color: #fdfdfd;
155+
cursor: pointer;
156+
border: 1px solid #ebebeb;
157+
border-bottom-color: #e2e2e2;
158+
border-radius: .25em;
159+
}
160+
161+
.filebox input[type="file"] {
162+
position: absolute;
163+
width: 1px;
164+
height: 1px;
165+
padding: 0;
166+
margin: -1px;
167+
overflow: hidden;
168+
clip:rect(0,0,0,0);
169+
border: 0;
170+
}
171+
172+
.filebox.bs3-primary label {
173+
color: #fff;
174+
background-color: #337ab7;
175+
border-color: #2e6da4;
176+
}
177+
178+
.filebox.bs3-success label {
179+
color: #fff;
180+
background-color: #5cb85c;
181+
border-color: #4cae4c;
182+
}
183+
184+
.liked{
185+
width: 400px;
186+
height: 225px;
187+
border: 1px solid black;
188+
background-position: center;
189+
background-size: cover;
190+
191+
}
192+
193+
small{
194+
color: mix(#fff, #e91e63, 85%);
195+
font-size: 20px;
196+
font-family: "Raleway", sans-serif;
197+
198+
}
199+
200+
.large {
201+
transform: scale(1.3);
202+
}

‎index.html

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<link rel="stylesheet" href="index.css">
5+
</head>
6+
<body>
7+
8+
<div class="navbar">
9+
<a href="#login">Login</a>
10+
<div class="dropdown">
11+
<button class="dropbtn">Menu
12+
</button>
13+
<div class="dropdown-content">
14+
<a href="#">My Profile</a>
15+
<a href="#">Settings</a>
16+
<a href="#">Advances Options</a>
17+
</div>
18+
</div>
19+
<input type="text" placeholder="Search your brand...">
20+
21+
</div>
22+
23+
24+
<div class = "title">
25+
<h1>Advertise your brand</h1>
26+
</div>
27+
28+
<div class = "filebox">
29+
<label for="image-input">Upload your logo</label>
30+
<input type="file" id="image-input" accept="image/jpeg, image/png, image/jpg">
31+
</div>
32+
<div class="liked" id="display-image" ></div>
33+
<small><span class = "times">0</span> liked</small>
34+
<script src="index.js"></script>
35+
36+
</body>
37+
38+
</html>
39+
40+

‎index.js

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
const image_input = document.querySelector("#image-input");
2+
image_input.addEventListener("change", function() {
3+
const reader = new FileReader();
4+
reader.addEventListener("load", () => {
5+
const uploaded_image = reader.result;
6+
document.querySelector("#display-image").style.backgroundImage = `url(${uploaded_image})`;
7+
});
8+
reader.readAsDataURL(this.files[0]);
9+
});
10+
11+
var love = document.getElementsByClassName("liked")[0];
12+
var size = document.getElementById("display-image");
13+
var times = document.getElementsByClassName("times")[0];
14+
let count = 0;
15+
16+
love.addEventListener('dblclick', function(e){
17+
count++
18+
times.innerHTML = count
19+
})

0 commit comments

Comments
 (0)