I really wanted to use this font for links to other pages, but for some reason it will just not load. It seems as though there are some fonts that load and others that do not, both of which I have downloaded locally.
.navBarLinks {
text-decoration: none;
list-style: none;
vertical-align: middle;
text-align: center;
}
.aboutUs {
position: absolute;
width: 0;
height: 0;
top: 6vh;
left: 10%;
font-family: 'Open Sans';
font-size: 18rem;
color: #0e0e0e;
text-decoration: none;
text-align: center;
vertical-align: middle;
z-index: 2;
}
Related
I came across this amazing looking 404 error page https://codepen.io/dsenneff/pen/mjZgmN
I followed the tutorial here to make the SVG mobile responsive but I couldn't get it to work.
Any hint you can provide would highly be appreciated.
Thanks
CSS
#import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,900");
body,
html {
margin: 0;
padding: 0;
font-size: 16px;
-webkit-font-smoothing: antialiased;
background-color: #09334f;
position: relative;
}
#yetiSVG {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
display: inline-block;
}
#lightSVG {
position: absolute;
top: -24rem;
left: 0;
overflow: visible;
display: inline-block;
}
.content {
padding: 5rem 3rem 0 25rem;
position: relative;
z-index: 10;
font-family: "Source Sans Pro", sans-serif;
color: #fff;
}
.content h3 {
margin: 0 0 0.8rem;
font-size: 2.625rem;
font-weight: 900;
line-height: 120%;
}
.content p {
font-size: 1.25rem;
font-weight: normal;
line-height: 150%;
color: #d1e2ed;
}
.content p span {
text-decoration: line-through;
}
svg {
max-width: 100%;
}
.svg-container {
display: inline-block;
position: relative;
width: 100%;
height: 100%;
padding-bottom: 100%;
/* vertical-align: middle; */
/* overflow: hidden; */
}
I have a content management system supplying one of our applications with HTML.
I have been asked to change all "ul"s to use a <mat-icon>check_circle_outline</mat-icon> instead of the default "."
The problem is; I can't modify the content so I have to do it through css.
is there a way to add the icon to the css directly instead of using <mat-icon>check_circle_outline</mat-icon> ?
For example, with font-awesome you could do something like
.list-style-checked {
margin-left: 2.5em;
padding: 0;
li {
position: relative;
span {
font-family: "Font Awesome 5 Free";
position: absolute;
left: -2em;
text-align: center;
width: 2em;
line-height: inherit;
&:before {
content: "\f14a";
}
}
}
}
is there a similar way to do it with angular material?
Turns out it's not that different:
.list-style-checked {
#include bodyLight;
color: black;
margin-left: 36px;
margin-bottom: 0;
padding: 0;
list-style: none;
p {
margin-bottom: 0;
}
li {
position: relative;
text-align: left;
span {
font-family: 'Material Icons';
font-size: 24px;
position: absolute;
width: 24px;
height: 24px;
left: -30px;
text-align: center;
line-height: inherit;
&:before {
display: block;
margin-top: -4px;
content: 'check_circle_outline';
}
}
}
}
&.list-style-strikethrough p {
text-decoration: line-through;
}
I'm using the "blockquote" element to add a quote on my website. Here's the code that I'm using:
blockquote {
#extend .no-margin;
position: relative;
padding: 15px 60px;
text-align: center;
font-size: 2.5em;
font-style: italic;
font-weight: 400;
line-height: 1em;
}
blockquote:before, blockquote:after {
position: absolute;
font-size: 3em;
line-height: 1;
font-weight: 300;
}
blockquote:before {
top: 0;
left: 20px;
content: "\201C";
}
blockquote:after {
top: 0;
right: 20px;
content: "\201D";
}
Here's the HTML:
<blockquote>
Here's my quote
</blockquote>
That's the result in Safari/Chrome/Firefox/Edge:
and here's how it displays on Internet Explorer 11:
How can I fix this?
I'm having real issues with blockquotes in IE, IE disables ignores any styling leaving just plain text. Hoping anyone knows a solution :D
The code is:
.testimonial
{
margin: 0;
background: #0054a4;
padding: 15px 50px;
position: relative;
font-family: Georgia, serif;
color: #fff001;
font-style: italic;
font-size:20px;
line-height:20px;
}
.testimonial:before, .testimonial:after
{
content: "\201C";
position: absolute;
font-size: 80px;
line-height: 1;
color: #fff001;
font-style: normal;
}
.testimonial:before
{
top: 0;
left: 10px;
}
.testimonial:after
{
content: "\201D";
right: 10px;
bottom: -0.5em;
}
My goal is to hover on next_wrapper and nav_text_title_next appears.
Now both the image and the p tag nav_text_title_next appears, but unfortunately I can't see any of the text in p tag nav_text_title_next. I use the same code for other sections, and it works well but it's not working in this part. Can you help me figure out what goes wrong?
HTML:
<div class="next_wrapper" id="next_wrapper_title" style="position:absolute; left:1050px; top:300px; z-index:5;">
<a class="next_button" href="#blah" style="background:none;">
<p class="navigation_text_next" id="nav_text_title_next">
HI!
</p>
<img class="next_button" src="img/next-icon.gif" onmouseover="this.src='img/next-icon-stop2.gif'" onmouseout="this.src='img/next-icon.gif'">
</a>
</div>
Here is the CSS:
.next_wrapper {
position: absolute;
top: 0px;
left: 95px;
}
#nav_text_title_next {
display: none;
}
#next_wrapper_title:hover #nav_text_title_next {
display: block;
}
.next_button {
width:75px;
background: none;
position: absolute;
}
.navigation_text_next {
background: #000;
color: #FFF;
font-family: AvenirLTStd-Medium;
font-weight: normal;
font-style: normal;
font-size: 11px;
position: absolute;
width: 100px;
height: 55px;
top: 30px;
left: 67px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 45px;
padding-right: 5px;
text-align: left;
display: none;
}
.next_button {
width:75px;
background: none;
position: absolute;
}
your display is none delete that and you will see your text
also delete it on your image
then do something similar to this
in html
<p>bla</p>
in css
p {
opacity:0;
}
p:hover {
opacity:1;
}
You have hidden it from view that is why.
.navigation_text_next {
background: #000;
color: #FFF;
font-family: AvenirLTStd-Medium;
font-weight: normal;
font-style: normal;
font-size: 11px;
position: absolute;
width: 100px;
height: 55px;
top: 30px;
left: 67px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 45px;
padding-right: 5px;
text-align: left;
display: none; <-- remove this
}
You can remove display: none; as it parents is hiiden and not required.