I am new to the front-end designing world and for my webpage I want to import an SVG file to display my company logo. I used Figma in order to export my design as an SVG file, however it doesn't appear to be showing up on my live server.
I used Codepen to display my SVG, and Codepen does display my SVG. But whenever I start up the Live Server, all I see is my alternative logo text and a logo pictogram. I tried renaming my SVG file to make sure the src location is right, but nothing seems to work.
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#600;626&display=swap');
body {
display:block;
margin:8px;
}
li, a {
font-family: "Open Sans", sans-serif;
font-size:14px;
text-decoration:none;
font-weight:600px;
color:black;
}
header {
display:flex;
justify-content:space-between;
align-items:center;
padding:10px 10%;
}
.Nav_links {
list-style: none;
}
.Nav_links li {
display: inline-block;
padding: 0px 20px;
}
.Nav_links li, a:hover {
transition: 400ms;
color:grey;
}
#Login_nav {
display:flex;
align-items:center;
gap:1rem;
}
.switchIconRotate {
transform-origin: center;
transition: 0.2s;
}
.fa-angle-down {
color:#6161F2
}
.iconUp .fa-solid {
transform-origin: center;
transform: rotate(180deg);
}
#Demobutton {
cursor:pointer;
background-color: #4EC843;
border-radius:34px;
border:none;
color: white;
width:130px;
height:35px;
font-family:"Open Sans", sans-serif;
font-weight:600px;
font-size:14px;
}
#Demobutton:hover {
background-color: #20D62C;
transition:800ms;
}
#Navbarline {
width:80%;
border-width:1.5px;
opacity:15%;
}
<body>
<header>
<img class="logo" src="/logo.svg" alt="logo">
<nav>
<ul class="Nav_links">
<li><a class="switch" href="#">Features <i class="fa-solid fa-angle-down switchIconRotate"></i></a></li>
<li>Pricing</li>
<li>Contact Us</li>
</ul>
</nav>
<div id="Login_nav">
Login
<button id="Demobutton">Get demo</button>
</div>
</header>
<hr id="Navbarline"></hr>
<script src="/script.js"></script>
</body>
Related
For my Webpage I am trying to create a half moon shaped background. I am new to coding in general so my approach is probably all wrong, but I thought I could accomplish it with just editing my border radius. Do I have to do something majorly different to accomplish this? To be clear the background must be shaped into a half moon, so the exact opposite of what I am displaying with my code.
My code is formulated here:
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#600;626&display=swap');
/* */
body {
display:block;
margin:0px;
}
header {
display:flex;
justify-content:space-between;
align-items:center;
padding:10px 10%;
height:50px;
}
li, a {
font-family: "Open Sans", sans-serif;
font-size:14px;
text-decoration:none;
font-weight:600px;
color:black;
}
.Nav_links {
list-style: none;
height:0px;
}
.Nav_links li {
display: inline-block;
padding: 0px 20px;
}
.Nav_links li, a:hover {
transition: 400ms;
color:grey;
}
#Login_nav {
display:block;
align-items:center;
height:15px;
}
.switchIconRotate {
transform-origin: center;
transition: 0.2s;
}
.fa-angle-down {
color:#6161F2
}
.iconUp .fa-solid {
transform-origin: center;
transform: rotate(180deg);
}
#Demobutton {
cursor:pointer;
background-color: #4EC843;
border-radius:34px;
border:none;
color: white;
width:130px;
height:35px;
font-family:"Open Sans", sans-serif;
font-weight:600px;
font-size:14px;
}
#Demobutton:hover {
background-color: #20D62C;
transition:800ms;
}
#Navbarline {
display:block;
width:80%;
opacity:15%;
height: 1px;
border: none;
border-top: 2px solid #ccc;
}
section:before {
content:'';
position:absolute;
height:100%;
width:75%;
background: linear-gradient(45deg, #1565FF, #9FC0ff);
border-top-right-radius: 510px;
border-bottom-right-radius: 510px;
margin-left:auto;
z-index:-1;
}
<body>
<section id="startingcolor">
<header>
<nav>
<ul class="Nav_links">
<li><a class="switch" href="#">Features <i class="fa-solid fa-angle-down switchIconRotate"></i></a></li>
<li>Pricing</li>
<li>Contact Us</li>
</ul>
</nav>
<div id="Login_nav">
Login
<button id="Demobutton">Get demo</button>
</div>
</header>
<hr id="Navbarline"></hr>
</section>
<script src="/script.js"></script>
A picture of how it should look:
For my website I am designing a navigation bar and the goal is to position each element at the same height. This is the code I have so far:
body {
display:block;
margin:8px;
}
li, a {
font-family: "Open Sans", sans-serif;
font-size:14px;
text-decoration:none;
font-weight:600px;
color:black;
}
header {
display:flex;
justify-content:space-between;
align-items:center;
padding:10px 10%;
}
.Nav_links {
list-style: none;
}
.Nav_links li {
display: inline-block;
padding: 0px 20px;
}
.Nav_links li, a:hover {
transition: 400ms;
color:grey;
}
#Login_nav {
display:flex;
justify-content: space-around;
}
<header>
<img class="logo" src="images/logo_image.svg" alt="logo">
<nav>
<ul class="Nav_links">
<li><a href="#">Features <i class="fa-solid fa-angle-down"></i></a</li>
<li>Pricing</li>
<li>Contact Us</li>
</ul>
</nav>
<div id="Login_nav">
Login
<button id="Demobutton">Get demo</button>
</div>
</header>
I assume I did something wrong with the styling of the elements in CSS, because whenever I remove the CSS formatting of my id "#Login_nav" the login and get demo button do stand next to each other in the correct fashion, but still located too closely to each other.
Add a { gap: 1rem } and { align-items: center } on Login_nav, and I think you will get what you want, like so:
body {
display:block;
margin:8px;
}
li, a {
font-family: "Open Sans", sans-serif;
font-size:14px;
text-decoration:none;
font-weight:600px;
color:black;
}
header {
display:flex;
justify-content:space-between;
align-items:center;
padding:10px 10%;
}
.Nav_links {
list-style: none;
}
.Nav_links li {
display: inline-block;
padding: 0px 20px;
}
.Nav_links li, a:hover {
transition: 400ms;
color:grey;
}
#Login_nav {
display:flex;
align-items:center;
gap:1rem;
}
<header>
<img class="logo" src="images/logo_image.svg" alt="logo">
<nav>
<ul class="Nav_links">
<li><a href="#">Features <i class="fa-solid fa-angle-down"></i></a</li>
<li>Pricing</li>
<li>Contact Us</li>
</ul>
</nav>
<div id="Login_nav">
Login
<button id="Demobutton">Get demo</button>
</div>
</header>
my problem
I just want help on how to make the footer and 'Google in different languages' fixed when I am hovering over the buttons.
I am trying to build it on my own (without referring to google homepage code in chrome dev tools), so I am unaware of what they did so as to fix the position of those two elements.
Here's my code:
<!DOCtype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../css_stylesheets/stylesheet3.css"/>
<title>Google</title>
</head>
<body>
<div>
<header class="start">
<ul>
<li>Gmail</li>
<li>Images</li>
<li class="button">Sign in</li>
</ul>
</header>
<h1>
<img src="../Images/googlelogo.png" alt="Google logo"/>
<span>India</span>
</h1>
<form>
<input type="text"/><br>
<input type="submit" value="Google Search" id="text" name="search"/>
<input type="submit" value="I'm Feeling Lucky" name="search2"/>
</form>
<p>
Google.co.in offered in: HindiBanglaMalayalamMarathi
</p>
<footer>
<nav class="left">
<ul>
<li>Advertising</li>
<li>Business</li>
<li>About</li>
</ul>
</nav>
<nav class="right">
<ul>
<li>Privacy</li>
<li>Terms</li>
<li>Settings</li>
<li>UseGoogle.com</li>
</ul>
</nav>
</footer>
</div>
</body>
</html>
My CSS stylesheet:
*
{
padding:0px;
margin: 0px;
}
body
{
font-family:Arial,sans-serif;
}
div:first-child
{
font-size:25px;
margin:auto;
text-align:center;
padding-top:0px;
}
div header ul
{
margin-right:0px;
text-align:right;
font-size: 17px;
}
body div header.start
{
padding-top:0px;
}
h1
{
display:inline-block;
font-size:20px;
}
h1 span
{
position:relative;
right: 63px;
bottom: 5px;
color:rgb(51,187,232);
font-size:small;
font-family: "Arial", sans-serif;
}
li.button a
{
display:inline-block;
outline:none;
background-color:rgb(10,125,247);
padding:9px;
border:solid 1px;
border-radius: 4px;
font-weight: bold;
color:#F5F5F5;
}
li.button a:hover
{
text-decoration:none;
outline:grey 3px;
box-shadow: inset 0 0 0px 1px #27496d;
}
li.button a:active
{
background-color:rgb(11,95,191);
border:inset 1px #C7C7C7;
}
a
{
text-decoration: none;
word-spacing:5px;
font-size: 15px;
color:grey;
}
a:hover
{
text-decoration:underline;
}
a::after
{
content: " ";
text-decoration: none;
}
input[type="text"]
{
margin:auto;
max-width:500px;
width:40%;
padding:10px;
}
input[type="text"]:visited
{
outline:blue;
}
input[type="submit"]
{
color:#727578;
border:solid 0px;
background-color:#E3E6E8;
font-weight:bold;
padding:10px;
margin: 30px 5px;
margin-bottom:0px;
}
input[type="submit"]:hover
{
border:ridge 2px;
color:black;
background-color:#f0f0f0;
}
input[type="submit"]:active
{
outline:blue;
}
p
{
margin:0px;
padding:0px;
font-size:14px;
position:relative;
top:15px;
}
p a::after
{
content: " ";
text-decoration: none;
}
p a:link
{
color: blue;
}
ul li
{
list-style-type: none;
display:inline;
word-spacing: 10px;
}
nav.left ul li
{
padding-top:2px;
position:relative;
right:590px;
top:50px;
}
nav.right ul li
{
position:relative;
left:500px;
top:0px;
}
footer nav.right ul
{
display:block;
background-color:#e3e3e3;
padding-top:20px;
margin-bottom:0px;
}
Let me tell you that I am very new to CSS3 elements. But I am pretty much familiar with most of the CSS ones.
I repeat, I don't need a complete debugging on this (unless required that is). Please help me on that issue (the text in bold at the beginning of this topic).
Your problem is input[type="submit"]:hover changing border-width from 0px to 2px, so total height and width of buttons increasing and moving below content for 4px.
Your solution is to change
input[type="submit"] {
...
border: solid 0px;
...
}
to
input[type="submit"] {
...
border: transparent solid 2px;
...
}
I've been working on a site that I've been using ems and % in as I want to make it responsive. It's my first time attempting this.
I had the same site working using px.
I'm having this issue where content in the header and footer is not re-sizing properly. The content moves down past their containers or overlaps other content.
I.e. say in my footer i have the parent content set to 100% width and then the children divs set to various percentages of it.
The children then move down out of their containers and even the footer itself when I re-size.
Here's My JsFiddle
In my code here I've just put the footer code as it will just look messy if I put it all
<footer class="site-footer">
<div class="leftfoot">
<div class="footercontent">
<div class="logocopyright">
Tali.Zorah 2015 ©
</div>
</div>
</div>
<div class="rightfoot">
<div class="legal">
<ul>
<li>CONTACT US</li>
<li>ABOUT US</li>
<li>LEGAL NOTICE</li>
<li>PRIVACY POLICY</li>
</ul>
</div>
<div class="social">
<ul class="socicons">
<li>
<a class="facebook" href="https://www.facebook.com"> <img src="http://placehold.it/350x150"></a>
</li>
<li>
<a class="twitter" href="https://www.twitter.com"><img src="http://placehold.it/350x150"></a>
</li>
<li>
<a class="instagram" href="https://www.instagram.com"><img src="http://placehold.it/350x150"></a>
</li>
</ul>
</div>
</div>
</footer>
And the footer CSS:
.footercontent{
position:absolute;
min-width:100%;
max-width:100%;
}
.logofooter{
float:left;
margin-left:2%;
min-width: 10%;
max-width: 10%;
min-height:100%;
}
.mysitefooter-logo {
min-height: 100%;
min-width:10%;
max-width:100%;
margin-top: -1%;
margin-right:1%;
}
.logocopyright{
float:left;
margin-top:5%;
margin-left:2%;
min-width:100%;
padding-top:1%;
}
.leftfooter{
min-width:10%;
max-width:15%;
float:left;
}
.rightfooter{
min-width:85%;
max-width:90%;
float:right;
}
.logocopyright a {
font-family: 'Arial Black', 'Arial Bold', Gadget, sans-serif;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size:.6em;
}
.logocopyright a:hover{
color: #FFF;
-webkit-border-radius: 200px;
-moz-border-radius: 200px;
border-radius: 200px;
background: #1874CD;
}
.legal{
background-color:#009;
min-width:70%;
max-width:80%;
float:left;
}
.legal a:hover {
color: #FFF;
-webkit-border-radius: 200px;
-moz-border-radius: 200px;
border-radius: 200px;
background: #1874CD;
}
.legal ul li {
display:inline-block;
font-family: 'Arial Black', 'Arial Bold', Gadget, sans-serif;
font-size:.8em;
margin-left:8%;
min-width:10%;
max-width:100%;
}
.legal ul > :first-child {
margin-left:5%;
}
.legal a {
font-size:1em;
color:#FFF;
}
.social{
min-width:15%;
max-width:20%;
float:right;
margin-top: -4%;
color:#000000;
}
.social li {
display:inline-block;
}
.socicons{
min-width:80%;
max-width:100%;
}
.socicons li{
display:inline;
}
.facebook{
min-width:8%;
max-width:10%;
}
.facebook img
{
min-width:8%;
max-width:20%;
}
.twitter{
min-width:8%;
max-width:10%;
}
.twitter img
{
min-width:8%;
max-width:20%;
}
.instagram{
min-width:8%;
max-width:10%;
}
.instagram img
{
min-width:8%;
max-width:20%;
}
If you want a responsive site absolute positioning is not a good idea. Just use a width of 100% and try using viewport(vw) width instead of ems.
maybe I fixed a little. I updated:
'id' into footer tag.
little jscript.
here's my js code:
var footer = document.getElementById("guestAttempt");
footer.setAttribute("float","left");
footer.setAttribute("margin-left","3em");
footer.setAttribute("margin-bottom","0em");
https://jsfiddle.net/unt5zbL8/6/embedded/result/
I'm working on a footer that I'm trying to align items in as shown in the image(actually the logo image and text under it should be a little off the left side not stuck to it).
I'm pretty close but can't get it exactly how I want it. Whenever I try to make the footer smaller as it's a bit too big at the moment stuff leaks out of it. What am I doing wrong?
Also I can't seem to change the text under the footer logo image to be the same as the links. Not sure why that is?
My Fiddle
<div class="row-2">
<div class="logofooter">
<a class="logofooter" href="index.html"> <img src="http://lorempixel.com/output/abstract-q-c-100-100-1.jpg"></a>
<div class="logocopyright">
Copyright info
</div>
</div>
<div class="legal">
<ul class="legal">
<li>Legal Policy</li>
<li>Contact</li>
<li>Privacy</li>
<li>Disclaimer</li>
</ul>
</div>
<div class="social">
<ul class="smm">
<li><a class="facebook" href="https://www.facebook.com"> <img src="http://lorempixel.com/output/abstract-q-c-68-68-5.jpg"></a></li>
<li><a class="twitter" href="https://www.twitter.com"><img src="http://lorempixel.com/output/abstract-q-c-68-68-5.jpg"> </a></li>
<li><a class="instagram" href="https://www.instagram.com"><img src="http://lorempixel.com/output/abstract-q-c-68-68-5.jpg"> </a></li>
</ul>
</div>
</div>
</footer>
</body>
Does this work better for you?
http://codepen.io/anon/pen/vNXKMa?editors=110
It's using flexbox for the main 3 elements (logo, menu, social menu).
.row-2{
display:flex;
justify-content: space-between;
}
The children elements will be spaced evenly. You can also try space-around.
When you reduce the screen size, things have to stack up at some point.
You could also consider using bootstrap's grid for this kind of layout.
please try This one:
.site-footer, .page-wrap:after {
height: 250px;
}
.site-footer {
background: #919191;
}
.logofooter{
float:left;
padding-top:10px;
}
.logocopyright a {
font-size: 10px;
color: #fff;
text-decoration: none;
text-transform: uppercase;
}
.row-2 ul li a {
font-family: 'Arial Black', 'Arial Bold', Gadget, sans-serif;
text-decoration:none;
color:#fff ;
padding: 5px 15px;
font-size: 16px;
}
.row-2 p {
color:#fff;
font-family: 'Arial Black', 'Arial Bold', Gadget, sans-serif;
font-size: 16px;
}
.row-2 a {
font-size: 22px;
}
.row-2{
padding-top: 100px;
text-align:center;
margin-left:auto;
margin-right:auto;
}
.legal{
float:left;
margin-right:auto;
margin-left:-60px;
}
.legal a:hover {
color: #FFF;
-webkit-border-radius: 200px;
-moz-border-radius: 200px;
border-radius: 200px;
background: #1874CD;
}
.legal li {
display:inline-block;
text-align: center;
margin-left:20px;
}
.social{
float:right;
margin-top:-50px;
margin-left:auto;
}
.social li, h3{
font-size:10px;
display:inline-block;
text-align: center;
color:#fff;
}
.smm li{
margin-right:20px;
}
.facebook img
{
width:20px;
height:20px;
border-radius: 50%;
margin-left:90px;
}
.twitter img
{
width:20px;
height:20px;
border-radius: 50%;
margin-left:-30px;
}
.instagram img
{
margin-left:-40px;
width:20px;
height:20px;
border-radius: 50%;
}
See the Demo Page