Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added github icon at footer section and done styling casting #356

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Added github icon at footer section and done styling casting #356

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e5c5a39
Added github icon at footer section and done styling casting
ankit071105 Sep 30, 2023
801aede
Added Styling with help of css and added hover effect on various links
ankit071105 Oct 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added .DS_Store
View file
Open in desktop
Binary file not shown.
90 changes: 84 additions & 6 deletions docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Water.css</title>
<link rel="canonical" href="https://watercss.kognise.dev/" />

<meta
name="description"
content="A drop-in collection of CSS styles to make simple websites like this just a little bit nicer."
Expand Down Expand Up @@ -71,6 +72,65 @@
{ element: '#icon-32', href: { dark: './icons/light-favicon-32x32.png' } }
])
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style>
#footer{
width: 70px;
height: 50px;
}
footer a:hover{
background: white !important;
}
#footer:hover {
background: rgb(55, 56, 59) !important;
}
.bi{
background: rgb(180, 184, 187) !important;
}
a{
color: rgb(24, 23, 23);
margin-left: 20px;
}
a:hover{
color: rgb(57, 96, 172);
}
body{
background-color: rgb(241, 240, 240);
}
h1{
color: rgb(89, 86, 86);
text-align: center;
}
h2{
color: rgb(89, 86, 86);
text-align: center;
}
h3{
color: rgb(89, 86, 86);
text-align: center;

}
h4{
color: rgb(89, 86, 86);
text-align: center;
}
h5{
color: rgb(89, 86, 86);
text-align: center;
}
h6{
color: rgb(89, 86, 86);
text-align: center;
}
p{
font-family: Verdana, Geneva, Tahoma, sans-serif;
margin-left: 10px;

}img{
margin-left: 40px;
border: 2px soild black;
}
</style>
</head>

<body>
Expand Down Expand Up @@ -198,20 +258,27 @@ <h2 id="demo">Element demos</h2>
<p>This is supposed to be a demo page so we need more elements!</p>

<h3 id="form-elements">Form elements</h3>
<br>
<form>
<label for="email">Email</label>
<br>
<input type="email" name="email" id="email" placeholder="john.doe@gmail.com" />

<br> <br>
<label for="id">User id (read only)</label>
<br>
<input readonly name="id" id="id" value="04D6H89Z" />

<br> <br>
<label for="disabled">Random disabled input</label>
<br>
<input disabled name="disabled" id="disabled" placeholder="Because why not?" />

<br> <br>
<label for="about">About me</label>
<br>
<textarea name="about" id="about" placeholder="I am a textarea..."></textarea>

<br>
<br>
<label>Choose a Doe:</label>
<br>
<div>
<input type="radio" id="john" name="drone" value="john" checked />
<label for="john">John Doe</label>
Expand Down Expand Up @@ -339,14 +406,14 @@ <h3 id="typography">Typography</h3>
<li>Ordered list item 3</li>
</ol>

<p>Addresses are also styled to be <strong>awesome</strong>!</p>
<p style="margin-left: 10px;"> Addresses are also styled to be <strong>awesome</strong>!</p>
<address>
<a href="mailto:john.doe@example.com">john.doe@example.com</a><br />
<a href="tel:778-330-2389">778-330-2389</a><br />
<a href="sms:666-666-6666">666-666-6666</a><br />
</address>

<br />
<br>

<h1>Heading 1</h1>
<h2>Heading 2</h2>
Expand All @@ -356,8 +423,19 @@ <h5>Heading 5</h5>
<h6>Heading 6</h6>

<footer>

<a href="https://github.com/ankit071105/water.css">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16" id="footer">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
</svg>

</a>
<br>
<br>
<a href="#">Back to top ⬆</a>
</footer>
<script src="script.js" defer></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</body>
</html>