I am working on html through angularjs.
While I am working on the title of the page, it shows me the part of title
What I mean about it is that the image below shows you.
My code for html is below,
<div class="wrapper">
<div class="page-header section-dark" style="background-image: url('./assets/img/Cover1.jpg')">
<div class="content-center">
<div class="container">
<div class="title-brand">
<div class="angular-logo"><img alt="" src="./assets/img/asia-logo.png"></div>
<h1 class="presentation-title"> ASIA-SMS</h1>
<div class="type">pro</div>
<div class="fog-low">
<img src="./assets/img/sections/fog-low.png" alt="">
</div>
<div class="fog-low right">
<img src="./assets/img/sections/fog-low.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
Is there any way to fix it?
Thanks
Related
markup 1: -
below I've created "about section" block. in this block have some mini blocks like:- stats and features.
` <section class="about">
<div class="about__container">
<div class="about__header">
<h2 class="about__title">about title</h2>
<p class="about__sub-title">about sub title </p>
</div>
<div class="about-stats">
<div class="about-stats__item">
<div class="about-stats__title">stats title</div>
<div class="about-stats__sub-title">stats sub title</div>
</div>
</div>
<div class="about-features">
<div class="about-features__item">
<div class="about-features__icon">features icon </div>
<div class="about-features__title">features title </div>
</div>
</div>
</div>
</section>`
Question from about code:-
Should i need to create new css file to each block like about.css, about-stats.css and about-features.css or create one file for this block about.css ?
markup: 2
`<section class="about">
<div class="about__container">
<div class="about__header">
<h2 class="about__title">about title</h2>
<p class="about__sub-title">about sub title </p>
</div>
<div class="about__stats about-stats">
<div class="about-stats__item">
<div class="about-stats__title">stats title</div>
<div class="about-stats__sub-title">stats sub title</div>
</div>
</div>
<div class="about__features about-features">
<div class="about-features__item">
<div class="about-features__icon">features icon </div>
<div class="about-features__title">features title </div>
</div>
</div>
</div>
</section>`
question from above code:-
should we mix child blocks with parent block or markup 1 is good ?
In the following picture as you can see "Colton Smith" is coming in two lines. What should I do to prevent this? I want to display in the same line.
Here is my code
<div class="row mt-5" id='imag'>
<div class="col-lg-4">
<div class="row">
<div class="col-lg-1">
<img src="images/image-colton.jpg" alt="" />
</div>
<div class="col-lg-3" id="intro">
<h6>Colton Smith</h6>
<h6>Verified Buyer</h6>
</div>
</div>
<div class="row">
<p>
"We needed the same printed design as the one we had ordered aweek prior. Not only did they find the original order, but we alsoreceived it in time. Excellent!"
</p>
</div>
</div>
</div>
here is the image of above code
In your code change <div class="col-lg-3" id="intro"> to <div class="col-lg-11" id="intro">
I have this html structure :
<div class="wrapper2">
<div class="previewContainer2">
<div id="previewGroup">
<div id="filePreview">
<div id="icon">
<div id="whiteSheet"/>
<div id="extension">EXT</div>
</div>
</div>
<img id="thumbnail" src="assets/indesign.svg" />
<div id="fileName">aaa</div>
</div>
</div>
<div class="metadataContainer2">
</div>
</div>
But then once loaded in electron, the last div (.metadataContainer2) is moved inside the .previewContainer2 div :\
<div class="wrapper2">
<div class="previewContainer2">
<div id="previewGroup">
<div id="filePreview">
<div id="icon">
<div id="whiteSheet">
<div id="extension">EXT</div>
</div>
</div>
<img id="thumbnail" src="assets/indesign.svg">
<div id="fileName">aaa</div>
</div>
</div>
<div class="metadataContainer2">
<p>ncndnlkcd</p>
</div>
</div>
</div>
Did I do something wrong ?
If you follow the HTML5 rules a div tag can not be self closed. Check more on this site
So modify your original code line#6 to mentioned below.
<div id="whiteSheet"></div>
I'm trying to make the entire content inside the <a> tag clickable but only the text is right now.
Here a CodePen: http://codepen.io/francobermudez/pen/dvBpNw?editors=1100
HTML:
<section id="ultimos-eventos">
<div class="eventos-wrap">
<a href="#">
<div class="evento">
<div class="evento-fecha">
<div class="evento-dia">20</div>
<div class="evento-mes">MAR</div>
</div>
<div class="evento-info">
<div class="evento-titulo">This is my title</div>
<div class="evento-subtitulo">
<div class="evento-direccion"><div></div>This is my subtitle</div>
<a class="btn-evento btn-azul" href="#">Detalles</a>
</div>
</div>
</div>
</a>
</div>
</section>
You have a link inside a link (The "Detalles" text) - that cannot work. Delete the inner link (i.e. convert it to a regular text div or p tag) and you'll be able to click the whole container.
<section id="ultimos-eventos">
<div class="eventos-wrap">
<a href="#">
<div class="evento">
<div class="evento-fecha">
<div class="evento-dia">20</div>
<div class="evento-mes">MAR</div>
</div>
<div class="evento-info">
<div class="evento-titulo">This is my title</div>
<div class="evento-subtitulo">
<div class="evento-direccion"><div></div>This is my subtitle</div>
<div>Detalles</div>
</div>
</div>
</div>
</a>
</div>
</section>
http://codepen.io/anon/pen/GWbNjN?editors=1100
https://jsfiddle.net/ax26f966/
HTML:
<section id="btn">
<p>View the Newsletter</p>
<div id="facebook">
<div class="logo"><div class="recto"></div></div>
<div class="top"></div>
<div class="logo verso"></div>
</div>
<div id="shadow"><img src="http://lab.aqro.be/img/shadow.png" alt="shadow" /></div>
</section>
How can I add the text WEBSITE or something else next to the envelope, so when hovered, it also flips.
check here : jsfiddle
remove text-indent: -9999px; from #facebook
and change your html to:
View the Newsletter
<div class="logo">
<div class="recto">
<h2>WEBSITE</h2>
</div>
</div>
<div class="top"></div>
<div class="logo verso">
<h2>WEBSITE</h2>
</div>
</div>
<div id="shadow"><img src="http://lab.aqro.be/img/shadow.png" alt="shadow" /></div>
</section>