Scribd
Upload
51 views

Homepage Bar Using HTML and CSS

The document is an HTML homepage with the following elements: 1. A navigation bar with links to Image, Gmail, Google Apps, and a Sign Up modal popup. 2. A Google logo and search bar centered on the page. 3. A pencil icon in the bottom right to customize the page.

Uploaded by

Mariyah
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
51 views

Homepage Bar Using HTML and CSS

The document is an HTML homepage with the following elements: 1. A navigation bar with links to Image, Gmail, Google Apps, and a Sign Up modal popup. 2. A Google logo and search bar centered on the page. 3. A pencil icon in the bottom right to customize the page.

Uploaded by

Mariyah
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

<!

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 href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/
bootstrap.min.css" rel="stylesheet" integrity="sha384-
GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-
[email protected]/font/bootstrap-icons.css">
<title>Homepage</title>
</head>
<style>

.kilid{
text-decoration: none;
color: aliceblue;
font-family: 'Courier New', Courier, monospace;
}
.card-link{
text-decoration: none;
color: aliceblue;
font-family: 'Courier New', Courier, monospace;
}

a:hover {
text-decoration: underline;
}

.logo{
margin-top:200px;
margin-bottom:20px;
}

.bar{
margin:0 auto;
width:575px;
border-radius:30px;
border:1px solid #dcdcdc;
}

.bar:hover{
box-shadow: 1px 1px 8px 1px #dcdcdc;
}

.searchbar{
height:45px;
border:none;
width:500px;
font-size:16px;
border-radius:20px;
outline: none;

}
.voice{
height:20px;
position:relative;
top:1px;
left:10px;
}

.lapis {
position: absolute;
bottom: 65px;
right: 35px;
}

</style>

<body>

<!--IMAGE OVERLAY-->
<div class="container-fluid">
<div class="card">
<img src="exercise.jpg" alt="" style="height: 80%;">
<div class="card-img-overlay text-white">

<!-- IMAGE -->


<div class="row">
<h5 class="card-link" style="text-align: end; text-decoration: none;">
<a href="https://www.google.com/search?
q=astronaut+wallpaper&rlz=1C1YQLS_enPH973PH973&sxsrf=AJOqlzWJkcLNDEnrjOsgSPVyBZCZsq
0_7A:1676643271210&source=lnms&tbm=isch&sa=X&ved=2ahUKEwius-
H03pz9AhURA94KHU_KDB4Q_AUoAXoECAEQAw&biw=1920&bih=950&dpr=1"
target="_blank" class="kilid">Image</a>

<!-- GMAIL -->


<a class="card-link" href="https://mail.google.com/mail/u/0/#calls"
target="_blank" class="kilid" >Gmail</a>

<!-- 3x3 grid -->


<i class="bi bi-grid-3x3-gap" href="#" title="Google Apps"></i>

<!-- BOOTSTRAP MODAL -->


<button type="button" class="btn " data-bs-toggle="modal" data-bs-
target="#samplemodal" style="color: #ffffff;" >
<i class="bi bi-person-circle" href="#" title="Google Account"></i></button>

<div class="account">
<div class="modal" id="samplemodal">
<div class="modal-dialog"> <!--will set the box or width-->
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" style="color: black;">Sign Up</h5>
<button type="button" class="btn btn-close" data-bs-dismiss="modal"></button>
</div>

<div class="modal-body">
<label for="email" style="color: black;">Email</label>
<input type="email" class="form-control" name="email" id="email">
<label for="pass" style="color: black;">Password</label>
<input type="password" class="form-control" name="password" id="password">
</div>

<div class="modal-footer">
<button class="btn btn-warning" data-bs-dismiss="modal" type="modal"
type="button" style="color: black;">Cancel</button>
<button class="btn btn-info" type="button" style="color: black;">Save</button>
</div>
</div>
</div>
</div>
</nav>
</div>

</h5>

<!-- GOOGLE -->


<center>
<div class="logo">
<img alt="Google"
src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp
.png">
</div>
<div class="bar">
<input class="searchbar" type="text" title="Search">
<a href="#"> <img class="voice"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Google_mic.svg/
716px-Google_mic.svg.png" title="Search by Voice"></a>
</div>
<center>

<!-- TUNG LAPIS SA DALOM -->


<div class="lapis">
<i class="bi bi-pencil-fill" title="Customize this page"></i>
</div>

</div>
</div>
</div>
</div>

<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.m
in.js" integrity="sha384-
w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
crossorigin="anonymous"></script>
</body>
</html>

You might also like