I am building a simple webpage. The text is displaying correctly but the icon is not displaying. The icon is from ionicons framework.
I checked ionicons.min.css path and icon name in this css file
My html file:
<!--DOCHtml5-->
<html lang="en">
<head>
<meta charset="utf-8">
<link href="style.css" type="text/css" rel="stylesheet">
<title>webpage</title>
<link href="https://fonts.googleapis.com/css?family=Euphoria+Script" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montez" rel="stylesheet">
<link href="icons/ionicons.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class = "name">
Name
<ul class = "social-icons">
<li><i class="ion-arrow-right-a"></i></li>
</ul>
</div>
</body>
</html>
My css file:
*{
margin:0;
padding:0;
font-family: 'Euphoria Script', cursive;
font-size: 100px;
}
body{
height:100vh;
margin: 0;
padding: 0;
background-color: #ef6758;
}
.name{
position:absolute;
top:35%;
left:31%;
font-family: 'Montez', cursive;
color: #4be214;
}
.social-icons li{
list-style: none;
}
Icon should be visible
Go through it. it will work for you, because there is font-family files not found in your css
*{
margin:0;
padding:0;
font-family: 'Euphoria Script', cursive;
font-size: 100px;
}
body{
height:100vh;
margin: 0;
padding: 0;
background-color: #ef6758;
}
.name{
position:absolute;
top:35%;
left:31%;
font-family: 'Montez', cursive;
color: #4be214;
}
.social-icons li{
list-style: none;
}
<!--DOCHtml5-->
<html lang="en">
<head>
<meta charset="utf-8">
<link href="style.css" type="text/css" rel="stylesheet">
<title>webpage</title>
<link href="https://fonts.googleapis.com/css?family=Euphoria+Script" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montez" rel="stylesheet">
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class = "name">
Name
<ul class = "social-icons">
<li><i class="ion-arrow-right-a"></i></li>
</ul>
</div>
</body>
</html>
Related
I'm fairly new to CSS/HTML however I'm trying to take my Figma Design and write the code for it. I'd need the website to be responsive to different screen-sizes. I have the image to what I believe is the right place, however I can't seem to get my text into the right places, and I don't know how to change button size or color.
I've included my Figma Design and my code.
https://www.figma.com/file/QYUmBdCX7PJYi5V8XV63e3/Shield-Split-Designs?node-id=9%3A55&t=DaKGZA7LVNNQBZbE-1
HTML:
<docType html!>
<html>
<head>
<title>Arriving soon...</title>
<link rel=stylesheet href="Stylesheets/style.css">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#400;700&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="logo">
<img src="Transparent%20Logo.png">
</div>
<div id="logo-text">
<p1>Split Shield</p1>
</div>
<div id="slogan">
<p>The next generation of internet security is arriving soon...</p>
</div>
<div id="content-button">
<button>Check out our concept</button>
</div>
</body>
</html>
</docType>
CSS:
body {
background-color: #2F2F41;
}
#logo:before {
content: ' ';
display: inline-block;
vertical-align: middle;
height: 100%;
}
#logo img {
max-width: 31.2%;
vertical-align: middle;
display: inline-block;
margin-left: 8.6%;
}
#logo-text p1 {
font-family: 'Open Sans', sans-serif;
color: white;
font-weight: 700px;
font-size: 64px;
display: flex;
}
#slogan p {
font-family: 'Open Sans', sans-serif;
color: white;
font-weight: 400px;
font-size: 32px;
}
#button {
font-family: 'Open Sans', sans-serif;
color: white;
font-size: 24px;
text-align: center;
}
#button button {
background-color: #FFCC00;
}
There're many ways you can acheive your target, one of them is using grid, so in this case i'll show you how to go with grid-template, and how to make you're code equal to the figma design.
but you need to read more about the HTML5, and CSS so you can handle more in future,
at least i'll focus on some mistakes you have done,
first, HTML5 declaration is used in this way <!doctype HTML>, the exclamation mark at the first, and there's no closure tag for it, so you just declare the doc type at the first.
second, you need to target your parents / childs correctly at your css code.
anyway, here is an example to go through
body {
background-color: #2F2F41;
}
.grid-container {
display: grid;
grid-template: "a b" auto "a c" auto "a d" auto;
}
#logo {
grid-area: a;
display: flex;
position: relative;
justify-content: center;
align-items: center;
}
#logo-text {
grid-area: b;
}
#slogan {
grid-area: c;
}
#content-button {
grid-area: d;
}
#logo img {
max-width: 100%;
vertical-align: middle;
}
#logo-text p1 {
font-family: 'Open Sans', sans-serif;
color: white;
font-weight: 700px;
font-size: 64px;
display: flex;
}
#slogan p {
font-family: 'Open Sans', sans-serif;
color: white;
font-weight: 400px;
font-size: 32px;
}
#button {
font-family: 'Open Sans', sans-serif;
color: white;
font-size: 24px;
text-align: center;
}
#button {
background-color: #FFCC00;
width:80%;
display:flex;
border-radius:15px;
height:3rem;
justify-content:center;
align-items:center;
}
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#400;700&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="grid-container">
<div id="logo">
<img src="https://i.ibb.co/j5hXXVP/imgbin-macos-virtual-private-network-computer-icons-apple-png.png" alt="imgbin-macos-virtual-private-network-computer-icons-apple-png" border="0">
</div>
<div id="logo-text">
<p1>Split Shield</p1>
</div>
<div id="slogan">
<p>The next generation of internet security is arriving soon...</p>
</div>
<div id="content-button">
<div id="button">Check out our concept</div>
</div>
</div>
</body>
I developed a site for a project with a few videos etc. The web browser based version is fine but mobile is zoomed in and needs pinched and zoomed out to get it correct. Whats the method to get that correct on load? I'm guessing some #media query.
I have this in my head
<meta content='width=device-width, initial-scale=1, maximum-scale=1' <!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport' />
<title>ReBreak News</title>
<link rel='icon' type='image/png' href='/favicon.png'>
<link rel='stylesheet' href='/global.css'>
<link rel='stylesheet' href='/build/bundle.css'>
<link rel="stylesheet" href="/bootstrap.min.css"></script>
<link rel="stylesheet" href="/fontawesome/css/fontawesome.min.css"></script>
<script src="jquery.js"></script>
<script src="fontawesome.js"></script>
<script defer src='/build/bundle.js'></script>
<script src="bootstrap.js"></script>
</head>
and my global.css
:root {
--gradient: linear-gradient(90deg, #ff0000 0%, #ff0000 100%);
--light: #fff;
--grey: #f8f9fa;
}
html,
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
scroll-behavior: smooth;
}
.main-bgcolor {
background-image: var(--gradient);
}
.main-bgcolor2 {
background-color: #ffffff;
}
.light-color {
color: var(--light) !important;
}
.grey-bgcolor {
background: var(--grey);
}
.company_brand {
font-size: x-large;
font-family: cursive;
}
.section {
padding: 50px 0;
}
.section-body {
padding: 20px 0;
}
.h1{
color: blueviolet;
}
Thanks
I am slightly new to html and css and want to create my own portfolio. I have some problems with the classes though. Whenever I try to call them in css it doesn't seem to do what its supposed to do.
When I call it without using classes it works perfectly fine.
Hope somebody can help and find my mistake,
thanks in advance.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Xander Feliers - Portfolio</title>
<meta name="description" content="Portfolio - Xander Feliers">
<link rel="stylesheet" href="css/screen.css">
</head>
<body>
<div>
<nav>
<ul class="header_nav">
<li class="header_nav">Contact</li>
<li class="header_nav">Projects</li>
<li class="header_nav">About</li>
<li class="header_nav">Home</li>
</ul>
</nav>
</div>
</body>
</html>
CSS
body{
background-color: #f1f6fe;
}
.header_nav{
list-style-type: none;
margin: 0;
padding: 25px;
overflow: hidden;
background-color:#78aefa;
width: 250 px;
}
li.header_nav{
float: right;
padding-right: 20px;
}
a.header_nav {
font-family: arial;
display: block;
color:white;
text-align: center;
padding: 14 px 16 px;
text-decoration: none;
}
UPDATE
Changed css but still doesn't work.
This class won't work.
You pointed to the link with class header_nav. But you don't have it.
a.header_nav {
font-family: arial;
display: block;
color:white;
text-align: center;
padding: 14 px 16 px;
text-decoration: none;
}
It should be (link inside the class .header_nav)
.header_nav a {
font-family: arial;
display: block;
color:white;
text-align: center;
padding: 14 px 16 px;
text-decoration: none;
}
UPDATE:
I've included the snippet. Is it what you want?
body{
background-color: #f1f6fe;
}
.header_nav{
list-style-type: none;
margin: 0;
padding: 25px;
overflow: hidden;
background-color:#78aefa;
width: 250 px;
}
li.header_nav{
float: right;
padding-right: 20px;
}
.header_nav a {
font-family: arial;
display: block;
color:white;
text-align: center;
padding: 14 px 16 px;
text-decoration: none;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Xander Feliers - Portfolio</title>
<meta name="description" content="Portfolio - Xander Feliers">
<link rel="stylesheet" href="css/screen.css">
</head>
<body>
<div>
<nav>
<ul class="header_nav">
<li class="header_nav">Contact</li>
<li class="header_nav">Projects</li>
<li class="header_nav">About</li>
<li class="header_nav">Home</li>
</ul>
</nav>
</div>
</body>
</html>
UPDATE 2
Order in the CSS is really mater. If you want to enforce your style you can use !important after the style. (Although I saw the articles where it's considered as bad practice.)
.header_nav a {
font-family: arial;
display: block;
color:white!important;
text-align: center;
padding: 14 px 16 px;
text-decoration: none!important;
}
I'm not sure what you are expecting, but it appears your class declarations are a little backwards. It should be class then element so,
.header_nav li { your styles }
.header_nav a { your styles }
Make the following changes:
From
a.header_nav {
}
To:
.header_nav a {
}
and also you can make change to html for easiness
body{
background-color: #f1f6fe;
}
ul.header_nav_container {
float:right;
padding: 20px;
}
ul.header_nav_container li.header_nav {
list-style-type: none;
float: left;
padding: 0 20px
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Xander Feliers - Portfolio</title>
<meta name="description" content="Portfolio - Xander Feliers">
<link rel="stylesheet" href="css/screen.css">
</head>
<body>
<div>
<nav>
<ul class="header_nav_container">
<li class="header_nav">Contact</li>
<li class="header_nav">Projects</li>
<li class="header_nav">About</li>
<li class="header_nav">Home</li>
</ul>
</nav>
</div>
</body>
</html>
If class doesn't work you can specify ids and pass the styles similarly
I've looked through related questions/answers and haven't figured out why this is happening, but my "navbar" continues to extend all the way to the right of my web page. I tried to remove irrelevant code from this post. Any suggestions would be appreciated!
HTML
html, body, h1, h2 {
padding:0;
border:0;
margin:0;
line-height:1;
}
body {
padding: 20px 20px 20px 20px;
}
.navbar {
background-color:#ffcc66;
position:fixed;
top:0;
width:100%;
text-align:center;
overflow:hidden;
border-radius:25px;
border:4px solid black;
}
.navbar a {
text-decoration:none;
color:black;
padding:10px;
}
.navbar a:hover {
color:white;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="Paiting, Maintenance, Bloomington">
<link rel="stylesheet" type="text/css" href="style.css">
<title> Flying Fish Painting Company </title>
</head>
<body>
<div class="navbar">
Home
Services
Contact
Photo Gallery
Reviews
</div>
Just Add left: 0; and box-sizing: border-box;
The box-sizing property is used to tell the browser what the sizing properties (width and height) should include.
html, body, h1, h2 {
padding:0;
border:0;
margin:0;
line-height:1;
}
body {
padding: 20px;
}
.navbar {
background-color:#ffcc66;
position:fixed;
top:0;
width:100%;
text-align:center;
overflow:hidden;
border-radius:25px;
border:4px solid black;
left: 0;
box-sizing: border-box;
}
.navbar a {
text-decoration:none;
color:black;
padding:10px;
}
.navbar a:hover {
color:white;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="Paiting, Maintenance, Bloomington">
<link rel="stylesheet" type="text/css" href="style.css">
<title> Flying Fish Painting Company </title>
</head>
<body>
<div class="navbar">
Home
Services
Contact
Photo Gallery
Reviews
</div>
I tried almost everything to get rid of the top margin I used the normalized.css reset, universal selector reset, HTML and body reset margin to 0.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>index</title>
<link href='https://fonts.googleapis.com/css?family=Orbitron|Lato:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="normalize.css">
<!--[if IE]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<div class="content-area">
<div class="text-logo">
<h1>Peacon<span>TT</span></h1>
</div>
</div>
</header>
</body>
</html>
CSS:
html {
margin: 0;
padding: 0;
}
header {
width: 100%;
height: 70px;
background-color: #586f7c;
}
.content-area {
width: 1000px;
margin: 0 auto;
}
.text-logo {
font-family: "orbitron", Arial, Helvetica, sans-serif;
font-weight: 100;
color: #ffffff;
}
You can set the margin property of your h1 element to 0 to accomplish your goal:
h1 {
margin: 0;
}