I'm following a YouTube video about making websites and his website looks like this:
and mine looks like this:
As you can see, the icon is in the navigation bar and itself has a little of space between the Google web browser bar, and my website doesn't have all of this.
I looked the lowercase letters and to my it's fine everything, look any grammar error and frankly don't see any error
This is my code:
HTML
<!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="styles.css">
<script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" integrity="sha384-rOA1PnstxnOBLzCLMcre8ybwbTmemjzdNlILg8O7z1lUkLXozs4DHonlDtnE7fpc" crossorigin="anonymous"></script>
<title>pomodone.app</title>
</head>
<body>
<div class="container">
<div class="topbar">
<div class="logo">
<h2>Pomodone</h2>
</div>
<div class="search">
<input type="text" id="search" placeholder="search here">
<label for="search"><i class="fas fa-search"></i></label>
</div>
<i class="fas fa-bell"></i>
<div class="user">
<img src="img/user.jpg" alt="">
</div>
</div>
<div class="sidebar"></div>
<div class="main"></div>
</div>
</body>
</html>
CSS
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'poppins', sans-serif;
}
.topbar{
position: fixed;
background: #fff;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
width: 100%;
height: 60px;
padding: 0 20px;
display: grid;
grid-template-columns: 2fr 10fr 0.4fr 1fr;
align-items: center;
z-index: 1;
}
.logo h2{
color: #df7f27;
}
.search{
position: relative;
width: 60%;
justify-self: center;
}
.search input {
width: 100%;
height: 40px;
padding: 0 40px;
font-size: 16px;
outline: none;
border: none;
border-radius: 10px;
background: #f5f5f5;
}
.search i {
position: absolute;
right: 15px;
top: 15px;
cursor: pointer;
}
.user{
position: relative;
width: 50px;
height: 50px;
}
.user img{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
object-fit: cover;
}
Thank you in advance
#Iomipac, you need to set position to the label.
Please add this style. Hope it is helpful~.
.search >label {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'poppins', sans-serif;
}
.topbar {
position: fixed;
background: #fff;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
width: 100%;
height: 60px;
padding: 0 20px;
display: grid;
grid-template-columns: 2fr 10fr 0.4fr 1fr;
align-items: center;
z-index: 1;
}
.logo h2 {
color: #df7f27;
}
.search {
position: relative;
width: 60%;
justify-self: center;
}
.search input {
width: 100%;
height: 40px;
padding: 0 40px;
font-size: 16px;
outline: none;
border: none;
border-radius: 10px;
background: #f5f5f5;
}
.search >label {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
}
.search i {
position: absolute;
right: 15px;
top: 15px;
cursor: pointer;
}
.user {
position: relative;
width: 50px;
height: 50px;
}
.user img {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
object-fit: cover;
}
<div class="container">
<div class="topbar">
<div class="logo">
<h2>Pomodone</h2>
</div>
<div class="search">
<input type="text" id="search" placeholder="search here">
<label for="search">icon<i class="fas fa-search"></i></label>
</div>
<i class="fas fa-bell"></i>
<div class="user">
<img src="img/user.jpg" alt="">
</div>
</div>
<div class="sidebar"></div>
<div class="main"></div>
</div>
Related
I am trying to make a login page but I don't know why there is a extra space in the bottom of the form and in mobile phone there is a extra space in the right. I have tried much but can't find any way to fix it.
I have also tried removing.
* {
margin: 0;
padding: 0;
}
As per this answer.
My code is as follows:
#import url('https://fonts.googleapis.com/css?family=Raleway:400,700');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Raleway, sans-serif;
}
body {
background: linear-gradient(90deg, #C7C5F4, #776BCC);
}
.container {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.screen {
background: linear-gradient(90deg, #5D54A4, #7C78B8);
position: relative;
height: 600px;
width: 360px;
box-shadow: 0px 0px 24px #5C5696;
}
.screen__content {
z-index: 1;
position: relative;
height: 100%;
}
.screen__background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
-webkit-clip-path: inset(0 0 0 0);
clip-path: inset(0 0 0 0);
}
.screen__background__shape {
transform: rotate(45deg);
position: absolute;
}
.screen__background__shape1 {
height: 520px;
width: 520px;
background: #FFF;
top: -50px;
right: 120px;
border-radius: 0 72px 0 0;
}
.screen__background__shape2 {
height: 220px;
width: 220px;
background: #6C63AC;
top: -172px;
right: 0;
border-radius: 32px;
}
.screen__background__shape3 {
height: 540px;
width: 190px;
background: linear-gradient(270deg, #5D54A4, #6A679E);
top: -24px;
right: 0;
border-radius: 32px;
}
.screen__background__shape4 {
height: 400px;
width: 200px;
background: #7E7BB9;
top: 420px;
right: 50px;
border-radius: 60px;
}
.login {
width: 320px;
padding: 30px;
padding-top: 156px;
}
.login__field {
padding: 20px 0px;
position: relative;
}
.login__icon {
position: absolute;
top: 30px;
color: #7875B5;
}
.login__input {
border: none;
border-bottom: 2px solid #D1D1D4;
background: none;
padding: 10px;
padding-left: 24px;
font-weight: 700;
width: 75%;
transition: .2s;
}
.login__input:active,
.login__input:focus,
.login__input:hover {
outline: none;
border-bottom-color: #6A679E;
}
.login__submit {
background: #fff;
font-size: 14px;
margin-top: 30px;
padding: 16px 20px;
border-radius: 26px;
border: 1px solid #D4D3E8;
text-transform: uppercase;
font-weight: 700;
display: flex;
align-items: center;
width: 100%;
color: #4C489D;
box-shadow: 0px 2px 2px #5C5696;
cursor: pointer;
transition: .2s;
}
.login__submit:active,
.login__submit:focus,
.login__submit:hover {
border-color: #6A679E;
outline: none;
}
.button__icon {
font-size: 24px;
margin-left: auto;
color: #7875B5;
}
.social-login {
position: absolute;
height: 140px;
width: 160px;
text-align: center;
bottom: 0px;
right: 0px;
color: #fff;
}
.social-icons {
display: flex;
align-items: center;
justify-content: center;
}
.social-login__icon {
padding: 20px 10px;
color: #fff;
text-decoration: none;
text-shadow: 0px 0px 8px #7875B5;
}
.social-login__icon:hover {
transform: scale(1.5);
}
<link href="https://use.fontawesome.com/releases/v5.2.0/css/fontawesome.css" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet" />
<div class="container">
<div class="screen">
<div class="screen__content">
<form class="login">
<div class="login__field">
<i class="login__icon fas fa-user"></i>
<input type="text" class="login__input" placeholder="User name / Email">
</div>
<div class="login__field">
<i class="login__icon fas fa-lock"></i>
<input type="password" class="login__input" placeholder="Password">
</div>
<button class="button login__submit">
<span class="button__text">Log In Now</span>
<i class="button__icon fas fa-chevron-right"></i>
</button>
</form>
<div class="social-login">
<h3>log in via</h3>
<div class="social-icons">
</div>
</div>
</div>
<div class="screen__background">
<span class="screen__background__shape screen__background__shape4"></span>
<span class="screen__background__shape screen__background__shape3"></span>
<span class="screen__background__shape screen__background__shape2"></span>
<span class="screen__background__shape screen__background__shape1"></span>
</div>
</div>
</div>
Add overflow: hidden; to container. Your issue is due to the rotated elements taking space outside the container.
#import url('https://fonts.googleapis.com/css?family=Raleway:400,700');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Raleway, sans-serif;
}
body {
background: linear-gradient(90deg, #C7C5F4, #776BCC);
}
.container {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
overflow: hidden;
}
.screen {
background: linear-gradient(90deg, #5D54A4, #7C78B8);
position: relative;
height: 600px;
width: 360px;
box-shadow: 0px 0px 24px #5C5696;
}
.screen__content {
z-index: 1;
position: relative;
height: 100%;
}
.screen__background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
-webkit-clip-path: inset(0 0 0 0);
clip-path: inset(0 0 0 0);
}
.screen__background__shape {
transform: rotate(45deg);
position: absolute;
}
.screen__background__shape1 {
height: 520px;
width: 520px;
background: #FFF;
top: -50px;
right: 120px;
border-radius: 0 72px 0 0;
}
.screen__background__shape2 {
height: 220px;
width: 220px;
background: #6C63AC;
top: -172px;
right: 0;
border-radius: 32px;
}
.screen__background__shape3 {
height: 540px;
width: 190px;
background: linear-gradient(270deg, #5D54A4, #6A679E);
top: -24px;
right: 0;
border-radius: 32px;
}
.screen__background__shape4 {
height: 400px;
width: 200px;
background: #7E7BB9;
top: 420px;
right: 50px;
border-radius: 60px;
}
.login {
width: 320px;
padding: 30px;
padding-top: 156px;
}
.login__field {
padding: 20px 0px;
position: relative;
}
.login__icon {
position: absolute;
top: 30px;
color: #7875B5;
}
.login__input {
border: none;
border-bottom: 2px solid #D1D1D4;
background: none;
padding: 10px;
padding-left: 24px;
font-weight: 700;
width: 75%;
transition: .2s;
}
.login__input:active,
.login__input:focus,
.login__input:hover {
outline: none;
border-bottom-color: #6A679E;
}
.login__submit {
background: #fff;
font-size: 14px;
margin-top: 30px;
padding: 16px 20px;
border-radius: 26px;
border: 1px solid #D4D3E8;
text-transform: uppercase;
font-weight: 700;
display: flex;
align-items: center;
width: 100%;
color: #4C489D;
box-shadow: 0px 2px 2px #5C5696;
cursor: pointer;
transition: .2s;
}
.login__submit:active,
.login__submit:focus,
.login__submit:hover {
border-color: #6A679E;
outline: none;
}
.button__icon {
font-size: 24px;
margin-left: auto;
color: #7875B5;
}
.social-login {
position: absolute;
height: 140px;
width: 160px;
text-align: center;
bottom: 0px;
right: 0px;
color: #fff;
}
.social-icons {
display: flex;
align-items: center;
justify-content: center;
}
.social-login__icon {
padding: 20px 10px;
color: #fff;
text-decoration: none;
text-shadow: 0px 0px 8px #7875B5;
}
.social-login__icon:hover {
transform: scale(1.5);
}
<link href="https://use.fontawesome.com/releases/v5.2.0/css/fontawesome.css" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet" />
<div class="container">
<div class="screen">
<div class="screen__content">
<form class="login">
<div class="login__field">
<i class="login__icon fas fa-user"></i>
<input type="text" class="login__input" placeholder="User name / Email">
</div>
<div class="login__field">
<i class="login__icon fas fa-lock"></i>
<input type="password" class="login__input" placeholder="Password">
</div>
<button class="button login__submit">
<span class="button__text">Log In Now</span>
<i class="button__icon fas fa-chevron-right"></i>
</button>
</form>
<div class="social-login">
<h3>log in via</h3>
<div class="social-icons">
</div>
</div>
</div>
<div class="screen__background">
<span class="screen__background__shape screen__background__shape4"></span>
<span class="screen__background__shape screen__background__shape3"></span>
<span class="screen__background__shape screen__background__shape2"></span>
<span class="screen__background__shape screen__background__shape1"></span>
</div>
</div>
</div>
remove height: 140px; from .social-login class.
and if you talking about space after password then remove margin
#import url('https://fonts.googleapis.com/css?family=Raleway:400,700');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Raleway, sans-serif;
}
body {
background: linear-gradient(90deg, #C7C5F4, #776BCC);
}
.container {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.screen {
background: linear-gradient(90deg, #5D54A4, #7C78B8);
position: relative;
height: 600px;
width: 360px;
box-shadow: 0px 0px 24px #5C5696;
}
.screen__content {
z-index: 1;
position: relative;
height: 100%;
}
.screen__background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
-webkit-clip-path: inset(0 0 0 0);
clip-path: inset(0 0 0 0);
}
.screen__background__shape {
transform: rotate(45deg);
position: absolute;
}
.screen__background__shape1 {
height: 520px;
width: 520px;
background: #FFF;
top: -50px;
right: 120px;
border-radius: 0 72px 0 0;
}
.screen__background__shape2 {
height: 220px;
width: 220px;
background: #6C63AC;
top: -172px;
right: 0;
border-radius: 32px;
}
.screen__background__shape3 {
height: 540px;
width: 190px;
background: linear-gradient(270deg, #5D54A4, #6A679E);
top: -24px;
right: 0;
border-radius: 32px;
}
.screen__background__shape4 {
height: 400px;
width: 200px;
background: #7E7BB9;
top: 420px;
right: 50px;
border-radius: 60px;
}
.login {
width: 320px;
padding: 30px;
padding-top: 156px;
}
.login__field {
padding: 20px 0px;
position: relative;
}
.login__icon {
position: absolute;
top: 30px;
color: #7875B5;
}
.login__input {
border: none;
border-bottom: 2px solid #D1D1D4;
background: none;
padding: 10px;
padding-left: 24px;
font-weight: 700;
width: 75%;
transition: .2s;
}
.login__input:active,
.login__input:focus,
.login__input:hover {
outline: none;
border-bottom-color: #6A679E;
}
.login__submit {
background: #fff;
font-size: 14px;
margin-top: 30px;
padding: 16px 20px;
border-radius: 26px;
border: 1px solid #D4D3E8;
text-transform: uppercase;
font-weight: 700;
display: flex;
align-items: center;
width: 100%;
color: #4C489D;
box-shadow: 0px 2px 2px #5C5696;
cursor: pointer;
transition: .2s;
}
.login__submit:active,
.login__submit:focus,
.login__submit:hover {
border-color: #6A679E;
outline: none;
}
.button__icon {
font-size: 24px;
margin-left: auto;
color: #7875B5;
}
.social-login {
position: absolute;
width: 160px;
text-align: center;
bottom: 0px;
right: 0px;
color: #fff;
}
.social-icons {
display: flex;
align-items: center;
justify-content: center;
}
.social-login__icon {
padding: 20px 10px;
color: #fff;
text-decoration: none;
text-shadow: 0px 0px 8px #7875B5;
}
.social-login__icon:hover {
transform: scale(1.5);
}
<link href="https://use.fontawesome.com/releases/v5.2.0/css/fontawesome.css" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet" />
<div class="container">
<div class="screen">
<div class="screen__content">
<form class="login">
<div class="login__field">
<i class="login__icon fas fa-user"></i>
<input type="text" class="login__input" placeholder="User name / Email">
</div>
<div class="login__field">
<i class="login__icon fas fa-lock"></i>
<input type="password" class="login__input" placeholder="Password">
</div>
<button class="button login__submit">
<span class="button__text">Log In Now</span>
<i class="button__icon fas fa-chevron-right"></i>
</button>
</form>
<div class="social-login">
<h3>log in via</h3>
<div class="social-icons">
</div>
</div>
</div>
<div class="screen__background">
<span class="screen__background__shape screen__background__shape4"></span>
<span class="screen__background__shape screen__background__shape3"></span>
<span class="screen__background__shape screen__background__shape2"></span>
<span class="screen__background__shape screen__background__shape1"></span>
</div>
</div>
</div>
I am a new to html and css.
Recently. I am writing a login page for iphoneX, but the background won't cover the entire screen.
I tried the following methods, but didn't work
viewport-fit=cover
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
None of them work, it still leaves a white area on the top as shown in the picture.
How can I make the background cover the entire page including the top-left and top-right corner on the iPhoneX or the later versions?
Appreciate if anyone who could help me.
enter image description here
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover"/>
<title>登陆页面</title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
</head>
<style type="text/css">
body{
font-family: "Source Han Sans CN";
background-color: #22222;
overflow-x:hidden;
overflow-y:hidden;
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}
/*以下为背景装饰*/
.middle-image {
margin: 10vh auto 0 auto;
text-align: center;
}
#girl {
width: 30vh;
}
.circlex {
background: #fdd100;
position: fixed;
overflow: hidden;
}
#circle2 {
left: -5vh;
top: -10vh;
width: 18vh;
height: 18vh;
-moz-border-radius: 10vh;
-webkit-border-radius: 10vh;
border-radius:10vh;
}
#circle3 {
left: -24vh;
top: 0.5vh;
width: 30vh;
height: 30vh;
-moz-border-radius: 24vh;
-webkit-border-radius: 24vh;
border-radius:24vh;
}
#circle4 {
right: -5vh;
top: -6vh;
width: 18vh;
height: 18vh;
-moz-border-radius: 10vh;
-webkit-border-radius: 10vh;
border-radius:10vh;
}
#circle5 {
right: -12vh;
top: 4.5vh;
width: 18vh;
height: 18vh;
-moz-border-radius: 10vh;
-webkit-border-radius: 10vh;
border-radius:10vh;
}
#circle6 {
right: -11vh;
bottom: 4.5vh;
width: 15vh;
height: 15vh;
-moz-border-radius: 10vh;
-webkit-border-radius: 10vh;
border-radius:10vh;
}
#circle7 {
right: -8vh;
bottom: -8vh;
width: 18vh;
height: 18vh;
-moz-border-radius: 10vh;
-webkit-border-radius: 10vh;
border-radius:10vh;
}
#circle8 {
left: -2vh;
bottom: -10vh;
width: 18vh;
height: 18vh;
-moz-border-radius: 10vh;
-webkit-border-radius: 10vh;
border-radius:10vh;
}
#circle9 {
left: -13vh;
bottom: -1vh;
width: 18vh;
height: 18vh;
-moz-border-radius: 10vh;
-webkit-border-radius: 10vh;
border-radius:10vh;
}
/*以下为内容区域，包括所有文字性内容*/
.main_title {
position: relative;
margin: 6vh auto 5.76vh auto;
text-align: center;
}
.circle {
width: 1vh;
height: 1vh;
background: #fdd100;
-moz-border-radius: 8vh;
-webkit-border-radius: 8vh;
border-radius: 8vh;
margin: 1.44vh;
}
.main_title ul{
width: 90%;
list-style: none;
display: flex;
justify-content: center;
align-items: center;
}
.main_title a{
color: #FDD100;
font-size: 6vw;
}
.textbox {
align-items: center;
text-align: center;
border-bottom: 0.12vh solid #CDCDCD;
display: flex;
width: 80%;
margin: 1.2vh auto 0 auto;
}
.textbox input {
border-style: none;
outline: none;
background: none;
font-size: 3vw;
color: #CDCDCD;
margin: 0 auto;
float: left;
}
#password::-webkit-input-placeholder {
color: #cdcdcd;
}
#account::-webkit-input-placeholder {
color: #cdcdcd;
}
i {
color: #cdcdcd;
}
.btn {
width: 80%;
height: 6vh;
background: #fdd100;
border-radius: 4.8vh;
border-style: none;
color: #4b4a48;
font-size: 4vw;
}
.btn-container {
margin: 2.9vh auto 0vh auto;
text-align: center;
}
.noaccount {
border:0.12vh solid red;
width: 80%;
margin: 1.2vh auto 0vh auto;
display: flex;
text-align: center;
}
.link-area {
display: block;
margin-top: 3vh;
text-align: center;
align-items: center;
}
.link-area a{
color: #cdcdcd;
font-size: 3vw;
font-weight: 200;
}
.spliter {
color: #fdd100;
padding: 0vh 1vh;
}
#logo {
text-align: center;
margin: 6vh auto 3.5vh auto;
}
#logo img{
width: 7.2vh;
}
</style>
<body>
<div class="middle-image">
<img src="img/undraw_unlock_24mb.svg" id="girl">
</div>
<div class="circle_container">
<div id="circle2" class="circlex"></div>
<div id="circle3" class="circlex"></div>
<div id="circle4" class="circlex"></div>
<div id="circle5" class="circlex"></div>
<div id="circle6" class="circlex"></div>
<div id="circle7" class="circlex"></div>
<div id="circle8" class="circlex"></div>
<div id="circle9" class="circlex"></div>
</div>
<div class="main_title">
<ul>
<div id="ufun"><li><a>Ufun</a></li></div>
<div id="circle1" class="circle"></div>
<div id="discover"><li><a>text</a></li></div>
</ul>
</div>
<div class="form">
<div class="textbox">
<i class="material-icons">account_circle</i>
<input id="account" type="tel" class="mui-input-clear mui-input" placeholder="Phone">
</div>
<div class="textbox">
<i class="material-icons">lock</i>
<input id="password" type="password" class="mui-input-clear mui-input" placeholder="Password">
</div>
<div class="btn-container">
<button type="button" class="btn" href="#">login</button>
</div>
<div class="mui-content-padded">
<div class="link-area">
<a id='reg' href="#">register</a>
<span class="spliter">|</span>
<a id='forgetPassword' href="#">fotget</a>
</div>
</div>
<div id="logo">
<img src="img/logo.png">
</div>
</div>
</body>
I am trying to place a fully responsive text box in the centre of the page inside of an image. I haven't had any trouble placing the text box on the image but for some reason I am having trouble centring the box. I have tried reviewed and looked over multiple tutorials and stack overflow answers but nothing has been helpful. I have tried both width: 50% and margins but neither have worked. Attached below is my code. Again, I am fully aware that there are multiple answers to this question but none seem to work. Thanks a lot for the help it is highly appreciated!
<html>
<head>
<style>
.back {
min-width: 100%;
}
.title {
font-size: 90px;
color: white;
font-family: 'Oswald', sans-serif;
text-align: center;
margin-top: -483px;
}
.square {
position: relative;
width: 50%;
background-color: white;
border: 8px solid #686868;
height: 100px;
text-align: center;
margin-top: 225px;
}
.square:after {
content: "";
display: block;
padding-bottom: 100%;
}
.content {
position: absolute;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<img src="orilliaback.jpg" class="back" height=500 />
<div class="title">Orillia, Ontario</div>
<div class="square">
<div class="content">
Welcome to Orillia!
</div>
</div>
</body>
</html>
Again, thank you very much!
Add margin:0 auto to .square :
.square {
position: relative;
width: 50%;
background-color: white;
border: 8px solid #686868;
height: 100px;
text-align: center;
margin-top: 225px;
margin: 0 auto;/*/<-------------Added/*/
}
Full Code:
.back {
min-width: 100%;
}
.title {
font-size: 90px;
color: white;
font-family: 'Oswald', sans-serif;
text-align: center;
margin-top: -483px;
}
.square {
position: relative;
width: 50%;
background-color: white;
border: 8px solid #686868;
height: 100px;
text-align: center;
margin-top: 225px;
margin: 0 auto;
}
.square:after {
content: "";
display: block;
padding-bottom: 100%;
}
.content {
position: absolute;
width: 100%;
height: 100%;
}
<img src="http://www.mrwallpaper.com/wallpapers/cute-bunny-1600x900.jpg" class="back" height=500 />
<div class="title">Orillia, Ontario</div>
<div class="square">
<div class="content">
Welcome to Orillia!
</div>
</div>
Just use flex-box ;)
More info: link
<html>
<head>
<style>
.back {
min-width: 100%;
}
.title {
font-size: 90px;
color: white;
font-family: 'Oswald', sans-serif;
text-align: center;
margin-top: -483px;
}
.square {
position: relative;
width: 50%;
background-color: white;
border: 8px solid #686868;
height: 100px;
text-align: center;
margin-top: 225px;
}
.square:after {
content: "";
display: block;
padding-bottom: 100%;
}
.content {
position: absolute;
width: 100%;
height: 100%;
display:flex;
justify-content: center;
flex-direction: column
}
</style>
</head>
<body>
<img src="orilliaback.jpg" class="back" height=500 />
<div class="title">Orillia, Ontario</div>
<div class="square">
<div class="content">
Welcome to Orillia!
</div>
</div>
</body>
</html>
I am in the beginning stages of learning web development. I think of layouts and try to come up with a code for it.
I want to set up social media navigation on the top right of the website. I came up with the following html.
<nav class="snav">
<img src="../desktop/linked.png" height="32px" width="32px">
<img src="../desktop/fb.png" height="32px" width="32px">
<img src="../desktop/twitter.png" height="32px" width="32px">
<img src="../desktop/google.png" height="32px" width="32px">
</nav>
And the css
.snav {
position: absolute;
top: 50px;
right: 50px;
}
.snav a {
padding-right: 5px;
padding-left: 5px;
}
but, only google + icon is appearing on screen.
Here is the complete code for the website.
body {
background-image: url('../desktop/image.jpg');
background-repeat: no-repeat;
margin: 0;
}
.header {
background-color: #fcfcfc;
opacity: 0.5;
max-width: 100%;
height: 120px;
border-bottom: 0.4px solid #bd0000;
position: relative;
top: 0;
}
.bar_1 {
position: absolute;
left: 0px;
margin-left: 5%;
margin-top: 80px;
height: 50vh;
width: 25%;
background-color: #fcfcfc;
opacity: 0.5;
border-radius: 10px;
border: 0.4px solid #bd0000;
}
.bar_2 {
position: absolute;
left: 38.33%;
margin-top: 80px;
height: 50vh;
width: 23.33%;
background-color: #fcfcfc;
opacity: 0.5;
border-radius: 10px;
border: 0.4px solid #bd0000;
}
.bar_3 {
position: absolute;
left: 71.66%;
margin-right: 5%;
margin-top: 80px;
height: 50vh;
width: 23.33%;
background-color: #fcfcfc;
opacity: 0.5;
border-radius: 10px;
border: 0.4px solid #bd0000;
}
.bar_1:hover {
background-color: #bd0000;
}
.bar_2:hover {
background-color: #bd0000;
}
.bar_3:hover {
background-color: #bd0000;
}
#footer {
position: relative;
top: 100vh;
background-color: #fcfcfc;
max-width: 100%;
height: 70px;
border-top: 0.4px solid #bd0000;
}
* {
box-sizing: border-box;
}
.search_bar {
position: absolute;
top: 650px;
left: 29%;
right: 33.33%;
}
#search {
border: 2px solid #bd0000;
background-color: #fff;
opacity: 0.5;
font-color: #fcfcfc;
font-family: sans-serif;
font-size: 20px;
font-weight: bold;
width: 600px;
height: 50px;
border-radius: 2px;
}
#search:hover {
background-color: #f0f0f0;
font-color: #000;
opacity: 50;
}
img {
position: absolute;
top: 10px;
left: 30px;
}
.mnav {
position: absolute;
top: 30px;
right: 515px;
}
.mnav a {
font-family: Tahoma;
font-size: 18px;
font-weight: bolder;
color: #000;
text-decoration: none;
padding-right: 10px;
padding-left: 10px;
}
.snav {
position: absolute;
top: 50px;
right: 50px;
}
.snav a {
padding-right: 5px;
padding-left: 5px;
}
<!Doctype html>
<html>
<head>
<title>Two Website</title>
<link rel="stylesheet" href="two-website.css">
</head>
<body>
<div class="body_con">
<div class="header">
</div>
<nav class="mnav">
Home
Page 1
Page 2
Page 3
</nav>
<img src="../desktop/logo.png">
<nav class="snav">
<a href="https://www.linkedin.com/uas/login">
<img src="../desktop/linked.png" height="32px" width="32px">
</a>
<a href="https://www.facebook.com/">
<img src="../desktop/fb.png" height="32px" width="32px">
</a>
<a href="https://twitter.com/">
<img src="../desktop/twitter.png" height="32px" width="32px">
</a>
<a href="https://plus.google.com/">
<img src="../desktop/google.png" height="32px" width="32px">
</a>
</nav>
<div class="bar_1">
</div>
<div class="bar_2">
</div>
<div class="bar_3">
</div>
<form action="\" method="get" class="search_bar">
<input type="text" name="search" placeholder="Search" id="search">
</form>
</div>
<footer id="footer">
</footer>
</body>
</html>
Please help me with it.
Thank You
the width of snav is:
5 * (32 + 5 + 5) = 5 * 42 = 210
so:
.snav {
position: absolute;
top: 50px;
right: 50px;
width: 210px;
height: 32px;
}
p.s. as it is said in a comment, it is better to consider relative positioning instead of absolute positioning.
Add position: relative in snav a and increase the padding.
.snav a {
position: relative;
padding-right: 15px;
padding-left: 15px;
}
/* Sass Document */
* {
box-sizing: border-box;
}
#TopBanner {
background: rgba(255, 255, 255, 0.35);
border-radius: 3px;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
top: 10px;
left: 0;
position: absolute;
margin-left: 20px;
margin-right: 20px;
right: 0;
z-index: 5;
padding: 0 10px;
}
#Container {
background-color: #CFBDBD;
align-content: center;
align-items: center;
align-self: center;
height: auto;
width: 80%;
display: block;
margin-left: auto;
padding: 10px;
margin-right: auto;
border: thin;
z-index: 3;
}
#backgroundimage {
background-color: #D52D32;
background-size: cover;
filter: blur(5px);
-webkit-filter: blur(5px);
height: 800px;
left: 0;
position: relative;
right: 0;
z-index: 1;
}
#Logo {
border-radius: 15px;
position: absolute;
left: 0.5%;
z-index: 2;
}
Nav ul {
z-index: 2;
list-style-type: none;
list-style-position: inside;
}
Nav li {
z-index: 2;
display: inline;
height: 90px;
width: 180px;
}
/*# sourceMappingURL=css.css.map */
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/css.css">
<title></title>
</head>
<div id="backgroundimage">
<div id="TopBanner">
<nav>
<ul>
<li>
<img id="Logo" src="images/AWDLogo.png">
</li>
<p>Contact Us At:
<br>Call:
</p>
</ul>
</nav>
</div>
<body>
<div id="Container">
</div>
</body>
</div>
</html>
This is my code for my website. I have been trying to blur only the background, however it blurs everything. It appears that the z-index is not working. Any help on how to make everything else fine, and just the background blur is appreciated,
Thank you.
Filters affect everything within the parent element, as expected, so you need to move the filter outside anything that shouldn't be affected.
In your case, you can just close <div id="backgroundimage"></div> in the "top" of the document.
/* Sass Document */
* {
box-sizing: border-box;
}
#TopBanner {
background: rgba(255, 255, 255, 0.35);
border-radius: 3px;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
top: 10px;
left: 0;
position: absolute;
margin-left: 20px;
margin-right: 20px;
right: 0;
z-index: 5;
padding: 0 10px;
}
#Container {
background-color: #CFBDBD;
align-content: center;
align-items: center;
align-self: center;
height: auto;
width: 80%;
display: block;
margin-left: auto;
padding: 10px;
margin-right: auto;
border: thin;
z-index: 3;
}
#backgroundimage {
background-color: #D52D32;
background-size: cover;
filter: blur(5px);
-webkit-filter: blur(5px);
height: 800px;
left: 0;
position: relative;
right: 0;
z-index: 1;
}
#Logo {
border-radius: 15px;
position: absolute;
left: 0.5%;
z-index: 2;
}
Nav ul {
z-index: 2;
list-style-type: none;
list-style-position: inside;
}
Nav li {
z-index: 2;
display: inline;
height: 90px;
width: 180px;
}
/*# sourceMappingURL=css.css.map */
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/css.css">
<title></title>
</head>
<div id="backgroundimage"></div>
<div id="TopBanner">
<nav>
<ul>
<li>
<img id="Logo" src="images/AWDLogo.png">
</li>
<p>Contact Us At:
<br>Call:
</p>
</ul>
</nav>
</div>
<body>
<div id="Container">
</div>
</body>
</html>
You also have some funky HTML (body isn't in <body>), but this seems to solve your problem.
Scott's answer works just fine,
Another solution would be this already answered question