Skip to content

Commit adef76c

Browse files
Prithwi32Prithwi32
committed
Home page added
1 parent 874b55c commit adef76c

File tree

4 files changed

+201
-5
lines changed

4 files changed

+201
-5
lines changed

‎index.html

+46-1
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,54 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Programming community </title>
77
<link rel="stylesheet" href="./public/css/index.css">
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
89
<script src="./public/js/index.js"></script>
910
</head>
1011
<body>
11-
<h1>Hello world</h1>
12+
<!-- navBar start-->
13+
<nav>
14+
<ul class="nav-ul">
15+
<li><a class="active" href="#home">Home</a></li>
16+
<li><a href="#problem">Problem of the day</a></li>
17+
<li><a href="#contests">Contests</a></li>
18+
<li><a href="#dashboard">Dashboard</a></li>
19+
<li class="right"><a href="#login">Login/Sign Up</a></li>
20+
</nav>
21+
<!-- navBar end -->
22+
<div class="container">
23+
<h1>Who are we?</h1>
24+
<div class="container_1">
25+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores maxime blanditiis veritatis nisi eligendi repellendus, ducimus cupiditate quis veniam deserunt velit! Laboriosam assumenda, commodi quae neque fugit unde nam veniam aliquid optio? Necessitatibus sed maiores delectus ab perferendis magnam nobis excepturi vitae cum eos, enim ipsam quos explicabo, voluptas beatae assumenda, cupiditate quasi voluptatem ut nostrum culpa blanditiis quidem dolor veritatis. Eum mollitia amet est aliquid dicta, temporibus error laboriosam quos animi laudantium sequi ratione eius quam debitis veritatis libero deleniti a tempora tenetur aperiam repellat nihil! Ut voluptates at, aliquid architecto, aperiam, perferendis ipsa tempora esse vitae atque laudantium!</p>
26+
<img src="/public/images/home-img.png" alt="">
27+
</div>
28+
<div class="container_2">
29+
<div class="first">
30+
<div class="innerOne">
31+
<img src="/public/images/img1.png" alt="">
32+
</div>
33+
<div class="innerTwo">
34+
<h3>Problem of the day</h3>
35+
<button>visit</button>
36+
</div>
37+
</div>
38+
<div class="second">
39+
<div class="innerOne">
40+
<img src="/public/images/img1.png" alt="">
41+
</div>
42+
<div class="innerTwo">
43+
<h3>Contests</h3>
44+
<button>visit</button>
45+
</div>
46+
</div>
47+
</div>
48+
</div>
49+
<footer>
50+
<div class="foot-container">
51+
<a href="#" class="fa fa-facebook"></a>
52+
<a href="#" class="fa fa-twitter"></a>
53+
<a href="#" class="fa fa-instagram"></a>
54+
</div>
55+
</footer>
56+
1257
</body>
1358
</html>

‎public/css/index.css

+155-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,156 @@
1-
*{
2-
margin: 0;
3-
padding: 0;
4-
box-sizing: border-box;
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
55
}
6+
7+
body {
8+
height: 100vh;
9+
width: 100%;
10+
background-color: black;
11+
color: white;
12+
}
13+
14+
nav {
15+
height: 55px;
16+
background-color: #0d0333;
17+
}
18+
li.nav-ul {
19+
margin: 0;
20+
padding: 0;
21+
overflow: hidden;
22+
}
23+
24+
ul.nav-ul li {
25+
float: left;
26+
list-style: none;
27+
}
28+
29+
ul.nav-ul li a {
30+
display: block;
31+
color: white;
32+
text-align: center;
33+
padding: 14px 16px;
34+
text-decoration: none;
35+
font-size: 22px;
36+
}
37+
38+
ul.nav-ul li a:hover:not(.active) {
39+
background-color: #717573;
40+
}
41+
42+
ul.nav-ul li a.active {
43+
color: #04aa6d;
44+
}
45+
46+
ul.nav-ul li.right {
47+
float: right;
48+
}
49+
50+
@media screen and (max-width: 600px) {
51+
ul.topnav li.right,
52+
ul.topnav li {
53+
float: none;
54+
}
55+
}
56+
57+
h1 {
58+
margin-top: 60px;
59+
margin-left: 150px;
60+
color: bisque;
61+
text-align: start;
62+
}
63+
64+
.container_1 {
65+
display: flex;
66+
margin: 50px 150px;
67+
gap: 18%;
68+
}
69+
70+
.container_2 {
71+
display: flex;
72+
margin: 50px 150px;
73+
align-items: center;
74+
padding: 40px;
75+
gap: 20%;
76+
text-align: center;
77+
}
78+
79+
.innerOne {
80+
width: 50%;
81+
height: 50%;
82+
float: left;
83+
}
84+
85+
.innerTwo {
86+
padding: 20px;
87+
width: 50%;
88+
height: 50%;
89+
float: right;
90+
font-size: 20px;
91+
}
92+
93+
.first {
94+
width: 50%;
95+
height: 50%;
96+
border: 3px solid rgb(132, 128, 128);
97+
border-radius: 10px;
98+
}
99+
100+
.second {
101+
width: 50%;
102+
height: 50%;
103+
border: 3px solid rgb(146, 140, 140);
104+
border-radius: 10px;
105+
}
106+
107+
button {
108+
border-radius: 6px;
109+
padding: 8px;
110+
background-color: rgb(216, 236, 125);
111+
margin: 10%;
112+
font-size: 18px;
113+
font-weight: 400;
114+
color: rgb(14, 14, 2);
115+
box-shadow: 2px 2px #0d0333;
116+
}
117+
118+
.innerOne img {
119+
width: 60%;
120+
}
121+
122+
.foot-container{
123+
display: flex;
124+
float: right;
125+
background-color: #0d0333; ;
126+
}
127+
128+
.fa {
129+
padding: 10px;
130+
font-size: 30px;
131+
width: 30px;
132+
text-align: center;
133+
text-decoration: none;
134+
margin: 5px 12px;
135+
border-radius: 70%;
136+
gap: 15px;
137+
}
138+
139+
.fa:hover {
140+
opacity: 0.7;
141+
}
142+
143+
.fa-facebook {
144+
background: #3B5998;
145+
color: white;
146+
}
147+
148+
.fa-twitter {
149+
background: #55ACEE;
150+
color: white;
151+
}
152+
153+
.fa-instagram {
154+
background: #125688;
155+
color: white;
156+
}

‎public/images/home-img.png

21.3 KB
Loading

‎public/images/img1.png

18.7 KB
Loading

0 commit comments

Comments
 (0)