Answered: ow do I add an img with html and css…

Database System Concepts

7th Edition

ISBN:9780078022159

Author:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan

Publisher:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan

Chapter1: Introduction

Section: Chapter Questions

Problem 1PE

See similar textbooks

Related questions

Question

How do I add an img with html and css and how do I bring the menu logo on the left on the "menu" text

CODE:

----------------------

CSS

nav {

width: 100%;

margin: 0 auto;

background: rgb(255, 255, 255);

padding: 15px 0;

box-shadow: 0px 5px 0px #000000;

}

nav ul {

list-style: none;

text-align: center;

}

nav ul li {

display: inline-block;

}

nav ul li a {

display: block;

padding: 15px;

text-decoration: none;

color: rgb(0, 0, 0);

font-weight: 800;

text-transform: uppercase;

margin: 0 10px;

}

nav ul li a,

nav ul li a:after,

nav ul li a:before {

transition: all .5s;

}

nav ul li a:hover {

color: rgb(255, 0, 0);

}

/* stroke */

nav.stroke ul li a,

nav.fill ul li a {

position: relative;

}

nav.stroke ul li a:after,

nav.fill ul li a:after {

position: absolute;

bottom: 0;

left: 0;

right: 0;

margin: auto;

width: 0%;

content: '.';

color: transparent;

background: rgb(255, 0, 0);

height: 1px;

}

nav.stroke ul li a:hover:after {

width: 100%;

}

nav.fill ul li a {

transition: all 2s;

}

nav.fill ul li a:after {

text-align: left;

content: '.';

margin: 0;

opacity: 0;

}

nav.fill ul li a:hover {

color: #fff;

z-index: 1;

}

nav.fill ul li a:hover:after {

z-index: -10;

animation: fill 1s forwards;

-webkit-animation: fill 1s forwards;

-moz-animation: fill 1s forwards;

opacity: 1;

}

/* nav icon */

nav img {

float: none;

max-width: 50px;

}

-----------------------

HTML

<body>

<ul>

<li><a href="#">STORE HOURS</a></li>

<li><a href="#">ABOUT US</a></li>

<li><a href="#">TAKEOUT</a></li>

<li><a class="fas fa-cog mx-1" href="#">ORDER ONLINE</a></li>

</ul>

</nav>

</body>

$The image displays a simple website navigation header. ### Website Menu Navigation - **MENU** (styled in red and underlined) - This likely indicates the main section or page related to the offerings of the business. - **STORE HOURS** - A section where visitors can find information about the operating hours. - **ABOUT US** - This section probably contains details about the organization or business, such as its history, mission, or team. - **TAKEOUT** - A specific section dedicated to takeout options. - **ORDER ONLINE** - Likely a portal for placing online orders, possibly for delivery or pickup. The page title in the web browser is "D:\Website\index.html," indicating the file path of the webpage on a local drive. There is a handwritten "Img" on the left side which may serve as a placeholder for an image or logo.$

Transcribed Image Text:The image displays a simple website navigation header. ### Website Menu Navigation - **MENU** (styled in red and underlined) - This likely indicates the main section or page related to the offerings of the business. - **STORE HOURS** - A section where visitors can find information about the operating hours. - **ABOUT US** - This section probably contains details about the organization or business, such as its history, mission, or team. - **TAKEOUT** - A specific section dedicated to takeout options. - **ORDER ONLINE** - Likely a portal for placing online orders, possibly for delivery or pickup. The page title in the web browser is "D:\Website\index.html," indicating the file path of the webpage on a local drive. There is a handwritten "Img" on the left side which may serve as a placeholder for an image or logo.

Expert Solution

Step by step

Solved in 3 steps with 1 images

SEE SOLUTION Check out a sample Q&A here

Knowledge Booster

Learn more about

Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-science and related others by exploring similar questions and additional content below.

Similar questions