I need to design an HTML page that resembles the image linked below, but without relying on any images.
I need to design an HTML page that resembles the image linked below, but without relying on any images.
HTML5 includes a concept called SVG (Scalable Vector Graphics).
Below is the code for creating a slanted line 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>
The output will look like this:
https://i.sstatic.net/qTmM5.png
For more detailed explanations and tutorials on SVG, check out this link.
To draw an outer square, you can use SVG Paths.
What you desire can be found right here,
achieve it through html and css:
Utilizing 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>
Expect this to provide some assistance for you!!!
Thanks to everyone for your help, I was able to come up with a solution. Take a look at it below.
<!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>This could be beneficial for you. https://i.sstatic.net/WzMmZ.png
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>
In order to enhance reusability, I structured my Angular 6 Project into multiple modules. These modules have a reference to a ui module that contains all the style sheets (SASS) as values such as: $primary-text-color: #dde7ff !default; Although this app ...
I'm struggling to achieve responsiveness with the FAQ Accordion on my website. When it initially loads collapsed, the space where it should expand appears blank. I need it to dynamically adjust and create more room when opened up. Additionally, when a ...
After making the switch from awesome-typescript-loader to babel-loader, I encountered an issue with an npm package we rely on - lodash-inflection. Uncaught TypeError: this.pluralize is not a function at pluralize (lodash-inflection.js:68) Here is a compa ...
Currently, I am utilizing Google Apps Script to create customized reports within Google Sheets. Within my spreadsheet, there is a column consisting of numbers that I would like to transform into hyperlinks. The URL for each hyperlink is mostly the same, wi ...
I am looking to display an HTML file with embedded CSS, fonts, and JS (not linked but the content is inside). I have the CSS and fonts sorted out, but I am struggling to find a solution for the JavaScript. My project is based on Node.js. ...
I am working with a large string that is displayed in a text area. The string is divided into lines using \n, and new lines are continuously added as the program executes. In order to prevent the program from slowing down or causing the browser to cr ...
When I click a button, I am able to get the correct value of AudioTracks.length. However, without clicking the button, I am unable to retrieve this value. Take a look at my code below. It works at line (B) but not at (A). Can you help me understand why and ...
Can someone help me with an issue I am facing with a contact form in my HTML file? The form code is as follows: <form action="/contact" method="post"> <input type="text" name="name" id="" placeholder="Name"> <input type="email" name ...
While working on the frontend using React.js, I utilized the Javascript SDK for file uploads to my S3 bucket with my AWS root account. Despite following the official documentation, I consistently received a 403 Forbidden error. To resolve this issue, if yo ...
I am working on a project where I need to display data fetched from MongoDB using Node.js in a web browser. The data is stored in the 'docs' object and I want to pass it to an EJS file so that I can insert it into a table: var express = require( ...
What is the correct way to write the HTML break tag "<br>" in JavaScript without it causing a line break? I want the tag to be displayed as text. For example, "the break tag in html is ..." See below for an example of what I am looking for. <scr ...
I'm facing an issue with my NextJS application that showcases a list of audio tracks using an <AudioTrackEntry> component. This component receives props like the Track Title and a Link to the audio file from an external data source. Within the ...
Essentially, I have developed a server that responds to user requests by sending a JS file in object format. This JS file is generated using two configuration files named config1.js and config2.js. Below is my code snippet: var express = require('ex ...
In the repository below, you will find a library named posts-lib. This library contains a file named posts.services.ts which is responsible for making http calls and retrieving a list of posts to display on the screen. Additionally, there is a component na ...
Working on a React + Redux project to create a web app that communicates with an API, similar to the example provided at https://github.com/reactjs/redux/tree/master/examples/real-world. The API I'm using returns lists of artists, albums, and tracks, ...
My SVG component is currently responsive. However, I am looking to maintain a fixed height of 352px for the SVG while allowing the width to decrease when resizing the window. This way, users can still view my SVG images even as they resize the window. Doe ...
Users can input a date within a specified range in an input field. To enable this feature, I created a new method using the jQuery validator object: $.validator.addMethod("dateRange", function(value, element, from, to){ try { var date = new D ...
I'm attempting to clear the fields in my object (collectionFilter) from local storage using localStorage.removeItem('collectionFilter'). All fields are removed, except for the date fields. Please note that I am new to JavaScript and Angular. ...
I am working with a dropdown list that is populated from an API call. Here is my code snippet: <label>User Code:</label> <select ng-options="c as c.User for c in userList" ng-model="selectedUser" id="search3"> </select> To fet ...
Trying to comprehend the discrepancy between two CSS rules, I am currently reviewing this HTML file. <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>specificity</title> <!--[if lt IE 9]> <s ...