I want to create HTML page which should look like this, but without using image
There is a concept SVG (Scalable Vector Graphics) in HTML5.
Inclined Line
Code for drawing Incliented line is given below using SVG.
<svg height="210" width="500">
<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>
Output will be
See More explanations and tutorial on SVG
Outer Rectangle
For drawing outer rectangle use SVG Paths
What you want is exact here,
option through html and css:
HTML and css:
<!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">
<title>-Index</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
<style>
.cust-well{
border: 1px solid #ccc;
border-radius: 0;
float: left;
min-height: 350px;
width: 100%;
position:relative;
}
.first-text {
float: left;
font-weight: 700;
}
.second-text {
bottom: 37px;
position: absolute;
right: 50px;
}
.lt-line {
border-top: 2px solid #000;
left: 0;
position: absolute;
top: 0;
width: 50%;
}
.lt-line2 {
border-top: 2px solid #000;
left: 0;
position: absolute;
bottom: 0;
width: 40%;
}
.lt-line3 {
border-top: 2px solid #000;
right: 0;
position: absolute;
bottom: 0;
width: 50%;
}
.lt-line4 {
border-top: 2px solid #000;
right: 0;
position: absolute;
top: 0;
width: 40%;
}
.cust-well {
border-color:white #000 white;
border-style:none solid;
border-width:2px;
float: left;
min-height: 350px;
position: relative;
width: 100%;
}
.cust-well::after {
border: 1px solid #000;
content: "";
height: 390px;
left: 50%;
position: absolute;
top: -20px;
transform: rotate(9deg);
}
</style>
</head>
<body>
<div class="container-fluid" style="margin-top:200px;">
<div class="container">
<div class="col-sm-6 col-sm-offset-3">
<div class="well cust-well">
<span class="lt-line"></span>
<span class="lt-line2"></span>
<span class="lt-line3"></span>
<span class="lt-line4"></span>
<div class="first-text">
<h2>Hello</h2>
</div>
<div class="second-text">
<h2>Hi</h2>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Hope this will help you!!!
Thankyou everyone I came up with a solution, check it out.
<!DOCTYPE html>
<html>
<body>
<svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 1280 720">
<polyline points="708,30 30,30 30,660 462,660" style="fill:none;stroke:black;stroke-width:3" />
<text x="140" y="140" fill="black" font-size="70" font-weight="bold">Hello</text>
<polyline points="768,0 512,720" style="fill:none;stroke:black;stroke-width:3" />
<text x="1100" y="530" fill="black" font-size="70" font-weight="bold">hi</text>
<polyline points="828,60 1250,60 1250,690 572,690" style="fill:none;stroke:black;stroke-width:3" />
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
It may be useful to you.
demo.html
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="lolkittens" />
<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
<title>Untitled 4</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid
#000000;">
</canvas>
</body>
</html>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello",8,30);
ctx.fillText("hi",165,90);
ctx.beginPath();
ctx.moveTo(115,0);
ctx.lineTo(-1000,3000);
ctx.stroke();
</script>
Related
I am a beginner at coding and am self taught. However, I am finding things I am unsure of how to do but are probably really easy to achive but I need some help please.
I have been looking at this website: https://megans.co.uk/
My first question is:- for all the buttons how to they achieve the custom border with the 2 x circles in the corner?
My second question:- For the hero image slider, what would be the code to link the buttons to the image slider?
Sorry if this is very basic.
Thanks
S
For the circle at border of buttons use before and after selector.
<!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" />
<title>Document</title>
</head>
<style>
div {
padding: 50px;
background: #ccc;
}
.border {
position: relative;
border: 1px solid #ffffff;
background-color: transparent;
padding: 20px;
color: #000;
}
.border::after,
.border::before {
transition: all 500ms;
content: "";
display: block;
position: absolute;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #ffffff;
}
.border::after {
bottom: -3px;
right: -3px;
}
.border::before {
top: -3px;
left: -3px;
}
</style>
<body>
<div>
Book now
</div>
</body>
</html>
and for slider button i think they are using jQuery with trigger like
$('.left-button').click(function() {
MySliderClass.trigger("prev.owl.carousel");
})
$('.right-button').click(function() {
MySliderClass.trigger("next.owl.carousel");
})
Start tag head seen but an element of the same type was already open.
also I got some other errors:
" Saw <?. Probable cause: Attempt to use an XML processing instruction in HTML. (XML processing instructions are not supported in HTML.) "
and
" No p element in scope but a p end tag seen. "
I have no clue how to fix them.
<!DOCTYPE html>
<html lang="pl">
<style>
html, body { margin: 0; padding: 0; color: black; background-color: grey;}
#strona { position: absolute; color: white}
#rects { position: relative; width: 300px; height: 125px; border: 1px solid #FF0000; color: yellow; margin: 5px; padding: 2px;}
</style>
<head>
<meta charset="UTF-8"/>
<title> site</title>
</head>
<body>
<div> <script>
function clickbutton1(){
document.getElementById("opis").innerHTML = Date();
}
</script>
</div>
<div id="strona">
<h1>test</h1>
<?php
echo "<p>data replacement</p>";
echo "<div id='rects'>
<!-- starting of the function -->
<p id='opis'> internal description </p>
<script>
document.getElementById('rects').onclick = clickbutton1;
</script>
</div>";
?>
</div>
</body>
</html>```
There were some added characters under div#strona that were interfering with how the code was being run.
In order to make the Javascript functional, add the clickbutton1() onclick function directly to the HTML element.
Below is the reformatted code with HTML/CSS/Javascript in their own respective files:
function clickbutton1() {
return document.getElementById("opis").innerHTML = Date();
}
html,
body {
margin: 0;
padding: 0;
color: black;
background-color: grey;
}
#strona {
position: absolute;
color: white
}
#rects {
position: relative;
width: 300px;
height: 125px;
border: 1px solid #FF0000;
color: yellow;
margin: 5px;
padding: 2px;
}
<head>
<meta charset="UTF-8" />
<title> site</title>
</head>
<body>
<div id="strona">
<h1>test</h1>
<div onclick="clickbutton1()" id='rects'>
<p id='opis'></p>
</div>
</div>
</body>
#weemizo Yes! I added the CSS styles to a style tag and the JS into a script element. They are now both placed in the head tag.
<html>
<head>
<meta charset="UTF-8" />
<title>Site</title>
<style>
html,
body {
margin: 0;
padding: 0;
color: black;
background-color: grey;
}
#strona {
position: absolute;
color: white
}
#rects {
position: relative;
width: 300px;
height: 125px;
border: 1px solid #FF0000;
color: yellow;
margin: 5px;
padding: 2px;
}
</style>
<script>
function clickbutton1() {
return document.getElementById("opis").innerHTML = Date();
}
</script>
</head>
<body>
<div id="strona">
<h1>test</h1>
<div onclick="clickbutton1()" id='rects'>
<p id='opis'></p>
</div>
</div>
</body>
</html>
I have created a hover effect like whenever you hover on the box you will see a circle (actually it is a div with position: absolute whose clip-path position is controlled by Javascript offset) and when this circle reaches the second paragraph element it jumps to the top.
So I wanna know why it's happening and how to make the circle move consistently throughout the box without giving a jerk or moving to the top.
Here is my code
let container = document.querySelector(".container")
let secondDiv = document.querySelector(".test")
secondDiv.addEventListener("mousemove",function(e){
secondDiv.style.setProperty("--x",e.offsetX + "px")
secondDiv.style.setProperty("--y",e.offsetY + "px")
//console.log(e.offsetX)
})
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
.container{
width:70%;
margin: 0 auto;
border:2px solid red;
height:150px;
position:relative;
background: #9F86C0;
color:white;
margin-top: 10%;
}
.container p{
font-size:2.3em;
}
.container .content{
position: absolute;
top:0;
left:0;
width: 100%;
height:150px;
padding:1em;
}
.container .content:nth-child(2){
background: #E0B1CB;
color:white;
clip-path:circle(50px at var(--x) var(--y))
}
<!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">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="content check">
<p>Hello People hover me</p>
<p>What's going on?</p>
</div>
<div class="content test">
<p>Hello People hover me</p>
<p>What's going on?</p>
</div>
</div>
</body>
</html>
Since there are two paragraphs in place, the mouse movement triggers to choose the paragraph over the parent. You can choose to turn off the trigger using pointer-events: none on the paragraph elements.
let container = document.querySelector(".container")
let secondDiv = document.querySelector(".test")
container.addEventListener("mousemove", function(e) {
secondDiv.style.setProperty("--x", e.offsetX + "px")
secondDiv.style.setProperty("--y", e.offsetY + "px")
//console.log(e.offsetX)
})
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
.container {
width: 70%;
margin: 0 auto;
border: 2px solid red;
height: 150px;
position: relative;
background: #9F86C0;
color: white;
margin-top: 10%;
}
.container p {
font-size: 2.3em;
pointer-events: none; /* Added */
}
.container .content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 150px;
padding: 1em;
}
.container .content:nth-child(2) {
background: #E0B1CB;
color: white;
clip-path: circle(50px at var(--x) var(--y))
}
<!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">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="content check">
<p>Hello People hover me</p>
<p>What's going on?</p>
</div>
<div class="content test">
<p>Hello People hover me</p>
<p>What's going on?</p>
</div>
</div>
</body>
</html>
I just want to play the mp3 when the image tracking is turned on, and stop the sound when it's off. I have no idea how to do it with a-nft...This one is image tracking with AR.js.
I think I need to add script to check out whether the image tracking is on and off. please give me any advice. Thanks.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sample: AR.js with Image Tracking</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/gh/aframevr/aframe#1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
</head>
<body>
<div class="arjs-loader">
<p>
Now Loading...<br>
Please prepare the marker image :)
</p>
</div>
<a-scene
vr-mode-ui="enabled: false;"
renderer="logarithmicDepthBuffer: true;"
embedded
arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;"
>
<a-nft
type="nft"
url="image path"
smooth="true"
smoothCount="10"
smoothTolerance=".01"
smoothThreshold="5"
>
<a-sound src="path/to/sample.mp3" autoplay="false"></a-sound>
</a-nft>
<a-entity camera></a-entity>
</a-scene>
<script>
</script>
<style>
body {
font-family: helvetica, arial, sans-serif;
margin: 0;
overflow: hidden;
}
.arjs-loader {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.8);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
.arjs-loader p {
text-align: center;
font-size: 1.25em;
color: white;
}
</style>
</body>
</html>
You can give your a-sound an ID if you declare it in the assets and then call it in your actually a-sound. Then you can have an automatic script that will play and pause. This script may need a bit of tweaking but should work:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sample: AR.js with Image Tracking</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/gh/aframevr/aframe#1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
<script>
window.onload = function() {
AFRAME.registerComponent('shoundhandler', {
init: function () {
var marker = this.el;
this.sound = document.querySelector("#sound");
marker.addEventListener('markerFound', function () {
this.sound.play();
}.bind(this));
marker.addEventListener('markerLost', function() {
this.sound.pause();
this.sound.currentTime = 0;
}.bind(this));
}
});
};
</script>
</head>
<body>
<div class="arjs-loader">
<p>
Now Loading...<br>
Please prepare the marker image :)
</p>
</div>
<a-scene
vr-mode-ui="enabled: false;"
renderer="logarithmicDepthBuffer: true;"
embedded
arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;"
>
<a-assets>
<a-asset-item src="path/to/sample.mp3"
preload="false" id="sound" response-type="arraybuffer" loop
crossorigin webkit-playsinline autoplay="false" playsinline>
</a-asset-item>
</a-assets>
<a-nft
type="nft"
url="image path"
smooth="true"
smoothCount="10"
smoothTolerance=".01"
smoothThreshold="5"
>
<a-sound src="#sound"></a-sound>
</a-nft>
<a-entity camera></a-entity>
</a-scene>
<script>
</script>
<style>
body {
font-family: helvetica, arial, sans-serif;
margin: 0;
overflow: hidden;
}
.arjs-loader {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.8);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
.arjs-loader p {
text-align: center;
font-size: 1.25em;
color: white;
}
</style>
</body>
</html>
Sorry to ask but I have searched but coming up with nothing.
I have some divs ( I know everyone has a 'div' ) and I want to add feeds\content
See my code below, in these 'widgets' can I add things like twitter and my email and a news feed?
also not to be too picky, can I just get text only ?
How do I go about it ? Is their something
here is the html, jquery and css code...
<!doctype html>
<html lang="en">
<head>
<title>snap to grid</title>
<meta charset="utf-8">
<meta name="description" content="nothing yet">
<meta name="author" content="Pavle Stojanovic">
<link rel="stylesheet" href="snap.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$( ".widgets" ).draggable({ grid: [ 10, 10 ] });
$( ".widgets" ).draggable({
containment: "#draggable-container",
drag: function(event){
if($('.widgets').position().left + $('.widgets').width() == $('.body-container').width()){
event.preventDefault(); //cancel the drag.
console.log('d');
}
}
});
});
</script>
</head>
<body>
<div class="body-container">
<div id="draggable-container">
<div id="widget-1" class="widgets"><p>Twitter</p></div>
<div id="widget-2" class="widgets"><p>Weather</p></div>
<div id="widget-3" class="widgets"><p>News</p></div>
<div id="widget-4" class="widgets"><p>Email</p></div>
</div>
</div>
</body>
</html>
html, body{
background-color: #2196F3;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#widget-1{
background-color: blue;
}
#widget-2{
background-color: purple;
}
#widget-3{
background-color: orange;
}
#widget-4{
background-color: green;
}
.widgets{
border-radius: 25px;
padding: 20px;
width: 150px;
height: 200px;
}
#draggable-container{
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 1px solid black;
width:90%;
height:90%;
}