I'm trying to clone the Google front for educational purposes in my career as a front-end developer. In this case I am working with Google's own sprite. Here I put an image of the sprite with which I am working.
This is the HTML that I carry so far. As you can see, I am still creating the header.
<!DOCTYPE html>
<html lang="es" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Google. Búsqueda avanzada · Programas de publicidadTodo acerca de GoogleGoogle.com in English. © 2020 - Privacidad - Condiciones." />
<meta name="author" content="Diesan Romero" />
<link rel="stylesheet" href="./assets/css/main.css" />
<title>Google</title>
</head>
<body>
<header>
<nav>
<ul class="nav-right__section">
<li>
Gmail
</li>
<li>
Imágenes
</li>
<li>
<a class="menu-icon" title="Aplicaciones de Google" role="button" href="#"></a>
</li>
<li>
Iniciar Sesión
</li>
</ul>
</nav>
</header>
</body>
</html>
On the other hand, this is the sass file that I have so far:
header {
width: 100%;
height: 60px;
nav {
display: flex;
justify-content: flex-end;
.nav-right__section {
width: 250px;
height: auto;
display: flex;
list-style: none;
justify-content: center;
align-items: center;
a {
margin-right: 10px;
color: $black-color;
}
a.menu-icon {
background-image: url('../images/sprite.png');
background-size: 528px 68px;
background-position: -132px -38px;
color: #000;
opacity: .55;
}
}
}
}
The reason I use sass is because periodically I will take the project to another level, maybe I will pass it to React, etc.
The problem is that I don't know if I'm positioning the sprite well so that it shows me the icon I want. Here is an image of the icon that should come out:
However, this is what I am getting:
Yeah, I know, very sad 😢
Can someone please help me?
I think you just need to set the element as a display:inline-block and give it a size
From what i can see, i think that the element is 0x0 px right now.
Try adding this to the a.menu-icon class
height: 29px;
width: 28px;
display: inline-block;
/* compiled style */
header {
width: 100%;
height: 60px;
}
header nav {
display: flex;
justify-content: flex-end;
}
header nav .nav-right__section {
width: 250px;
height: auto;
display: flex;
list-style: none;
justify-content: center;
align-items: center;
}
header nav .nav-right__section a {
margin-right: 10px;
color: #222;
}
header nav .nav-right__section a.menu-icon {
background-image: url("https://i.stack.imgur.com/YTlAV.png");
background-size: 528px 68px;
background-position: -132px -38px;
color: #000;
opacity: 0.55;
display: inline-block;
width: 30px;
height: 30px;
}
<header>
<nav>
<ul class="nav-right__section">
<li>
Gmail
</li>
<li>
Imágenes
</li>
<li>
<a class="menu-icon" title="Aplicaciones de Google" role="button" href="#"></a>
</li>
<li>
Iniciar Sesión
</li>
</ul>
</nav>
Related
I am beginner to Front end technology. I AM not sure which part of my code making my logo image showing in circle. Kindly point me what css property making it occuring so. I am new to css and coudnt figure out which property is responsible for this. I have already tested with align items and padding values but nothing is working to change the image oval shape. I want my image to be in square shape or in another shape. If anyone have any idea please point in direction of how you guys resolve this kind of solution.
HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<header>
<div class="logo">
<img src="logo.png" alt="">
</div>
<nav class="nav" id="nav-menu">
<ion-icon name="close-outline" class="header_close"> </ion-icon>
<ul class="nav_list">
<li class="nav_item">Home</li>
<li class="nav_item">About Us</li>
<li class="nav_item">Training</li>
<li class="nav_item">Train with us</li>
<li class="nav_item">Contact Us</li>
</ul>
</nav>
<ion-icon name="menu-outline" class="header_toggle"></ion-icon>
</header>
<script type="module" src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>
CSS file:
#import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,400;0,600;1,500;1,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: 'Poppins', sans-serif;
}
a {
text-decoration: none;
}
ul{
list-style: none;
}
header{
display: flex;
background-color: #222831;
justify-content: space-between;
padding: 1rem 0;
align-items: center;
}
.logo{
display: flexbox;
align-items: center;
}
.logo img{
width: 200px;
border-radius: 100%;
margin-right: 10px;
}
.header_logo{
color: #eeee;
}
.nav_list {
display: flex;
align-items: center;
}
.nav_item {
margin: 0 8px;
}
.nav_link {
padding: 10px;
color: #eeee;
font-size: 0.9rem;
font-weight: 500;
border-radius: 5px;
}
it's because of;
border-radius: 100%;
When you make the border-radius 100% thinner, it turns into a circle.
Remove border-radius: 100%; from your CSS.
.logo img{
width: 200px;
margin-right: 10px;
}
.logo img{
width: 200px;
border-radius: 100%;
margin-right: 10px;
}
You have a problem with this set of code - the border-radius part. In the future, if you'd like to see which class/line causes the error, you can inspect the element and under styles you'll get all the classes that are attached to the element itself. In your browser, you can check/uncheck classes and see which one does the problem.
I am using flexbox and the footer is outside of flexbox contents.
my issue is the footer is in the middle of flex items and is not setting on the bottom. I don't know what I did wrong. everything I've tried either hasn't worked so far.
any help will be apperiaciate.thanks
here is my full code : https://codepen.io/ROY1319/project/editor/ANyGyr
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
background-color: #9bf6ff;
font-family: 'Oswald', sans-serif;
width: 100%;
}
#headerExperience {
line-height: 200px;
font-family: "proxima nova bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: khaki;
background-color: steelblue;
background-image: url("images/Experience\ background\ imagee.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
text-align: center;
margin-bottom: 25px;
}
.container {
display: flex;
height: 100vh;
flex-direction: column;
gap: 25px;
align-items: center;
margin-bottom: 25px;
}
.century,
.LNA {
border: 2px solid black;
font-size: 16px;
background-color: #E5ECE9;
display: block;
}
.century,
.LNA {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 1 0 15OPX
}
.headers,
.tasks {
display: block;
align-content: space-around;
}
/* nav and ul */
ul {
overflow: hidden;
display: inline-block;
/* how do I set the vertical spacing between the list items? */
}
li {
margin: 10px 0;
letter-spacing: 2px;
}
footer {
background-color: orangered;
padding: 0 1rem;
bottom: 0;
width: 100%;
height: 2.5rem;
}
footer .foot {
display: flex;
justify-content: space-between;
align-items: center;
color: red;
padding: 5em 0;
}
footer ul {
list-style: none;
margin: 0;
}
footer li {
display: inline-block;
padding: 0.75rem 1.25rem;
}
<!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="experience.css" />
<title>Experience</title>
</head>
<body>
<!--Header-->
<div id="headerExperience">
<h1>Experience</h1>
</div>
<!--container-->
<div class="container">
<!-- Century-->
<div class="century">
<div class="media">
<img src="imag logo.png" alt="CenturyImage" />
<figcaption>Century Logo</figcaption>
</div>
<div class="headers">
<h2>ddddd</h2>
<h3>IT student Worker</h3>
<h4>Whie MN,2018</h4>
</div>
<div class="tasks">
<h5>TASKS</h5>
<ul>
<li>
1.Instructed users over the phone by describing what to look for and steps to take.
</li>
<li>
2.Adapted to change and learn new version of Microsoft quickly.
</li>
<li>
3.Assisted department staff with assigned tasks including technology equipment prep, filling, shredding.
</li>
<li>4.Created appropriate technical documents.</li>
</ul>
</div>
</div>
<!-- lNA-->
<div class="LNA">
<div class="media">
<img src="images/logo.jpg" alt="logo" />
<figcaption>LNA Logo</figcaption>
</div>
<div class="headers">
<h2>LNA</h2>
<h3>Digital Support Specialist</h3>
<h4>Minneapolis MN,2021-Present</h4>
</div>
<div class="tasks">
<h5>Tasks</h5>
<ul>
<li>1.Update and manage a simple program website.</li>
<li>2.Help participants access free and safe internet service.</li>
<li>
3.Encrypting hard drives of participants' laptops using bit Locker built-in window OS.
</li>
<li>
4.Distribute free laptops and tech accessories to participants.
</li>
<li>5.Lead small student groups practicing computer skills.</li>
</ul>
</div>
</div>
</div>
<footer> // footer started here
<div class="foot">
<div class="copyright">© A Team</div>
<nav>
<ul>
<li>Home</li>
<li>Contact</li>
<li>Experience</li>
<li>Achievemants</li>
<li>About</li>
</ul>
</nav>
</div>
</footer>
</body>
</html>
I want to align the logo on the left side and the nav links on the right side horizontally.
Mainly, I used display: flex on .nav-wrapper and used align-items: center. However, there still seems to be a bit of misalignment between the logo and the nav link elements which I cannot seem to figure out how to properly correct. Would really appreciate some help on this!
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Segoe UI";
}
li {
list-style: none;
}
a {
text-decoration: none;
}
.nav-wrapper {
display: flex;
justify-content: space-between;
padding-left: 30px;
align-items: center;
background-color: rgba(255, 255, 255, 0.5);
border: 1px solid blue;
}
.right-menu {
display: flex;
padding-right: 12px;
}
.right-menu .right-menu-items {
display: flex;
}
.right-menu .right-menu-items li a {
padding: 0 12px;
}
.logo {
width: 80px;
height: 80px;
}
.main-wrapper {
background-image: url("/assets/lucrezia-carnelos-gvc7MK4gnDk-unsplash.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: absolute;
height: 100vh;
width: 100%;
top: 0;
z-index: -1;
}
.main-wrapper .welcome-note {
position: relative;
top: 30%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>italki: Learn a language online</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header class="nav-wrapper">
<a href="#">
<img src="./assets/white_logo.svg" alt="italki logo" class="logo" />
</a>
<nav class="right-menu">
<ul class="right-menu-items">
<li>Log in</li>
<li>Sign up</li>
<li>Become a Teacher</li>
</ul>
</nav>
</header>
<div class="main-wrapper">
<div class="welcome-note">
<h1>Become fluent in <br />any language</h1>
<p
>Choose from over 10,000 teachers for 1-on-1 lessons based on your
goals and interests</p
>
<input type="text" placeholder="Choose a language" />
</div>
</div>
</body>
</html>
I've created demo, Here Link: https://jsfiddle.net/590nartL/
Infact it really horizontally center, red border prove that.
Of couse, maybe you think font in red border box not vertical middle, you can add style as below:
.right-menu {
margin-top: -2px;
}
Any negative margin value as you want.
It happens because there is an unnecessary space between the <img> tag and the parent <a> tag.
The <img> is an inline element so this happened.
To remove the space, make <img> tag as block element as follows or implement vertical-align.
.logo {
display: block;
width: 80px;
height: 80px;
}
or make parent <a> as flex style
a {
display: flex;
flex-direction: column;
}
I'm trying to have a header banner in my html assignment however I cannot get the header image to appear.. or any background-image.
Here is my code
All of the files are in a folder named assign1_1, images are in a folder named images, css is in a folder named styles.
Everything else in the css works however the image doesn't. Help would be appreciated!
* {
padding: 0;
margin: 0;
font-family: Arial
}
#footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
text-align: center;
}
header{
text-align: left;
padding: 20px;
margin-top: 35px;
background: url("images/bg.jpg") no-repeat;
height: 100%;
width: 97%;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: black;
position: fixed;
top: 0;
width: 100%;
display: flex;
justify-content: space-around;
}
li {
float: left;
}
li a {
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
color:white;
}
section{
padding: 20px;
}
body{
background-color: lightblue;
}
li a:hover:not(.active) {
border-bottom: 5px solid lightgreen;
}
.active {
border-bottom: 5px solid green;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description" content="Index page for assignment" />
<meta name="keywords" content="eCommerce, web" />
<meta name="author" content="102102704" />
<link rel="stylesheet" type="text/css" href="styles/style.css" >
<title>Introduction to eCommerce on the Web</title>
</head>
<body>
<header>
<h1>eCommerce on the Web</h1>
</header>
<nav>
<ul>
<li><a class="active" href="#index"> Home </a></li>
<li> What is eCommerce? </li>
<li> eCommerce Quiz </li>
<li> Enhancements made </li>
</ul>
</nav>
<section>
<br />
<h2>Do you want to learn about eCommerce?</h2>
<p> You have come to the right spot!</p>
Click Here to learn more
</section>
<div id="footer">
<footer>
Contact me
</footer>
</div>
</body>
</html>
Make sure the current web page is in the same directory with "images" and "styles". Does your directory tree look like this?
- assign1_1
- - file.html
- - styles
- - - style.css
- - images
- - - bg.jpg
Or is assign1_1 in the same folder as the others? You might want to change images/bg.jpg to ../images/bg.jpg if it is. I tested your code using a stock blue sky image from Google Images, it seems to be working fine. You were missing a semicolon in the universal selector block with "Arial".
* {
padding: 0;
margin: 0;
font-family: "Arial";
}
#footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
text-align: center;
}
header {
text-align: left;
padding: 20px;
margin-top: 35px;
background: url("https://image.freepik.com/free-photo/blue-sky-with-clouds_1232-936.jpg") no-repeat;
height: 100%;
width: 97%;
display:flex;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: black;
position: fixed;
top: 0;
width: 100%;
display: flex;
justify-content: space-around;
}
li {
float: left;
}
li a {
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
color:white;
}
section{
padding: 20px;
}
body{
background-color: lightblue;
}
li a:hover:not(.active) {
border-bottom: 5px solid lightgreen;
}
.active {
border-bottom: 5px solid green;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description" content="Index page for assignment" />
<meta name="keywords" content="eCommerce, web" />
<meta name="author" content="102102704" />
<link rel="stylesheet" type="text/css" href="styles/style.css" >
<title>Introduction to eCommerce on the Web</title>
</head>
<body>
<header>
<h1>eCommerce on the Web</h1>
</header>
<nav>
<ul>
<li><a class="active" href="#index"> Home </a></li>
<li> What is eCommerce? </li>
<li> eCommerce Quiz </li>
<li> Enhancements made </li>
</ul>
</nav>
<section>
<br />
<h2>Do you want to learn about eCommerce?</h2>
<p> You have come to the right spot!</p>
Click Here to learn more
</section>
<div id="footer">
<footer>
Contact me
</footer>
</div>
</body>
</html>
I found it odd you have your <footer> nested inside of a <div id="footer">, instead of being alongside <header> and <nav>. You could get rid of the nesting and just do footer instead of #footer in the CSS.
First try to edit in your elements
first edit your css like this
/*changes top 60px or its up to you */
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: black;
position: fixed;
top: 60px;
width: 100%;
display: flex;
justify-content: space-around;
}
Then Copy my HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description" content="Index page for assignment" />
<meta name="keywords" content="eCommerce, web" />
<meta name="author" content="102102704" />
<link rel="stylesheet" type="text/css" href="styles/style.css" >
<title>Introduction to eCommerce on the Web</title>
</head>
<body>
<!-- this is added to your code as sample -->
<div class="header">
<h1><Center>Header</Center></h1>
</div>
<nav>
<ul>
<li><a class="active" href="#index"> Home </a></li>
<li> What is eCommerce? </li>
<li> eCommerce Quiz </li>
<li> Enhancements made </li>
</ul>
</nav>
<section>
<br />
<h2>Do you want to learn about eCommerce?</h2>
<p> You have come to the right spot!</p>
Click Here to learn more
</section>
<div id="footer">
<footer>
Contact me
</footer>
</div>
</body>
</html>
That is only a sample if you want a background image you need to set background image inside header class. hope it helps you
I just started using bootstrap and am having a problem with my image shifting out of place when I resize my browser. The background image that is holding my image and text doesn't seem to be scaling either. when I maximise my browser everything is in place and perfect. As you can see in the first image that is where my problem is. The second image is how it looks maximised and how it should look with all screen sizes. Any help appreciated!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"
rel="stylesheet">
<link href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"
rel="stylesheet">
<link href="style.css" rel="stylesheet" type="text/css">
<link href="images/theater.ico" rel="shortcut icon" type="image/x-icon">
</head>
<body>
<div class="container">
<header>
<div id="rainbow"><img alt="rainbow gradient" src=
"images/rainbow.png"></div>
<div id="header">
<!--home-->
<p id="logo"><img alt="Bethan Rainforth a comedic dancer" src=
"images/logo.png" class="img-responsive"></p>
</div>
<div id="nav-bar">
<nav class="nav">
<ul class="list-inline">
<li>
Home
</li>
<li>
<a class="gray" href="work.html">Work</a>
</li>
<li>
<a class="gray" href="gallery.html">Gallery</a>
</li>
<li>
<a class="gray" href="hireme.html">Hire!</a>
</li>
</ul>
</nav>
</div>
</header>
<div class="row">
<div class="about-me row">
<div class="col-md-12">
<img alt="Bethan Rainforth" class="img-responsive" id="pic" src=
"images/pic.png">
<p class="about-text">I am a physical comedian, continuously
being inspired by comical characters and exaggerated
movement. I fuse elements of dance and theatre to create
performances that are somewhat over-the-top, and
outrageous. I use locking technique as a foundation build
and produce uproarious performances suitable for an
eclectic audience. I aim to leave audience members feeling
uplifted, swimming in their own tears of laughter,
momentarily forgetting any worries or woes.</p>
</div><!--End of col-md-12 about me-->
</div><!--End of about me row-->
</div><!--End of about me wrapper-->
/********************************
Body of page
*********************************/
html,
body {
background-image: url(images/background.png);
margin: 0 auto;
}
#container{
width: 960px;
margin: 0 auto;
}
/********************************
Header
*********************************/
#rainbow img{
margin-bottom: 15px;
}
#logo img {
width: 320px;
}
/********************************
Navigation
*********************************/
nav a {
font-family: Hobo Std;
padding: 50px;
}
ul {
list-style-type: none;
}
nav {
text-align: center;
margin-left: 20px;
}
a {
text-decoration: none;
}
nav li {
display: inline;
width: 150px;
}
.gray,
a:hover,
a:visited,
a:active {
color: #a5a5a5;
text-decoration: none;
}
#home {
background-image: url(images/pinkpaint.png);
background-repeat: no-repeat;
background-size: 100% 100%;
width: 30px;
margin: 0 auto;
color: #000;
}
ul.list-inline{
margin-top: 25px;
}
/********************************
About Me
*********************************/
img#pic {
width: 260px;
float: left;
margin-left: 54px;
margin-top: 74px;
}
.about-me {
background-image: url(images/border.png);
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center center;
width: 730px;
height: 490px;
display: block;
margin: 0 auto;
}
p.about-text{
color: #7ca5d2;
font-family: hobo std;
font-size: 1.2em;
line-height: 35px;
margin: 75px;
}
It seems this is adding 74px to the top of the image:
img#pic {
width: 260px;
float: left;
margin-left: 54px;
margin-top: 74px;
}
Try removing the margin-top code and see what happens. If needed for desktop, you can add a media query so that it is removed when resized. For example:
#media and (max-width:700px) {
img#pic {
margin-top: 0;
}
}
Let me know if that doesn't work.