Skip to content

Commit 67664b7

Browse files
Nivedita-coderNivedita-coder
authored
Merge pull request Nivedita-coder#13 from yashjain1974/main
Update html and css for random quote index.html
2 parents f9e1522 + df0cc15 commit 67664b7

1 file changed

Lines changed: 141 additions & 19 deletions

File tree

‎index.html‎

Lines changed: 141 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,143 @@
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-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7-
<link rel="stylesheet" href="creator.css">
8-
<title>The Random Quote App</title>
9-
</head>
10-
<body>
11-
<div>
12-
<h2>Today's Quote For You</h2>
13-
<p>Press the button</p>
1+
<style>
2+
@import url('https://fonts.googleapis.com/css?family=Raleway:400,500');
3+
* {
4+
margin: 0;
5+
padding: 0;
6+
list-style: none;
7+
vertical-align: baseline;
8+
}
149

15-
<button onclick="createQuote();">Get Quote</button>
16-
<p id="quoteOut"></p>
17-
<p id="authorOut"></p>
10+
div {
11+
position: relative;
12+
z-index: 2;
13+
}
14+
15+
body {
16+
background-color: #333;
17+
color: #333;
18+
font-family: 'Raleway', sans-serif;
19+
font-weight: 400;
20+
display: flex;
21+
justify-content: center;
22+
align-items: center;
23+
height: 100vh;
24+
}
25+
.footer {
26+
width: 450px;
27+
text-align: center;
28+
display: block;
29+
margin: 15px auto 30px auto;
30+
font-size: 0.8em;
31+
color: #fff;
32+
a {
33+
font-weight: 500;
34+
text-decoration: none;
35+
color: #fff;
36+
}
37+
}
38+
#quote-box {
39+
border-radius: 3px;
40+
position: relative;
41+
//margin:8% auto auto auto;
42+
width: 450px;
43+
padding: 40px 50px;
44+
display: table;
45+
background-color: #fff;
46+
.quote-text {
47+
i {
48+
font-size: 1em;
49+
margin-right: 0.4em;
50+
}
51+
text-align: center;
52+
width: 450px;
53+
height: auto;
54+
clear: both;
55+
font-weight: 500;
56+
font-size: 1.75em;
57+
}
58+
.quote-author {
59+
width: 450px;
60+
height: auto;
61+
clear: both;
62+
padding-top: 20px;
63+
font-size: 1em;
64+
text-align: right;
65+
}
66+
.buttons {
67+
width: 450px;
68+
margin: auto;
69+
display: block;
70+
.button {
71+
height: 38px;
72+
border: none;
73+
border-radius: 3px;
74+
color: #fff;
75+
background-color: #333;
76+
outline: none;
77+
font-size: 0.85em;
78+
padding: 8px 18px 6px 18px;
79+
margin-top: 30px;
80+
opacity: 1;
81+
cursor: pointer;
82+
&:hover {
83+
opacity: 0.9;
84+
}
85+
&#tweet-quote,
86+
&#tumblr-quote {
87+
float: left;
88+
padding: 0px;
89+
padding-top: 8px;
90+
text-align: center;
91+
font-size: 1.2em;
92+
margin-right: 5px;
93+
height: 30px;
94+
width: 40px;
95+
}
96+
&#new-quote {
97+
float: right;
98+
}
99+
}
100+
}
101+
}
102+
</style>
103+
104+
<link
105+
rel="stylesheet"
106+
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-
107+
108+
awesome.min.css"
109+
/>
110+
<div id="wrapper">
111+
<div id="quote-box">
112+
<div class="quote-text">
113+
<i class="fa fa-quote-left"> </i><span id="text"></span>
18114
</div>
19-
<script src="creator.js"></script>
20-
</body>
21-
</html>
115+
<div class="quote-author">- <span id="author"></span></div>
116+
<div class="buttons">
117+
<a
118+
class="button"
119+
id="tweet-quote"
120+
title="Tweet this quote!"
121+
target="_blank"
122+
>
123+
<i class="fa fa-twitter"></i>
124+
</a>
125+
<a
126+
class="button"
127+
id="tumblr-quote"
128+
title="Post this quote on tumblr!"
129+
target="_blank"
130+
>
131+
<i class="fa fa-tumblr"></i>
132+
</a>
133+
<button class="button" id="new-quote">New quote</button>
134+
</div>
135+
</div>
136+
<div class="footer">by <a href="https://codepen.io/hezag/">yash</a></div>
137+
</div>
138+
<script
139+
140+
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
141+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-
142+
143+
ui.min.js"></script>

0 commit comments

Comments
 (0)