I've built this tribute page on Codepen. And I added Bootsrap. And then I cant access to body from css. You can check my code here.
body {
background-color: black;
}
.header {
font-size: 100px;
font-family: "Libre Barcode 39 Text";
text-align: center;
}
.mainPicture {
width: 95px;
}
<link href="https://fonts.googleapis.com/css?family=Libre+Barcode+39+Text" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<div class="container-fluid">
<h1 class="header">Travis<span><img class="mainPicture" src="https://ih0.redbubble.net/image.398989678.9673/ap,550x550,12x12,1,transparent,t.u1.png"></span>Scott</h1>
Bootstrap style is overriding your style. Use !important to override bootstrap style. For more details check these usages
html>body {
background-color: black;
}
.header {
font-size: 100px;
font-family: "Libre Barcode 39 Text";
text-align: center;
}
.mainPicture {
width: 95px;
}
<link href="https://fonts.googleapis.com/css?family=Libre+Barcode+39+Text" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<div class="container-fluid">
<h1 class="header">Travis<span><img class="mainPicture" src="https://ih0.redbubble.net/image.398989678.9673/ap,550x550,12x12,1,transparent,t.u1.png"></span>Scott</h1>
Alternate Solution:-
Use html > body to increase specificity which will be a good practice
html > body {
background-color: black;
}
.header {
font-size: 100px;
font-family: "Libre Barcode 39 Text";
text-align: center;
}
.mainPicture {
width: 95px;
}
<link href="https://fonts.googleapis.com/css?family=Libre+Barcode+39+Text" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<div class="container-fluid">
<h1 class="header">Travis<span><img class="mainPicture" src="https://ih0.redbubble.net/image.398989678.9673/ap,550x550,12x12,1,transparent,t.u1.png"></span>Scott</h1>
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 have created a html page where the header navigation is created on a separate html navigation.html and linked to the index page. While I designed and developed the navigation bar with header tag and run it, its works perfectly and is even totally responsive.
But one I connect the navigation.html to index.html, the header navigation is broken and doesn't work. I tried every fix available and nothings working.
Please Help.
Thanks in advance.
Here's my code.
Here's the css file.
header {
font-family: "Poppins", sans-serif;
display: flex;
background-color: #5459ff;
padding: 1rem 0;
align-items: center;
}
header a {
text-decoration: none;
}
.logo {
margin: 0 0 0 3%;
}
nav {
margin: 0 6% 0 auto;
right: 0;
}
.nav_list {
display: flex;
align-items: center;
}
.nav_item {
margin: 0 8px;
}
.nav a:link,
.nav a:visited,
.nav a:active,
.nav a:hover {
color: #fff;
text-decoration: none;
}
.nav_link {
padding: 10px;
color: #fff;
font-size: 14px;
border-radius: 5px;
}
.nav_link:hover {
border-bottom: 1px solid #f9f070;
}
.header_toggle,
.header_close {
display: none;
}
#media screen and (max-width: 768px) {
header {
height: 80px;
justify-content: space-between;
padding: 0 28px;
}
.header_toggle {
display: inline;
font-size: 32px;
color: #f9f070;
}
.header_close {
position: absolute;
right: 24px;
color: #f9f070;
display: block;
font-size: 32px;
border-radius: 50%;
}
.nav {
position: fixed;
top: 0;
right: -100%;
margin-right: 0%;
background-color: #5459ff;
color: #fff;
width: 60%;
height: 100vh;
padding: 24px 0;
z-index: 100;
transition: 0.5s;
}
.nav_list {
display: flex;
flex-direction: column;
margin: 30% 10% 0 0;
}
.nav_item {
margin: 30% 0 0 0;
}
.show {
right: 0;
}
}
.main-page {
display: grid;
width: 100%;
height: 100%;
background-color: #000241;
font-family: "Roboto", sans-serif;
}
.headp {
display: grid;
grid-template-columns: 2fr 2fr;
}
.headp-head {
color: #f9f070;
font-size: 90px;
font-family: "Secular One", cursive;
line-height: 1.1;
margin: 4% auto auto 6%;
}
.head-desc {
color: #f9f070;
font-size: 18px;
font-weight: 600;
font-family: "Roboto", sans-serif;
word-spacing: 4px;
margin: 10px 0 0 50px;
}
.exp-button {
border: 1px solid #f9f070;
border-radius: 10px;
color: #f9f070;
text-align: center;
display: inline-block;
font-size: 16px;
margin: 30px 0 0 50px;
padding: 10px 20px 10px 20px;
cursor: pointer;
transition: all 1s;
}
.headp a:link {
color: #f9f070;
text-decoration: none;
}
.headp a:visited {
color: #f9f070;
text-decoration: none;
}
.headp a:active {
color: #f9f070;
text-decoration: none;
}
.headp a:hover {
color: #f9f070;
}
Index.html
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>Page</title>
<link href="site.webmanifest" rel="manifest">
<link href="icon.png" rel="apple-touch-icon">
<link href="css/normalize.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link href="https://fonts.googleapis.com" rel="preconnect">
<link href="https://fonts.gstatic.com" rel="preconnect">
<link href="https://fonts.googleapis.com/css2?family=Secular+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#700&display=swap" rel="stylesheet">
<link href="https://api.fontshare.com/css?f[]=nippo#500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#500;600&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.0/gsap.min.js">
</script>
<script src="https://code.jquery.com/jquery-3.3.1.js">
</script>
<script>
$(function(){
$("#mainnav").load("navigation.html");
$("#footer").load("footer.html");
});
</script>
</head>
<body>
<div class="page-container main-page">
<div class="page-wrap">
<div class="cursor"></div>
<div id="mainnav"></div>
<div class="headp">
<div>
<p class="headp-head">Heading</p>
<p class="head-desc">Subheading</p>
</div>
<div id="footer"></div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js">
</script> f
<script src="js/vendor/modernizr-3.8.0.min.js">
</script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js">
</script>
<script>
window.jQuery || document.write('<script src="js/vendor/jquery-3.4.1.min.js"><\/script>')
</script>
<script src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js" type="module">
</script>
<script src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js">
</script>
<script src="js/plugins.js">
</script>
<script src="js/main.js">
</script>
</div>
</body>
</html>
navigation.html
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=5.0" name="viewport">
<link href="css/main.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#700&display=swap" rel="stylesheet">
<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=Poppins:wght#500;600&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="logo">
<img src="./img/logo.svg" style="pointer-events: none;" draggable="false" ondragstart="return false;" alt="logo_main">
</div>
<nav class="nav" id="nav-menu">
<ion-icon name="close-outline" class="header_close" id="close-menu"></ion-icon>
<ul class="nav_list">
<li class="nav_item">Link1</li>
<li class="nav_item">Link2</li>
<li class="nav_item">Link3</li>
<li class="nav_item">Link4</li>
</ul>
</nav>
<ion-icon name="grid-outline" class="header_toggle" id="toggle-menu"></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>
<script src="js/main.js"></script>
</body>
</html>
main.js
const navMenu = document.getElementById("nav-menu"),
toggleMenu = document.getElementById("toggle-menu"),
closeMenu = document.getElementById("close-menu");
toggleMenu.addEventListener("click", () => {
navMenu.classList.toggle("show");
});
closeMenu.addEventListener("click", () => {
navMenu.classList.remove("show");
});
I am a begginer in HTML and CSS, and I am wondering if there is an equivalent of <style media="screen"></style> for .css files ?
I have my main HTML that call :
<style media="screen">
.bg-red{
background: red;
</style>
I am trying to add this part in my style.css file. I tryed to add #media properties, but did not succeed, and don't see my mistakes.
#media screen and (min-width: 0px){
.bg-red{
background: red;
}
}
And
#media screen {
.bg-red{
background: red;
}
}
I tried min-width, max-width, etc but without results.
Thank you for your advice !
Here is my code:
https://codepen.io/arthurdraws/pen/gOYJwRL
body, html{
padding: 0;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
}
.btn {
font-weight: 800;
font-size: 2rem;
line-height: 4rem;
background-color: gainsboro;
text-transform: uppercase;
padding: 1rem;
margin: 5rem;
color: black;
text-decoration: none;
}
.btn:hover{
background-color: red;
}
p{
padding-left: 20%;
padding-right: 20%;
font-weight: 400;
font-size: 1.5rem;
}
<!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">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<!-- animsition.css -->
<link rel="stylesheet" href="https://unpkg.com/animsition#latest/dist/css/animsition.min.css">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- animsition.js -->
<script src="https://unpkg.com/animsition#latest/dist/js/animsition.min.js"></script>
<style media="screen">
.bg-red{
background: red;
}
</style>
</head>
<body>
<h1>This is a test page</h1>
<div class="animsition-layer" data-animsition-overlay="true">
<a href="#" class="animsition-link btn" data-animsition-out-class="overlay-slide-out-left bg-red" data-animsition-out-duration="300">
Button
</a>
</div>
<p>How to transfer the "style media="screen" { .bg-red{background: red} }" from my HTML sample to my CSS file ?
</p>
<script>
// OVERLAY
$(document).ready(function() {
$(".animsition-layer").animsition({
inClass: 'overlay-slide-in-top',
inDuration: 0,
outDuration: 420,
linkElement: '.animsition-link',
loading: false,
loadingClass: 'animsition-loading',
loadingInner: '',
timeout: false,
timeoutCountdown: 5000,
onLoadEvent: true,
browser: [ 'animation-duration', '-webkit-animation-duration'],
overlay : true,
overlayClass : 'animsition-overlay-slide',
overlayParentElement : 'body',
transition: function(url){ window.location.href = url; }
})
});
</script>
</body>
</html>
you need to increase the specifity of your selector :
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. Specificity is based on the matching rules which are composed of different sorts of CSS selectors.
#media screen {
body > .bg-red{
background: red;
}
}
Snippet demo below :
$(document).ready(function() {
$(".animsition-layer").animsition({
inClass: 'overlay-slide-in-top',
inDuration: 0,
outDuration: 420,
linkElement: '.animsition-link',
loading: false,
loadingClass: 'animsition-loading',
loadingInner: '',
timeout: false,
timeoutCountdown: 5000,
onLoadEvent: true,
browser: ['animation-duration', '-webkit-animation-duration'],
overlay: true,
overlayClass: 'animsition-overlay-slide',
overlayParentElement: 'body',
transition: function(url) {
window.location.href = url;
}
})
});
#media screen {
body>.bg-red {
background: red;
}
}
body,
html {
padding: 0;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
}
.btn {
font-weight: 800;
font-size: 2rem;
line-height: 4rem;
background-color: gainsboro;
text-transform: uppercase;
padding: 1rem;
margin: 5rem;
color: black;
text-decoration: none;
}
.btn:hover {
background-color: red;
}
p {
padding-left: 20%;
padding-right: 20%;
font-weight: 400;
font-size: 1.5rem;
}
<!-- animsition.css -->
<link rel="stylesheet" href="https://unpkg.com/animsition#latest/dist/css/animsition.min.css">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- animsition.js -->
<script src="https://unpkg.com/animsition#latest/dist/js/animsition.min.js"></script>
<h1>This is a test page</h1>
<div class="animsition-layer" data-animsition-overlay="true">
<a href="#" class="animsition-link btn" data-animsition-out-class="overlay-slide-out-left bg-red" data-animsition-out-duration="300">
Button
</a>
</div>
<p>How to transfer the "style media="screen" { .bg-red{background: red} }" from my HTML sample to my CSS file ?
</p>
If you want the link to have .bg-red, then you need to add it to the class attribute instead of your data-animsition-out-class.
#media screen {
.bg-red: {
background-color: red;
}
}
<a href="#" class="animsition-link btn bg-red" data-animsition-out-class="overlay-slide-out-left" data-animsition-out-duration="300">
I'd like to make the headbar touch the jumbotron, but not sure how. And one more question. Should the headbar be called navbar or does it not make a difference?
Here is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CherryPlaysRoblox1</title>
<link rel="stylesheet" type="text/css" href="basic.css">
<link href="https://fonts.googleapis.com/css?family=Happy+Monkey" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="headbar"> <p>CherryPlaysRoblox</p></div>
<div class="jumbotron">
<h1>Welcome!</h1>
<p>Hey there! Welcome to my webpage! My name is Cherry and this website is `enter code here`99.999% <br> made by me! (If you're wondering, that 0.001% is bootstrap. Hmm, is that advertising???)</p>
</div>
<h2 id="Firsth2">About me</h2>
</body>
</html>
And my Css:
p {
color: black;
}
.jumbotron {
background-color: Sandybrown !important;
float: top;
}
.jumbotron, p + h1 {
color: black !important;
}
.headbar p {
color: black !important;
font-family: 'Happy Monkey', cursive;
font-size: 20px;
}
.headbar {
margin-bottom: 30px;
background-color: hotpink !important;
}
#Firsth2 {
color: black;
}
body {
background-color: Peachpuff !important;
}
Remove margin-bottom: 30px; from .headbar and set margin:0 in .headbar p:
p {
color: black;
}
.jumbotron {
background-color: Sandybrown !important;
}
.jumbotron, p + h1 {
color: black !important;
}
.headbar p {
color: black !important;
font-family: 'Happy Monkey', cursive;
font-size: 20px;
margin:0;
}
.headbar {
background-color: hotpink !important;
}
#Firsth2 {
color: black;
}
body {
background-color: Peachpuff !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<body>
<div class="headbar"> <p>CherryPlaysRoblox</p></div>
<div class="jumbotron">
<h1>Welcome!</h1>
<p>Hey there! Welcome to my webpage! My name is Cherry and this website is `enter code here`99.999% <br> made by me! (If you're wondering, that 0.001% is bootstrap. Hmm, is that advertising???)</p>
</div>
<h2 id="Firsth2">About me</h2>
</body>
You're using a p for your .headbar, which has margin-bottom. Either don't use a p or get rid of the margin-bottom.
HTML:
<div class="headbar">CherryPlaysRoblox</div>
See: https://jsfiddle.net/y1tytq8u/
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;
}