There is a page Site view. There is a code (I want to center the image <img class="youtube__icon-play" src="../img/Vector.png">)
body {
margin: 0;
padding: 0;
}
.globalcontainer {
margin-top: 0px;
margin-right: 4%;
margin-bottom: 0px;
margin-left: 4%;
height: 100%;
}
.header > .header__text {
position: relative;
width: 93px;
height: 24px;
left: 0;
margin-top: 129px;
margin-bottom: 20px;
font-family: TT Norms;
font-style: normal;
font-weight: bold;
font-size: 24px;
line-height: 100%;
/* identical to box height, or 24px */
color: #000000;
}
/*
.header__buttons {
left: 0;
top: 193px;
}
*/
.header__button {
width: 75px;
height: 30px;
border-radius: 4px;
background-color: #fff;
margin-right: 1.75%;
display: flex;
justify-content: center;
align-items: center;
white-space: nowrap;
}
.header__buttons {
display: flex;
flex-direction: row;
align-items: center;
padding: 7px 15px 7px 0px;
/*margin-right: 10%;*/
}
.content {
width: 100%;
}
.cardexample {
width: 100%;
}
.mobileimage img{
max-width: 100%;
height: auto;
}
.mobiles {
max-width: 100%;
}
.content__title {
font-family: TTNorms-Medium;
font-style: normal;
font-weight: bold;
font-size: 18px;
line-height: 21.6px;
margin: 0.3% 15px 0 15px;
}
.crashvideo {
width: 115px;
height: 30px;
border-radius: 4px;
margin-top: 15px;
background-color: #5f3ec0;
color: #ffffff;
}
.youtube__icon-play {
margin-left: 30.5px;
margin-top: 20.5px;
align: center;
}
<html>
<head>
<!-- <link rel="stylesheet" href="testsite.css">-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Example</title>
<link rel="stylesheet" type="text/css" href="../css/mobile.css" media="screen and (min-width: 320px) and (max-width: 639px)"></link>
<link rel="stylesheet" type="text/css" href="../css/tablet.css" media="screen and (min-width: 640px) and (max-width: 1023px)"></link>
<link rel="stylesheet" type="text/css" href="../css/desktop.css" media="screen and (min-width: 1024px) and (max-width: 1920px)"></link>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="globalcontainer">
<div class="header">
<div class="header__text">
Обзоры
</div>
<div class="header__buttons">
<!-- <span> -->
<button class="header__button">Все</button>
<button class="header__button">Видео</button>
<button class="header__button">Текст</button>
<button class="header__button">Обзоры</button>
<button class="header__button">Сравнения</button>
<button class="header__button">Краш видео</button>
<button class="header__button">Распаковка</button>
<!-- </span> -->
</div>
</div>
<div class="content">
<div class="cardexample">
<div class="mobileimage">
<img class="mobiles" src="../img/mobileimage.png">
</div>
<div class="content__title">
Iphone 11, почему такой же как и Pro Max, может быть большим в 3 строки вот так
<span class="video__icon">
<span>
<button class="crashvideo">Краш видео</button>
</span>
<span>
<img class="youtube__icon-play" src="../img/Vector.png">
</span>
</span>
</div>
</div>
<div class="cardexample">
</div>
<div class="cardexample">
</div>
<div class="cardexample">
</div>
</div>
</div>
<script type="text/javascript" src="jsactions.js"></script>
</body>
</html>
It is displayed as in the picture below (I want to center the image <img class="youtube__icon-play" src="../img/Vector.png">)
Youtube icon
How to achieve the display as on the 1st link? (I want to center the button)
Your images are not showing so its hard to tell exactly.. but to center the icon in line with the button inside video_icon try this
.video__icon {
display: flex;
align-items: center;
}
Consider changing from:
.youtube__icon-play {
margin-left: 30.5px;
margin-top: 20.5px;
align: center;
}
To:
.youtube__icon-play {
margin-left: auto;
margin-right: auto;
margin-top: 20.5px;
width: 50%;
align: center;
}
Related
I made the header menu of my website become a sidebar with the screen width. Everything was working fine, the menu could be toggled by clicking the icon. But then i noticed the majority of websites had this property that the menu would close if the user clicks anywhere in the screen. I tryed everything i could but everythime i add the event listener to the code (to remove the class that makes the menu visible), the onclick event that adds the class stops working.
HTML:
<!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>Portfolio.</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#300;400;700&display=swap" rel="stylesheet">
<link rel="apple-touch-icon" sizes="180x180" href="Favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="Favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="Favicon/favicon-16x16.png">
<link rel="shortcut icon" href="Favicon/favicon.ico" type="image/x-icon" />
<link rel="manifest" href="Favicon/site.webmanifest">
<link rel="stylesheet" href="https://unpkg.com/boxicons#latest/css/boxicons.min.css">
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body>
<!-- Header -->
<header id="header">
<div id="container">
<nav id="nav-bar">
Portfolio.
<ul id="nav-menu">
<div id="nav"><li><a id="link" href="#about-me">Sobre mim</a></li></div>
<div id="nav"><li><a id="link" href="#experience">Experiência</a></li></div>
<div id="nav"><li><a id="link" href="#projects">Projetos</a></li></div>
<div id="nav"><li><a id="link" href="#habilities">Competências</a></li></div>
<div id="nav"><button id="resume-btn">Currículo</button></li></div>
</ul>
<div class="menu-icon">
<h3 onclick="handleMenuToggle()">☰</h3>
</div>
</nav>
</div>
</header>
<!-- Sections -->
<main>
<section id="hero"> <!-- Main section -->
<div id="hero-txt">
<h2>
Seja bem vindo, eu sou
</h2>
<h1>
Yan Calvo
</h1>
<p>
Estudante de Ciência da computação e desenvolvedor web
</p>
<div class="social">
<i class='bx bxl-linkedin' ></i>
<i class='bx bxl-github' ></i>
</div>
</div>
</section>
<section id="about-me"> <!-- About section -->
<div id="txt-container" class="container reveal fade-left">
<h2>Sobre mim</h2>
<p>
Sou estudante de Ciência da computação, também
focado em aprender tecnologias de forma
independente. No momento me encontro dedicado a
aprimorar as minhas habilidades através da
experiência profissional e contato com outros
profissionais dedicados.<br><br>
O que mais me entusiasma em trabalhar com programação é poder projetar e criar coisas que tenham propósito e resolvam problemas reais.
Apoiar-se na pesquisa e percepção do cliente, encontrar as formas certas e dinâmicas de resolver determinados problemas, aprender com o processo e, em seguida, iterar e melhora-lo é a chave para um ótimo design.
</p>
</div>
<div class="container reveal fade-left">
<h4 id="quote">
“<br>
Knowledge has to be improved, challenged, and increased constantly, or it vanishes.<br>
”
</h4>
<h5>― Peter Drucker</h5>
</div>
</section>
<section id="experience"> <!-- Experience section -->
<div id="txt-container" class="container reveal fade-right">
<h2>Onde trabalhei </h2>
<p>
Ainda em busca de oportunidades profissionais
</p>
</div>
</section>
<section id="projects"> <!-- Projects section -->
<div id="txt-container" class="container reveal fade-left">
<h2>Projetos</h2>
<p>Trabalhos pessoais</p>
</div>
<div id="portfolio-content" class="container reveal fade-left">
<div class="col">
<img src="Img/work3.jpg">
<div class="layer">
<h3>Web Design</h3>
<h5>Popup</h5>
</div>
</div>
<div class="col">
<img src="Img/work3.jpg">
<div class="layer">
<h3>Web Design</h3>
<h5>Popup</h5>
</div>
</div>
<div class="col">
<img src="Img/work3.jpg">
<div class="layer">
<h3>Web Design</h3>
<h5>Popup</h5>
</div>
</div>
<div class="col">
<img src="Img/work3.jpg">
<div class="layer">
<h3>Web Design</h3>
<h5>Popup</h5>
</div>
</div>
<div class="col">
<img src="Img/work3.jpg">
<div class="layer">
<h3>Web Design</h3>
<h5>Popup</h5>
</div>
</div>
<div class="col">
<img src="Img/work3.jpg">
<div class="layer">
<h3>Web Design</h3>
<h5>Popup</h5>
</div>
</div>
</div>
</section>
<section id="habilities"> <!-- Contact section -->
<div id="txt-container" class="container reveal fade-right">
<h2>Competências</h2>
<div id="habilities-container">
<div id="hability-icons-container"></div>
<img id="hability-icon" src="Img/icons8-javascript-144.png" alt="">
<img id="hability-icon" src="Img/icons8-html-5-144.png" alt="">
<img id="hability-icon" src="Img/icons8-css3-144.png" alt="">
<img id="hability-icon" src="Img/icons8-git-144.png" alt="">
<img id="hability-icon" src="Img/icons8-github-128.png" alt="">
<div id="habilities-description"></div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer id="footer">
<div id="footer-copyright">
<h6>Projetado por Yan Calvo</h6>
</div>
<div id="social">
<h6>Email para contato: yancalvo#gmail.com</h6>
</div>
</footer>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 70px;
}
body {
position: relative;
background-color: #ece7e1;
}
html, body {
overflow-x: hidden;
}
/* Header */
header {
position: fixed;
top: 0;
width: 100%;
background-color: rgba(27,26,33,255);
z-index: 200;
}
#container {
width: 1800px;
margin: auto;
}
#nav-bar {
width: 95%;
margin: auto;
min-height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
}
#nav-brand {
color: white;
text-decoration: none;
font-size: 30px;
}
#nav-menu {
display: flex;
justify-content: space-between;
align-items: center;
}
#nav {
margin: auto 30px;
}
.menu-icon {
display: none;
}
#link {
margin-right: 15px;
color: white;
text-decoration: none;
transition: color 0.15s;
}
#link:hover {
color: gray;
font-style: italic;
}
#resume-btn {
width: 100px;
font-weight: bold;
font-size: 15px;
color: rgba(27,26,33,255);
background-color: #ece7e1;
border-radius: 23.5px;
border-style: solid;
border-color: #ece7e1;
padding: 10px;
cursor: pointer;
transition: color 0.15s, border-color 0.15s, width 1.0s;
}
#resume-btn:hover {
width: 150px;
}
/* Sections */
main {
padding-top: 70px;
}
section {
padding: 0px 100px;
}
#hero {
position: relative;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
grid-gap: 4rem;
}
.social a {
color: white;
width: 35px;
height: 35px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(27,26,33,255);
font-size: 17px;
margin-right: 22px;
margin-bottom: 30px;
margin-top: 20px;
}
.social a:hover{
transform: scale(1.1);
transition: .5s;
}
#about-me {
background-color: #191919;
min-height: 500px;
padding-top: 40px;
margin-bottom: 100px;
display: grid;
grid-template-columns: repeat(2, 2fr);
grid-gap: 2rem;
white-space: normal;
}
#experience {
min-height: 300px;
padding-top: 40px;
margin-bottom: 100px;
display: flex;
justify-content: center;
text-align: center;
white-space: normal;
}
#projects {
background-color: #191919;
min-height: 800px;
padding-top: 40px;
margin-bottom: 100px;
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
grid-gap: 2rem;
}
#portfolio-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, auto));
grid-gap: 2rem;
align-items: center;
margin-top: 5rem;
text-align: center;
cursor: pointer;
}
.layer{
background: transparent;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
border-radius: 12px;
transition: all .40s;
}
.layer:hover{
background: linear-gradient(rgba(0,0,0,0.5) 0%, #191919);
}
.layer h3{
position: absolute;
width: 100%;
font-size: 25px;
font-weight: 500;
color: white;
bottom: 0;
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: all .40s;
margin-bottom: 7px;
}
.layer:hover h3{
bottom: 52%;
opacity: 1;
}
.layer h5{
position: absolute;
width: 100%;
font-size:17px;
font-weight: 500;
color: white;
bottom: 0;
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: all .40s;
}
.layer:hover h5{
bottom: 48%;
opacity: 1;
}
.col {
position: relative;
}
.col img {
max-width: 100%;
width: 550px;
height: auto;
object-fit: cover;
border-radius: 12px;
}
#habilities {
min-height: 500px;
width: 90%;
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: center;
text-align: center;
}
li {
list-style: none;
}
h1 {
font-size: 90px;
color: rgba(27,26,33,255);
margin: 10px 0px 25px;
}
h2 {
font-size: 30px;
margin-bottom: 60px;
}
#about-me h2,
#projects h2
{
color: #ece7e1;
}
#experience h2,
#habilities h2 {
color: #191919;
}
#habilities-container {
display: flex;
flex-direction: column;
align-items: ;
}
#hability-icon {
width: 144px;
height: 144px;
transition: all 0.8s;
}
#hability-icon:hover {
height: 155px;
width: 155px;
}
h6 {
font-size: 20px;
color: white;
}
h4 {
font-size: 40px;
color: #ece7e1;
font-style: italic;
}
h5 {
color: rgba(27,26,33,255);
}
p {
color: gray;
text-align: justify;
}
#footer {
background-color: #191919;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 100px;
}
.reveal {
position: relative;
opacity: 0;
}
.reveal.active {
opacity: 1;
}
.active.fade-left {
animation: fade-left 0.5s ease-in;
}
.active.fade-right {
animation: fade-right 0.5s ease-in;
}
#keyframes fade-left {
0% {
transform: translateX(-100px);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
#keyframes fade-right {
0% {
transform: translateX(100px);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
#media(max-width:1800px) {
#container {
width: 100%;
}
}
#media only screen and (max-width: 1015px) {
#nav-menu {
position: fixed;
top: 70px;
right: -100%;
display: block;
background-color: rgba(27,26,33,255);
margin: 0;
height: 100%;
-webkit-box-shadow: 1px 6px 0px 6px rgba(0,0,0,0.13);
-moz-box-shadow: 1px 6px 0px 6px rgba(0,0,0,0.13);
box-shadow: 1px 6px 0px 6px rgba(0,0,0,0.13);
width: 250px;
transition: all 0.3s ease;
}
#nav-menu.show-nav {
right: 0;
}
#nav {
text-align: center;
margin: 20px auto;
}
.menu-icon {
color: white;
display: block;
margin: auto 0;
padding: 0 20px;
font-size: 30px;
cursor: pointer;
}
#brush-img {
display: none;
}
#about-me {
display: flex;
flex-direction: column;
}
}
Javascript:
//Toggle sidebar
const navContainer = document.getElementById('nav-menu')
function handleMenuToggle() {
navContainer.classList.add('show-nav')
}
document.onclick = function(e) {
if (e.target.id !== 'nav-menu' && e.target.id !== 'show-nav') {
navContainer.classList.remove('show-nav')
}
}
//Scroll animation
function reveal() {
var reveals = document.querySelectorAll(".reveal");
for (var i = 0; i < reveals.length; i++) {
var windowHeight = window.innerHeight;
var elementTop = reveals[i].getBoundingClientRect().top;
var elementVisible = 150;
if (elementTop < windowHeight - elementVisible) {
reveals[i].classList.add("active");
} else {
reveals[i].classList.remove("active");
}
}
}
window.addEventListener("scroll", reveal);
I just cannot make it work, i'm probably missing something or making some ugly mistakes in the structure of the code.
By taking a look at : this question you could try to do it this way : create a navbar sublcass called like :
navbar.open , and assign it these css properties :
/* If you use an id use #id_name or .classname if you use a class
*/
#id_of_navbar.open {
right: 0;
}
/* OR
.classname.open {
right: 0;
}
*/
And then add to your javascript :
var yournavbar = document.getElementById("id_of_navbar")
//Close menu when document is clicked anywhere
document.onclick = function () {
yournavbar.classList.remove("open");
};
And if you want your navbar to close if you click a part of it, just add this function :
//stop propagation on the side nav element
yournavbar.onclick = function(e) {
e.stopPropagation()
}
I tried that solution and it worked for me so I really hope it helps! Let me know if you are still trying to make it work without success despite this solution.
There is a website
$(document).ready(function() {
$('.header__button').click(function(event){
$('.header__button').removeClass('lilac');
$(this).addClass('lilac');
event.target.style.color='#ffffff';
}
);
const getItem = `<div class="cardexample">
<div class="mobileimage">
<img class="mobiles" src="../img/mobileimage.png">
</div>
<div class="content__title">
Iphone 11, почему такой же как и Pro Max, может быть большим в 3 строки вот так
</div>
<div class="video__icon">
<span>
<button class="crashvideo">Краш видео</button>
</span>
<span>
<img class="youtube__icon-play" src="../img/Vector.png">
</span>
<span>
<button class="crashvideo" id="ex2">Краш видео</button>
</span>
</div>
<div class="content__text">
Видео разбор с ответами на самые часто задаваемые вопросы может быть большим в 3 строки, видео разбор с ответами на самые часто задаваемые
</div>
<div class="endlink">
Читать далее
</div>
</div>
`;
if (document.documentElement.clientWidth<640)
{
const getAllItems = () => {
let content = '';
for (let i=0; i<4; i++) {
content+=getItem;
}
return content;
}
const renderAllItems = () => {
document.getElementById('content').innerHTML=getAllItems();
}
renderAllItems();
console.log('Mobile');
}
if ((window.innerWidth>=640) && (window.innerWidth<=1023))
{
let blocks = document.querySelectorAll('.content__article');
for (let block of blocks)
{
block.innerHTML=getItem;
}
console.log('Tablet');
}
if (document.documentElement.clientWidth > 1023)
{
console.log('Desktop');
}
}
)
body {
margin: 0;
padding: 0;
}
:root {
--containerfullwidth: 768;
}
.globalcontainer {
margin-top: 0px;
margin-right: calc((39/var(--containerfullwidth)*100)*1%);
margin-bottom: 0px;
margin-left: calc((39/var(--containerfullwidth)*100)*1%);
}
.header > .header__text {
position: relative;
width: 93px;
height: 24px;
left: 0;
margin-top: 129px;
margin-bottom: 20px;
font-family: TT Norms;
font-style: normal;
font-weight: bold;
font-size: 24px;
line-height: 100%;
/* identical to box height, or 24px */
color: #000000;
}
.header__button {
width: 75px;
height: 30px;
border-radius: 4px;
border-color: #5f3ec0;
background-color: #fff;
margin-right: 1.75%;
display: flex;
justify-content: center;
align-items: center;
white-space: nowrap;
}
.header__buttons {
display: flex;
flex-direction: row;
align-items: center;
padding: 7px 15px 7px 0px;
overflow: hidden;
/*margin-right: 10%;*/
}
.content {
width: 100%;
}
.cardexample {
width: 100%;
}
.mobileimage img{
max-width: 100%;
height: auto;
}
.mobiles {
max-width: 100%;
}
.content__title {
font-family: TTNorms-Medium;
font-style: normal;
font-weight: bold;
font-size: 18px;
line-height: 21.6px;
margin: 0.3% 15px 0 15px;
}
.crashvideo {
width: 115px;
height: 30px;
border-radius: 4px;
margin-top: 15px;
background-color: #5f3ec0;
color: #ffffff;
}
.video__icon {
margin-left: 15px;
display: flex;
flex-direction: row;
align-items: center;
}
#ex2 {
display: none;
}
.youtube__icon-play {
margin-left: auto;
margin-right: auto;
margin-top: 20.5px;
width: 25px;
height: 18.75px;
align: center;
}
.content__text {
margin-top: 16px;
text-align: left;
margin-left: 15px;
margin-right: 90px;
font-family: TT Norms;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 150%;
/* or 22px */
/* Main text */
color: #cacaca;
}
.endlink {
margin-top: 20px;
margin-left: 15px;
margin-bottom: 20px;
font-family: TT Norms;
font-style: normal;
font-weight: bold;
font-size: 16px;
line-height: 100%;
color: #121212;
}
a {
text-decoration: none;
}
.endlink a {
color: #121212;
}
.endlink a:visited {
color: #800080;
}
.show__more {
width: 345px;
height: 50px;
padding: 40px auto 40px auto;
border-radius: 6px;
background-color: #5f3ec0;
color: #ffffff;
}
.content {
display: grid;
grid-template-areas: 'content__parttext content__parttext'
'content__parttext content__parttext'
'content__parttext content__parttext'
'content__parttext content__parttext';
grid-template-columns: 50% 50%;
}
.content__article {
grid-area: 'content__parttext';
}
<html>
<head>
<!-- <link rel="stylesheet" href="testsite.css">-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test Example</title>
<link rel="stylesheet" type="text/css" href="../css/mobile.css" media="screen and (min-width: 320px) and (max-width: 639px)"></link>
<link rel="stylesheet" type="text/css" href="../css/tablet.css" media="screen and (min-width: 640px) and (max-width: 1023px)"></link>
<link rel="stylesheet" type="text/css" href="../css/desktop.css" media="screen and (min-width: 1024px) and (max-width: 1920px)"></link>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="container">
<div class="globalcontainer">
<div class="header">
<div class="header__text">
Обзоры
</div>
<div class="header__buttons">
<!-- <span> -->
<button class="header__button">Все</button>
<button class="header__button">Видео</button>
<button class="header__button">Текст</button>
<button class="header__button">Обзоры</button>
<button class="header__button">Сравнения</button>
<button class="header__button">Краш видео</button>
<button class="header__button">Распаковка</button>
<!-- </span> -->
</div>
</div>
<div class="content" id="content">
<div class="content__article">
</div>
<div class="content__article">
</div>
<div class="content__article">
</div>
<div class="content__article">
</div>
<div class="content__article">
</div>
<div class="content__article">
</div>
<div class="content__article">
</div>
<div class="content__article">
</div>
</div>
</div>
<button class="show__more">Показать еще</button>
<!-- </div> -->
<div class="footer">
<div class="logo__company">
</div>
<div class="contacts">
<div class="contacts__title">
Контакты
</div>
<div class="contacts__telephones">
<div class="telephone1">
+7 (800) 333 32 24
</div>
<div class="telephone2">
+7 (812) 448 68 11
</div>
</div>
<button class="requestcall">
Заказать звонок
</button>
</div>
<div class="internetshop">
<div class="internetshop__title">
Интернет магазин
</div>
<div class="disclosure__arrow">
>
</div>
</div>
<div class="company">
<div class="company__title">
Компания
</div>
<div class="disclosure__arrow">
>
</div>
</div>
<div class="help__to__the__buyer">
<div class="help__to__the__buyer__title">
Помощь покупателю
</div>
<div class="disclosure__arrow">
>
</div>
</div>
<div class="socialnetworks__links">
<div class="socialnetworks__links__title">
Мы в соц. сетях
</div>
<div class="socialnetworks__links-images">
<div class="facebook-image">
<embed src="../img/facebook.svg">
</div>
</div>
</div>
<div class="allrights">
<div class="allrights__text">
© 2020 Все права защищены
</div>
</div>
</div>
</div>
<script type="text/javascript" src="jsactions.js"></script>
</body>
</html>
It displays as follows
Tell me how to achieve the correct display of the element .show__more. Should display as on https://www.figma.com/file/noqP1gzhrAlGAErPNBgknp/test?node-id=1%3A783 (tablet version)
display: block; margin: auto; should do the trick:
$(document).ready(function() {
$('.header__button').click(function(event){
$('.header__button').removeClass('lilac');
$(this).addClass('lilac');
event.target.style.color='#ffffff';
}
);
const getItem = `<div class="cardexample">
<div class="mobileimage">
<img class="mobiles" src="../img/mobileimage.png">
</div>
<div class="content__title">
Iphone 11, почему такой же как и Pro Max, может быть большим в 3 строки вот так
</div>
<div class="video__icon">
<span>
<button class="crashvideo">Краш видео</button>
</span>
<span>
<img class="youtube__icon-play" src="../img/Vector.png">
</span>
<span>
<button class="crashvideo" id="ex2">Краш видео</button>
</span>
</div>
<div class="content__text">
Видео разбор с ответами на самые часто задаваемые вопросы может быть большим в 3 строки, видео разбор с ответами на самые часто задаваемые
</div>
<div class="endlink">
Читать далее
</div>
</div>
`;
if (document.documentElement.clientWidth<640)
{
const getAllItems = () => {
let content = '';
for (let i=0; i<4; i++) {
content+=getItem;
}
return content;
}
const renderAllItems = () => {
document.getElementById('content').innerHTML=getAllItems();
}
renderAllItems();
console.log('Mobile');
}
if ((window.innerWidth>=640) && (window.innerWidth<=1023))
{
let blocks = document.querySelectorAll('.content__article');
for (let block of blocks)
{
block.innerHTML=getItem;
}
console.log('Tablet');
}
if (document.documentElement.clientWidth > 1023)
{
console.log('Desktop');
}
}
)
body {
margin: 0;
padding: 0;
}
:root {
--containerfullwidth: 768;
}
.globalcontainer {
margin-top: 0px;
margin-right: calc((39/var(--containerfullwidth)*100)*1%);
margin-bottom: 0px;
margin-left: calc((39/var(--containerfullwidth)*100)*1%);
}
.header > .header__text {
position: relative;
width: 93px;
height: 24px;
left: 0;
margin-top: 129px;
margin-bottom: 20px;
font-family: TT Norms;
font-style: normal;
font-weight: bold;
font-size: 24px;
line-height: 100%;
/* identical to box height, or 24px */
color: #000000;
}
.header__button {
width: 75px;
height: 30px;
border-radius: 4px;
border-color: #5f3ec0;
background-color: #fff;
margin-right: 1.75%;
display: flex;
justify-content: center;
align-items: center;
white-space: nowrap;
}
.header__buttons {
display: flex;
flex-direction: row;
align-items: center;
padding: 7px 15px 7px 0px;
overflow: hidden;
/*margin-right: 10%;*/
}
.content {
width: 100%;
}
.cardexample {
width: 100%;
}
.mobileimage img{
max-width: 100%;
height: auto;
}
.mobiles {
max-width: 100%;
}
.content__title {
font-family: TTNorms-Medium;
font-style: normal;
font-weight: bold;
font-size: 18px;
line-height: 21.6px;
margin: 0.3% 15px 0 15px;
}
.crashvideo {
width: 115px;
height: 30px;
border-radius: 4px;
margin-top: 15px;
background-color: #5f3ec0;
color: #ffffff;
}
.video__icon {
margin-left: 15px;
display: flex;
flex-direction: row;
align-items: center;
}
#ex2 {
display: none;
}
.youtube__icon-play {
margin-left: auto;
margin-right: auto;
margin-top: 20.5px;
width: 25px;
height: 18.75px;
align: center;
}
.content__text {
margin-top: 16px;
text-align: left;
margin-left: 15px;
margin-right: 90px;
font-family: TT Norms;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 150%;
/* or 22px */
/* Main text */
color: #cacaca;
}
.endlink {
margin-top: 20px;
margin-left: 15px;
margin-bottom: 20px;
font-family: TT Norms;
font-style: normal;
font-weight: bold;
font-size: 16px;
line-height: 100%;
color: #121212;
}
a {
text-decoration: none;
}
.endlink a {
color: #121212;
}
.endlink a:visited {
color: #800080;
}
.show__more {
width: 345px;
height: 50px;
display: block; /* added */
margin: auto; /* added */
/* cannot use auto in padding */
/* padding: 40px auto 40px auto; */
border-radius: 6px;
background-color: #5f3ec0;
color: #ffffff;
}
.content {
display: grid;
grid-template-areas: 'content__parttext content__parttext'
'content__parttext content__parttext'
'content__parttext content__parttext'
'content__parttext content__parttext';
grid-template-columns: 50% 50%;
}
.content__article {
grid-area: 'content__parttext';
}
<html>
<head>
<!-- <link rel="stylesheet" href="testsite.css">-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test Example</title>
<link rel="stylesheet" type="text/css" href="../css/mobile.css" media="screen and (min-width: 320px) and (max-width: 639px)"></link>
<link rel="stylesheet" type="text/css" href="../css/tablet.css" media="screen and (min-width: 640px) and (max-width: 1023px)"></link>
<link rel="stylesheet" type="text/css" href="../css/desktop.css" media="screen and (min-width: 1024px) and (max-width: 1920px)"></link>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="container">
<div class="globalcontainer">
<div class="header">
<div class="header__text">
Обзоры
</div>
<div class="header__buttons">
<!-- <span> -->
<button class="header__button">Все</button>
<button class="header__button">Видео</button>
<button class="header__button">Текст</button>
<button class="header__button">Обзоры</button>
<button class="header__button">Сравнения</button>
<button class="header__button">Краш видео</button>
<button class="header__button">Распаковка</button>
<!-- </span> -->
</div>
</div>
<div class="content" id="content">
<div class="content__article">
</div>
<div class="content__article">
</div>
<div class="content__article">
</div>
<div class="content__article">
</div>
<div class="content__article">
</div>
<div class="content__article">
</div>
<div class="content__article">
</div>
<div class="content__article">
</div>
</div>
</div>
<button class="show__more">Показать еще</button>
<!-- </div> -->
<div class="footer">
<div class="logo__company">
</div>
<div class="contacts">
<div class="contacts__title">
Контакты
</div>
<div class="contacts__telephones">
<div class="telephone1">
+7 (800) 333 32 24
</div>
<div class="telephone2">
+7 (812) 448 68 11
</div>
</div>
<button class="requestcall">
Заказать звонок
</button>
</div>
<div class="internetshop">
<div class="internetshop__title">
Интернет магазин
</div>
<div class="disclosure__arrow">
>
</div>
</div>
<div class="company">
<div class="company__title">
Компания
</div>
<div class="disclosure__arrow">
>
</div>
</div>
<div class="help__to__the__buyer">
<div class="help__to__the__buyer__title">
Помощь покупателю
</div>
<div class="disclosure__arrow">
>
</div>
</div>
<div class="socialnetworks__links">
<div class="socialnetworks__links__title">
Мы в соц. сетях
</div>
<div class="socialnetworks__links-images">
<div class="facebook-image">
<embed src="../img/facebook.svg">
</div>
</div>
</div>
<div class="allrights">
<div class="allrights__text">
© 2020 Все права защищены
</div>
</div>
</div>
</div>
<script type="text/javascript" src="jsactions.js"></script>
</body>
</html>
I appreciate all the help I can get :)
I'm trying to create a responsive navbar, which is editable for later usage.
But it seems like I have an issue with the hamburger icon. If I resize the web browser the content gets switched for the mobile friendly hamburger icon and the menu appears, and vice versa.
But when I click the hamburger icon in the mobile view and then click it again to make the menu disappear and after this resizing it to desktop view the menu goes missing.
How can I make it work?
HTML:
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Framework</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
<script src="js/main.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
$(".navbar-hamburger").click(function(){
$(".navbar-item").toggle();
});
});
</script>
</head>
<body class="bg-grey-light">
<nav class="navbar bg-white">
<div class="navbar-brand">Company Name</div>
<div class="navbar-item">
Home
</div>
<div class="navbar-item">
About
</div>
<div class="navbar-item">
Shop
</div>
<div class="navbar-item">
Forum
</div>
<div class="navbar-hamburger">
<i class="fa fa-chevron-down"></i>
</div>
</nav>
</body>
CSS:
.navbar{
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
position: relative;
}
.navbar-brand{
flex-grow: 100;
padding: 0.75rem;
padding-left: 1.5rem;
}
.navbar-item{
flex-grow: 0;
padding: 0.75rem;
display: block;
}
.navbar-item:hover {
background-color: var(--color-grey-lighter);
}
.navbar-hamburger{
display: none;
position: absolute;
padding: 0.75rem 1.5rem 0.75rem 1.5rem;
right: 0;
}
.navbar-hamburger-active{
display: none;
position: absolute;
padding: 0.75rem 1.5rem 0.75rem 1.5rem;
right: 0;
}
#media only screen and (max-width: 720px) {
.navbar{
flex-direction: column;
align-items: flex-start;
}
.navbar-brand{
width: 100%;
}
.navbar-item{
width: 100%;
padding-left: 1.5rem;
display: none;
}
.navbar-hamburger{
display: block;
}
}
Brief DEMO:
https://codepen.io/zalandemeter12/pen/dQayMP
Regards
You can use toggleClass instead and hide navbar-item only on little screens
#import url("https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
.navbar{
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
position: relative;
}
.navbar-brand{
flex-grow: 100;
padding: 0.75rem;
padding-left: 1.5rem;
}
.navbar-item{
flex-grow: 0;
padding: 0.75rem;
display: block;
}
.navbar-item:hover {
background-color: var(--color-grey-lighter);
}
.navbar-hamburger{
display: none;
position: absolute;
padding: 0.75rem 1.5rem 0.75rem 1.5rem;
right: 0;
}
.navbar-hamburger-active{
display: none;
position: absolute;
padding: 0.75rem 1.5rem 0.75rem 1.5rem;
right: 0;
}
#media only screen and (max-width: 720px) {
.navbar{
flex-direction: column;
align-items: flex-start;
}
.navbar-brand{
width: 100%;
}
.navbar-item{
width: 100%;
padding-left: 1.5rem;
display: none;
}
.navbar-hamburger{
display: block;
}
#media only screen and (max-width: 768px) {
.navbar-item{
display:none;
}
.navbar-item.opened{
display:block;
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
$(".navbar-hamburger").click(function(){
$(".navbar-item").toggleClass('opened');
});
});
</script>
<nav class="navbar bg-wihite">
<div class="navbar-brand">Company Name</div>
<div class="navbar-item">
Home
</div>
<div class="navbar-item">
About
</div>
<div class="navbar-item">
Shop
</div>
<div class="navbar-item">
Forum
</div>
<div class="navbar-hamburger">
<i class="fa fa-chevron-down"></i>
</div>
</nav>
i am new to web development, I have a small problem with positioning i placed a element with content in it all of the word are grumble up instead of be in one line . can anyone help me with a solution. positioning has been a big problem for me so far so if you guys know any sources where i can learn more about css positioning
#import url('https://fonts.googleapis.com/css?family=Yantramanav:100');
#import url('https://fonts.googleapis.com/css?family=Montserrat:400');
#import url('https://fonts.googleapis.com/css?family=Poiret+One');
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.intro {
height: 100%;
width: 100%;
margin: auto;
display: table;
top: 0;
background-size: cover;
background:url(https://picstatio.com/download/1600x900/864423/food-dishes-beer-bottle.jpg)no-repeat 50% 50%;
}
.intro .inner{
display: table-cell;
vertical-align: middle;
width: 100%;
max-width: none;
}
.content {
max-width: 600px;
margin: 0 auto;
text-align: center;
}
.content h1 {
font-family: "Yantramana";
font-size: 600%;
font-weight: 100;
color: #E1EFE9;
line-height: 70%;
}
.btn{
font-family: "montserrat";
font-size: 135%;
font-weight: 400;
color: orange;
text-transform: uppercase;
text-decoration: none;
border: solid #ffffff;
padding: 10px 20px;
border-radius: 9px;
transition: all 0.7s;
}
.btn:hover {
color: #CBDFD6;
border: solid #CBDFD6;
}
.about-us{
height:100%;
width: 100%;
margin: auto;
display: table;
background-color: #ffffff;
background-size: cover;
position: relative;
}
.ab-content {
font-family: "Poiret One";
font-weight: lighter;
position: absolute;
font-size: 150%;
left: 50%;
transform: translateX(-50%);
}
.ab-p{
position: absolute;
top: 10%;
left: 50%;
font-weight: lighter;
transform: translateX(-50%);
font-family: "montserrat";
}
.color {
color:orange;
}
/*--- Media Queries --*/
#media screen and (max-width: 900px) {
}
#media screen and (max-width: 768px) {
}
#media screen and (max-width: 480px) {
}
<!DOCTYPE html>
<html>
<head>
<title>Full Screen Landing Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href="css/animate.css" rel="stylesheet"/>
<link href="css/waypoints.css" rel="stylesheet"/>
<script src="js/jquery.waypoints.min.js" type="text/javascript"></script>
<script src="js/waypoints.js" type="text/javascript"></script>
</head>
<body>
<section class="intro">
<div class="inner">
<div class="content">
<section class="os-animation" data-os-animation="bounceInUp" data-os-animation-delay=".3s">
<h1>Find <span class="color">Your</span> Taste!</h1>
</section>
<section class="os-animation" data-os-animation="slideInLeft" data-os-animation-delay="0s">
<a class="btn" href="#">Get Started</a>
</div>
</div>
</section>
<section class="about-us">
<div class="ab-inner">
<div class="ab-content">
<section class="os-animation" data-os-animation="slideInLeft" data-os-animation-delay="0s">
<h2 class="center">Our Mission</h2>
<section class="os-animation" data-os-animation="slideInUp" data-os-animation-delay=".5s">
<p class="ab-p">Our mission is to provide the best food ingedients.</p>
</div>
</div>
</section>
</body>
</html>
"Relative" "position" relates positions, so this can avoid mess.
.ab-content {
font-family: "Poiret One";
font-weight: lighter;
position: relative;
font-size: 150%;
left: 50%;
transform: translateX(-50%);
}
I assume you would like the "Our Mission" section to be centered and readable.
.ab-p {
font-weight: lighter;
font-family: "montserrat";
text-align: center;
}
h2 {
text-align: center;
}
Recommendation: don't use position:absolute unless you absolutely needed it, because this rule removes the element from the automatic positioning of the browser - meaning you are in complete control of where to position it.
I'm creating a website, and when adding a background image to my CSS there appears to be a random white vertical line on the left side of the screen. I've checked this in both Chrome and Safari browsers. Would anyone be able to help fix this and also explain how it originated?
.container-fluid {
background-color: white;
background-image: none;
border-color: white;
border-style: solid;
border-width: 15px 15px 15px 15px;
}
.navbar {
display: flex;
align-items: center;
}
.fb {
height: 50px;
width: 50px;
float: right;
}
a.btn-quote {
float: right;
padding-top: auto;
padding-bottom: auto;
}
.header {
background-image: url(http://images.all-free-download.com/images/graphiclarge/green_grass_04_hd_picture_166122.jpg);
background-repeat: none;
background-size: cover;
}
.logo_img {
height: 150px;
width: 200px;
float: left;
display: block;
}
blockquote.slogan {
font-size: 35px;
color: red;
text-align: center;
}
.quote {
text-align: center;
font-size: 40px;
color: white;
}
span.free {
color: red;
}
.premium {
font-family: 'Graduate';
font-size: 50px;
text-align: center;
color: white;
}
.addy {
max-width: 50%;
margin-right: auto;
margin-left: auto;
}
.fqbutton {
display: inline-block;
margin-right: auto;
margin-left: auto;
}
.article {
margin-right: 250px;
margin-left: 250px;
}
blockquote.construction {
font-size: 15px;
color: white;
text-align: center;
}
.constructpic {
height: 250px;
width: 250px;
display: block;
margin-right: auto;
margin-left: auto;
}
footer {
text-align: center;
color: black;
background-color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>CCF Lawn Care</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style1.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<!-- MAIN CONTAINER -->
<div class="container-fluid">
<body>
<!-- CCF LOGO IMG -->
<img src="http://res.cloudinary.com/hfitzger/image/upload/c_scale,h_650,w_900/v1497668893/CCF_Logo_jsa1ha.jpg" alt="CCF Logo" class="logo_img" />
<!-- NAV BAR -->
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">CCF Lawn Care</a>
</div>
<ul class="nav navbar-nav">
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
<!-- FACEBOOK -->
<img src="https://cdn0.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/512/social_facebook_box_blue.png" class="fb">
<!-- FREE QUOTE BUTTON -->
Free Quote
</div>
</nav>
<blockquote class="slogan"><em>"We work hard so <strong> <ins>YOU</ins></strong> don't have to!"</em>
</blockquote>
<!-- HEADER -->
<div class="header">
<p class="premium">Premium Lawn Care service in Middle Tennessee</p>
<!-- FREE QUOTE SECTION -->
<div class="addy">
<input class="form-control" type="text" placeholder="Enter your address here" required>
<button type="submit" class="btn btn-primary">Get Free Quote </button>
</div>
<h3 class="quote">Call 615-870-9822 for a <span class="free">FREE QUOTE</span></h3>
<!-- ARTICLE SECTION -->
<blockquote class ="construction">Please come back and view our updates as we are temporarily under construction! <img src="https://server211.web-hosting.com:2083/cpsess0930665082/viewer/home%2fhfitzger%2fpublic_html%2fimages/construction.png" class="constructpic"></blockquote>
<!-- FOOTER -->
<footer>
Created and managed by <img src="https://res.cloudinary.com/hfitzger/image/upload/t_media_lib_thumb/v1497793352/Fitz_Bitz_Logo_jqhmjq.png" alt="Fitz&Bitz Logo" />
</footer>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<!-- Bootstrap Js CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
The white line is because of the blockquote element, you can disable the white border by adding
blockquote {
border-left: none;
}
If I understand, it's the default border on blockquote from bootstrap. Just set border-left: none on an element you want to disable that. In this case, blockquote.construction
.container-fluid {
background-color: white;
background-image: none;
border-color: white;
border-style: solid;
border-width: 15px 15px 15px 15px;
}
.navbar {
display: flex;
align-items: center;
}
.fb {
height: 50px;
width: 50px;
float: right;
}
a.btn-quote {
float: right;
padding-top: auto;
padding-bottom: auto;
}
.header {
background-image: url(http://images.all-free-download.com/images/graphiclarge/green_grass_04_hd_picture_166122.jpg);
background-repeat: none;
background-size: cover;
}
.logo_img {
height: 150px;
width: 200px;
float: left;
display: block;
}
blockquote.slogan {
font-size: 35px;
color: red;
text-align: center;
}
.quote {
text-align: center;
font-size: 40px;
color: white;
}
span.free {
color: red;
}
.premium {
font-family: 'Graduate';
font-size: 50px;
text-align: center;
color: white;
}
.addy {
max-width: 50%;
margin-right: auto;
margin-left: auto;
}
.fqbutton {
display: inline-block;
margin-right: auto;
margin-left: auto;
}
.article {
margin-right: 250px;
margin-left: 250px;
}
blockquote.construction {
font-size: 15px;
color: white;
text-align: center;
border-left: none;
}
.constructpic {
height: 250px;
width: 250px;
display: block;
margin-right: auto;
margin-left: auto;
}
footer {
text-align: center;
color: black;
background-color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>CCF Lawn Care</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style1.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<!-- MAIN CONTAINER -->
<div class="container-fluid">
<body>
<!-- CCF LOGO IMG -->
<img src="http://res.cloudinary.com/hfitzger/image/upload/c_scale,h_650,w_900/v1497668893/CCF_Logo_jsa1ha.jpg" alt="CCF Logo" class="logo_img" />
<!-- NAV BAR -->
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">CCF Lawn Care</a>
</div>
<ul class="nav navbar-nav">
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
<!-- FACEBOOK -->
<img src="https://cdn0.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/512/social_facebook_box_blue.png" class="fb">
<!-- FREE QUOTE BUTTON -->
Free Quote
</div>
</nav>
<blockquote class="slogan"><em>"We work hard so <strong> <ins>YOU</ins></strong> don't have to!"</em>
</blockquote>
<!-- HEADER -->
<div class="header">
<p class="premium">Premium Lawn Care service in Middle Tennessee</p>
<!-- FREE QUOTE SECTION -->
<div class="addy">
<input class="form-control" type="text" placeholder="Enter your address here" required>
<button type="submit" class="btn btn-primary">Get Free Quote </button>
</div>
<h3 class="quote">Call 615-870-9822 for a <span class="free">FREE QUOTE</span></h3>
<!-- ARTICLE SECTION -->
<blockquote class ="construction">Please come back and view our updates as we are temporarily under construction! <img src="https://server211.web-hosting.com:2083/cpsess0930665082/viewer/home%2fhfitzger%2fpublic_html%2fimages/construction.png" class="constructpic"></blockquote>
<!-- FOOTER -->
<footer>
Created and managed by <img src="https://res.cloudinary.com/hfitzger/image/upload/t_media_lib_thumb/v1497793352/Fitz_Bitz_Logo_jqhmjq.png" alt="Fitz&Bitz Logo" />
</footer>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<!-- Bootstrap Js CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
You are getting the unwanted border from Blockquote tag.
In your Css for of Blockquote class replace with below:
blockquote.construction {
font-size: 15px;
color: white;
text-align: center;
border-left: none;
}
Note : Also I observed the white border is present in the slogan blockquote as well. The reason it is not visible as the background color there is white. But if you will inspect the element, you will see it there.
I will recommend to add a common class to all blockquote with
border-left: none;