Skip to content

Commit b541aff

Browse files
vaishali-sharma-20vaishali-sharma-20
authored
CSS file for form section. (#375)
* Create Github-Pages Created Github Page Blog. Please check it and review it. * form.css * Update form.css
1 parent aca0f51 commit b541aff

File tree

2 files changed

+267
-0
lines changed

2 files changed

+267
-0
lines changed

‎form.css

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
.row
2+
{
3+
display: block;
4+
box-shadow: 5px 25px 50px 5px powderblue;
5+
padding: 50px 100px;
6+
}
7+
.experience
8+
{
9+
text-align: left;
10+
}
11+
.rate {
12+
float: left;
13+
height: 46px;
14+
padding: 0 10px;
15+
}
16+
.rate:not(:checked) > input {
17+
position:absolute;
18+
top:-9999px;
19+
}
20+
.rate:not(:checked) > label {
21+
float:right;
22+
width:1em;
23+
overflow:hidden;
24+
white-space:nowrap;
25+
cursor:pointer;
26+
font-size:30px;
27+
color:#ccc;
28+
}
29+
.rate:not(:checked) > label:before {
30+
content: '★ ';
31+
}
32+
.rate > input:checked ~ label {
33+
color: #ffc700;
34+
}
35+
.rate:not(:checked) > label:hover,
36+
.rate:not(:checked) > label:hover ~ label {
37+
color: #deb217;
38+
}
39+
.rate > input:checked + label:hover,
40+
.rate > input:checked + label:hover ~ label,
41+
.rate > input:checked ~ label:hover,
42+
.rate > input:checked ~ label:hover ~ label,
43+
.rate > label:hover ~ input:checked ~ label {
44+
color: #c59b08;
45+
}
46+
.formImage:hover{
47+
transition-property: font-weight;
48+
}
49+
50+
/* Modified from: https://github.com/mukulkant/Star-rating-using-pure-css */

‎posts/github/Github-Pages

Lines changed: 217 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,217 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta
6+
name="description"
7+
content="Learn how to initialize Git, add files, commit changes, and connect your local repo to your remote GitHub account." />
8+
<meta
9+
name="keywords"
10+
content="GitHub, Local repository, Version control, Git, Set up, Collaboration, Initialize, Commit, Remote repository, Developer tools" />
11+
<title>GitHub Pages: Your Gateway to Free and Easy Website Hosting</title>
12+
<meta name="vaishali-sharma-20" content="CSEdge" />
13+
<!-- Favicon-->
14+
<link
15+
rel="icon"
16+
type="image/x-icon"
17+
href="https://csedge.courses/Images/CSEDGE-LOGO32X32.png" />
18+
<!-- Core theme CSS (includes Bootstrap)-->
19+
<link href="../styles.css" rel="stylesheet" />
20+
</head>
21+
<body>
22+
<!-- Responsive navbar-->
23+
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
24+
<div class="container">
25+
<img
26+
height="32px"
27+
width="32px"
28+
src="https://csedge.courses/Images/CSEDGE-LOGO32X32.png"
29+
alt="logo" />
30+
<a class="navbar-brand" href="../.././index.html">CSEdge Learn</a>
31+
<button
32+
class="navbar-toggler"
33+
type="button"
34+
data-bs-toggle="collapse"
35+
data-bs-target="#navbarSupportedContent"
36+
aria-controls="navbarSupportedContent"
37+
aria-expanded="false"
38+
aria-label="Toggle navigation">
39+
<span class="navbar-toggler-icon"></span>
40+
</button>
41+
<div class="collapse navbar-collapse" id="navbarSupportedContent">
42+
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
43+
<li class="nav-item">
44+
<a class="nav-link" href="https://learn.csedge.courses">Home</a>
45+
</li>
46+
<li class="nav-item">
47+
<a class="nav-link" href="https://csedge.courses/about">About</a>
48+
</li>
49+
<li class="nav-item">
50+
<a class="nav-link" href="https://csedge.courses#contact"
51+
>Contact</a
52+
>
53+
</li>
54+
<li class="nav-item">
55+
<a
56+
class="nav-link active"
57+
aria-current="page"
58+
href="https://learn.csedge.courses"
59+
>Blog</a
60+
>
61+
</li>
62+
</ul>
63+
</div>
64+
</div>
65+
</nav>
66+
67+
<!--Page Content-->
68+
<div class="container mt-5">
69+
<div class="row">
70+
<!-- Blog entries-->
71+
<div class="col-lg-8">
72+
<h1>
73+
GitHub Pages: Your Gateway to Free and Easy Website Hosting
74+
</h1>
75+
<!-- Featured blog post-->
76+
<div class="card mb-4">
77+
<div class="card-body">
78+
<main class="container">
79+
<section>
80+
<p>In the realm of web development, finding a free, dependable, and user-friendly hosting solution can be difficult. GitHub Pages is an excellent option, particularly for engineers and tech aficionados. It enables you to host static webpages straight from a GitHub repository, offering a streamlined approach to exhibit your projects, documentation, portfolios, and more. This post will explain what GitHub Pages is, its features, and a step-by-step approach for creating your own website.</p>
81+
</section>
82+
<section>
83+
<h3>What is Github Pages?</h3>
84+
<p>GitHub Pages is a static site hosting service that lets you host web pages straight from your GitHub repository. It supports custom domains, Jekyll, and other static site generators, making it suitable for a variety of applications. Whether you're a developer trying to display your work or a newbie looking to start a personal blog, GitHub Pages provides an easy approach to get your site up and running.</p>
85+
<h4>Benefits of Using GitHub Pages </h4>
86+
<ul>
87+
<li><b> Free Hosting:</b> GitHub Pages provides free hosting for your static websites, which can be a significant advantage for personal projects or small businesses.</li>
88+
<li><b>Version Control:</b> Since your website is hosted on a GitHub repository, you can utilize GitHub’s version control features to track changes, collaborate with others, and revert to previous versions if needed.</li>
89+
<li><b>Custom Domains:</b> You can link a custom domain to your GitHub Pages site, giving your website a professional touch.</li>
90+
<li><b>Integration with Jekyll:</b> GitHub Pages has built-in support for Jekyll, a popular static site generator that simplifies content management and theme customization.</li>
91+
<li><b>Ease of Use:</b> Setting up a GitHub Pages site is straightforward and doesn’t require extensive knowledge of web development.</li>
92+
</ul>
93+
</section>
94+
<section>
95+
96+
</main>
97+
</div>
98+
</div>
99+
</div>
100+
<!-- Side widgets-->
101+
<div class="col-lg-4">
102+
<!-- Search widget-->
103+
<div class="card mb-4">
104+
<div class="card-header">Search</div>
105+
<div class="card-body">
106+
<div class="input-group">
107+
<input
108+
class="form-control"
109+
type="text"
110+
id="searchInput"
111+
placeholder="Enter search term..."
112+
aria-label="Enter search term..."
113+
aria-describedby="button-search" />
114+
<button
115+
class="btn btn-primary"
116+
id="button-search"
117+
type="button"
118+
onclick="search()">
119+
Go!
120+
</button>
121+
</div>
122+
</div>
123+
<!-- Search Results -->
124+
<div id="searchResults"></div>
125+
</div>
126+
<!-- Categories widget-->
127+
<div class="card mb-4">
128+
<div class="card-header">Categories</div>
129+
<div class="card-body">
130+
<div class="row">
131+
<div class="col-sm-6">
132+
<ul class="list-unstyled mb-0">
133+
<li><a href="#!">Web Design</a></li>
134+
<li><a href="#!">HTML</a></li>
135+
<li><a href="#!">Freebies</a></li>
136+
</ul>
137+
</div>
138+
<div class="col-sm-6">
139+
<ul class="list-unstyled mb-0">
140+
<li><a href="#!">JavaScript</a></li>
141+
<li><a href="#!">CSS</a></li>
142+
<li><a href="#!">Tutorials</a></li>
143+
</ul>
144+
</div>
145+
</div>
146+
</div>
147+
</div>
148+
<!-- Side widget-->
149+
<div class="card mb-4">
150+
<div class="card-header">Recent Posts</div>
151+
<div class="card-body">
152+
<p>Coming Soon..!</p>
153+
</div>
154+
</div>
155+
<div class="card mb-4">
156+
<div class="card-body">
157+
<script
158+
async
159+
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8930077947690409"
160+
crossorigin="anonymous"></script>
161+
<ins
162+
class="adsbygoogle"
163+
style="display: block"
164+
data-ad-format="fluid"
165+
data-ad-layout-key="-fb+5w+4e-db+86"
166+
data-ad-client="ca-pub-8930077947690409"
167+
data-ad-slot="9866674087"></ins>
168+
<script>
169+
(adsbygoogle = window.adsbygoogle || []).push({});
170+
</script>
171+
<script
172+
async
173+
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8930077947690409"
174+
crossorigin="anonymous"></script>
175+
<ins
176+
class="adsbygoogle"
177+
style="display: block"
178+
data-ad-format="fluid"
179+
data-ad-layout-key="-fb+5w+4e-db+86"
180+
data-ad-client="ca-pub-8930077947690409"
181+
data-ad-slot="9866674087"></ins>
182+
<script>
183+
(adsbygoogle = window.adsbygoogle || []).push({});
184+
</script>
185+
<script
186+
async
187+
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8930077947690409"
188+
crossorigin="anonymous"></script>
189+
<ins
190+
class="adsbygoogle"
191+
style="display: block"
192+
data-ad-format="fluid"
193+
data-ad-layout-key="-fb+5w+4e-db+86"
194+
data-ad-client="ca-pub-8930077947690409"
195+
data-ad-slot="9866674087"></ins>
196+
<script>
197+
(adsbygoogle = window.adsbygoogle || []).push({});
198+
</script>
199+
</div>
200+
</div>
201+
</div>
202+
</div>
203+
</div>
204+
<!-- Footer-->
205+
<footer class="py-5 bg-dark">
206+
<div class="container">
207+
<p class="m-0 text-center text-white">
208+
Copyright &copy CSEdge Learn 2024
209+
</p>
210+
</div>
211+
</footer>
212+
<!-- Bootstrap core JS-->
213+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
214+
<!-- Core theme JS-->
215+
</div>
216+
</body>
217+
</html>

0 commit comments

Comments
 (0)