Skip to content

Instantly share code, notes, and snippets.

@wakoliVotes
Created May 28, 2021 21:26
Show Gist options
  • Save wakoliVotes/933e12fb2589489164e8051f4c044889 to your computer and use it in GitHub Desktop.
Save wakoliVotes/933e12fb2589489164e8051f4c044889 to your computer and use it in GitHub Desktop.
Simple Home Page with HTML and CSS
*
{
margin-left: 4px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.homecopy a
{
text-decoration: none;
}
.contents
{
background-color: whitesmoke;
border-radius: 15px;
padding-top: 3px;
padding-bottom: 15px;
}
.contents a
{
display: block;
text-decoration: none;
font-weight: 600;
text-indent: 2px;
color: black;
}
.contents a:hover
{
color: blue;
}
.contents h4
{
color:blue;
}
.hgroup
{
text-align: center;
}
.head
{
text-align: center;
font-size: large;
width: 100%;
left: 0;
right: 0;
padding-top: 10px;
font-size: 30px;
margin-top: 61px;
background-color: rgb(128, 177, 250);
border: solid rgb(183, 235, 183);
border-radius: 5px;
box-shadow: 20px;
position: sticky;
}
.navbar
{
text-align: center;
font-size: medium;
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
text-align: center;
width: 100%;
height: 40px;
border: whitesmoke;
justify-content: center;
align-items: center;
background-color: rgb(195, 250, 209);
padding-top: 25px;
font-weight: bold;
margin-bottom: 20px;
word-spacing: 3px;
padding: 20px;
}
.navbar a
{
text-decoration: none;
color: rgb(0, 0, 0);
}
a:hover
{
border-radius: 5px;
width: fit-content;
color: blue;
border-spacing: 20px;
border: solid 1.5px;
}
.home
{
left: 0;
right: 0;
width: 100%;
height: 100vh;
background-color: regb(0, 0, 0, 100, 0.4);
}
.home img
{
text-align: center;
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
opacity: 0.5;
}
.welcome-msg
{
margin-top: 60px;
position: relative;
font-family: monospace;
color: rgb(12, 12, 12);
height: 80vh;
font-size: 2rem;
z-index: -1;
}
img
{
width: 60%;
border-radius: 15px;
min-width: 600px;
}
.lesson
{
margin-top: 10px;
background-color: whitesmoke;
margin-bottom: 30px;
}
.lesson i
{
border: solid 1px rgb(248, 161, 126);
text-decoration:solid;
font-size: 18px;
background-color: rgb(245, 199, 187);
padding: 2px;
}
.lesson a
{
color: blue;
font-weight: 600;
text-decoration: none;
}
.footer
{
text-align: center;
}
.navbar1
{
font-size: medium;
left: 0;
right: 0;
width: 100%;
text-align: center;
height: 50px;
justify-content: center;
align-items: center;
background-color: rgb(195, 250, 209);
padding-top: 25px;
font-weight: bold;
bottom: 0;
word-spacing: 3px;
}
.navbar1 a
{
text-decoration: none;
color: black;
}
.navbar1 a:hover
{
color: blue;
}
.xcopy
{
margin-bottom: 10px;
padding-bottom: 10px;
bottom: 0;
position: sticky;
}
.next th
{
text-align: center;
border: solid rgb(194, 240, 194);
margin: 20px;
padding: 20px;
border-radius: 5px;
bottom: 30px;
top: 20px;
font-size: medium;
background-color: hsl(240, 6%, 90%);
}
.next a
{
text-decoration: none;
}
.fa
{
text-decoration: none;
padding: 10px;
margin: 5px 2px;
background-color: #fde4ea;
border-radius: 10px;
}
.fa:hover
{
color: rgb(235, 42, 42);
}
@media (min-aspect-ratio:16/9)
{
.home
{
width: 100%;
height: auto;
}
}
@media (max-aspect-ratio:16/9)
{
.home
{
width: auto;
height: 100%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<title>Allaitant Learning</title>
</head>
<body>
<div class="navbar">
<a href="index.html">Home</a>
<a href="#">C &nbsp;</a>
<a href="#">C++</a>
<a href="#">Java&nbsp;</a>
<a href="#">JavaScript</a>
<a href="#l">Python</a>
<a href="#">Artificial Intelligence (AI)</a>
<a href="#">Contact Us</a>
</div>
<section class="home1">
<!-- <img src="home.02.jpg" alt=""> -->
<div class="welcome-msg1" style="margin-top: 60px; padding: 5%; text-align: center; font-size: 2rem;">
<h1>Allaitant.edu</h1>
<h4><i>&quot;Let's Learn&quot;</i></h4>
<br>
<h4>Welcome to Allaitant Learning. We are Committed to offer the Best. Take time and explore hundreds of our learning materials</h4>
</div>
</section>
<section class="footer" style="position: relative; text-align: center; right: 0; left: 0;">
<!-- <div class="smedia" style="position: relative;"> -->
<!-- <a href="facebook.com" class="fa fa-facebook"></a> -->
<!-- <a href="twitter.com" class="fa fa-twitter"></a> -->
<!-- <a href="linkedin.com" class="fa fa-linkedin"></a> -->
<!-- <a href="github.com" class="fa fa-github"></a> -->
<!-- <a href="instagram.com" class="fa fa-instagram"></a> -->
</div>
<div class="homecopy" style="background-color: #b0f0dd; margin: 10px; padding-bottom: 5px;">
<hr>
<p>&copy; <b style="bottom: 0; text-decoration: none;">2021<a href="#">Daphicx Technologies</a></b></p>
</div>
</section>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment