Border not rendering properly in xhtml2pdf django

Border not rendering properly in xhtml2pdf django - javascript

Unable to render borders properly in xhtml2pdf. It is applying to individual elements.
Here is invoice template for rendering:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SRS Mess | Invoice</title>
<style>
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Merriweather&display=swap');
body{
font-family: 'Poppins', sans-serif;
user-select: none;
}
/* Keeping paragraph together */
p{
margin: 0;
-pdf-keep-with-next: true;
}
*,
::after,
::before {
box-sizing: border-box;
}
#media (prefers-reduced-motion: no-preference) {
:root {
scroll-behavior: smooth;
}
}
.container{
--bs-gutter-x: 1.5rem;
width: 100%;
padding-right: 7.5rem;
padding-left: 7.5rem;
margin-right: auto;
margin-left: auto;
}
.text-center {
text-align: center !important;
}
.mt-3 {
margin-top: 1rem !important;
}
.mt-2 {
margin-top: 0.5rem !important;
}
.text-danger {
color: rgba(220, 53, 69, 1) !important;
}
</style>
</head>
<body>
<div class="container mt-2 mb-2" style="background: rgb(237, 237, 255); border-top: 2px solid black; border-bottom: 2px solid black; border-left: 2px solid black; border-right: 2px solid black; border-radius: 1rem;">
<div class="text-center mt-3">
<img src="{{ST_ROOT}}/logo.png" alt="" height="200" width="200">
<p class="mt-2" style="font-size: 1.5rem; color: orange;">SRS Mess</p>
<br>
<p style="font-family: 'Merriweather', serif; font-size: 2rem; text-decoration: underline;">INVOICE</p>
<p style="font-size: 1.5rem; font-weight:bold; color: green;">Monthly Mess subscription of Rs. {{amount}} /- </p>
</div>
<br>
<div class="details">
<p><strong>Name: </strong>{{name}}</p>
<p><strong>Email: </strong>{{email}}</p>
<p><strong>Mobile: </strong>{{mobile}}</p>
<p><strong>Hostel: </strong>{{hostel}} {{room}}</p>
<p><strong>Branch: </strong>{{branch}}</p>
<p><strong>Date: </strong>{{date}}</p>
<p><strong>Time: </strong>{{time}}</p>
</div>
<br>
<div class="subscriptions text-center" style="border: 2px solid green; background-color: #e9ffe9;">
<p class="text-danger" style="font-size: 1.5rem;">Mess Subscription</p>
<p><strong>Start date: </strong>{{start_date}}</p>
<p><strong>End date: </strong>{{end_date}}</p>
</div>
<br>
<div class="footer">
<p>Thank you for taking the monthly mess subscription! <br> We hope that you will enjoy our meal!</p>
<p>If you have any issues, please contact us here</p>
</div>
</div>
</body>
</html>
This is the render_to_pdf function:
def render_to_pdf(template_src, context_dict={}):
template = get_template(template_src)
html = template.render(context_dict)
result = BytesIO()
pdf = pisa.pisaDocument(BytesIO(html.encode("UTF-8")), result, link_callback=fetch_resources)
if not pdf.err:
return HttpResponse(result.getvalue(), content_type='application/pdf')
return None
Downloading the pdf by:
pdf = render_to_pdf('invoice.html', usr_data)
return HttpResponse(pdf, content_type="application/pdf")
When we render the pdf it looks like this:
Rendered PDF
But by HTML template it should be:
invoice.html
So I want to render the HTML template as it is. You can see that the borders are been applied to all the individual elements in the tag. It should not happen. So please let me know the solution for this.
Thanks in advance !!

Related

How to make transparent element while dragging in Chrome?

I have a card element that can be dragged from one column to another column. This works, except the card has a transparent dropzone element inside it that becomes opaque on Chrome browsers when dragging. This problem is not the case on Firefox or Safari.
You can see the code here.
How can I fix this problem on Chrome browsers?
I tried by playing with opacity and rgb() in css, but with no success. See the code below.
#board {
display: flex;
padding: 8px;
width: 800px;
}
#board * {
font-family: sans-serif;
}
.board__column {
flex: 1;
background: #fcb51d;
padding: 10px;
border-radius: 5px;
}
.board__column:not(:last-child) {
margin-right: 10px;
}
.board__column-title {
margin-bottom: 20px;
font-size: 30px;
color: white;
user-select: none;
}
.board__item-card {
box-sizing: border-box;
cursor: pointer;
background: white;
padding: 8px;
border-radius: 8px;
}
.board__item-input {
background: white;
padding: 10px 15px;
border-radius: 5px;
}
.board__dropzone {
height: 10px;
transition: background 0.15s, height 0.15s;
}
.board__dropzone--active {
height: 20px;
background: rgba(0, 0, 0, 0.25);
}
.board__add-item {
width: 100%;
padding: 10px 0;
font-size: 16px;
color: white;
background: rgba(0, 0, 0, 0.1);
border: none;
border-radius: 5px;
cursor: pointer;
}
<div id="board">
<!-- Todo's tasks -->
<div class="board__column">
<div class="board__column-title">Todo</div>
<div class="board__column-items">
<div class="board__card" draggable="true">
<div class="board__item-card">
My first todo task 🤓
</div>
<div class="board__dropzone"></div>
</div>
<div class="board__card" draggable="true">
<div class="board__item-card">
My second todo task...
</div>
<div class="board__dropzone"></div>
</div>
</div>
<button class="board__add-item" type="button">+ Add card</button>
</div>
<!-- In progress tasks -->
<div class="board__column">
<div class="board__column-title">In Progress</div>
<div class="board__column-items">
<div class="board__card" draggable="true">
<div class="board__item-card">
I'm working on the task 😁
</div>
<div class="board__dropzone"></div>
</div>
</div>
<button class="board__add-item" type="button">+ Add card</button>
</div>
<!-- Done tasks -->
<div class="board__column">
<div class="board__column-title">Done</div>
<div class="board__column-items">
<div class="board__item-card" draggable="true">
<div class="board__item-card">
I finished the task 😇
</div>
<div class="board__dropzone"></div>
</div>
</div>
<button class="board__add-item" type="button">+ Add card</button>
</div>
</div>

I Believe it is not the dropzone div element that is turning opaque, I believe that the board__card element being draggable forces it somehow to inherit the color of its parent, please check the following link:
Why HTML draggable element drags with parent background?

Change the list heading when move the cursor to the list element

I'm creating a table of links, I want the table to be a bit fancier by changing the table heading's background color whenever I move the cursor to one of the list's links. However, I don't know how to change the attribute of the container element by affecting its smaller element. This is my code:
<html lang="vi">
<head>
<style>
.toc-container {
max-width: 600px;
font-family: "Roboto", sans-serif;
background: #deff9d;
border-radius: 8px;
box-shadow: 0 4px 11px rgba(0, 0, 0, 0.6);
}
.toc-container h2.index-heading {
text-transform: uppercase;
font-weight: normal;
margin: 0 16px;
padding-top: 16px;
}
.table-of-contents {
list-style: none;
padding: 0;
}
.table-of-contents li.author li.blog {
background: #222;
transition: 400ms;
list-style: none;
}
.table-of-contents li.author{
background-color: green;
}
.table-of-contents li.author li:nth-of-type(even).blog {
background: #2e2e2e;
}
.table-of-contents li.author li:hover.blog {
background: #000;
}
.table-of-contents li a {
text-decoration: none;
color: #fff;
margin-left: 24px;
padding: 16px 0;
display: block;
}
</style>
</head>
<body>
<div class="toc-container">
<h2 class="index-heading">heading</h2>
<ul class="table-of-contents">
<li class="author">
Author's name
<ul>
<li class="blog">
Nháp 1
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>

I think it's easier to do this with javascript, you can use Element Event mouseenter and mouseleave to achieve style change, maybe this can help you. code below
<script>
const headerDiv = document.querySelector('.index-heading');
const blogDiv = document.querySelector('.blog');
blogDiv.addEventListener('mouseenter', function(e) {
headerDiv.style.background = 'purple'
})
blogDiv.addEventListener('mouseleave', function(e) {
headerDiv.style.background = '#deff9d'
})
</script>

basically your HTML code is not in a order manner so that we could not apply all the changes you need . thats why i attached the code snippet which is easily explained and you can change your design yourself as your choice . and in style , unfortunately a tag is not doing as expected but i am sure that it will work in your browser .
if any needs to be changed in my code then comment below .
let header2=document.getElementById("header2");
let link=document.getElementById("link")
let changeLink=()=>{
header2.style.backgroundColor="green"
link.style.backgroundColor="yellow"
}
let changeHeader=()=>{
link.style.background="green"
header2.style.backgroundColor="yellow"
}
a{
text-decoration: none;
}
#header1{
height:85px;
}
#link{
margin-left: 50px;
background-color:black;
margin-top:-141px;
}
#header2{
height:180px;
}
<div id="header1" style="background-color:red">header1</div>
<a href="https://www.blogger.com/profile/00965819760488730111">
<div style="background-color:green" id="change">
<div id="header2" onmouseover="changeLink()">Đặng Minh Hoàng</div>
</div>
</a>
<ul id="link" onmouseover="changeHeader()">
<div class="col my-1">Nháp1</div>
<div class="col my-1">Nháp2</div>
<div class="col my-1">Nháp3</div>
<div class="col my-1">Nháp4</div>
<div class="col my-1">Nháp5</div>
</ul>
</div>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

How to change image captions on a global level

How do I overrule already-styled image captions (color, size) on WordPress on a global level?
I have already tried using code like below in my themes custom css editor on the front end but the color for all captions do not change because they were manually made at the time in post editor to be white and now globally I want them all to be black:
body {
background-color: #CCC;
}
.wp-caption-text {
font-size: 8px;
font-style: italic;
color: #444;
}
<p style="text-align: center;">
<span style="font-size:12px;"><strong>Text here.<div id="attachment_1111" style="max-width: 500px" class="wp-caption aligncenter"><img src="http://www.mywebsite/wp-content/uploads/2017/09/image-upload.jpg" alt="Text here" width="500" height="650" class="size-full wp-image-1111 wp-caption aligncenter" srcset="http://www.mywebsite/wp-content/uploads/2017/09/image-upload.jpg 500w, http://www.mywebsite/wp-content/uploads/2017/09/image-upload.jpg 225w, http://www.mywebsite/wp-content/uploads/2017/09/image-upload.jpg 450w" sizes="(max-width: 500px) 100vw, 500px" /><p class="wp-caption-text"><span style="color:#FFFFFF;"><span style="font-size:10px;"><em>google</em></span></span></p></div></strong></span>
</p>
I also tried using this, but it did nothing. My captions remained white.
color: #444 !important;
Any help would be greatly appreciated.

The main problem here is that you've changed the color of text inside the .wp-caption-text but not for links inside that div (and then the subsequent span), which is where your caption text is according to your HTML.
You can achieve that colour change by changing the selector from .wp-caption-text to .wp-caption-text a span like this:
body {
background-color: #CCC;
}
.wp-caption-text a span {
font-size: 8px;
font-style: italic;
color: #444;
}
<p style="text-align: center;">
<span style="font-size:12px;">
<strong>Text here.
<div id="attachment_1111" style="max-width: 500px" class="wp-caption aligncenter">
<img src="http://www.mywebsite/wp-content/uploads/2017/09/image-upload.jpg" alt="Text here" width="500" height="650" class="size-full wp-image-1111 wp-caption aligncenter" srcset="http://www.mywebsite/wp-content/uploads/2017/09/image-upload.jpg 500w, http://www.mywebsite/wp-content/uploads/2017/09/image-upload.jpg 225w, http://www.mywebsite/wp-content/uploads/2017/09/image-upload.jpg 450w" sizes="(max-width: 500px) 100vw, 500px" />
<p class="wp-caption-text">
<a href="https://www.google.com" target="_blank">
<span style="color:#FFFFFF;">
<span style="font-size:10px;">
<em>google</em>
</span>
</span>
</a>
</p>
</div>
</strong>
</span>
</p>

Please use Below code :
.wp-caption {
border: 1px solid #B1A79B;
text-align: center;
padding-top: 10px;
margin: 10px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
background-image: url(images/image path here.jpg);
background-repeat: no-repeat;
background-position: center bottom;
}
.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}
.wp-caption p.wp-caption-text {
font-size: 1em;
line-height: 17px;
font-weight: bold;
padding: 8px;
margin: 0;
}

Make sure that your custom stylesheet is loaded last in the source-code. So possibly after plugins' css etc.
<link rel="stylesheet" id="some-plugin" href="http://example.com/plugins/some-plugin.css" type="text/css" media="all" />
<link rel="stylesheet" id="main-theme-styles" href="http://example.com/theme/style.css" type="text/css" media="all" />
If your stylesheet is called last in the source, this will overwride previously defined css properties automaticly. (If they have the same or weaker specificity).
You can also try to target the .wp-caption container elelement and then its children (to increase the specificity) like:
.wp-caption .wp-caption-text {
font-size: 20px;
color: red;
}
.wp-caption .wp-caption-text a { /* links inside the caption */
color: orange;
}

get text input after submit button or press enter from search bar

I want to know how get an input from search bar
and how to replace image in div
I try to create a simple website to get the picture and then show up because i don't want to download each picture and merge in photoshop
This is i have try.
p.s. It's my free time to explore how to use html css and javascript.
P.s. No need to read my css. i just want some suggestion to get data by using javascript
Thank you.
function getInput() {
var input_symbol = get input from search bar
var input_symbol = input_symbol.concat(*BK);
/***** after that use the value to get data from this website
****** by 5 periods 30min 120min day week month
http://www.investorz.com/investorzChart.php?
mode=pc
&Provider=DDC
&symbolnsources=input_symbol
&Size=1200*1080
&End=20170124
&Start=
&period=Monthly //weekly //daily //Minutely
&interval=1 //120 and 30 (for Minutely period)
&Cycle=MONTH1 //WEEK1 DAY1 //MINUTE120 MINUTE30 (for Minutely period)
&Type=3
&ticket=1
&Scale=0
&EMA=5;10;25;50;75;200
&MA=
&OVER=;;;;
&IND=RSI(7);MACD(12,26,9);;;
&COMP=
&ShowBar=100
&max=400
&Skin=InvestorLight
&Layout=2Line;Default;Price;HisDate
&Width=1
&TimeStamp=21;50;1485183010.73 //current time
*************************************************** then replace all of 5 divs /
}
body, html {
padding: 3px 3px 3px 3px;
background-color: #d8dbe2;
font-family: Verdana, sans-serif;
font-size: 11pt;
text-align: center;
}
#custom-search-input {
margin:0;
margin-top: 10px;
padding: 0;
}
#custom-search-input .search-query {
padding-right: 3px;
padding-right: 4px \9;
padding-left: 3px;
padding-left: 4px \9;
/* IE7-8 doesn't have border-radius, so don't indent the padding */
margin-bottom: 0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
#custom-search-input button {
border: 0;
background: none;
/** belows styles are working good */
padding: 2px 5px;
margin-top: 2px;
position: relative;
left: -28px;
/* IE7-8 doesn't have border-radius, so don't indent the padding */
margin-bottom: 0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
color: #000000;
}
.search-query:focus + button {
z-index: 3;
}
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 2px solid #ddd;
}
th, td {
text-align: left;
padding: 8px;
}
img {
max-width: 800px;
height: auto;
width: auto\9; /* ie8 */
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div class="container">
<div class="row">
<div id="custom-search-input">
<div class="input-group col-md-12">
<input type="text" class=" search-query form-control" placeholder="ADD SYMBOL" />
<span class="input-group-btn">
<button class="btn btn-danger" type="button" onclick="getInput();">
<span class=" glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</div>
</div>
<table>
<tr>
<td>
<div id="img1"><img src="img1.png"></div>
</td>
<td>
<div id="img2"><img src="img2.png"></div>
</td>
<td>
<div id="img3"><img src="img3.png"></div>
</td>
</tr>
<tr>
<td>
<div id="img4"><img src="img4.png"></div>
</td>
<td>
<div id="img5"><img src="img5.png"></div>
</td>
</tr>
</table>
</body>
</html>

How to increase the width of my twitter feed

I am trying to increase the width of the twitter feed displayed on my webpage, I added a Div id to it and tried increasing its size in css however it stops getting bigger after a certain point, Also I want to add images in my portfolio section which includes 3 random pictures of like computers which get bigger and change size when you hover over them in css, how do I do this? Also I can't figure out how to change the color of the background of the webpage, everything I have tried doesn't work. Thanks.
I have provided the HTML, CSS and JS code for my code below.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Muhammed's Webpage</title>
<style>
#body {
margin: auto;
max-width: 85%;
font-family: 'Exo 2', Times, serif;
color: black;
padding-top: 50px;
}
.mainlogo {
font-size: 18px;
font-weight: 900;
font-family: 'Montserrat', Times, serif;
text-decoration: underline;
}
nav {
position: fixed;
top: 0;
width: 100%;
margin-left: 4%;
opacity: 0.8;
max-width: 85%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
position: fixed;
font-size: 20px;
}
li {
float: left;
border-right: 2px solid black;
}
li:first-child {
border-left: 2px solid black;
}
li a {
display: inline-block;
color: black;
text-align: justify;
padding: 36px 40px;
text-decoration: underline;
font-family: 'Montserrat', Times, serif;
text-shadow: 4px 4px 4px #aaa;
}
li a:hover {
background-color: #C2E5E5;
color: black;
}
.yt {
margin-left: 53px;
margin-top: 30px;
display: inline-block;
height: 500px;
width: 650px;
}
#twitter {
display: inline-block;
height: 300px;
width: 300px;
}
.contentbox {
font-family: 'Exo 2', sans-serif;
font-weight: 700;
font-size: 2em;
padding-left: 10px;
padding-bottom: 0;
margin-bottom: 0;
background-color: #C2E5E5;
}
.content {
background-color: #C2E5E5;
}
p {
text-indent: 3%;
margin: auto;
max-width: 95%;
}
.contentbox {
font-family: 'Montserrat', Times, serif;
font-size: 28px;
}
</style>
<script>
!function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https';
if (!d.getElementById(id)) {
js = d.createElement(s);
js.id = id;
js.src = p + "://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
}
}(document, "script", "twitter-wjs");
</script>
</head>
<body>
<div class="mainlogo">
<div>Muhammed's
<br>Webpage
</div>
</div>
<div id="body">
<nav>
<ul>
<li> BASIC INFORMATION </li>
<li> CURRICULUM VITAE </li>
<li> PORTFOLIO </li>
<li> REPORT </li>
</ul>
</nav>
<div class="yt">
<iframe src="http://www.youtube.com/embed/nKIu9yen5nc">
</iframe>
</div>
<div id="twitter">
<a class="twitter-timeline" href="https://twitter.com/applenws" data-widget-id="674678491141570560">Tweets by
#applenws</a>
</div>
<div class="content" id="Basic Information">
<h3 class="contentbox"><u>Basic Information</u></h3>
<p>
<br>Name: Muhammed Hussain
<br>Age: 18
<br>Contact Number: 07711909673
<br>E-mail: Mhuss055#gold.ac.uk
<br>Occupation: Student of Goldsmiths, University of London
<br>Hobbies & Interests: Playing on my ps4 and outdoor tennis
<br>
<br>
</p>
</div>
<div class="content" id="Curriculum Vitae">
<h3 class="contentbox"><u>Curriculum Vitae</u></h3>
<p>
<br><u>Jun 2015 - Currently Employed</u> : <b>Harrods - Operations Assistant</b>
<br>Responsible for ensuring all daily administrative tasks are met within time schedule
<br>Worked with colleagues to sustain a world class service of luxury goods, through providing an excellent
service while working in a team environment and focusing on customer service
<br>Proactive use of CCA and SAP software on a regular basis, in order to deal with online orders.
<br>
<br><u>Jun 2014 - Sep 2014</u> : <b>Direct Accountancy - Accounts Assistant</b>
<br>Assisted Account Manager through creating invoices and sending to customers using SAGE software
<br>Made and arranged invoices occasionally for customers, and ensured these were sent out promptly upon
receiving the order.
<br>
<br>
<u>Skills Gained:</u>
<br>Communication - Established rapport and resolved queries within pressurised customer service
environments
<br>Teamwork - Motivated and developed colleagues to work effectively
<br>Leadership - Showed leadership qualities when delivering end of unit presentations at Sixth form
<br>
<br>
<p>
</div>
<div class="content" id="Portfolio">
<h3 class="contentbox"><u>Portfolio</u></h3>
<p>
<br>Here im going to include some images and use css to make them interactive and exciting
<br>
<br>
</p>
</div>
<div class="content" id="Report">
<h3 class="contentbox"><u>Report</u></h3>
<p>
<br>Here im going to state why i did what i did in detail
<p>
<br>
</div>
<br>
<br>
</div>
</body>
</html>

Your Twitter feed has a width set in HTML property. Erase the property and move it to CSS. That should fix the Twitter thing. Edit: Remember that the height is set on Twitter > Settings > Widget > Height.
- EDIT 1 -
Now that I know your Twitter feed can't be controlled by you, you have to control the result of your Twitter script which will normally be 600px of height by default. No matter what this is, you know it will end up styling an iframe with the twitter-timeline CSS class, so you only need to overwrite the value like this:
.twitter-timeline {
height: 503px; // 503 because for some reason it needs 3 more pixels to catch up with your video, as I could see.
}
- END EDIT 1 -
You just gave away all of your personal information to strangers around the web. You'll probably be spammed in a few seconds if they are true. I suggest you ONLY provide necessary code. There is a lot of CSS and HTML not related to the question, you can simply ask them in another question or explain them apart of each other.
To place pictures you can do many things, being them random means either JavaScript or preloaded with PHP. I imagine you would be loading them from your site, let's say /images/computers/ and give them a class, for instance photo. Then on CSS, you can do the following:
.photo {
height:200px;
}
.photo:hover {
height:400px;
}
That will make it bigger on hover using CSS. If you like to animate it, you might want to use other CSS properties. Search on the web, you'll find them.
- EDIT 2 -
So, looking at your pictures with the class photo, I see that you were not adding the % values correctly. You need to find a balanced value for each one of your images. In your case, we are playing with image padding, margin and width basically. So there are 3 images and you know that the percentage must reach something around 100%:
.photo {
background-color: white;
padding: 1%;
margin-left: 5%;
margin-bottom: 2%;
-webkit-box-shadow: 0 0 0.2em 0.15em rgba(00, 00, 00, 0.35);
box-shadow: 0 0 0.2em 0.15em rgba(00, 00, 00, 0.35);
float: left;
width: 25%;
transition: all 0.25s ease-out;
}
According to this code I wrote for you, now the formula is:
(3 * 25%) + (6 * 1%) + (3 * 5%) = 75% + 6% + 15% = 96%
6 times 1% because the padding will be added to both left and right of the picture.
- END EDIT 2 -
The background color of the website? That is just too basic. It depends on your needs, you can set your background color to the <html> or <body>. I'll use HTML:
html {
background-color:red;
}
With that, your website will have a red background. Of course you can use HEX, or rgb() or rgba() or color names, whatever you want.

Try this codes.
twitter frame having max-width="520" that is a boundary.portfolia images supported responsive also.
MAKE IT COOL,WE LOVE OUR CODING.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Muhammed's Webpage</title>
<link rel="stylesheet" type="text/css" href="homepage.css">
<script src="homepage.js"></script>
<link href='https://fonts.googleapis.com/css?family=Exo+2:500,700,800italic,600|Montserrat' rel='stylesheet' type='text/css'>
</head>
<div class="mainlogo">
<body>Muhammed's
<br>Webpage</body>
</div>
<div id="body">
<nav>
<ul>
<li> BASIC INFORMATION </li>
<li> CURRICULUM VITAE </li>
<li> PORTFOLIO </li>
<li> REPORT </li>
</ul>
</nav>
<div class="yt">
<iframe src="http://www.youtube.com/embed/nKIu9yen5nc">
</iframe>
</div>
<div id = "twitter">
<a class="twitter-timeline" href="https://twitter.com/applenws" data-widget-id="674678491141570560">Tweets by #applenws</a>
</div>
<div class="content" id="Basic Information">
<h3 class="contentbox"> <u>Basic Information</u> </h3>
<p>
<br>Name: Muhammed Hussain
<br>Age: 18
<br>Contact Number: 07711909673
<br>E-mail: Mhuss055#gold.ac.uk
<br>Occupation: Student of Goldsmiths, University of London
<br>Hobbies & Interests: Playing on my ps4 and outdoor tennis
<br>
<br>
</p>
</div>
<div class="content" id="Curriculum Vitae">
<h3 class="contentbox"> <u>Curriculum Vitae</u> </h3>
<p>
<br><u>Jun 2015 - Currently Employed</u> : <b>Harrods - Operations Assistant</b>
<br>Responsible for ensuring all daily administrative tasks are met within time schedule
<br>Worked with colleagues to sustain a world class service of luxury goods, through providing an excellent service while working in a team environment and focusing on customer service
<br>Proactive use of CCA and SAP software on a regular basis, in order to deal with online orders.
<br>
<br><u>Jun 2014 - Sep 2014</u> : <b>Direct Accountancy - Accounts Assistant</b>
<br>Assisted Account Manager through creating invoices and sending to customers using SAGE software
<br>Made and arranged invoices occasionally for customers, and ensured these were sent out promptly upon receiving the order.
<br>
<br>
<u>Skills Gained:</u>
<br>Communication - Established rapport and resolved queries within pressurised customer service environments
<br>Teamwork - Motivated and developed colleagues to work effectively
<br>Leadership - Showed leadership qualities when delivering end of unit presentations at Sixth form
<br>
<br>
<p>
</div>
<div class="content" id="Portfolio" style="height:250px">
<h3 class="contentbox"> <u>Portfolio</u> </h3>
<p>
<br>Here im going to include some images and use css to make them interactive and exciting
<br>
<br>
</p>
<ul class="portfolioimg" style="">
<li><img src="https://getbootstrap.com/assets/img/devices.png" alt="Responsive across devices" class="img-responsive"></li>
<li><img src="https://getbootstrap.com/assets/img/devices.png" alt="Responsive across devices" class="img-responsive"></li>
<li><img src="https://getbootstrap.com/assets/img/devices.png" alt="Responsive across devices" class="img-responsive"></li>
</ul>
</div>
<div class="content" id="Report">
<h3 class="contentbox"> <u>Report</u> </h3>
<p>
<br>Here im going to state why i did what i did in detail
<p>
<br>
</div>
<br>
<br>
</body>
</html>
<style>
body{
background-color:gray;
}
.portfolioimg {
clear: both;
display: block;
margin: 30px auto 0;
padding: 0;
position: static !important;
text-align: center;
width: 1000px;
background-color:transparent;
}
.portfolioimg > li {
background-color: transparent !important;
border: medium none !important;
display: inline-block;
float: none;
list-style-type: none;
margin-right: 40px;
text-align: center;
}
.portfolioimg > li img{
width:200px;
}
#body {
margin: auto;
max-width: 85%;
font-family: 'Exo 2', Times, serif;
color: black;
padding-top: 50px;
}
.mainlogo {
font-size: 18px;
font-weight: 900;
font-family: 'Montserrat' , Times, serif;
text-decoration: underline;
}
nav {
position: fixed;
top: 0;
width: 100%;
margin-left: 4%;
opacity: 0.8;
max-width: 85%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
position: fixed;
font-size: 20px;
}
li {
float: left;
border-right: 2px solid black;
}
li:first-child {
border-left: 2px solid black;
}
li a {
display: inline-block;
color: black;
text-align: justify;
padding: 36px 40px;
text-decoration: underline;
font-family: 'Montserrat', Times, serif;
text-shadow: 4px 4px 4px #aaa ;
}
li a:hover {
background-color: #C2E5E5;
color: black;
}
.yt {
margin-left: 53px;
margin-top: 30px;
display:inline-block;
height: 500px;
width: 650px;
}
#twitter {
display:inline-block;
height: 300px;
width: 520px;
}
.contentbox {
font-family: 'Exo 2', sans-serif;
font-weight: 700;
font-size: 2em;
padding-left: 10px;
padding-bottom: 0;
margin-bottom: 0;
background-color: #C2E5E5;
}
.content {
background-color: #C2E5E5;
}
p {
text-indent: 3%;
margin: auto;
max-width: 95%;
}
.contentbox {
font-family: 'Montserrat', Times, serif;
font-size: 28px;
}
</style>
<script>
!function(d,s,id){
var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
if(!d.getElementById(id)){
js=d.createElement(s);
js.id=id;
js.src=p+"://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);
}
}(document,"script","twitter-wjs");
</script>

Develop Reference

JavaScript is the programming language of the Web.

Border not rendering properly in xhtml2pdf django - javascript

Related

How to make transparent element while dragging in Chrome?

Change the list heading when move the cursor to the list element

How to change image captions on a global level

get text input after submit button or press enter from search bar

How to increase the width of my twitter feed

Categories

Resources