Skip to content

Commit c4b622b

Browse files
ZaenbZaenb
committed
testing new website design
1 parent 2671c12 commit c4b622b

File tree

1 file changed

+158
-43
lines changed

1 file changed

+158
-43
lines changed

‎nobiasapp/templates/newPage.html

+158-43
Original file line numberDiff line numberDiff line change
@@ -1,86 +1,201 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
56
<meta name="viewport" content="width=device-width, initial-scale=1.0">
67
<title>NoBias</title>
8+
<link rel="stylesheet" href="{% static 'css/style.css' %}">
9+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
10+
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet"
11+
integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
12+
crossorigin="anonymous" referrerpolicy="no-referrer" />
713
<style>
14+
815
body {
9-
font-family: Arial, sans-serif;
16+
font-family: 'Roboto', sans-serif;
1017
margin: 0;
1118
padding: 0;
12-
background-color: #F5F5F5; /* beige background */
19+
background-color: #f5f5f5;
20+
color: #333;
21+
}
22+
23+
h1, h2, h3, h4, h5, h6 {
24+
margin-top: 0;
1325
}
1426

27+
1528
.navbar {
16-
background-color: #E8E8E8; /* light grey navbar */
17-
overflow: hidden;
29+
background-color: #111;
30+
padding: 20px 0;
31+
text-align: center;
32+
position: fixed;
33+
top: 0;
34+
left: 0;
35+
width: 100%;
36+
z-index: 1000;
1837
}
1938

2039
.navbar a {
21-
float: left;
22-
display: block;
23-
color: #333; /* dark grey link color */
24-
text-align: center;
25-
padding: 14px 20px;
40+
display: inline-block;
41+
color: #fff;
2642
text-decoration: none;
43+
margin: 0 20px;
44+
transition: color 0.3s;
2745
}
2846

2947
.navbar a:hover {
30-
background-color: #ddd; /* grey background on hover */
48+
color: #ff7b00;
3149
}
3250

33-
.content {
34-
padding: 20px;
51+
.logo img {
52+
width: 100px;
53+
margin-top: 5px;
3554
}
3655

37-
.search-container {
56+
.search-bar {
3857
text-align: center;
3958
margin-top: 50px;
4059
}
4160

42-
.search-container input[type=text] {
61+
.search-bar input[type="text"] {
4362
padding: 10px;
44-
width: 50%;
45-
border-radius: 5px;
46-
border: 1px solid #ccc; /* light grey border */
47-
box-sizing: border-box;
48-
font-size: 16px;
63+
border: none;
64+
border-radius: 20px;
65+
background-color: #fff;
66+
color: #333;
67+
width: 250px;
68+
transition: width 0.3s;
69+
}
70+
71+
.search-bar input[type="text"]:focus {
72+
width: 300px;
73+
outline: none;
4974
}
5075

51-
.search-container input[type=submit] {
52-
background-color: #4CAF50; /* green submit button */
53-
color: white;
76+
.search-bar button {
5477
padding: 10px 20px;
5578
border: none;
56-
border-radius: 5px;
79+
border-radius: 20px;
80+
background-color: #ff7b00;
81+
color: #fff;
5782
cursor: pointer;
58-
font-size: 16px;
83+
transition: background-color 0.3s;
84+
}
85+
86+
.search-bar button:hover {
87+
background-color: #e66000;
88+
}
89+
90+
91+
.content {
92+
padding: 100px 20px 20px;
93+
text-align: center;
94+
}
95+
96+
.description {
97+
margin-top: 50px;
98+
}
99+
100+
101+
.testimonials {
102+
display: flex;
103+
flex-wrap: wrap;
104+
justify-content: center;
105+
margin-top: 50px;
106+
}
107+
108+
.testimonial {
109+
width: 300px;
110+
padding: 20px;
111+
margin: 20px;
112+
background-color: #fff;
113+
border-radius: 10px;
114+
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
115+
transition: transform 0.3s;
116+
}
117+
118+
.testimonial:hover {
119+
transform: translateY(-10px);
120+
}
121+
122+
.testimonial p {
123+
color: #555;
124+
font-style: italic;
125+
}
126+
127+
.testimonial-author {
128+
margin-top: 20px;
129+
color: #777;
130+
}
131+
132+
133+
footer {
134+
background-color: #111;
135+
color: #ccc;
136+
text-align: center;
137+
padding: 20px 0;
138+
position: fixed;
139+
bottom: 0;
140+
left: 0;
141+
width: 100%;
142+
z-index: 1000;
143+
}
144+
145+
.socialIcons a {
146+
color: #fff;
147+
margin: 0 10px;
148+
font-size: 20px;
59149
}
60150
</style>
61151
</head>
152+
62153
<body>
63154

64-
<div class="navbar">
65-
<a href="#home">Home</a>
66-
<a href="#about">About Us</a>
67-
<a href="#contact">Contacts</a>
68-
<a href="#services">Services</a>
69-
</div>
70-
71-
<div class="content">
72-
<h1>Welcome to NoBias</h1>
73-
<p>NoBias is a program that will detect bias in a news article. We will detect bias by analyzing the tone, sentiment, and diction of a news article.</p>
74-
<div class="search-container">
75-
<form action="/detect-bias" method="get">
76-
<input type="text" placeholder="Insert URL here..." name="url" required>
77-
<input type="submit" value="Detect Bias">
78-
</form>
79-
</div>
80-
</div>
155+
<header class="header">
156+
<div class="logo">
157+
<img src="{% static 'img/logo.png' %}" alt="NoBias Logo">
158+
</div>
81159

82-
</body>
83-
</html>
160+
<nav class="navbar">
161+
<a href="#" style="--i:0;">Home<span></span></a>
162+
<a href="aboutus" style="--i:1;">About Us<span></span></a>
163+
<a href="#" style="--i:2;">Contacts<span></span></a>
164+
<a href="#detectbias" style="--i:3;">How we Detect Bias<span></span></a>
165+
</nav>
84166

167+
<div class="search-bar">
168+
<input type="text" placeholder="Search...">
169+
<button type="submit"><i class="fas fa-search"></i></button>
170+
</div>
171+
</header>
85172

173+
<div class="content">
174+
<h1>NoBias</h1>
175+
<div class="description">
176+
<p>NoBias is a program that will detect bias in a news article. We will detect bias by analyzing the tone,
177+
sentiment, and diction of a news article.</p>
178+
</div>
179+
<div class="testimonials">
180+
<div class="testimonial">
181+
<p>"I've been using NoBias for a while now, and it's been incredibly helpful in identifying bias in
182+
news articles. Highly recommended!"</p>
183+
<p class="testimonial-author">- John Doe</p>
184+
</div>
185+
<div class="testimonial">
186+
<p>"As a journalist, maintaining objectivity is crucial. NoBias has become an indispensable tool in my
187+
arsenal for ensuring unbiased reporting."</p>
188+
<p class="testimonial-author">- Jane Smith</p>
189+
</div>
190+
<div class="testimonial">
191+
<p>"NoBias has exceeded my expectations. Its accuracy and efficiency in detecting bias make it a
192+
standout product in the field."</p>
193+
<p class="testimonial-author">- Michael Johnson</p>
194+
</div>
195+
</div>
196+
</div>
86197

198+
<footer>
199+
<div class="socialIcons">
200+
<a href="#"><i class="fab fa-facebook"></i></a>
201+
<a href="#"><i class="fab fa-instagram"></i

0 commit comments

Comments
 (0)