Coders: Navbar . html

This is my first project,on this website.cheak it out.

The features of this website design is automatically change background image

<!DOCTYPE html>

<head>

<title>navbar</title>

</head>

<style>

body {

height: 900px;

background-image: url(https://source.unsplash.com/random/1200x350);

background-repeat: no-repeat;

background-size: 1200px 350px;

}

* {

margin: 0px;

padding: 0px;

box-sizing: border-box;

font-family: 'Lemonada', cursive;

}

.nev {

margin: 20px;

background-color: transparent;

text-align: center;

background-color: rgb(0, 0, 0);

}

li {

font-size: 20px;

display: inline-block;

}

a {

text-decoration: none;

list-style: none;

padding: 10px;

color: rgb(255, 255, 255);

text-align: center;

}

a:hover {

color: red;

transition-duration: 1s;

}

.logo {

text-align: center;

margin: auto;

margin-right: 95px;

font-size: 25px;

display: inline-block;

}

section {

margin: auto;

margin-top: 100px;

padding: 10px;

background-color: rgb(255, 255, 254);

}

.content {

color: #000;

text-align: center;

justify-content: center;

}

.content_image {

float: left;

height: 200px;

border: 2px solid black;

min-width: 10px;

}

footer {

margin: 15px;

text-align: center;

font-weight: bold;

font-size: 12px;

color: rgb(139, 130, 130);

}

section p {

margin: 5px;

padding: 25px;

}

section div {

border: 2px solid black;

margin: 15px;

border-radius: 10px;

}

.clock {

text-align: center;

align-content: center;

display: block;

margin: auto;

margin-top: 20px;

font-weight: bold;

color: #ffffff;

font-size: 22px;

}

h4 {

display: none;

}

.bottom{

display: block;

margin: auto;

text-align: center;

}

.youtube {

border-right: 0.5px solid #000;

padding: 30px;

margin: 2px;

}

.youtube a{

color: #fff;

background-color: red;

font-size: 12px;

border: 0.2px solid #000;

border-radius: 30px ;

font-weight: bold;

}

.insta a img{

height: 50px;

width: 50px;

}

.facebook a img{

height: 50px;

width: 50px;

}

.yout a img{

height: 50px;

width: 50px;

}

.tw a img{

height: 50px;

width: 50px;

}

</style>

<body>

<ul>

<!-- <a href="navbar.html" download="navbar.html">

<button type="button">Download</button>

</a> -->

<li class="logo"> <a href="#"> saveno </a> </li>

<li><a href="https://saveno.blogspot.com/p/about-us.html?m=1">About</a></li>

<li><a href="https://saveno.blogspot.com/p/contact-us_13.html?m=1">Contact</a></li>

<li><a href="https://saveno.blogspot.com/p/disclaimer.html?m=1">Disclaimer</a></li>

<li><a href="https://saveno.blogspot.com/p/privacy-and-policy.html?m=1">Privacy-policy</a></li>

</ul>

</div>

<h4>Current Time / Date </h4>

</div>

<div>

<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRCv4E9jh1XW4FDThiBVDWHvQVmkWfSFFiUn1i6wmZZ5Q&s"

alt="" srcset="" class="content_image">

</as>

</div>

<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRCv4E9jh1XW4FDThiBVDWHvQVmkWfSFFiUn1i6wmZZ5Q&s"

alt="" srcset="" class="content_image">

<p><a href="#" class="content">Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing

elit.

modi cumque minima cum vero accusantium. Modi magnam dolores quam cupiditate

consectetur?</a>

</p>

</div>

<div>

<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRCv4E9jh1XW4FDThiBVDWHvQVmkWfSFFiUn1i6wmZZ5Q&s"

alt="" srcset="" class="content_image">

<p><a href="https://saveno.blogspot.com/2020/08/how-to-make-snake-water-and-gun-game.html" class="content">Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing

elit.

cumque minima cum vero accusantium. Modi magnam dolores quam cupiditate

consectetur?</a>

</p>

</div>

<div>

<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRCv4E9jh1XW4FDThiBVDWHvQVmkWfSFFiUn1i6wmZZ5Q&s"

alt="" srcset="" class="content_image">

<p><a href="https://saveno.blogspot.com/" class="content">Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing

elit.

cumque minima cum vero accusantium. Modi magnam dolores quam cupiditate

consectetur?</a>

</p>

</div>

<div>

<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRCv4E9jh1XW4FDThiBVDWHvQVmkWfSFFiUn1i6wmZZ5Q&s"

alt="" srcset="" class="content_image">

<p><a href="https://saveno.blogspot.com/" class="content">Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing

elit.

cumque minima cum vero accusantium. Modi magnam dolores quam cupiditate

consectetur?</a>

</p>

</div>

</section>

</div>

<hr>

<div>saveno&copy Copyright with Ansh Gupta</div>

</footer>

function showTime() {

var date = new Date();

var h = date.getHours();

var m = date.getMinutes();

var s = date.getSeconds();

var mm=date.getMinutes();

var sesson = "AM";

var d = date.getDate();

var m = date.getMonth();

var y = date.getFullYear();

if (h < 12) {

sesson = "AM";

}

else {

sesson = "PM";

}

if (h == 0) {

h = 12;

}

if (h > 12) {

h = h - 12;

}

if (h < 10) {

h = "0" + h;

}

if (mm < 10) {

mm = "0" + mm;

}

if (s < 10) {

s = "0" + s;

}

if (d < 10) {

d = "0" + d;

}

var time = h + ":" + mm + ":" + s + " " + sesson + " / " +

d + " : " + m + " : " + y ;

document.getElementById("MyClockDisplay").innerText = time;

document.getElementById("MyClockDisplay").textContent = time;

setTimeout(showTime, 500);

}

showTime();

</script>

</body>

</html>

Sunday, 13 September 2020

Navbar . html

No comments:

Post a Comment