I have some problems with the construction of my portfolio CV someone who understands HTML, CSS and JavaScript could help you thank you for your help.
My doubts are as follows:
My title of my image gallery has disappeared, how do I make the title "My Portfolio" be like in the 2nd file below?
How do I center my source code so that my image gallery is like in the image below (attached)?
I send the source code. And i appreciate you for your help with source code.
https://codepen.io/Quencyjones79/pen/XWYNwxj
index.html
`
<section class="container" id="portfolio">
<div class="main-title">
<h2>My <span>Portfolio</span><span class="bg-text">My Work</span></h2>
</div>
<p class="port-text">
Here is some of my work that I've done in various programming languages.
</p>
<div class="container_images">
<div class="full-view"></div>
<div class="preview-list">
<ul>
<li>
<input type="radio" id="tab-1" name="gallery-group">
<label for="tab-1">
<div class="tab">
<img
src="img/bandacoldplay.jpeg" />
</div>
</label>
<div class="content">
<img
src="img/bandacoldplay.jpeg" />
</div>
</li>
<li>
<input type="radio" id="tab-2" name="gallery-group">
<label for="tab-2">
<div class="tab">
<img
src="img/mascaraNY.jpg" />
</div>
</label>
<div class="content">
<img
src="img/mascaraNY.jpg" />
</div>
</li>
<li>
<input type="radio" id="tab-3" name="gallery-group">
<label for="tab-3">
<div class="tab">
<img
src="img/Dutchplan.jpg" />
</div>
</label>
<div class="content">
<img
src="img/Dutchplan.jpg" />
</div>
</li>
<li>
<input type="radio" id="tab-4" name="gallery-group" checked>
<label for="tab-4">
<div class="tab">
<img
src="img/planogeralPonteLima.jpg" />
</div>
</label>
<div class="content">
<img src="img/planogeralPonteLima.jpg" />
</div>
</li>
</ul>
</div>
</div>
</section>
`
(continue in codepen)
Related
Trying to create a filter on a web page that utilizes Bootstrap's drop-down menu and places the columns side-by-side, but instead it stacks them right now. The filter menu is created dynamically by looping through an array of items I want to create and. each item is a new column I want to place on my menu. I was trying to utilize the grid layout (container > row > column) with the class row-cols-# on my row element but that does not work as I thought it would.
I can force my menu to be a certain width and make the columns position correctly, but then my menu is hardcoded to a certain width on all filter menu regardless of the number of columns. Here is sample of my HTML code that is creating a rather big menu.
Wondering if my d-flex at the very end is what causes problems for my grid layout
<div
class="ms-auto py-4"
id="PageFilter"
>
<div class="dropdown filter">
<button
class="btn btn-outline-secondary d-flex align-items-center dropdown-toggle"
type="button"
data-bs-toggle="dropdown"
>
<img
src="/static/icons/bootstrap/sliders2.svg"
class="me-2"
height="25"
/>
Filter
<span class="badge bg-danger ms-4">0</span>
</button>
<div class="dropdown-menu dropdown-menu-end shadow" style="">
<form action="/ajax/page_filter/" method="GET" class="filter">
<div class="container">
<div class="row">
<div class="col-sm-auto">
<h6 class="dropdown-header">Region</h6>
<hr class="mt-0" />
<div
class="overflow-y-auto filter-list"
style="max-height: 400px"
>
<div class="row align-items-center mx-2">
<div class="form-check">
<input/>
<label class="form-check-label" for="filter-0-0">
ITEM 1
</label>
</div>
</div>
<div class="row align-items-center mx-2">
<div class="form-check">
<input/>
<label class="form-check-label" for="filter-0-1">
ITEM 2
</label>
</div>
</div>
</div>
</div>
<div class="col-sm-auto">
<h6 class="dropdown-header">State</h6>
<hr class="mt-0" />
<div
class="overflow-y-auto filter-list"
style="max-height: 400px"
>
<div class="row align-items-center mx-2">
<div class="form-check">
<input/>
<label class="form-check-label" for="filter-1-0">
ITEM 1
</label>
</div>
</div>
<div class="row align-items-center mx-2">
<div class="form-check">
<input/>
<label class="form-check-label" for="filter-1-1">
ITEM 2
</label>
</div>
</div>
<div class="row align-items-center mx-2">
<div class="form-check">
<input/>
<label class="form-check-label" for="filter-1-2">
ITEM 3
</label>
</div>
</div>
<div class="row align-items-center mx-2">
<div class="form-check">
<input/>
<label class="form-check-label" for="filter-1-3">
ITEM 4
</label>
</div>
</div>
<div class="row align-items-center mx-2">
<div class="form-check">
<input/>
<label class="form-check-label" for="filter-1-4">
ITEM 5
</label>
</div>
</div>
<div class="row align-items-center mx-2">
<div class="form-check">
<input/>
<label class="form-check-label" for="filter-1-5">
ITEM 6
</label>
</div>
</div>
<div class="row align-items-center mx-2">
<div class="form-check">
<input/>
<label class="form-check-label" for="filter-1-6">
ITEM 7
</label>
</div>
</div>
<div class="row align-items-center mx-2">
<div class="form-check">
<input/>
<label class="form-check-label" for="filter-1-7">
ITEM 8
</label>
</div>
</div>
</div>
</div>
<div class="col-sm-auto">
<h6 class="dropdown-header">TSC</h6>
<hr class="mt-0" />
<div
class="overflow-y-auto filter-list"
style="max-height: 400px"
>
<div class="row align-items-center mx-2">
<div class="form-check">
<input/>
<label class="form-check-label" for="filter-2-0">
ITEM 1
</label>
</div>
</div>
<div class="row align-items-center mx-2">
<div class="form-check">
<input/>
<label class="form-check-label" for="filter-2-1">
ITEM 2
</label>
</div>
</div>
</div>
</div>
<div class="d-flex justify-content-end mt-4">
<button type="reset" class="btn btn-sm btn-warning clear-filter">
Clear Filter
</button>
<button type="submit" class="btn btn-sm btn-danger ms-2">
Submit
</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
UPDATE
I've included my current example here Filter Menu Help
I have a collection of views that i want them to share a specific layout.
I created the layout master.blade.php ,in a folder i named it layouts.
From the docs , i found that i need to add the tag #extends and section('content') in my view so it fits under the layout :
#extends('layouts.master')
#section('content')
<div style="background-color:white;width:963px;height:100%">
<div style="padding-top:100px;padding-bottom:200px">
<h2 style="color:sandybrown; text-align:center"><b style="padding-right:40px">Contactez nous</b></h2>
<br />
<hr width="50%" color="gris" />
<div class="row">
<div class="col-md-6" style="padding:5%">
<form method="post" asp-controller="Home" asp-action="RegisterContact" style="padding-left:20px">
<label><span style="color:blue">Nom et prenom</span></label>
<br />
<input size=" 40" style="border-color:darkorange" asp-for="Name"/>
<br />
<label><span style="color:blue">E-mail</span></label>
<br />
<input size=" 40" asp-for="Email" style="border-color:darkorange" />
<br />
<label><span style="color:blue">Message</span></label>
<br />
<textarea rows="10" cols="40" style="border-color:darkorange" asp-for="Message"></textarea>
<br />
<button style="background-color:blue;"><span style="color:white">ENVOYER</span></button>
....
#endsection
but when i click in the link in the view's link in the navbar , this is what i get ?:
so is there a missing part in the logic ?
Update:
the view and the layout are both under the same folder :
C:\xampp\htdocs\laravel\resources\views\layouts
the view's name wasn't ending with .blade.php , but doing so now i get an exception :
InvalidArgumentException in FileViewFinder.php line 137: View [layouts.WhoWeAre] not found.
this is the body code of the layout :
</div>
<nav class="navbar navbar-expand-md bg-light navbar-light">
<div class="navbar-collapse collapse w-50">
<ul class="navbar-nav ml-auto">
<li class="nav-item navbar1 ">
<a class="nav-link" href="{{action('HomeController#WhoWeAre')}}"><span style="text-decoration: underline;"><B>Acceuil</B></span></a>
</li>
<li class="nav-item navbar1">
<a class="nav-link" ><span style="text-decoration: underline;"><B>Qui somme nous</B></span></a>
</li>
<li class="nav-item navbar1">
<a class="nav-link"><span style="text-decoration: underline;"><B>Specialités</B></span></a>
</li>
</ul>
</div>
<div>
<img src="images/decoupage/nawrass-logo.png " class="rounded-circle bg-light">
</div>
<div class="navbar-collapse collapse w-50 ">
<ul class="navbar-nav mr-auto">
<li class="nav-item navbar2">
<a class="nav-link" >
<span style="text-decoration: underline;"><B>Contactez-nous</B></span>
</a>
</li>
<li class="nav-item navbar2">
<img src="images/decoupage/location.png" style="padding-top: 7px">
<span style="padding-top: 15px">Djerba Houmet Souk</span>
</li>
<li class="nav-item navbar2">
<div class="row">
<div class="col-md-3" style="padding-top: 7px">
<img src="images/decoupage/phone.png">
</div>
<div class="col-md-8" style="font-size: 16px;">
<span>75 620 660 </span>
<br>
<span>98 816 962</span>
</div>
</div>
</li>
<li class="nav-item navbar2">
<img src="images/decoupage/fb.png" style="padding-top: 7px">
</li>
</ul>
</div>
</nav>
<div class="container " style="min-height:100%; padding-left:120px;flex:1;display:flex;flex-direction:column;">
<div style="flex:1;display:flex;flex-direction:column;">
#yield('content')
</div>
</div>
<div id="footer">
<div class="jumbotron " style="margin-top:0 ; background-color:blue">
<div class="container ">
<div class="row">
<div class="col-md-6">
<div class="card mb-3 " style="background-color: blue">
<div class="row no-gutters">
<div class="col-md-3 ">
<img src="images/decoupage/logo-white.png" class="card-img" alt="my card image">
</div>
<div class="col-md-9 ">
<div class="card-body ">
<p class=" card-text text-white " style="font-size: 14.45px">
Bienvenu a centre de formation ennawres: formation en coiffure hommes et dames Langues {francais, anglais...} ,photographie..et plusieurs d'autres..
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-2"></div>
<div class="col-md-4 ">
<br/>
<img src="images/decoupage/phone.png">
<span class="text-white">
75620660-98815952
</span>
<br>
<br>
<img src="images/decoupage/location.png">
<span class="text-white">
Houmet Souk Djerba,1Km Ajim
</span>
</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-4 text-white">
PROPULSE PAR MOSAIQUE WEB COPYRIGHT 2019
</div>
</div>
</div>
</div>
</div>
For information the click in the navbar "Qui sommes nous" link trigger this controller method:
public function WhoWeAre()
{
return view('layouts/WhoWeAre');
}
and this is routes.php :
Route::get('/', function () {
return view('welcome');
});
Route::get('/whoweare', 'HomeController#WhoWeAre');
I'm trying to use Wget to log in to my router and make a complete mirror of all the pages. The problem is, the router login page does not use the traditional "user" & "pass" ID for the text fields. It has a 'Password' and 'VmWpsPin' field. The ID for the 'Password' field is randomly generated every time the page is loaded/refreshed/requested. Below is the source code of the relevant part of the router page:
<body lang="en" class="superhubGUI" onload="javascript:Init()">
<div class="globalHeader">
<div id="nav">
<div id="logo">
<h1 id="header">Super Hub</h1>
</div>
<div id="buttons">Router Status
</div>
</div>
</div>
<div id="content">
<div id="container">
<div id="main">
<div class="panel noTitle" style="*padding:38px 30px 0px 30px">
<div id="login" class="inner">
<div class="inner-section">
<h2>Welcome to your Virgin Media Super Hub 2ac</h2>
<div id="signInForm">
<form action="/cgi-bin/VmLoginCgi" method="POST" name="signIn1" id="signIn">
<h2 id="loginTitle">Sign in to view and change your settings</h2>
<div class="field formField noHint username clearfix">
<label for="username"></label>
</div>
<div style="position:relative;top:-20px;" class="field formField noHint password clearfix">
<label for="password">Settings Password</label>
<input type="password" autocomplete="off" value="" maxlength="15" class="name required onefiftyPX inactive" name="KsCAqiihZb" id="password" onkeypress="handleKeyPress(event)" />
<div style="position:relative;left:-10px;" class="tooltip">
<img style="position:absolute; top:10px;" src="../images/toolTipButton.png"><span>Password can be found on the base of your Super Hub</span>
</div>
</div>
<div style="position:relative;top:-25px;" class="field formField noHint password clearfix">
<label for="password">WPS PIN</label>
<input type="text" autocomplete="off" value="" maxlength="15" class="name required onefiftyPX inactive" name="VmWpsPin" id="WpsPin" onkeypress="handleKeyPress(event)" />
<div style="position:relative;left:-10px;" class="tooltip">
<img style="position:absolute; top:10px;" src="../images/toolTipButton.png"><span>WPS PIN can be found on the base of your Super Hub</span>
</div>
</div>
<div>
Sign In
</div>
</form>
<p>
<span style="font-weight:bold;">Don't know your password?</span>
<br/>You'll find your default password on the bottom of your Super Hub.
</p>
</div>
</div>
</div><span class="pFoot"> </span>
</div>
</div>
My question is, how can I use Wget to login to the router when the ID changes at every request, is there somehow a way to request the page, parse the value out and then submit the form using something like --keep-session?
Or is there an alternative solution outside of Wget to automate the process? Any help is much appreciated.
Say we have the following HTML code
<label for="467578">AgendaShowCapacity (1 remaining)</label>
I tried with the following xpath expression in Chrome but can't locate to that element:
//label[text()='AgendaShowCapacity (1 remaining)']
I was wondering whether the parenthese is to be blamed for this. If it is, how should I deal with it under such situation?
Any comments would be appreciated, thanks!
Edit 2012-9-18 real code block posted below
<div id="pageContent">
<fieldset>
<legend>Agenda</legend>
<ol class='fieldList custom' data-section='0'>
<li class="checkboxLeft" data-id="467578" data-z="1">
<div class="fieldHolder1">
<input id="467578" type="checkbox" name="467578" />
</div>
<div class="fieldHolder2">
<label for="467578">AgendaShowCapacity (1 remaining)</label>
</div>
</li>
<li class="checkboxLeft" data-id="467579" data-z="2">
<div class="fieldHolder1">
<input id="467579" type="checkbox" name="467579" />
</div>
<div class="fieldHolder2">
<label for="467579">AgendaHideReached</label>
</div>
</li>
<li class="checkboxLeft" data-id="467580" data-z="3">
<div class="fieldHolder1">
<input id="467580" type="checkbox" name="467580" />
</div>
<div class="fieldHolder2">
<label for="467580">AgendaShowMessage</label>
</div>
</li>
<li class="checkboxLeft" data-id="467584" data-z="4">
<div class="fieldHolder1">
<input id="467584" type="checkbox" name="467584" />
</div>
<div class="fieldHolder2">
<label for="467584">AgendaWaitlist</label>
</div>
</li>
</ol>
</fieldset>
<div class="buttonGroup">
<button type="button" name="ctl00$cph$ctlNavigation$btnAddAnother" class="button" onclick="SubmitForm(this);return false;">Add Another Person</button>
<span class="textBetweenButtons">or</span>
<button type="submit" name="ctl00$cph$ctlNavigation$btnContinue" class="button" onclick="SubmitForm(this);return false;">Continue</button>
</div>
</div>
Here is the essential part of the html page in which I want to locate to that //label element.
Second edit 2012/9/19
Sample C# code using selenium-webdriver to locate that element.
IWebDriver driver = new FirefoxDriver();
IWebElement = driver.FindElement(By.XPath("//div[#id='pageContent']//legend/following-sibling::ol/li/div/label[text()='AgendaShowCapacity (1 remaining)']"));
// Do something to that element
I am trying to log some input values into an array via jquery and then use those to run a method server side and get the data returned as JSON.
The HTML looks like this,
<div class="segment">
<div class="label">
<label>Choose region: </label>
</div>
<div class="column w190">
<div class="segment">
<div class="input">
<input type="checkbox" class="radio" value="Y" name="area[Nationwide]" id="inp_Nationwide">
</div>
<div class="label ">
<label for="inp_Nationwide">Nationwide</label>
</div>
<div class="s"> </div>
</div>
</div>
<div class="column w190">
<div class="segment">
<div class="input">
<input type="checkbox" class="radio" value="Y" name="area[Lancashire]" id="inp_Lancashire">
</div>
<div class="label ">
<label for="inp_Lancashire">Lancashire</label>
</div>
<div class="s"> </div>
</div>
</div>
<div class="column w190">
<div class="segment">
<div class="input">
<input type="checkbox" class="radio" value="Y" name="area[West_Yorkshire]" id="inp_West_Yorkshire">
</div>
<div class="label ">
<label for="inp_West_Yorkshire">West Yorkshire</label>
</div>
<div class="s"> </div>
</div>
<div class="s"> </div>
</div>
I have this javascript the detect whether the items are checked are not
if($('input.radio:checked')){
}
What I dont know is how to get the values of the input into an array so I can then send the information through AJAX to my controller. Can anyone help me?
You can use jQuery's each() function.
$('input.radio:checked').each(function() {
//put each of the selected check boxes into an array
});
You need to serialize your input with - serialize()
var data = $('#MYFORM').serialize();