I have an approach for constructing a website like codewars.com or challenge coding. in addition, the programmers who want to make money as coding can be answering tests and get a dollar. so I have questions about this startup.
is possible that to using flask or Django frameworks to creating a challenging coding website?
which front-end web framework must be used in the project?
what can I do for improving the speed of a website like code wars?
What's your opinion about the securing?
I need to know where does the ecommerce websites store their images. We can get the product information from the databases but can we store the image in databases?
<script type="text/javascript">
//this will make it appear
function showPicture() {
var sourceOfPicture = "img/tierlist.jpg";
var img = document.getElementById('tierlist')
img.src = sourceOfPicture.replace('90x90', '225x225');
img.style.display = "block";
}
// this will remove the picture
function removePicture() {
var image_x = document.getElementById('tierlist');
image_x.parentNode.removeChild(image_x);
img.style.display = "block";
}
</script>
I want it to have an infinite amount of clicks and not just a one and done button, how do I do it?
I post this here because I have a problem with my excel file when I try to read it. The excel is a time-table from where I work and I'd like to be able to upload it on my website and the treat the data. Here is what the excel looks like : Visual of the timetable excel and when you watch inside the box there is just the hour written with the format HH:MM:SS as shown here : Show of what are in the boxes. So I upload my excel via an input and I get it clearly and have no problem with it. Then I give it to a function where I use the XLSX package and try to treat the data but the problem is that instead of a raw text showing the hour (which I could then treat easily) I get these weirds float numbers which I don't even know the logic behind how it's calculated.What I get after the excel go through XLSX package Moreover, you can clearly see here that not all the hours are converted to these floats. Here is my code :
getFile(ev) {
let workBook = null;
let jsonData = null;
const reader = new FileReader();
const file = ev;//.target.files[0];
console.log(file);
reader.onload = (event) => {
const data = reader.result;
workBook = XLSX.read(data, { type: 'binary', raw:true, WTF:true});
console.log(workBook);
jsonData = workBook.SheetNames.reduce((initial, name) => {
const sheet = workBook.Sheets[name];
initial[name] = XLSX.utils.sheet_to_json(sheet);
return initial;
}, {});
const dataString = JSON.stringify(jsonData);
}
reader.readAsBinaryString(file);
}
So here I need your help I already tried putting all sort of options in the read function as shown in the documentation but it didn't make a change not even the raw option which I believed was the chosen one.I post this here as a last hope and pray someone will be able to help me. Have a nice day guys and good code !
I have two websites abc and dashboard-abc. I log in from abc and get an authentication token and I try to use it on dashboard-abc. But the token saved on localStarge or cookies on abc is not accessible on dashboard-abc. Is there any possible way that I can access the authentication token from one website to another?
Problem - want to show multiple errors when they occurred on this password field. I am using vee-validation and vee-validation/rules but the bails prop is not working at all I tried searching other places but didn't get what is happening here...
password: 'required|min:5',Configs
Current Output
Expected Output
Note: other than the code below I already defined all the important methods and the only problem occurs with the password field. I already used the bails props.
This is the code I am using
<template>
<!-- Registration Form -->
<vee-form v-show="!isLoginTab" :validation-schema="schema" @submit="register">
<!-- Password -->
<div class="mb-3">
<label class="inline-block mb-2">Password</label>
<vee-field v-bind:bails="false" name="password" v-slot="{ field, errors }">
<input type="password" v-bind="field"
class="block w-full py-1.5 px-3 text-gray-800 border border-gray-300 transition
duration-500 focus:outline-none focus:border-black rounded"
placeholder="Password"/>
<div class="text-red-600"
v-for="error, index in errors" :key="index"></div>
</vee-field>
</div>
</vee-form>
</template>
<script>
export default {
name: 'app-authModel',
data() {
return {
schema: {
name: 'required|min:3|max:20|alpha_spaces',
email: 'required|min:3|max:50|email',
age: 'required|between:18,100|numeric',
password: 'required|min:5',
confirm_password: 'confirmed:@password',
country: 'required|included:USA,Mexico,Germany',
tos: 'required',
},
};
},
};
</script>
I'm new to vuejs and I've been trying to figure out how to take selfie pictures. Presently I have a video and canvas component within a div that yields a camera stream. The stream stops and a picture is shown when the snap button is clicked.
I wish to add functionality that allows me to click the retake button and have the live video feed of myself come back and the old picture be discarded from the canvas. I have tried to use key binding of the variable retake to re-render the video and canvas components upon the call of the retakePicture method, but this does not seem to work.
The code snippets for video, canvas, snap, and retake are below: -
<video v-show="showVideo" :key="retake" id="video" ref="video" autoplay class="feed">
</video>
<canvas v-show="!showVideo" :key="retake" id="canvas" ref="canvas" class="canvas">
</canvas>
<button class="snap" v-if="!showVideo" :key="retake" v-on:click="retakePicture">
<p><span class="justify-content: top">Retake</span></p></button>
<button class="snap" v-if="showVideo" :key="retake" v-on:click="takePicture">
<p><span class="justify-content: top">Snap</span></p></button>
Below are the functions takePicture and retakePicture, keep in mind showVideo is initialised to true when the page is first rendered. Besides these there's a standard init() method that initialises the video stream using the navigator.mediaDevices.getUserMedia(...) function.
takePicture() {
console.log("TAKE PICTURE");
let context = this.$refs.canvas.getContext('2d');
this.$refs.canvas.setAttribute('width', this.$refs.video.offsetWidth * 1.005)
this.$refs.canvas.setAttribute('height', this.$refs.video.offsetHeight)
context.drawImage(this.video, 0, 0, this.video.videoWidth, this.video.videoHeight)
this.showVideo = false;
},
retakePicture(){
this.$refs.canvas.getContext('2d').clearRect(0, 0, this.video.offsetWidth, this.video.offsetHeight)
this.retake = !this.retake
console.log("retake")
this.showVideo = true
}
Screen before picture is taken (ie snap is clicked) Screen after picture is taken (ie after snap is clicked)
I read an article in : https://dev.to/vlence/do-you-really-need-javascript-3d7a
Here the author explains that google search box core functionality will work without javascript but for auto-suggestions as you type feature, javascript is required. My question is : can't we implement this feature without javascript theoretically however inefficient it is. For more elaboration on my question, please read the comment I posted on the article -- the only comment:
"I have a question out of curiosity. Say theoretically speaking, we wanted to implement Google's auto suggestion without javascript. Is it technically possible however inefficient it is??. Like on pressing a character on search box, the browser can send again request to server and server could send back the new page's html content with suggestions list. Is it theoretically possible when say for a minute we are not concerned about efficiency."
i just built a flutter web app using Firebase phone auth, during running the web app and debugging the re-captcha worked normally and i received OTP password via SMS, but when i released version (web) and deployed it on local server, the re-captcha didn't show up and that's why i didn't receive the OTP SMS
so what the problem would be if it's showing up normally during debugging and not showing up with release?
does someone have the best documentation to create a website with button, form, compute, for Odoo 14 developper ?
I'm asking this question because Odoo 14's documentation was made with lot of error and it's not possible to learn properly
Thank you
Regards
I can access my company website's main page. But when i click on any subpages, it show 127.0.0.1 refused to connect. The domain auto change it to localhost.
When I clicked on the https://ift.tt/3vF6XtX link, it redirect to https://ift.tt/3vCybRP.
This website has been deployed many years, but just happened this issue.
The GDPR (General Data Protection Regulation) is more frequently known applies to the personal data that is defined as Personally Identifiable Information (PII), which might be used to directly or indirectly recognize a particular individual. Some examples of individual data consist of a person's:
· Name
· Address
· Email ID
· Phone Number
· Bank Details
· Credit Card Data
· Date of Birth
· IP Address
· Employment Details
· Medical Information
· Social Security Number
GDPR is the EEA explicit regulation, therefore it applies to the EU citizens. In case, you scrape personal data of the residents of some other countries (ex. Canada, Australia, US, etc.) then GDPR might not get applied. You just have to deal with data protection laws of the jurisdiction, which you scrape personal details from.
Under GDPR for using or holding personal details of any EU citizens, a company has to deal with the given legal reasons to store or use their individual data, else they would be in breach of regulations. These five kinds of lawful reasons include:
· Consent: A data subject complied with us getting their data.
· Contract: - Personal details are needed for the performance of contracts with a data subject.
· Compliance: Essential for agreement with the legal obligations
· Important Interest, Public Interest, and Official Authority: Usually only valid for the state-run bodies whereas access to personal data is within the public's concern.
· Legitimate Interest: - Essential for legitimate interests
GDPR is possibly the most effective data protection law passed ever, as well as this will change away data gets scraped from websites forever.
In case, you want to start a data scraping project to scrape individual data from public sites as well as you need to make sure that it is GDPR-compliant, then you should hire a professional web scraping company.
maybe it's weird question. After a long time, I return to writing pages (just for fun). So that I can practice it, I try to make a website for my friends for free. I have two websites here and I want to ask you for your opinion on what I definitely messed up or what I could improve (whether in functionality, code or even design).
If such a question bothers someone, I will delete it. I just want to hear the opinions of people who move around longer. The Internet is full of instructions, but there are often errors in them and I would not like to remember them unnecessarily.
Web 1: http://webrosti.4fan.cz/
Web 2: http://4-bikers.cz/web2/index.html
Thanks for any tips.
I'm writing a website using Python flask. It has to read a csv file (an excel file saved as csv), do some calculations there, and I need to show the actual table and the results on the website. How do I write the functions in the html file? I need to write them in the places where it says "some table". here's my html file:
<!doctype html>
<html lang="ru">
<link rel="stylesheet" href="">
<div class="container">
<nav class="navbar">
<ul>
<li><a href="#table">first</a></li>
<li><a href="#problems">second</a></li>
<li><a href="#rank">third</a></li>
<li><a href="#cheated">forth</a></li>
</ul>
</nav>
<section id="table">
<h1>1</h1>
<p class="lead"> some table</p>
</section>
<section id="problems">
<h1>2</h1>
<p class="lead">some table</p>
</section>
<section id="rank">
<h1>3</h1>
<p class="lead">some table</p>
</section>
<section id="cheated">
<h1>4</h1>
<p class="lead">some table</p>
</section>
</div>
</html>
here's my py file
from flask import Flask, render_template
from flask import url_for
from flask import make_response, request, redirect
import io
import csv
from io import TextIOWrapper
from flask_sqlalchemy import SQLAlchemy
app = Flask(__name__)
with open('testfinal.csv', 'r') as csv_file:
csv_reader = csv.reader(csv_file)
print(csv_reader)
@app.route('/')
def about():
return render_template("about.html")
if __name__ == "__main__":
app.run(debug=True)
I understand that the server send website components to the client after http request, HTML, CSS, Js and other static files that are necessary to build the website in the client browser.
I want to understand what the server actually do to generate the response since it should handle many requests not just one request??
I assume that the server create an instance from the files and send it to the client via http response?? is this right, wrong,inaccurate or incomplete or are there other processes that happen on the server to make it work??
There is a task to combine several different sites into a multisite:
How to unite all this and whether it makes sense in terms of speed and space on hosting.
I am making a blogging site in which I need to have seo for each and every sub domain(Blog Domain)
I am using AnimatedSize fade to switch between two screens. When I switch from screen 2 to screen 1, I get the error. Error image
Widget build(BuildContext context) {
return Container(
child: ScopedModelDescendant<Screen>(builder: (_, child, model) {
return AnimatedSizeAndFade(
vsync: this,
child: model.showScreen ? AddBrand() : DemoTableLatestNew(),
fadeDuration: const Duration(milliseconds: 300),
sizeDuration: const Duration(milliseconds: 600),
);
}),
);
}
like this website I want to add a body text like this website
I would like to make automatically a WFS buffer layer for a WFS point layer in OpenLayers. I am using WFS loaders for the Vector Layers.
Here is my layout
Container DIV is set to display flex - Column. Content section is set to flex 1. Header and Content sections are sized by their content and padding.
Content Section contains a table with dynamically generated content with varying number of rows.
The table needs to fit exactly between the header and footer with no vertical scrolling. I wrote a function to get the height of the content div, and then set the height of the table cell based on the number of rows resulting from the dynamic content.
The method I use seems a bit crude to me, and I wondering if there is a better, elegant, more professional way to do this. I am also interested in being able to pause or load a spinner while the dimensions of the content section div is determined by the JavaScript code.
Thank you.
Respected Developers I have an issue in web hosting. First of all, I would like to sorry you in advance as you may not be able to understand well because of my inexperienced English.
I have already prepared built react app and landing page of WordPress. What I want to do is when I type in the browser just like https://myapp.com, it goes to my WordPress landing page, then that landing page will have some links to the react app. So, WordPress page is only for the first encounter of my site, and all the contents will be shown by react. Godaddy domain name has already been bought. All left is to host 2 different apps to one domain. How can I do it without fail? Could you please tell me how to do it? I will be happy if someone helps me with the good opinion. Thanks in advance.
My problem is a simple one that I cannot figure out.
I want a table with the whole page being a cell, and when zooming out on a browser, I want the table border to get bigger/zoom out whatever works as long as the cell stays the same size.
I have a website on https I need to output the video images from the camera. There is an rtsp and mpeg stream in the form of an http link
So I recently found this awesome flask template on github: https://github.com/crearo/portfolio
When you go to the home page, it looks like this: http://www.rish.space/ and I think the terminal box with info being typed out on the left looks really cool.
However, I want to change what job, skills, and hobbies are listed to fit my personal info. I checked everywhere but I have no idea how to change that feature. Could someone please tell me which file I should change? I checked every one, but still have not found where. Thank you!!
Note: it's made with flask, python, html, css
im triying to open the camera for scan qr for my app, and when I install the apk on android, the camera does not open. I have the permissions enabled in the Android.manifest.xml
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.MICROPHONE" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.RECORD_VIDEO" />
I'm trying to center the container and I don't know why it doesnt work.
html, body {
height:100%}
.container{
min-height:20em;
width: fit-content;
background-color:#ffffff;
display:flex;
flex-direction:row;
align-items:center;
justify-content:center;
}````
The login form does not redirect to the next page"dashboard.php". All the file names are correct, I have tried several browsers and I have also tried some other solutions, but nothing has changed. I don’t know why this is happening, I don’t know what to do. I am using Php 8.0.1. Here is my login page code:
<?php
ob_start();
error_reporting(E_ALL);
ini_set('display_errors', TRUE);
session_start();
$pageTitle = 'Login';
if (isset($_SESSION['Username'])) {
header('Location: dashboard.php'); // Redirect To Dashboard Page
exit();
}
include 'init.php';
// Check If User Coming From HTTP Post Request
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$username = $_POST['user'];
$password = $_POST['pass'];
$hashedPass = sha1($password);
// Check If The User Exist In Database
$stmt = $con->prepare("SELECT
UserID, Username, Password
FROM
users
WHERE
Username = ?
AND
Password = ?
AND
GroupID = 1
LIMIT 1");
$stmt->execute(array($username, $hashedPass));
$row = $stmt->fetch();
$count = $stmt->rowCount();
// If Count > 0 This Mean The Database Contain Record About This Username
if ($count > 0) {
$_SESSION['Username'] = $username; // Register Session Name
$_SESSION['ID'] = $row['UserID']; // Register Session ID
header('Location: dashboard.php'); // Redirect To Dashboard Page
exit();
}
}
?>
<form class="login" action="<?php echo $_SERVER['PHP_SELF'] ?>" method="POST">
<h4 class="text-center">Admin Login</h4>
<input class="form-control" type="text" name="user" placeholder="Username" autocomplete="off" />
<input class="form-control" type="password" name="pass" placeholder="Password" autocomplete="new- password" />
<input class="btn btn-primary btn-block" type="submit" value="Login" />
</form>
<?php include $tpl . 'footer.php';
ob_end_flush();
?>
Does anybody knows about this? I'm having trouble in the code that has been given on me.
Server Error in '/' Application. Incorrect syntax near '1'. Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.
Exception Details: System.Data.SqlClient.SqlException: Incorrect syntax near '1'.
Source Error:
Line 21: string checkuser = "select count(*) from 1Database where StudentName='" + txtStudentName.Text + "'";
Line 22: SqlCommand cmd = new SqlCommand(checkuser, conn);
Line 23: int temp = Convert.ToInt32(cmd.ExecuteScalar().ToString());
Line 24:
Line 25: if (temp == 1)
Source File: C:\Users\orall\source\repos\DatabaseConnection\DatabaseConnection\loginpage.aspx.cs Line: 23
Stack Trace:
[SqlException (0x80131904): Incorrect syntax near '1'.] System.Data.SqlClient.SqlConnection.OnError(SqlException exception, Boolean breakConnection, Action1 wrapCloseInAction) +2582782 System.Data.SqlClient.SqlInternalConnection.OnError(SqlException exception, Boolean breakConnection, Action1 wrapCloseInAction) +6033430 System.Data.SqlClient.TdsParser.ThrowExceptionAndWarning(TdsParserStateObject stateObj, Boolean callerHasConnectionLock, Boolean asyncClose) +297 System.Data.SqlClient.TdsParser.TryRun(RunBehavior runBehavior, SqlCommand cmdHandler, SqlDataReader dataStream, BulkCopySimpleResultSet bulkCopyHandler, TdsParserStateObject stateObj, Boolean& dataReady) +4291 System.Data.SqlClient.SqlDataReader.TryConsumeMetaData() +59 System.Data.SqlClient.SqlDataReader.get_MetaData() +91 System.Data.SqlClient.SqlCommand.FinishExecuteReader(SqlDataReader ds, RunBehavior runBehavior, String resetOptionsString, Boolean isInternal, Boolean forDescribeParameterEncryption, Boolean shouldCacheForAlwaysEncrypted) +446 System.Data.SqlClient.SqlCommand.RunExecuteReaderTds(CommandBehavior cmdBehavior, RunBehavior runBehavior, Boolean returnStream, Boolean async, Int32 timeout, Task& task, Boolean asyncWrite, Boolean inRetry, SqlDataReader ds, Boolean describeParameterEncryptionRequest) +2698 System.Data.SqlClient.SqlCommand.RunExecuteReader(CommandBehavior cmdBehavior, RunBehavior runBehavior, Boolean returnStream, String method, TaskCompletionSource`1 completion, Int32 timeout, Task& task, Boolean& usedCache, Boolean asyncWrite, Boolean inRetry) +1611 System.Data.SqlClient.SqlCommand.RunExecuteReader(CommandBehavior cmdBehavior, RunBehavior runBehavior, Boolean returnStream, String method) +65 System.Data.SqlClient.SqlCommand.ExecuteScalar() +283 DatabaseConnection.loginpage.Page_Load(Object sender, EventArgs e) in C:\Users\orall\source\repos\DatabaseConnection\DatabaseConnection\loginpage.aspx.cs:23 System.Web.Util.CalliEventHandlerDelegateProxy.Callback(Object sender, EventArgs e) +52 System.Web.UI.Control.OnLoad(EventArgs e) +97 System.Web.UI.Control.LoadRecursive() +61 System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +693
I have added all the codes used which is bugging a lot
Below is the code
<div id="notCompleted">
<h3> Not Completed</h3>
<div class="tasks" id="1">
<input type="checkbox">
<label> I have a bike</label>
</div>
</div>
Below is JQuery
var taskNumber = 0;
function insertTask(d) {
if ($("#plainText").val() != '') {
$("#notCompleted").append('<div class="tasks" id="' + taskNumber + '">',
'<input type="checkbox">',
'<label>' + d + '</label>',
'</div>');
$("#plainText").val('');
taskNumber++;
console.log(taskNumber);
console.log(d);
}
}
Below is CSS
.tasks{
margin: 5px 5px;
border-radius: 5px;
background-color: rgb(141, 190, 145);
}
The app is like home page has images and if you click on the image , image details open up and i want to place the zip file in the details for others to download it. How to do that?
I want to create a timer layout. So, I am creating a flexbox that has four rectangles in it. And to rectangles, I applied flex-shrink-1, but it is not shrinking with the screen.
Here is my Html code
<!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>Stiks</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="../css/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap" rel="stylesheet">
</head>
<body>
<!----------------------------Banner section------------------------------->
<div class="section hero">
<div class="row align-middle">
<div class="col-lg-6 col-md-12">
<img class="img-fluid mx-auto d-block" src="../assets/download (10).jpg">
</div>
<div class="col-lg-6 col-md-12 my-auto">
<div class="d-flex flex-column flex-of-timer align-items-center align-items-lg-start">
<h2> starting in: </h2>
<div class="d-inline-flex timer flex-nowrap justify-content-between">
<div class="rect flex-shrink-1">
<h1>25</h1>
<p>DAYS</p>
</div>
<div class="rect flex-shrink-1">
<h1>25</h1>
<p>HOURS</p>
</div>
<div class="rect flex-shrink-1">
<h1>10</h1>
<p>MINUTES</p>
</div>
<div class="rect flex-shrink-1">
<h1>50</h1>
<p>SECONDS</p>
</div>
</div>
<button type="button" class="btn-main"> Start timer </button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>
Here is my css file
:root{
--yellow: #fff189;
--grey: #444444;
--off-white: #e6e6e6;
--blue: #047db1;
--pink: #6b093d;
--green: #ccf0a9;
--black: #000000;
}
h1{
font-size: 4.2em;
}
h2{
font-size: 1.75em;
}
*{
font-family: 'Poppins', sans-serif;
}
.section{
padding-right: 5vw;
padding-left: 5vw;
padding-bottom: 3em;
padding-top: 3em;
}
/*------------------------------------navigation bar------------------------------------*/
.navbar-custom{
background-color: var(--black);
}
.menu-bar{
position: sticky;
top: 0;
}
.navbar-custom .navbar-nav .nav-link{
font-size: 1;
color: var(--off-white);
margin: 0.5em;
}
.navbar-custom .navbar-nav .nav-link:hover{
color: var(--pink);
}
.navbar-brand img{
width: 3em;
height: auto;
margin-left: 0.5em;
}
.menu-bar .navbar .container-fluid{
padding-inline: 3.5em;
}
.navbar-toggler{
color: var(--off-white);
}
/*------------------------------------hero section------------------------------------*/
.hero{
min-height: 100vh;
background-color: var(--yellow);
}
.timer{
margin-bottom: 1em;
}
.rect{
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-right: 0.5em;
padding: 0.2em;
border-radius: 0.5em;
text-align: center;
color: var(--off-white);
background-color: var(--blue);
height: 6.5em;
width: 8em;
}
.rect h1{
font-size: 2.25em;
font-weight: 700;
}
.btn-main{
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.25);
border-style: none;
font-size: 1.1em;
border-radius: 00.5em;
background-color: var(--pink);
color: var(--off-white);
padding-top: 0.6em;
padding-bottom: 0.6em;
padding-right: 1.8em;
padding-left: 1.8em;
}
.btn-main:hover{
background-color: var(--grey);
}
Here is the snapshot of the problem, the rectangles are overflowing out of the screen. 
I have a basic question about websites/webapp. Typically websites/webapps have a html page which uses couple of css files and couple of javascript files. I am curious how all these files are sent from server to client browser. One simple but inefficient way could be that first server sends across html. Then, the client browser parses the html and figures out all the files/path/URL names of css,javascript files and then makes one request for each of this file. Then, the browser renders the webpage on the browser. This is inefficient, because the client is making multiple request for files which anyway it needs compulsorily. A better approach might be that in the first reponse itself, the server bundles together all these html,css,javascript files into one single response (may be the response stream would contain file name in header then file data, then delimiter, then file name, file data then again delimiter and so on). Both these solutions are just my guesses.
I am curious to know what is the technique being followed in practice. What does the structure of response look like etc.
Good morning,
I'm trying to write a simple web app with Spring and MVC, in the console it's all good but when I try to get the home page from the url the browser gives me the Whitelabel Error Page with error 404.
This is my controller:
package com.beanspring.controller;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import com.beanspring.model.Alimento;
import com.beanspring.model.GiornoDiDieta;
import com.beanspring.service.alimentoService;
import com.beanspring.service.giornoDiDietaService;
u/Controller
u/RequestMapping(value ="/dieta")
public class DietaController {
u/Autowired
alimentoService alService;
u/Autowired
giornoDiDietaService giornoService;
u/RequestMapping(value ="/home", method = RequestMethod.GET )
public String creaHome(Model model)
{
model.addAttribute("listaAlimenti", alService.getAllAlimenti());
System.out.println("ECCOMI");
return "Home";
}
}
Home.html is in src/main/resources/templates and it shows as I expect in a browser if I open it directly.
The Spring console shows no error and it even prints "ECCOMI", so the url "localhost:8080/dieta/home" gets the method.
This is my file POM, I feel the error is in there.
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="[http://maven.apache.org/POM/4.0.0](http://maven.apache.org/POM/4.0.0) [https://maven.apache.org/xsd/maven-4.0.0.xsd](https://maven.apache.org/xsd/maven-4.0.0.xsd)">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.5.0</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.slide</groupId>
<artifactId>dieta-2</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>dieta-2</name>
<description>Demo project for Spring Boot</description>
<properties>
<java.version>16</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jdbc</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.mariadb.jdbc</groupId>
<artifactId>mariadb-java-client</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
Will you help me, please?
Hello Stackoverflow community!
Is there any way, that every user has a unique header? For example that there is your wordpress-login name in the header and if you click on it the site redirects you to www.website.com/dashboard-WORDPRESLOGIN.
thanks.
Hi guys I'm trying to find an element in a website but for some reason it doesn't let me. The webpage is the login form of Reddit, I try to enter my username and my password but when I list all the inputs it only appears the top search bar. I suppose it is because It's like in another "tab" like that it pops up to the front but I don't know how to manage it. Thanks in advance.
from selenium import webdriver
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.common.by import By
chrome_options = webdriver.ChromeOptions()
prefs = {"profile.default_content_setting_values.notifications" : 2}
chrome_options.add_experimental_option("prefs",prefs)
driver = webdriver.Chrome(chrome_options=chrome_options)
driver.get('https://www.reddit.com')
driver.set_window_size(1200, 1300)
login_button = driver.find_element_by_link_text('Log In')
login_button.click()
username = driver.find_element_by_css_selector('input')
username.send_keys("test code to the form")
I am working on a test case visualizer where the user can run his code and check if it is correct. I'm using Node Js and I'm getting user's code from a text-area. Assuming that this is what I'm getting from the user:
function add(x,y){
return x+y;
}
And this is what I'm doing at the backend:
app.post("/main", function(req, res) {
console.log("hello");
var x = 1;
var y = 2;
req.body.code //missing
})
How can I use this input as a function and run it to get the values?
How to build a ReactJs Chat App that allows you to chat with anyone who is connected to the same Wifi using Ip address as the identification field.
Should i store the chat history in a database?
Does the ip address of a device change on disconnecting and reconnecting to the same WIFI?
If u can help me it would be a great deal for me cause i certainly feel confused on how to implement it.
I wish you a healthy day. I had one question. As you can see in the photo below, console.log contains the coordinates of the mouse on the photo. How can I write these coordinates as X, Y under the photo so that they will change instantly in the same way and appear on the page, not the console? At the same time, when clicked with the mouse, I want it to write the coordinates under it as a list, like a record. Thanks.
I am using these codes to write the coordinates on console.log :
let pos = getCursor()
console.log('pos:', pos)
The Screenshot of the screen and console : Screenshot
I want to change style of a particular li item when it is clicked how can I do that?
I already have .net core 3.1 web application. In one of the page (e.g. cshtml) I want to add react component like React chart (e.g. react-charts). Can someone please guide me.
Thanks
I have created a Google Cloud Platform (GCP) account with a domain name from Google Domains, registered with Google. I have created the project, bucket, storage, VM, and uploaded my personal website file(s) and folder(s) to propagate on for viewing. I believe that having followed all of the requested instruction(s) I should be able to view my website. I have also checked for the correct DNS server(s) and resource record(s) for my domain. In all cases when entering the information at the specified locations, I am informed that the information already exists or that there is a conflict error with my entry.
I am hoping that I can find the answers that I need as I have tried several times to contact Google support but to no avail. YouTube video(s) have provided some info but not resolving the issue.
Any assistance would be truly appreciated.
I have 100 categories and each category has its data stored into individual sql tables. I don't wanna create a web page for all categories and run sql query from each individual pages to fetch table data. Any function or method to link subsequent tables to the categories is needed. I want to load category data from the sql table into a div box when I click on the category. Php loop or ajax is preferred
Reference -:
Categories-:
A B C
Php query -:
Select * from table 1 Select * from table 2 Select * from table 3 ....x.....x.....x.....
When clicking on each category, data from linked table must be loaded into a div box. Link A to table1 Link B to table2 ......
I made sure this program works with other URL's, but for some reason when I try running it using this url (https://carmax.com/cars/all/), it doesn't load the url no matter how long I let it sit. Is it being blocked? Or what can I do. Thanks.
import csv
import urllib
import urllib.request
from urllib.request import Request, urlopen
from bs4 import BeautifulSoup
url = 'https://carmax.com/cars/all/'
req = Request(url)
req.add_header('User-Agent', 'Mozilla/5.0')
resp = urlopen(req)
soup = BeautifulSoup(resp, 'html.parser')
rows = soup.find('div', { 'class': 'car-container listing-container' }).find_all('div', attrs={ 'class': 'car-title' })
file = open('data.csv', 'w', encoding='utf-8', newline='')
writer = csv.writer(file)
# header row
writer.writerow(['yearmake', 'modeltrim', 'price'])
n = 0
for row in rows:
yearmake = row.find('span', attrs={ 'class': 'year-make' }).text.strip()
modeltrim = row.find('span', attrs={ 'class': 'model-trim' }).text.strip()
price = row.find('span', attrs={ 'class': 'price' }).text.strip()
writer.writerow([yearmake, modeltrim, price])
n = n + 1
print('COMPLETED ' + str(n) + ' ROWS OF DATA')
I am currently studying the transport layer of the TCP/IP model, in particular of the protocols that are used, TCP and UDP. The thing I don't understand is if we use the browser through a URL to request a resource from a web server for example playing a live stream so through an HTTP request, in this case, the protocol that is used is TCP instead of UDP, right? But on the other hand in the cisco course from which I am studying as well as the school books also states that the UDP protocol is used for Live Streaming, Multiplayer games, VOIP.
In this case which of the two protocols are we using? My doubt lies precisely in the fact that if the request that is made is a web request through a URL and therefore an HTTP request, how is UDP implemented since HTTP uses TCP?
I downloaded a code to practice making an eshop and i want to display 4 products instead of 3 products per row. I tried different ways of doing it but all have failed so far. I also tried to delete some of the lines to see if anything changed but I didnt get the result that i wanted. If someone could help i would appreciate it a lot. This is the code
<section class="product-shop spad">
<div class="container">
<div class="row">
<div class="product-list">
<div class="row">
<div class="col-lg-4 col-sm-6">
<div class="product-item">
<div class="pi-pic">
<img src="img/products/product-1.jpg" alt="">
<div class="sale pp-sale">Sale</div>
<div class="icon">
<i class="icon_heart_alt"></i>
</div>
<ul>
<li class="w-icon active"><a href="#"><i class="icon_bag_alt"></i></a></li>
<li class="quick-view"><a href="#">+ Quick View</a></li>
<li class="w-icon"><a href="#"><i class="fa fa-random"></i></a></li>
</ul>
</div>
<div class="pi-text">
<div class="catagory-name">Towel</div>
<a href="#">
<h5>Pure Pineapple</h5>
</a>
<div class="product-price">
$14.00
<span>$35.00</span>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="product-item">
<div class="pi-pic">
<img src="img/products/product-2.jpg" alt="">
<div class="icon">
<i class="icon_heart_alt"></i>
</div>
<ul>
<li class="w-icon active"><a href="#"><i class="icon_bag_alt"></i></a></li>
<li class="quick-view"><a href="#">+ Quick View</a></li>
<li class="w-icon"><a href="#"><i class="fa fa-random"></i></a></li>
</ul>
</div>
<div class="pi-text">
<div class="catagory-name">Coat</div>
<a href="#">
<h5>Guangzhou sweater</h5>
</a>
<div class="product-price">
$13.00
<span>$35.00</span>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="product-item">
<div class="pi-pic">
<img src="img/products/product-3.jpg" alt="">
<div class="icon">
<i class="icon_heart_alt"></i>
</div>
<ul>
<li class="w-icon active"><a href="#"><i class="icon_bag_alt"></i></a></li>
<li class="quick-view"><a href="#">+ Quick View</a></li>
<li class="w-icon"><a href="#"><i class="fa fa-random"></i></a></li>
</ul>
</div>
<div class="pi-text">
<div class="catagory-name">Shoes</div>
<a href="#">
<h5>Guangzhou sweater</h5>
</a>
<div class="product-price">
$34.00
<span>$35.00</span>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="product-item">
<div class="pi-pic">
<img src="img/products/product-4.jpg" alt="">
<div class="icon">
<i class="icon_heart_alt"></i>
</div>
<ul>
<li class="w-icon active"><a href="#"><i class="icon_bag_alt"></i></a></li>
<li class="quick-view"><a href="#">+ Quick View</a></li>
<li class="w-icon"><a href="#"><i class="fa fa-random"></i></a></li>
</ul>
</div>
<div class="pi-text">
<div class="catagory-name">Coat</div>
<a href="#">
<h5>Microfiber Wool Scarf</h5>
</a>
<div class="product-price">
$64.00
<span>$35.00</span>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="product-item">
<div class="pi-pic">
<img src="img/products/product-5.jpg" alt="">
<div class="icon">
<i class="icon_heart_alt"></i>
</div>
<ul>
<li class="w-icon active"><a href="#"><i class="icon_bag_alt"></i></a></li>
<li class="quick-view"><a href="#">+ Quick View</a></li>
<li class="w-icon"><a href="#"><i class="fa fa-random"></i></a></li>
</ul>
</div>
<div class="pi-text">
<div class="catagory-name">Shoes</div>
<a href="#">
<h5>Men's Painted Hat</h5>
</a>
<div class="product-price">
$44.00
<span>$35.00</span>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="product-item">
<div class="pi-pic">
<img src="img/products/product-6.jpg" alt="">
<div class="icon">
<i class="icon_heart_alt"></i>
</div>
<ul>
<li class="w-icon active"><a href="#"><i class="icon_bag_alt"></i></a></li>
<li class="quick-view"><a href="#">+ Quick View</a></li>
<li class="w-icon"><a href="#"><i class="fa fa-random"></i></a></li>
</ul>
</div>
<div class="pi-text">
<div class="catagory-name">Shoes</div>
<a href="#">
<h5>Converse Shoes</h5>
</a>
<div class="product-price">
$34.00
<span>$35.00</span>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="product-item">
<div class="pi-pic">
<img src="img/products/product-7.jpg" alt="">
<div class="sale pp-sale">Sale</div>
<div class="icon">
<i class="icon_heart_alt"></i>
</div>
<ul>
<li class="w-icon active"><a href="#"><i class="icon_bag_alt"></i></a></li>
<li class="quick-view"><a href="#">+ Quick View</a></li>
<li class="w-icon"><a href="#"><i class="fa fa-random"></i></a></li>
</ul>
</div>
<div class="pi-text">
<div class="catagory-name">Towel</div>
<a href="#">
<h5>Pure Pineapple</h5>
</a>
<div class="product-price">
$64.00
<span>$35.00</span>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="product-item">
<div class="pi-pic">
<img src="img/products/product-8.jpg" alt="">
<div class="icon">
<i class="icon_heart_alt"></i>
</div>
<ul>
<li class="w-icon active"><a href="#"><i class="icon_bag_alt"></i></a></li>
<li class="quick-view"><a href="#">+ Quick View</a></li>
<li class="w-icon"><a href="#"><i class="fa fa-random"></i></a></li>
</ul>
</div>
<div class="pi-text">
<div class="catagory-name">Coat</div>
<a href="#">
<h5>2 Layer Windbreaker</h5>
</a>
<div class="product-price">
$44.00
<span>$35.00</span>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="product-item">
<div class="pi-pic">
<img src="img/products/product-9.jpg" alt="">
<div class="icon">
<i class="icon_heart_alt"></i>
</div>
<ul>
<li class="w-icon active"><a href="#"><i class="icon_bag_alt"></i></a></li>
<li class="quick-view"><a href="#">+ Quick View</a></li>
<li class="w-icon"><a href="#"><i class="fa fa-random"></i></a></li>
</ul>
</div>
<div class="pi-text">
<div class="catagory-name">Shoes</div>
<a href="#">
<h5>Converse Shoes</h5>
</a>
<div class="product-price">
$34.00
<span>$35.00</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
I am working on web app and I am new to this. I have done a little research but I did not find much; nevertheless, I did find a question here on StackOverflow which included a definition of a tag field:
A "tag field" or "dog tag" is a field you add to a structure solely for the purpose of error checking.
So, I am trying to add tag field to a model in a web app.
I think the model is implemented with an interface:
interface nameOfInterface {
name: string;
description: string;
...
}
The type of the tag field is an array of strings.
So how do you add a tag field(whose type is an array of strings) to a model in the context of web development in Typescript?
Thanks.
I am new to PHP so please help me out the errors that I keep getting are
Notice: Undefined index: image1 in C:\wamp\www\Tech Cube\add-product.php on line 12
Warning: file_get_contents(): Filename cannot be empty in C:\wamp\www\Tech Cube\add-product.php on line 12
Notice: Undefined index: image2 in C:\wamp\www\Tech Cube\add-product.php on line 13
Warning: file_get_contents(): Filename cannot be empty in C:\wamp\www\Tech Cube\add-product.php on line 13
and my code is
<?php
$connection = mysqli_connect("localhost","root","");
$db = mysqli_select_db($connection,'techcubedb');
if(isset($_POST['add']))
{
if(!empty($_POST['name']) && !empty($_POST['price']) &&!empty($_POST['image1']) &&!empty($_POST['image2'])){
$name = $_POST['name'];
$price = $_POST['price'];
$description = $_POST['description'];
$image1 = addslashes(file_get_contents($_FILES["image1"]["tmp_name"]));
$image2 = addslashes(file_get_contents($_FILES["image2"]["tmp_name"]));
$query = "INSERT INTO 'products'('name','price','description','image1','image2')VALUES ('$name','$price','$description','$image1','$image2')";
$query_run=mysqli_query($connection,$query);
if($query_run)
{
echo '<script type="text/javascript"> alert("Product Added")</script>';
}
else{
echo '<script type="text/javascript"> alert("Product not Added")</script>';
}
}
else{
echo '<script type="text/javascript"> alert("All fields are required")</script>';
}
}
?>
<!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>add product</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<Center>
<div class="container">
<div class="col-md-6 mx-auto text-center">
<div class="header-title">
<br><br>
<h1 class="wv-heading--title">
Add Product
</h1>
</div>
<br>
</div>
<div class="row">
<div class="col-md-4 mx-auto">
<div class="myform form ">
<form action=" " method="post" encrtype="multipart/form-data">
<div class="form-group ">
<label>Product name</label>
<input type="text" name="name" class="form-control" >
<span class="help-block"></span>
</div>
<div class="form-group ">
<label>Price</label>
<input type="text" name="price" class="form-control" >
<span class="help-block"></span>
</div>
<div class="form-group ">
<label>Description</label>
<textarea type="text" name="description" class="form-control" ></textarea>
<span class="help-block"></span>
</div>
<div class="form-group ">
<label>Images</label><br>
<input type="file" name="image1" id="image1">
<span class="help-block"></span>
</div>
<div class="form-group ">
<input type="file" name="image2" id="image2">
<span class="help-block"></span>
</div>
<br>
<br>
<div class="form-group">
<input type="submit" name="add" class="btn btn-primary" value="Add Product">
</div>
</form>
</div>
</div>
</div>
</div>
</Center>
</body>
</html>
guys, I am making a project for my friends. I tried to use media query on max-width 1140px, looks like it's not working. I am new to coding. It would be of great help if anyone shows me the exact code lines which I am missing.
I made some parts using tailwind CSS. Can anyone help me out please its urgent
My HTML code
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<title>BroCoin- Deflationary To the Moon</title>
</head>
<body>
<nav class="navbar background" style="z-index: 999;">
<ul class="nav-list">
<div class="logo"><img src="img/img.jpeg" alt="logo">
</div>
<li><a href="#home">Home</a></li>
<li><a href="#home">About</a></li>
<li><a href="#home">Roadmap</a></li>
<li><a href="#home">Whitepaper</a></li>
</ul>
<div class="rightnav">
<input type="text" name="search" id="search">
<button class="btn btn-sm">Search</button>
</div>
</nav>
<section class="background firstSection">
<div class="box-main">
<div class="firstHalf">
<p class="text-big">The Future of Deflationary Token is here</p>
<p class="text-small">Lorem Ipsum is simply dummy text of the printing and typesetting industry.Contrary to popular beliefContrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature
from 45 BC, making it over 2000 years old. Richard McClintock</p>
<div class="buttons">
<button class="btn1">Live Chart</button>
<button class="btn">Buy Now</button>
</div>
</div>
<div class="secondHalf">
<!--<img src="img/img.jpeg" alt="Laptop Image">-->
</div>
</div>
</section>
<section class="text-gray-600 body-font">
<div class="container px-5 py-24 mx-auto">
<div class="text-center mb-20">
<h1 class="sm:text-3xl text-2xl font-medium title-font text-gray-900 mb-4">Raw Denim Heirloom Man Braid</h1>
<p class="text-base leading-relaxed xl:w-2/4 lg:w-3/4 mx-auto text-gray-500s">Blue bottle crucifix vinyl post-ironic four dollar toast vegan taxidermy. Gastropub indxgo juice poutine, ramps microdosing banh mi pug.</p>
<div class="flex mt-6 justify-center">
<div class="w-16 h-1 rounded-full bg-indigo-500 inline-flex"></div>
</div>
</div>
<div class="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4 md:space-y-0 space-y-6">
<div class="p-4 md:w-1/3 flex flex-col text-center items-center">
<div class="w-20 h-20 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-5 flex-shrink-0">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10" viewBox="0 0 24 24">
<path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
</svg>
</div>
<div class="flex-grow">
<h2 class="text-gray-900 text-lg title-font font-medium mb-3"> Stars</h2>
<p class="leading-relaxed text-base">Blue bottle crucifix vinyl post-ironic four dollar toast vegan taxidermy. Gastropub indxgo juice poutine, ramps microdosing banh mi pug VHS try-hard.</p>
<a class="mt-3 text-indigo-500 inline-flex items-center">Learn More
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-2" viewBox="0 0 24 24">
<path d="M5 12h14M12 5l7 7-7 7"></path>
</svg>
</a>
</div>
</div>
<div class="p-4 md:w-1/3 flex flex-col text-center items-center">
<div class="w-20 h-20 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-5 flex-shrink-0">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10" viewBox="0 0 24 24">
<circle cx="6" cy="6" r="3"></circle>
<circle cx="6" cy="18" r="3"></circle>
<path d="M20 4L8.12 15.88M14.47 14.48L20 20M8.12 8.12L12 12"></path>
</svg>
</div>
<div class="flex-grow">
<h2 class="text-gray-900 text-lg title-font font-medium mb-3">The Catalyzer</h2>
<p class="leading-relaxed text-base">Blue bottle crucifix vinyl post-ironic four dollar toast vegan taxidermy. Gastropub indxgo juice poutine, ramps microdosing banh mi pug VHS try-hard.</p>
<a class="mt-3 text-indigo-500 inline-flex items-center">Learn More
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-2" viewBox="0 0 24 24">
<path d="M5 12h14M12 5l7 7-7 7"></path>
</svg>
</a>
</div>
</div>
<div class="p-4 md:w-1/3 flex flex-col text-center items-center">
<div class="w-20 h-20 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-5 flex-shrink-0">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10" viewBox="0 0 24 24">
<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle>
</svg>
</div>
<div class="flex-grow">
<h2 class="text-gray-900 text-lg title-font font-medium mb-3">Neptune</h2>
<p class="leading-relaxed text-base">Blue bottle crucifix vinyl post-ironic four dollar toast vegan taxidermy. Gastropub indxgo juice poutine, ramps microdosing banh mi pug VHS try-hard.</p>
<a class="mt-3 text-indigo-500 inline-flex items-center">Learn More
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-2" viewBox="0 0 24 24">
<path d="M5 12h14M12 5l7 7-7 7"></path>
</svg>
</a>
</div>
</div>
</div>
<button class="flex mx-auto mt-16 text-white bg-indigo-500 border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 rounded text-lg">Buy Now</button>
</div>
</section>
<!--Roadmap-->
<section class="text-gray-600 body-font">
<div class="container px-5 py-24 mx-auto flex flex-wrap">
<div class="flex relative pt-10 pb-20 sm:items-center md:w-2/3 mx-auto">
<div class="h-full w-6 absolute inset-0 flex items-center justify-center">
<div class="h-full w-1 bg-gray-200 pointer-events-none"></div>
</div>
<div class="flex-shrink-0 w-6 h-6 rounded-full mt-10 sm:mt-0 inline-flex items-center justify-center bg-indigo-500 text-white relative z-10 title-font font-medium text-sm">1</div>
<div class="flex-grow md:pl-8 pl-6 flex sm:items-center items-start flex-col sm:flex-row">
<div class="flex-shrink-0 w-24 h-24 bg-indigo-100 text-indigo-500 rounded-full inline-flex items-center justify-center">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-12 h-12" viewBox="0 0 24 24">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
</svg>
</div>
<div class="flex-grow sm:pl-6 mt-6 sm:mt-0">
<h2 class="font-medium title-font text-gray-900 mb-1 text-xl">Shooting Stars</h2>
<p class="leading-relaxed">VHS cornhole pop-up, try-hard 8-bit iceland helvetica. Kinfolk bespoke try-hard cliche palo santo offal.</p>
</div>
</div>
</div>
<div class="flex relative pb-20 sm:items-center md:w-2/3 mx-auto">
<div class="h-full w-6 absolute inset-0 flex items-center justify-center">
<div class="h-full w-1 bg-gray-200 pointer-events-none"></div>
</div>
<div class="flex-shrink-0 w-6 h-6 rounded-full mt-10 sm:mt-0 inline-flex items-center justify-center bg-indigo-500 text-white relative z-10 title-font font-medium text-sm">2</div>
<div class="flex-grow md:pl-8 pl-6 flex sm:items-center items-start flex-col sm:flex-row">
<div class="flex-shrink-0 w-24 h-24 bg-indigo-100 text-indigo-500 rounded-full inline-flex items-center justify-center">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-12 h-12" viewBox="0 0 24 24">
<path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
</svg>
</div>
<div class="flex-grow sm:pl-6 mt-6 sm:mt-0">
<h2 class="font-medium title-font text-gray-900 mb-1 text-xl">The Catalyzer</h2>
<p class="leading-relaxed">VHS cornhole pop-up, try-hard 8-bit iceland helvetica. Kinfolk bespoke try-hard cliche palo santo offal.</p>
</div>
</div>
</div>
<div class="flex relative pb-20 sm:items-center md:w-2/3 mx-auto">
<div class="h-full w-6 absolute inset-0 flex items-center justify-center">
<div class="h-full w-1 bg-gray-200 pointer-events-none"></div>
</div>
<div class="flex-shrink-0 w-6 h-6 rounded-full mt-10 sm:mt-0 inline-flex items-center justify-center bg-indigo-500 text-white relative z-10 title-font font-medium text-sm">3</div>
<div class="flex-grow md:pl-8 pl-6 flex sm:items-center items-start flex-col sm:flex-row">
<div class="flex-shrink-0 w-24 h-24 bg-indigo-100 text-indigo-500 rounded-full inline-flex items-center justify-center">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-12 h-12" viewBox="0 0 24 24">
<circle cx="12" cy="5" r="3"></circle>
<path d="M12 22V8M5 12H2a10 10 0 0020 0h-3"></path>
</svg>
</div>
<div class="flex-grow sm:pl-6 mt-6 sm:mt-0">
<h2 class="font-medium title-font text-gray-900 mb-1 text-xl">The 400 Blows</h2>
<p class="leading-relaxed">VHS cornhole pop-up, try-hard 8-bit iceland helvetica. Kinfolk bespoke try-hard cliche palo santo offal.</p>
</div>
</div>
</div>
<div class="flex relative pb-10 sm:items-center md:w-2/3 mx-auto">
<div class="h-full w-6 absolute inset-0 flex items-center justify-center">
<div class="h-full w-1 bg-gray-200 pointer-events-none"></div>
</div>
<div class="flex-shrink-0 w-6 h-6 rounded-full mt-10 sm:mt-0 inline-flex items-center justify-center bg-indigo-500 text-white relative z-10 title-font font-medium text-sm">4</div>
<div class="flex-grow md:pl-8 pl-6 flex sm:items-center items-start flex-col sm:flex-row">
<div class="flex-shrink-0 w-24 h-24 bg-indigo-100 text-indigo-500 rounded-full inline-flex items-center justify-center">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-12 h-12" viewBox="0 0 24 24">
<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle>
</svg>
</div>
<div class="flex-grow sm:pl-6 mt-6 sm:mt-0">
<h2 class="font-medium title-font text-gray-900 mb-1 text-xl">Neptune</h2>
<p class="leading-relaxed">VHS cornhole pop-up, try-hard 8-bit iceland helvetica. Kinfolk bespoke try-hard cliche palo santo offal.</p>
</div>
</div>
</div>
</div>
</section>
<!--Our Team-->
<section class="text-gray-600 body-font">
<div class="container px-5 py-24 mx-auto">
<div class="flex flex-col text-center w-full mb-20">
<h1 class="text-2xl font-medium title-font mb-4 text-gray-900 tracking-widest">OUR TEAM</h1>
<p class="lg:w-2/3 mx-auto leading-relaxed text-base">Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical gentrify, subway tile poke farm-to-table. Franzen you probably haven't heard of them.</p>
</div>
<div class="flex flex-wrap -m-4">
<div class="p-4 lg:w-1/2">
<div class="h-full flex sm:flex-row flex-col items-center sm:justify-start justify-center text-center sm:text-left">
<img alt="team" class="flex-shrink-0 rounded-lg w-48 h-48 object-cover object-center sm:mb-0 mb-4" src="https://dummyimage.com/200x200">
<div class="flex-grow sm:pl-8">
<h2 class="title-font font-medium text-lg text-gray-900">Holden Caulfield</h2>
<h3 class="text-gray-500 mb-3">UI Developer</h3>
<p class="mb-4">DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware.</p>
<span class="inline-flex">
<a class="text-gray-500">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
</svg>
</a>
<a class="ml-2 text-gray-500">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
<path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"></path>
</svg>
</a>
<a class="ml-2 text-gray-500">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
<path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"></path>
</svg>
</a>
</span>
</div>
</div>
</div>
<div class="p-4 lg:w-1/2">
<div class="h-full flex sm:flex-row flex-col items-center sm:justify-start justify-center text-center sm:text-left">
<img alt="team" class="flex-shrink-0 rounded-lg w-48 h-48 object-cover object-center sm:mb-0 mb-4" src="https://dummyimage.com/201x201">
<div class="flex-grow sm:pl-8">
<h2 class="title-font font-medium text-lg text-gray-900">Alper Kamu</h2>
<h3 class="text-gray-500 mb-3">Designer</h3>
<p class="mb-4">DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware.</p>
<span class="inline-flex">
<a class="text-gray-500">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
</svg>
</a>
<a class="ml-2 text-gray-500">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
<path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"></path>
</svg>
</a>
<a class="ml-2 text-gray-500">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
<path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"></path>
</svg>
</a>
</span>
</div>
</div>
</div>
<div class="p-4 lg:w-1/2">
<div class="h-full flex sm:flex-row flex-col items-center sm:justify-start justify-center text-center sm:text-left">
<img alt="team" class="flex-shrink-0 rounded-lg w-48 h-48 object-cover object-center sm:mb-0 mb-4" src="https://dummyimage.com/204x204">
<div class="flex-grow sm:pl-8">
<h2 class="title-font font-medium text-lg text-gray-900">Atticus Finch</h2>
<h3 class="text-gray-500 mb-3">UI Developer</h3>
<p class="mb-4">DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware.</p>
<span class="inline-flex">
<a class="text-gray-500">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
</svg>
</a>
<a class="ml-2 text-gray-500">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
<path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"></path>
</svg>
</a>
<a class="ml-2 text-gray-500">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
<path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"></path>
</svg>
</a>
</span>
</div>
</div>
</div>
<div class="p-4 lg:w-1/2">
<div class="h-full flex sm:flex-row flex-col items-center sm:justify-start justify-center text-center sm:text-left">
<img alt="team" class="flex-shrink-0 rounded-lg w-48 h-48 object-cover object-center sm:mb-0 mb-4" src="https://dummyimage.com/206x206">
<div class="flex-grow sm:pl-8">
<h2 class="title-font font-medium text-lg text-gray-900">Henry Letham</h2>
<h3 class="text-gray-500 mb-3">Designer</h3>
<p class="mb-4">DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware.</p>
<span class="inline-flex">
<a class="text-gray-500">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
</svg>
</a>
<a class="ml-2 text-gray-500">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
<path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"></path>
</svg>
</a>
<a class="ml-2 text-gray-500">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
<path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"></path>
</svg>
</a>
</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!--Contact Us-->
<section class="text-gray-600 body-font relative">
<div class="container px-5 py-24 mx-auto">
<div class="flex flex-col text-center w-full mb-12">
<h1 class="sm:text-3xl text-2xl font-medium title-font mb-4 text-gray-900">Contact Us</h1>
<p class="lg:w-2/3 mx-auto leading-relaxed text-base">Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical gentrify.</p>
</div>
<div class="lg:w-1/2 md:w-2/3 mx-auto">
<div class="flex flex-wrap -m-2">
<div class="p-2 w-1/2">
<div class="relative">
<label for="name" class="leading-7 text-sm text-gray-600">Name</label>
<input type="text" id="name" name="name"
class="w-full bg-gray-100 bg-opacity-50 rounded border border-gray-300 focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out">
</div>
</div>
<div class="p-2 w-1/2">
<div class="relative">
<label for="email" class="leading-7 text-sm text-gray-600">Email</label>
<input type="email" id="email" name="email"
class="w-full bg-gray-100 bg-opacity-50 rounded border border-gray-300 focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out">
</div>
</div>
<div class="p-2 w-full">
<div class="relative">
<label for="message" class="leading-7 text-sm text-gray-600">Message</label>
<textarea id="message" name="message"
class="w-full bg-gray-100 bg-opacity-50 rounded border border-gray-300 focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-200 h-32 text-base outline-none text-gray-700 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out"></textarea>
</div>
</div>
<div class="p-2 w-full">
<button class="flex mx-auto text-white bg-indigo-500 border-0 py-2 px-8 focus:outline-none hover:bg-red-600 rounded text-lg">Submit</button>
</div>
<div class="p-2 w-full pt-8 mt-8 border-t border-gray-200 text-center">
<a class="text-indigo-500">example@email.com</a>
<p class="leading-normal my-5">49 Smith St.
<br>Saint Cloud, MN 56301
</p>
<span class="inline-flex">
<a class="text-gray-500">
<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
</svg>
</a>
<a class="ml-4 text-gray-500">
<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
<path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"></path>
</svg>
</a>
<a class="ml-4 text-gray-500">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
<rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
<path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"></path>
</svg>
</a>
<a class="ml-4 text-gray-500">
<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
<path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"></path>
</svg>
</a>
</span>
</div>
</div>
</div>
</div>
</section>
<footer class="background">
<p class="text-footer">Copyright © 2021 - All rights reserved</p>
</footer>
</body>
</html>
My CSS Code
* {
margin: 0;
padding: 0;
}
.logo{
width: 20%;
display: flex;
justify-content: center;
align-items: center;
}
.logo img{
width: 33%;
border: 3px solid white;
border-radius: 50px;
}
.navbar{
display: flex;
align-items: center;
justify-content: center;
position: sticky;
top: 0;
cursor: pointer;
}
.nav-list{
width: 70%;
display: flex;
align-items: center;
}
.nav-list li{
list-style: none;
padding: 26px 30px;
}
.nav-list li a{
text-decoration: none;
color: white;
font-size: 16px;
font-family: 'Ubuntu',sans-serif;
}
.nav-list li a:hover{
color: grey;
}
.rightnav{
width: 30%;
text-align: right;
padding: 0 23px;
}
#search{
padding: 5px;
font-size: 17px;
border: 2px solid grey;
border-radius: 9px;
}
.background{
background: rgba(0, 0, 0, 0.7) url('../img/bg.jpg');
background-size: cover;
}
.firstSection{
height: 100vh;
}
.box-main{
display: flex;
justify-content: center;
align-items: center;
color: white;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
max-width: 90%;
margin: auto;
height: 80%;
}
.firstHalf{
width: 80%;
display: flex;
flex-direction: column;
justify-content: center;
}
.secondHalf{
width: 30%;
}
/*
.secondHalf img{
width: 33%;
border: 3px solid white;
border-radius: 50px;
}*/
.text-big{
font-size: 31px;
}
.text-small{
font-size: 18px;
width: 80%;
}
.btn1{
padding: 8px 20px;
margin: 7px 3px;
border: 2px solid white;
border-radius: 8px;
border-color: #2dce89;
background-color: #2dce89;
color: white;
cursor: pointer;
}
.btn{
padding: 8px 20px;
margin: 7px 3px;
border: 2px solid white;
border-radius: 8px;
background: none;
color: white;
cursor: pointer;
}
.btn-sm{
padding: 6px 10px;
vertical-align: middle;
}
/*.secRight{
height: 500px;
display: flex;
align-items: center;
justify-content: space-evenly;
max-width: 80%;
margin: auto;
}
.paras{
padding: 0px 65px;
}
.imgFluid{
width: 250px;
height: auto;
}*/
.text-footer{
color: white;
text-align: center;
padding: 30px 0px;
font-family: 'Ubuntu',sans-serif;
display: flex;
justify-content: center;
}
@@media only screen and (max-width: 1140px){
.nav-list{
flex-direction: column;
}
.navbar{
flex-direction: column;
}
}