Im an HTML newbie & I can't seem to figure out the problem with the code I've just written. Of course the XXXX's don't count ;-)
I'm certain that the style of this code gets me the result that I want, however the strange thing is thing is that when I run this code on my site or on scratchpad.io (the site that I use to test out code before implementing it)
<form action="XXXX" method="post">
<input type="hidden" name="FORM_ID" value="XXXX">
<input type="hidden" name="COMPLETE_URL" value=“XXXX”>
.body {
padding: 20px;
}
* {
font-family: Arial, sans-serif;
font-size: 15pt;
margin: 0;
padding: 0;
border: none;
}
.send {
background: #62b4f5;
color: #fff;
font-weight: 500;
border-radius: 0 4px 4px 0;
padding: 10px 30px;
font-size: 13pt;
box-shadow: 0px 2px 5px 0px rgba(173,173,173,0.5);
margin-left: -6px;
}
.send:hover {
font-weight: 700;
padding: 10px 29px;
}
input[type="text"] {
width: 300px;
border-radius: 4px 0 0 4px;
padding: 10px 20px;
box-shadow: 0px 2px 5px 0px rgba(173,173,173,0.5);
outline: none;
}
.suggestion {
padding: 5px 15px;
}
.suggestion:hover {
cursor: pointer;
background: rgba(0, 0, 0, 0.15);
}
#autosuggest {
position: absolute;
top: 70px;
background: rgba(0,0,0,0.05);
width: 400px;
}
</style>
</form>
There is no opening tag <style> found.
Related
I am new to this, so as practice I tried to create a replica of the Netflix registration page.
I am using the flex box model on the webpage.
I am struggling to get the email input and the get started button to align. I have tried changing the button tag to an anchor tag and go the same result. I have tried using margin and padding on the individual elements and that didn't work.
.landing_page_block {
display: block;
width: 40%;
margin-top: 220px;
text-align: center;
}
.landing_page_h1 {
font-size: 65px;
font-weight: 700;
letter-spacing: 1.2px;
text-shadow: 5px 5px 15px 5px rgba(0,0,0,0.8);
-webkit-text-shadow: 5px 5px 15px 5px rgba(0,0,0,0.8);
}
.landing_page_phrase {
margin: 20px 0 30px 0;
font-weight: 300;
letter-spacing: 1.2px;
text-shadow: 5px 5px 15px 5px rgba(0,0,0,0.8);
-webkit-text-shadow: 5px 5px 15px 5px rgba(0,0,0,0.8);
}
.lp_box1 h5 {
letter-spacing: 1.1px;
font-weight: 300;
margin-bottom: 20px;
}
.lp-box2 {
height: 70px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.lp_box2 input {
width: 60%;
height: 70px;
border: none;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
font-weight: 300;
padding-left: 15px;
-webkit-box-shadow: 0px 0px 24px 0px rgba(255,255,255,0.81) inset;
-moz-box-shadow: 0px 0px 24px 0px rgba(255,255,255,0.81) inset;
box-shadow: 0px 0px 24px 0px rgba(255,255,255,0.81) inset;
}
.get_started_btn {
height: 70px;
margin-left: -3px;
width: 39%;
font-size: 30px;
border: none;
border-left: 2px solid grey;
font-weight: 300;
color: white;
background-color: red;
text-decoration: none;
}
<div class="landing_page">
<div class="landing_page_block">
<div class="lp_box1">
<h1 class="landing_page_h1">Unlimited films, TV programmes and more.</h1>
<h3 class="landing_page_phrase">Watch anywhere. Cancel at any time.</h3>
<h6>Ready to watch? Enter your email to create or restart your membership.</h6>
</div>
<div class="lp_box2">
<input type="email" name="email" placeholder="Email address"/>
<button class="get_started_btn">Get Started </button>
</div>
</div>
</div>
The result of my code
I hope that's how you wanted your alignment to be
.landing_page_block {
margin-top: 220px;
text-align: center;
}
.landing_page_h1 {
font-size: 65px;
font-weight: 700;
letter-spacing: 1.2px;
text-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.8);
-webkit-text-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.8);
}
.landing_page_phrase {
font-weight: 300;
letter-spacing: 1.2px;
text-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.8);
-webkit-text-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.8);
}
.lp_box1 h5 {
letter-spacing: 1.1px;
font-weight: 300;
margin-bottom: 20px;
}
.lp_box2 {
display: flex;
align-items: center;
justify-content: space-around;
}
.lp_box2>.input-div{
height: 70px;
width: 62%;
}
.lp_box2>.input-div>input {
height: 70px;
width: 100%;
border: none;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
font-weight: 300;
padding-left: 15px;
-webkit-box-shadow: 0px 0px 24px 0px rgba(255, 255, 255, 0.81) inset;
-moz-box-shadow: 0px 0px 24px 0px rgba(255, 255, 255, 0.81) inset;
box-shadow: 0px 0px 24px 0px rgba(255, 255, 255, 0.81) inset;
}
.get_started_btn {
height: 70px;
width: 30%;
font-size: 30px;
border: none;
border-left: 2px solid grey;
font-weight: 300;
color: white;
background-color: red;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
}
<div class="landing_page">
<div class="landing_page_block">
<div class="lp_box1">
<h1 class="landing_page_h1">Unlimited films, TV programmes and more.</h1>
<h3 class="landing_page_phrase">Watch anywhere. Cancel at any time.</h3>
<h6>Ready to watch? Enter your email to create or restart your membership.</h6>
</div>
<div class="lp_box2">
<div class="input-div">
<input type="email" name="email" placeholder="Email address" />
</div>
<div class="get_started_btn">Get Started </div>
</div>
</div>
</div>
I am adding the following code to my CSS file for my parent div .outertContainer but the border-radius is only affecting the top two corners and not the bottom two corners. I cannot seem to figure it out. Everything else seems to work fine.
*{
background-color: white;
margin: 0;
padding: 0;
}
.outerContainer{
position: absolute;
border-radius: 9px;
top:23%;
right: 10%;
width:30%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 4px 14px 0 rgba(0, 0, 0, 0.17);
}
.input-form-control{
margin-top: 20px;
margin-left: 16px;
width: 80%;
padding: 16px 24px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: white;
line-height: 10px;
font-size: 16px;
}
::placeholder {
color: #99a3a4;
}
.submit-btn{
margin-top: 18px;
margin-left: 17px;
margin-bottom: 65px;
border-radius: 4px;
border: none;
color: white;
padding: 13px 20px;
width: 92%;
text-align: center;
text-decoration: none;
display: inline-block;
}
The following is the html code:
<div className="LoginPage">
<div className="outerContainer">
<form name="form">
<div className="emailLabelInput">
<input type="text" className="login-form-control" name="email" placeholder="Email address"/>
</div>
<div className="passwordLabelInput">
<input type="password" className="login-form-control" name="password" placeholder="Password"/>
</div>
<div className="form-group">
<button className="submit-btn">Log in</button>
</div>
</form>
</div>
</div>
Your problem is you have * { background: white; } which makes the background of all the elements white. Since the form is just as large as the outerContainer and does NOT have a border-radius, it effectively covers up the border-radius applied to the outerContainer. So you have two options to fix the problem:
1 — Remove * { background: white; }. This works for the most part except that the two inputs are still positioned in the top left corner of the outerContainer and of course still covering that corner. If you have those positioned a little differently, this would work.
2 — Add padding: 10px to the outerContainer. This will give the outerContainer a little bit of 'breathing room' and keep the form from covering the corners. See the snippet below.
*{
background:white;
margin: 0;
padding: 0;
}
.LoginPage{
height:100vh;
width:100vw;
}
.outerContainer{
padding:10px; /* Added to show radius */
position: absolute;
border-radius: 9px;
top:23%;
right: 10%;
width:30%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 4px 14px 0 rgba(0, 0, 0, 0.17);
}
.input-form-control{
margin-top: 20px;
margin-left: 16px;
width: 80%;
padding: 16px 24px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: white;
line-height: 10px;
font-size: 16px;
}
::placeholder {
color: #99a3a4;
}
#error-message{
border: 1px solid #ff7f50;
margin-top: 10px;
margin-left: 16px;
width: 80%;
padding: 16px 24px;
border-radius: 4px;
line-height: normal;
font-size: 15px;
}
.submit-btn{
margin-top: 18px;
margin-left: 17px;
margin-bottom: 65px;
border-radius: 4px;
border: none;
color: white;
padding: 13px 20px;
width: 92%;
text-align: center;
text-decoration: none;
display: inline-block;
}
<div class="LoginPage">
<div class="outerContainer">
<form name="form">
<div class="emailLabelInput">
<input type="text" class="login-form-control" name="email" placeholder="Email address"/>
</div>
<div class="passwordLabelInput">
<input type="password" class="login-form-control" name="password" placeholder="Password"/>
</div>
<div class="form-group">
<button class="submit-btn">Log In</button>
</div>
</form>
</div>
</div>
I am using React and try to build a website which allows you to analyze your twitter bubble. So, I have a form in which you can search for a twitter username. Thus, I put an "#" as a placeholder into this form, which disappears when you start typing. My goal is that the "#" stays when you start typing, so e.g. I could type "potus44" and it displays "#potus44" in this form (i hope this makes sense). So in the end, the "#" would not disappear but stay in front of the twitter handle.
See screenshot of my current form: Screenshot
This is the code for my form.
import React, { Component } from 'react';
import { FiTwitter } from "react-icons/fi";
const app = {
options: []
};
const onFormSubmit = (e) => {
e.preventDefault();
const option = e.target.elements.option.value;
if (option) {
app.options.push(option);
e.target.elements.option.value = '';
}
}
class Homepage extends Component {
render () {
return (
<div className="homepage">
<div className="container-pagecontent">
<main style={{marginTop: '150px'}}>
<h1 id="home" >Analyse your bubble! <FiTwitter size=".8em" /></h1>
<p>Search for your bubble.</p>
<form onSubmit={onFormSubmit}>
<input placeholder="#" className ="input" type="text" name="option"/>
<button className="button">Suchen</button>
</form>
</main>
</div>
</div>
)
}
}
export default Homepage
And this is my scss (in case it might be useful for you).
.button {
background-color: #1763A5;
font-family: bergen;
color: white;
border: 2px solid #1763A5;
padding: 6px;
font-size: 18px;
border-radius: 6px;
margin-left: 10px;
transition-duration: 0.4s;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
outline: none;
}
.button:hover {
background-color: white;
color: #1763A5;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
.input {
width: 150px;
}
input[type=text] {
width: 170px;
padding: 7px 10px;
margin: 12px 0;
margin-right: 2px;
box-sizing: border-box;
border: 2px solid #1763A5;
border-radius: 6px;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
outline: none;
}
and the code for the "container-pagecontent":
.container-pagecontent {
max-width: 95rem;
margin: 0 auto;
padding: 0 $m-size;
width: 100%;
text-align: center;
}
Thanks in advance for your help. Let me know if you need more insights into the project.
okay.
In styles.scss::
.homepage {
h1::before {
display: block;
content: " ";
margin-top: -150px;
height: 130px;
visibility: hidden;
pointer-events: none;
}
height: 110vh;
background-color: white;
padding-left: 40px;
padding-right: 40px;
}
#font-face {
src: url(/fonts/BergenText-Regular.otf);
font-family: bergen;
}
.button {
background-color: #1763A5;
font-family: bergen;
color: white;
border: 2px solid #1763A5;
padding: 6px;
font-size: 18px;
border-radius: 6px;
margin-left: 10px;
transition-duration: 0.4s;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
outline: none;
}
.button:hover {
background-color: white;
color: #1763A5;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
.placeholder{
position: relative;
}
.placeholder::after{
content: attr(data-placeholder);
position: absolute;
left:0.325rem;
top:33%;
}
input[type=text] {
width: 170px;
padding: 7px 0 7px 20px;
margin: 12px 0;
margin-right: 2px;
box-sizing: border-box;
border: 2px solid #1763A5;
border-radius: 6px;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
outline: none;
}
In App.js::
import React, { Component } from "react";
import "./styles.scss";
const app = {
options: []
};
const onFormSubmit = (e) => {
e.preventDefault();
const option = e.target.elements.option.value;
if (option) {
app.options.push(option);
e.target.elements.option.value = "";
}
};
class Homepage extends Component {
render() {
return (
<div className="homepage">
<div className="container-pagecontent">
<main style={{ marginTop: "150px" }}>
<h1 id="home">Analyse your bubble!</h1>
<p>Search for your bubble.</p>
<form onSubmit={onFormSubmit}>
<div className="placeholder" data-placeholder="#">
<input
className="input"
type="text"
name="option"
/>
</div>
<button className="button">Suchen</button>
</form>
</main>
</div>
</div>
);
}
}
export default Homepage;
I'm having some issues with my code.
I added this button to my HTML page and CSS with the styling of the button class and the hover effect:
.buton4e {
background-color: #383f95;
border: none;
border-radius: 8px;
color: white;
padding: 7px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
font-weight: bold;
cursor: pointer;
font-size: 16px;
}
.buton4e:hover {
background-color: #383f95;
border: none;
border-radius: 8px;
color: white;
padding: 7px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
font-weight: bold;
font-size: 16px;
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 40px 0 rgba(0, 0, 0, 0.19);
}
.intro-header {
padding-top: 40px;
padding-bottom: 40px;
text-align: center;
color: #f8f8f8;
background: url(../img/background.jpg) no-repeat center center;
background-size: cover;
}
.intro-message {
position: relative;
padding-top: 20%;
padding-bottom: 20%;
}
.intro-message>h1 {
margin: 0;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
font-size: 5em;
}
.intro-divider {
width: 400px;
border-top: 1px solid #f8f8f8;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.intro-message>h3 {
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
}
<!-- Header -->
<header class="intro-header">
<div class="container">
<div class="intro-message">
<br /><br /><br />
<h3>90% of IT companies believe they need to partner to grow.<br /> Join <b>Channeliser</b> - the global network for building IT partnerships.</h3>
<hr class="intro-divider">
<button class="buton4e">JOIN FOR FREE</button>
</div>
</div>
</header>
The problem is that the effect works when I hover the button but there when the button is static it has no styling
*EDIT:
Sorry for not posting all the code.
This should be sufficient for the things I'm trying to modify.
Thanks in advance.
.styledButton {
font-family: Arial;
width: 100px;
height: 50px;
color: black;
background-color: grey;
border: 0;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.styledButton:hover {
color: white;
background-color: black;
}
.styledButton:active {
opacity: 0.5;
}
<button class = "styledButton">Click Me!</button>
This should help. Any click animations I have trouble with.
Hopefully somebody can help me with my issue.
I'm trying to make my own website, but when I try to move one of the three individual boxes(see picture), all three of them move. three boxes issue
[The same issue also happens with the social icons box but I'm less concerned with that section]
I'm hoping someone can take a look at the code and hopefully tell me where I've gone wrong.
My Website Files
You have put position:block in your css. There is no position:block in css. You have to use display property to that. I have change your box div's css to display: inline-block; and made few changes in width too.(using calc).
#import url('https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed|Source+Sans+Pro');
#import url('https://fonts.googleapis.com/css?family=Poppins');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-image: url(../css/images/background/backgroundimage.jpg);
}
/* HEADERBAR */
div#headerbar {
width: 100%;
height: 50px;
display: inline-block;
background-color: rgba(237,87,82, 0.65);
font-family: 'Source Sans Pro', sans-serif;
box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 2px #000000;
-webkit-box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 6px #000000;
-moz-box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 6px #000000;
-o-box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 6px #000000;
}
.leftlogo {
float: left;
margin-top: 12px;
margin-left: 15px;
color: #fff;
text-shadow: 1px 1px 1px #000;
font-size: 20px;
font-family: 'roboto+condensed', sans-serif;
}
.leftlogo span {
font-weight: 300;
color: rgba(237, 87, 82, 0.8);
font-size: 20px;
font-family: 'roboto', sans-serif;
}
.version {
float: right;
margin-top: 14px;
margin-right: 10px;
}
/* CODE TEST */
.box {
width: 40%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 21px/40px;
background-clip: padding-box;
text-align: center;
}
.button {
margin-top: 10px;
font-size: 1em;
padding: 14px;
color: #fff;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
font-family: 'Source Sans Pro', sans-serif;
}
.button:hover {
background: rgba(255, 255, 255, 0.3);
border: 3px solid #000;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #000;
border-radius: 5px;
border: 5px solid #126b72;
width: 70%;
position: relative;
transition: all 5s ease-in-out;
color: #fff;
font-family: 'Roboto Condensed', sans-serif;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#media screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
div#updatesbox {
width: 900px;
height: 40px;
background-color: #000;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 2px #000000;
}
.updatesbox1 {
width: 443px;
height: 30px;
background-color: rgba(255, 255, 255, 0.2);
display:inline-block;
margin-top: 5px;
margin-left: 5px;
box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 2px #000000;
-webkit-box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 6px #000000;
-moz-box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 6px #000000;
-o-box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 6px #000000;
}
.updatesbox2 {
width: 443px;
height: 30px;
background-color: rgba(255, 255, 255, 0.2);
float: right;
display: inline-block;
margin-top: 5px;
margin-right: 5px;
box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 2px #000000;
-webkit-box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 6px #000000;
-moz-box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 6px #000000;
-o-box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 6px #000000;
}
.twitter {
float: left;
margin-top: 7px;
margin-left: 40px;
}
.tweet {
color: white;
}
.facebook a {
color: rgba(273, 87, 84, 1);
text-decoration: none;
font-family: 'Poppins', sans-serif;
}
.facebookicon {
margin-left: 5px;
margin-top: 7px;
}
.steam a {
color: rgba(273, 87, 84, 1);
text-decoration: none;
font-family: 'Poppins', sans-serif;
}
.steamicon {
margin-left: 5px;
margin-top: 7px;
}
.instagram a {
color: rgba(273, 87, 84, 1);
text-decoration: none;
font-family: 'Poppins', sans-serif;
}
.instaicon {
margin-left: 5px;
margin-top: 7px;
}
.tweet a {
color: rgba(237, 87, 84, 1);
text-decoration: none;
font-family: 'Poppins', sans-serif;
}
/* ALTERNATING TEXT */
#tickertape{
display: block;
margin-left: 600px;
margin-right: auto;
margin-top: 14.5px;
text-align: center;
width:400px;
height:20px;
}
.tickertape {
display: block;
margin-top: 6px;
margin-left: 20px;
margin-right: auto;
color: #000;
}
#subtickertape{
position:absolute;
width:443px;
height:20px;
}
.subtickertapefont{
font:bold 12px Verdana;
text-decoration:none;
color: rgba(237, 87, 84, 0.6);
text-shadow: 2px 2px 2px #000;
}
.subtickertapefont a{
color:white;
text-decoration:none;
}
/* BODY CONTAINER BOX */
div#bodycontainer {
margin-top: 20px;
margin-left: auto;
margin-right: auto;
background-color: rgba(237, 87, 84, 0.3);
width: 90%;
height: 800px;
border: 2px dashed #000;
}
#bodycontainer #insidebox {
display: inline-block;
float: left;
width: calc(32.3% - 7.5px);
height: 500px;
margin: 15px;
margin-top: 70px;
background: rgba(237, 87, 84, 0.2);
border: 2px dashed #000;
}
#bodycontainer #centerbox {
display: inline-block;
float: left;
width: calc(32.3% - 7.5px);
height: 400px;
margin: auto;
margin-top: 200px;
background: rgba(255, 255, 255, 0.2);
border: 2px dashed #000;
}
#rightbox {
display: inline-block;
float: left;
width: calc(32.3% - 7.5px);
height: 710px;
margin: auto;
margin-top: 0px;
background: rgba(237, 87, 84, 0.2);
border: 2px dashed #000;
margin-left: 15px !important;
}
change your stylesheet.css to this and then you can move each box individually. Hope this helps you.