bluehost

Showing posts with label beginner guide. Show all posts
Showing posts with label beginner guide. Show all posts

Sunday, 10 October 2021

How To Make An Active Download Button Using HTML And CSS.

 


If you are creating a blog or a website, and you want to put downloadable documents, there are ways you can create the download button and link it to your documents.

For the button to work out perfectly, the documents to be downloaded should be in the same folder as the other documents.

The link of the document should now be mounted into the website code e.g. if "post/edit/310299486750145624" is the document link, now the code should be like

href="post/edit/310299486750145624"

create a button like this;

<button class="btn"><i class="fa fa-download"></i> Download</button>


Make sure you position your button at the preferred place.

Then give your button a class so that the program can know what it's going to do.

class="et_pb_button"

The full button code;

<a href="post/edit/310299486750145624" download="newname" target="_blank"
class="et_pb_button" style="color: #1148df;">Download Link</a>
at No comments:
Labels: , , , , ,

Friday, 8 October 2021

How To Put A Logo At The Center Of Website Using CSS And HTML.

 


In this article, we are going to show you how to align your website logo at the centre of the website.

This involves a very simple HTML codings and styling.

First, you need to have your logo in the same folder as your other images and photos. Make sure your logo is very attractive; usually a logo carries some information about the company or the website.

You can use  or hire somebody to design for you a good logo or apply online like in Fiverr and pay for the quality of the logo.

Now, to put your logo at the right corner of the website, you simply place this code between the body tangs;

<div class="column">
<div class="logo">
<br>
<img src="log.jpg" alt="logo">
</div>
</div>
<body>
</body>

and you are done.

Now, to place the logo at the centre, you simply use the CSS

<style>
.white-box {
width: 100%;
height: 120;
border-radius: 30px 30px 0px 0px;
display: block;
text-align: center;
transform: translateY(-20px);
padding: 4px;
background: #fff;
}
</style>

And that is wow?

Your logo should look like this


Thank you very much for reading this educative blog.

at No comments:
Labels: , , , ,

Thursday, 9 September 2021

How To Create A Gallery Using HTML, CSS , And JS;

 



Today's article is aimed at creating a gallery where we can put our photos and or videos. It will function as gallery app or google photos.

The gallery will contain buttons where you will be selecting whether to move forward or backward by pressing the buttons.

The HTML codes.

<!DOCTYPE html>

<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="gallery.css">


<h2 style="text-align:center">My Gallery</h2>
<video width="600" controls autoplay loop>
<source src="https://www.theedublogger.com/google-photos-guide/" type="video/mp4">
</video>
<div class="container">
<div class="mySlides">
<div class="numbertext">1 / 9</div>
<img src="https://www.google.com/imgres?imgurl=https%3A%2F%2Fwww.cnet.
com%2Fa%2Fimg%2FpLwWAw3f1OdjhUWe1-u0jcqhIcI%3D%2F
1200x630%2F2019%2F09%2F10%2Fd3dc3047-4c7f-499e-8b8c-240b3e27c6d2%2Fgoogle-
logo-6.jpg&imgrefurl=https%3A%2F%2Fwww.cnet.com%2Ftech%2Fservices-and-software
%2Fgoogle-one-storage-starts-offering-some-features-for-free%2F&tbnid=EHjUDy1Y
NjPeHM&vet=12ahUKEwiimYTh1fHyAhUDGRoKHeksDPsQMygcegUIARCGAg..i&docid=iTrW3iE24
PKfIM&w=1200&h=630&q=google%20photos&ved=2ahUKEwiimYTh1fHyAhUDGRoKHeksDPsQMyg
cegUIARCGAg" style="width:100%">

</div>

<div class="mySlides">
<div class="numbertext">2 / 9</div>
<img src="https://www.google.com/imgres?imgurl=https%3A%2F%2Fimages.indianexpress.
com%2F2021%2F05%2FGoogle_Reuters_F.jpg&imgrefurl=https%3A%2F%2Findianexpress.
com%2Farticle%2Ftechnology%2Ftechook%2Fgoogle-photos-free-storage-policy-june-
1-ends-check-plans-storage-pixel-users-7337569%2F&tbnid=Sx3ERkzPGnTY4M&vet=
12ahUKEwiimYTh1fHyAhUDGRoKHeksDPsQMygfegUIARCMAg..i&docid=wVPDJT3nWFtmyM&w=
1200&h=667&q=google%20photos&ved=
2ahUKEwiimYTh1fHyAhUDGRoKHeksDPsQMygfegUIARCMAg" style="width:100%">
</div>

<div class="mySlides">
<div class="numbertext">3 / 9</div>
<img src="https://www.google.com/imgres?imgurl=https%3A%2F%2Fcdn-res.
keymedia.com%2Fcms%2Fimages%2Fus%2F039%2F0132_637309597704291234.
jpg&imgrefurl=https%3A%2F%2Fwww.hcamag.com%2Fasia%2Fspecialisation%2Flearning-
development%2Fgoogle-to-support-3000-jobseekers-in-singapore%2F228475&tbnid=
I6tgnIsHZoivuM&vet=10CIoBEDMonwFqFwoTCMjv0cTW8fICFQAAAAAdAAAAABAC..i&docid=
cRnRmoII5sHFSM&w=1000&h=600&q=google%20photos&ved=
0CIoBEDMonwFqFwoTCMjv0cTW8fICFQAAAAAdAAAAABAC" style="width:100%">
</div>

<div class="mySlides">
<div class="numbertext">4 / 9</div>
<img src="tech.jpg" style="width:100%">
</div>

<div class="mySlides">
<div class="numbertext">5 / 9</div>
<img src="https://www.google.com/imgres?imgurl=https%3A%2F%2Fimages.ctfassets.
net%2Fwcfotm6rrl7u%2F24PvUvHxz3ZwBFFtufgRQe%2F14f808748369bba7d34493023b6fa4dc%
2FGoogle_One-og_image.jpg&imgrefurl=https%3A%2F%2Fwww.nokia.com%2Fphones%2Fen_
int%2Fgoogle-one&tbnid=a3voUblV2VLiLM&vet=12ahUKEwiimYTh1fHyAhUDGRoKHeksDPsQMy
hOegUIARCSAQ..i&docid=FRCdA0hBH27ePM&w=1200&h=630&q=google%20photos&ved=2ahUKEw
iimYTh1fHyAhUDGRoKHeksDPsQMyhOegUIARCSAQ" style="width:100%">
</div>

<div class="mySlides">
<div class="numbertext">6 / 9</div>
<img src="https://www.google.com/imgres?imgurl=https%3A%2F%2Fcdn57.androidauthority.
net%2Fwp-content%2Fuploads%2F2020%2F11%2Fgoogle-photos-app-icon-logo-google-
pixel-5-2.jpg&imgrefurl=https%3A%2F%2Fwww.androidauthority.com%2Fgoogle-photos
-937968%2F&tbnid=Q6JFAzN64gbW3M&vet=12ahUKEwiimYTh1fHyAhUDGRoKHeksDPsQMyhSegU
IARCaAQ..i&docid=Bjph8NoD5mBaqM&w=1920&h=1080&q=google%20photos&ved=2ahUKEwi
imYTh1fHyAhUDGRoKHeksDPsQMyhSegUIARCaAQ" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">7 / 9</div>
<img src="https://www.google.com/imgres?imgurl=https%3A%2F%2Fwww.cnet.com%2Fa%2Fimg%2
FvyXvPd3VpbvIftGIu2uu6M7Yk7o%3D%2F1200x630%2F2021%2F06%2F03%2F094be1de-9cce
-4762-b8e5-6f69cfafed81%2Fgoogle-one-plan-upgrade-google-photos-unlimited-
ending-cnet-2021-008.jpg&imgrefurl=https%3A%2F%2Fwww.cnet.com%2Ftech%2Fservices
-and-software%2Fgoogle-photos-unlimited-free-storage-has-ended-heres-what-to
-do-now%2F&tbnid=9JDDOlww9ESe3M&vet=12ahUKEwiimYTh1fHyAhUDGRoKHeksDPsQMyhQegU
IARCWAQ..i&docid=99qLieN9Jb67kM&w=1200&h=630&q=google%20photos&ved=2ahUKEwiimY
Th1fHyAhUDGRoKHeksDPsQMyhQegUIARCWAQ" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">8 / 9</div>
<img src="https://www.google.com/imgres?imgurl=https%3A%2F%2Fstatic01.nyt.
com%2Fimages%2F2020%2F10%2F21%2Fbusiness%2F21Googleworld-illo%2F30Googleworld-
illo-videoSixteenByNineJumbo1600.jpg&imgrefurl=https%3A%2F%2Fwww.nytimes.
com%2F2020%2F10%2F20%2Ftechnology%2Fdoj-google.html&tbnid=6VkDOKNz2jqSKM&vet=
10CBYQMyhuahcKEwjI79HE1vHyAhUAAAAAHQAAAAAQAg..i&docid=3tHeBj2gDZ0x6M&w=1600&h=
900&q=google%20photos&ved=0CBYQMyhuahcKEwjI79HE1vHyAhUAAAAAHQAAAAAQAg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">9 / 9</div>
<img src="https://www.google.com/imgres?imgurl=https%3A%2F%2Fcdn.pocket-lint.
com%2Fr%2Fs%2F1200x%2Fassets%2Fimages%2F141075-apps-feature-what-is-
google-lens-and-how-do-you-use-it-image1-fvo5qgkrqn.jpg&imgrefurl=
https%3A%2F%2Fwww.pocket-lint.com%2Fapps%2Fnews%2Fgoogle%2F141075-what-is-
google-lens-and-how-does-it-work-and-which-devices-have-it&tbnid=
OTxzNM7uMS20yM&vet=10CFcQMyiKAWoXChMIyO_RxNbx8gIVAAAAAB0AAAAAEAI..
i&docid=_c-UEac8WF-XvM&w=1200&h=800&q=google%20photos&ved=0CFcQMyiKAWoXChMIyO_
RxNbx8gIVAAAAAB0AAAAAEAI" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>

<div class="caption-container">
<p id="caption"></p>
</div>

<div class="row">
<div class="column">
<img class="demo cursor" src="moon.jpg" style="width:100%"
onclick="currentSlide(1)" alt="The horizon">
</div>
<div class="column">
<img class="demo cursor" src="web.jpeg" style="width:100%"
onclick="currentSlide(2)" alt="third-world">
</div>
<div class="column">
<img class="demo cursor" src="we.jpg" style="width:100%"
onclick="currentSlide(3)" alt="$ is the future">
</div>
<div class="column">
<img class="demo cursor" src="tech.jpg" style="width:100%"
onclick="currentSlide(4)" alt="skypers">
</div>
<div class="column">
<img class="demo cursor" src="images (39).jpeg" style="width:100%"
onclick="currentSlide(5)" alt="life is $ ">
</div>
<div class="column">
<img class="demo cursor" src="website.jpeg" style="width:100%"
onclick="currentSlide(6)" alt="guru and net">
</div>
<div class="column">
<img class="demo cursor" src="saf.jpg" style="width:100%"
onclick="currentSlide(7)" alt="get new ideas">
</div>
<div class="column">
<img class="demo cursor" src="dev.jpg" style="width:100%"
onclick="currentSlide(8)" alt="socialise">
</div>
<div class="column">
<img class="demo cursor" src="blog.jpg" style="width:100%"
onclick="currentSlide(9)" alt="develop yourself">
</div>
</div>
</div>



</body>

</html>

The CSS codes.

body {
font-family: Arial;
margin: 0;
}

* {
box-sizing: border-box;
}

img {
vertical-align: middle;
}


/* Position the image container (needed to position the left and right arrows) */

.container {
position: relative;
}


/* Hide the images by default */

.mySlides {
display: none;
}


/* Add a pointer when hovering over the thumbnail images */

.cursor {
cursor: pointer;
}


/* Next & previous buttons */

.prev,
.next {
cursor: pointer;
position: absolute;
top: 40%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}


/* Position the "next button" to the right */

.next {
right: 0;
border-radius: 3px 0 0 3px;
}


/* On hover, add a black background color with a little bit see-through */

.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}


/* Number text (1/3 etc) */

.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}


/* Container for image text */

.caption-container {
text-align: center;
background-color: #222;
padding: 2px 16px;
color: white;
}

.row:after {
content: "";
display: table;
clear: both;
}


/* Six columns side by side */

.column {
float: left;
width: 16.66%;
}


/* Add a transparency effect for thumnbail images */

.demo {
opacity: 0.6;
}

.active,
.demo:hover {
opacity: 1;
}

JavaScript codes.

<script>
var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
showSlides(slideIndex += n);
}

function currentSlide(n) {
showSlides(slideIndex = n);
}

function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
captionText.innerHTML = dots[slideIndex - 1].alt;
}
</script>

You can create,change or modify the codes at your wish.

at No comments:
Labels: , , , , , ,

Tuesday, 17 August 2021

How To Create A Login And Forget Password Form Using HTML And CSS.

We are going to create something like this at the end of our coding.
If we start with the login  part;we are going to start by creating a form which asks for User_name and password. We what if the password is wrong, the system asks the user to forget password. So,if the password is wrong,the computer asks the user to create a new password. The coding goes;

<div id="login">
<form action="action-page.php" autocomplete="on">
<p>
<label for="name">User name</label>
<input type="text" name="txtname" id="txtname">
</p>
<p>
<label for="pass">password</label>
<input type="text" name="txtpass" id="txtpassword">
</p>

<p>
<button onclick="myFunction()" type="button"
class="sent"> sent</button>
</p>
</form>

</div>


<div class="container">
<h1>Creating New Password</h1>
<h2>Please Enter Your:</h2>
<hr>
<label for="email"><b>User Name</b></label>
<input type="text" placeholder="Enter Email"
name="email" required>

<label for="psw"><b>New Password</b></label>
<input type="password" placeholder="Enter Password"
id="psw" name="psw" required>

<label for="psw-repeat"><b>Confirm Password</b></label>
<input type="password" placeholder="Repeat Password" id="psw"
name="psw-repeat" required>

<label>
<input type="checkbox" check ="checked" name="remember"
style="margin-bottom:15px"> Remember me
</label>

at No comments:
Labels: , , , ,
Subscribe to: Posts (Atom)

React vs Angular; Front-End Web Development

Angular and React  are two of the most popular Javascript tools for front-end development. React is a Javascript created by Meta...