Why is HTML layout breaking at 769px?
up vote
-1
down vote
favorite
I am writing a basic web page template with html/css. The navigation's code is done from following a tutorial.
- At 769px the layout breaks, the page is not full width, being hidden. As follows:
Screenshot: https://imgur.com/a/QfjrbP8
Why is the layout breaking, I've looked at the navigation code? i can't find the issue, help! Please check 769px.
$("#toggle").click(function()
$(this).toggleClass('on');
$("#resize").toggleClass("active");
);
html
font-size: 10px;
font-family: 'Courier New', 'Courier', 'monospace';
body
font-size: 2.2rem;
.sec
padding: 2.2rem;
/*
Navigation
*/
*
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
body
width: 100%;
height: 100vh;
background: url(Hero.jpg) no-repeat 50% 50%;
background-size: cover;
display: table;
.content
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
.content h1
color: #fff;
font-family: "Poppins";
font-weight: 200;
font-size: 40px;
nav
width: 100%;
background: #000;
height: 70px;
position: static;
z-index: 1;
nav #brand
float: left;
display: block;
margin-left: 84px;
font-size: 30px;
line-height: 70px;
font-weight: bold;
nav #brand a
color: #fff;
transition: all 0.3s ease-out;
font-family: "Poppins";
font-weight: 300;
nav #menu
float: left;
left: 50%;
position: relative;
nav #menu li
display: inline-block;
padding: 0px 30px;
cursor: pointer;
line-height: 70px;
position: relative;
transition: all 0.3s ease-out;
nav #menu li a
color: #fff;
font-family: "Poppins";
font-weight: 200;
#toggle
position: absolute;
right: 20px;
top: 14px;
z-index: 999;
width: 40px;
height: 40px;
cursor: pointer;
float: right;
transition: all 0.3s ease-out;
visibility: hidden;
opacity: 0;
#toggle .span
height: 3px;
background: #fff;
transition: all 0.3s ease-out;
backface-visibility: hidden;
margin: 5px auto;
#toggle.on #one
transform: rotate(45deg) translateX(2px) translateY(4px);
#toggle.on #two
opacity: 0;
#toggle.on #three
transform: rotate(-45deg) translateX(8px) translateY(-10px);
#resize
z-index: 1;
top: 0px;
position: absolute;
background: #000;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0;
transition: all 1s ease-out;
display: table;
#resize #menu
height: 90px;
display: table-cell;
vertical-align: center;
#resize #menu li
display: block;
text-align: center;
padding: 20px 0;
font-size: 50px;
min-height: 50px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease-out;
#resize li:nth-child(1)
margin-top:140px;
#resize #menu li a
color: #fff;
#resize.active
visibility: visible;
opacity: 0.99;
@media(max-width: 768px)
#toggle
visibility: visible;
opacity: 1;
margin-top: 6px;
nav #brand
margin-left: 18px;
#menu a
font-family: "Poppins";
font-weight: 200;
font-size: 20px;
nav #menu
display: none;
@media(min-width: 768px)
#resize
visibility: hidden !important;
/*
Hero Section
*/
.hero-wrap
background-color: #b072d4;
color:#ffffff;
height: 100vh;
#hero-icon
position: absolute;
top: 34.5rem;
opacity: 0.8;
width:100%;
right:0;
background: url('hero-icon-4.png') right bottom;;
height: 300px;
background-repeat: no-repeat;
#hero-icon button
opacity: 1;
padding: 1rem;
color:#fff;
font-weight: bold;
font-size: 1.6rem;
background-color: black;
border: none;
position: relative;
left: 30%;
top: 10%;
.hero-wrap h1
margin:0;
padding-left:4rem;
position: relative;
top: 10rem;
font-size: 3rem;
font-family: 'Courier New', Courier, monospace;
.hero-wrap h2
font-family: 'Courier New', Courier, monospace;
position: relative;
top: 12rem;
padding-left: 4rem;
font-size: 2rem;
/*
SECTION 1
*/
.section-1
display: flex;
flex-direction:column-reverse;
text-align: center;
.sec1-row
display: flex;
flex-direction:column-reverse;
margin: 2rem 0;
.section1-images
width: 50%;
.row-content
font-size: 1.6rem;
padding: 2rem 1rem;
/*
Section 2
*/
.section-2
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
margin:auto;
background-color: #00e8ff;
.section-2 .icon-img
width: 50%;
.icon-box
width: 50%;
align-self: center;
text-align: center;
margin:2rem;
padding: 1rem;
background-color: #fff;
border: 10px solid #ffd434;
<!DOCTYPE html>
<html>
<head>
<title>TweetSentiment App</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="normalize.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<nav>
<span id="brand">
<a href="index.html">Brand</a>
</span>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">FAQ</a></li>
</ul>
<div id="toggle">
<div class="span" id="one"></div>
<div class="span" id="two"></div>
<div class="span" id="three"></div>
</div>
</nav>
<div id="resize">
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</div>
<section class="hero-wrap sec">
<h1>
ANALYZE TWITTER DATA.
</h1>
<h2>
Search #hashtags and perform sentiment analysis.
</h2>
<div id="hero-icon">
<button>Learn More</button>
</div>
</section>
<section class="section-1 sec">
<div class="sec1-row">
<div class="row-content">
<h3>Sentiment Analysis.</h3>
<article>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here. <br><br>Content here', making it look like readable English.
Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</article>
</div>
<div>
<img class="section1-images" src="img1.png" alt="image">
</div>
</div>
<div class="sec1-row">
<div class="row-content">
<h3>Data Tracking.</h3>
<article>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here. <br><br> Content here', making it look like readable English.
Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</article>
</div>
<div>
<img class="section1-images" src="img2.png" alt="image">
</div>
</div>
</section>
<section class="section-2 sec">
<div class="icon-box">
<img class="icon-img" src="icons/icon2.png" alt="icon">
<h5>HASTAGS ANALYZED</h5>
</div>
<div class="icon-box">
<img class="icon-img" src="icons/icon1.png" alt="icon">
<h5>USERS SERVED</h5>
</div>
<div class="icon-box">
<img class="icon-img" src="icons/icon3.png" alt="icon">
<h5>TWEETS COMPUTED</h5>
</div>
</section>
<section class="section-3 sec">
</section>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
javascript html css layout
add a comment |
up vote
-1
down vote
favorite
I am writing a basic web page template with html/css. The navigation's code is done from following a tutorial.
- At 769px the layout breaks, the page is not full width, being hidden. As follows:
Screenshot: https://imgur.com/a/QfjrbP8
Why is the layout breaking, I've looked at the navigation code? i can't find the issue, help! Please check 769px.
$("#toggle").click(function()
$(this).toggleClass('on');
$("#resize").toggleClass("active");
);
html
font-size: 10px;
font-family: 'Courier New', 'Courier', 'monospace';
body
font-size: 2.2rem;
.sec
padding: 2.2rem;
/*
Navigation
*/
*
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
body
width: 100%;
height: 100vh;
background: url(Hero.jpg) no-repeat 50% 50%;
background-size: cover;
display: table;
.content
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
.content h1
color: #fff;
font-family: "Poppins";
font-weight: 200;
font-size: 40px;
nav
width: 100%;
background: #000;
height: 70px;
position: static;
z-index: 1;
nav #brand
float: left;
display: block;
margin-left: 84px;
font-size: 30px;
line-height: 70px;
font-weight: bold;
nav #brand a
color: #fff;
transition: all 0.3s ease-out;
font-family: "Poppins";
font-weight: 300;
nav #menu
float: left;
left: 50%;
position: relative;
nav #menu li
display: inline-block;
padding: 0px 30px;
cursor: pointer;
line-height: 70px;
position: relative;
transition: all 0.3s ease-out;
nav #menu li a
color: #fff;
font-family: "Poppins";
font-weight: 200;
#toggle
position: absolute;
right: 20px;
top: 14px;
z-index: 999;
width: 40px;
height: 40px;
cursor: pointer;
float: right;
transition: all 0.3s ease-out;
visibility: hidden;
opacity: 0;
#toggle .span
height: 3px;
background: #fff;
transition: all 0.3s ease-out;
backface-visibility: hidden;
margin: 5px auto;
#toggle.on #one
transform: rotate(45deg) translateX(2px) translateY(4px);
#toggle.on #two
opacity: 0;
#toggle.on #three
transform: rotate(-45deg) translateX(8px) translateY(-10px);
#resize
z-index: 1;
top: 0px;
position: absolute;
background: #000;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0;
transition: all 1s ease-out;
display: table;
#resize #menu
height: 90px;
display: table-cell;
vertical-align: center;
#resize #menu li
display: block;
text-align: center;
padding: 20px 0;
font-size: 50px;
min-height: 50px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease-out;
#resize li:nth-child(1)
margin-top:140px;
#resize #menu li a
color: #fff;
#resize.active
visibility: visible;
opacity: 0.99;
@media(max-width: 768px)
#toggle
visibility: visible;
opacity: 1;
margin-top: 6px;
nav #brand
margin-left: 18px;
#menu a
font-family: "Poppins";
font-weight: 200;
font-size: 20px;
nav #menu
display: none;
@media(min-width: 768px)
#resize
visibility: hidden !important;
/*
Hero Section
*/
.hero-wrap
background-color: #b072d4;
color:#ffffff;
height: 100vh;
#hero-icon
position: absolute;
top: 34.5rem;
opacity: 0.8;
width:100%;
right:0;
background: url('hero-icon-4.png') right bottom;;
height: 300px;
background-repeat: no-repeat;
#hero-icon button
opacity: 1;
padding: 1rem;
color:#fff;
font-weight: bold;
font-size: 1.6rem;
background-color: black;
border: none;
position: relative;
left: 30%;
top: 10%;
.hero-wrap h1
margin:0;
padding-left:4rem;
position: relative;
top: 10rem;
font-size: 3rem;
font-family: 'Courier New', Courier, monospace;
.hero-wrap h2
font-family: 'Courier New', Courier, monospace;
position: relative;
top: 12rem;
padding-left: 4rem;
font-size: 2rem;
/*
SECTION 1
*/
.section-1
display: flex;
flex-direction:column-reverse;
text-align: center;
.sec1-row
display: flex;
flex-direction:column-reverse;
margin: 2rem 0;
.section1-images
width: 50%;
.row-content
font-size: 1.6rem;
padding: 2rem 1rem;
/*
Section 2
*/
.section-2
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
margin:auto;
background-color: #00e8ff;
.section-2 .icon-img
width: 50%;
.icon-box
width: 50%;
align-self: center;
text-align: center;
margin:2rem;
padding: 1rem;
background-color: #fff;
border: 10px solid #ffd434;
<!DOCTYPE html>
<html>
<head>
<title>TweetSentiment App</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="normalize.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<nav>
<span id="brand">
<a href="index.html">Brand</a>
</span>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">FAQ</a></li>
</ul>
<div id="toggle">
<div class="span" id="one"></div>
<div class="span" id="two"></div>
<div class="span" id="three"></div>
</div>
</nav>
<div id="resize">
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</div>
<section class="hero-wrap sec">
<h1>
ANALYZE TWITTER DATA.
</h1>
<h2>
Search #hashtags and perform sentiment analysis.
</h2>
<div id="hero-icon">
<button>Learn More</button>
</div>
</section>
<section class="section-1 sec">
<div class="sec1-row">
<div class="row-content">
<h3>Sentiment Analysis.</h3>
<article>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here. <br><br>Content here', making it look like readable English.
Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</article>
</div>
<div>
<img class="section1-images" src="img1.png" alt="image">
</div>
</div>
<div class="sec1-row">
<div class="row-content">
<h3>Data Tracking.</h3>
<article>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here. <br><br> Content here', making it look like readable English.
Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</article>
</div>
<div>
<img class="section1-images" src="img2.png" alt="image">
</div>
</div>
</section>
<section class="section-2 sec">
<div class="icon-box">
<img class="icon-img" src="icons/icon2.png" alt="icon">
<h5>HASTAGS ANALYZED</h5>
</div>
<div class="icon-box">
<img class="icon-img" src="icons/icon1.png" alt="icon">
<h5>USERS SERVED</h5>
</div>
<div class="icon-box">
<img class="icon-img" src="icons/icon3.png" alt="icon">
<h5>TWEETS COMPUTED</h5>
</div>
</section>
<section class="section-3 sec">
</section>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
javascript html css layout
add a comment |
up vote
-1
down vote
favorite
up vote
-1
down vote
favorite
I am writing a basic web page template with html/css. The navigation's code is done from following a tutorial.
- At 769px the layout breaks, the page is not full width, being hidden. As follows:
Screenshot: https://imgur.com/a/QfjrbP8
Why is the layout breaking, I've looked at the navigation code? i can't find the issue, help! Please check 769px.
$("#toggle").click(function()
$(this).toggleClass('on');
$("#resize").toggleClass("active");
);
html
font-size: 10px;
font-family: 'Courier New', 'Courier', 'monospace';
body
font-size: 2.2rem;
.sec
padding: 2.2rem;
/*
Navigation
*/
*
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
body
width: 100%;
height: 100vh;
background: url(Hero.jpg) no-repeat 50% 50%;
background-size: cover;
display: table;
.content
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
.content h1
color: #fff;
font-family: "Poppins";
font-weight: 200;
font-size: 40px;
nav
width: 100%;
background: #000;
height: 70px;
position: static;
z-index: 1;
nav #brand
float: left;
display: block;
margin-left: 84px;
font-size: 30px;
line-height: 70px;
font-weight: bold;
nav #brand a
color: #fff;
transition: all 0.3s ease-out;
font-family: "Poppins";
font-weight: 300;
nav #menu
float: left;
left: 50%;
position: relative;
nav #menu li
display: inline-block;
padding: 0px 30px;
cursor: pointer;
line-height: 70px;
position: relative;
transition: all 0.3s ease-out;
nav #menu li a
color: #fff;
font-family: "Poppins";
font-weight: 200;
#toggle
position: absolute;
right: 20px;
top: 14px;
z-index: 999;
width: 40px;
height: 40px;
cursor: pointer;
float: right;
transition: all 0.3s ease-out;
visibility: hidden;
opacity: 0;
#toggle .span
height: 3px;
background: #fff;
transition: all 0.3s ease-out;
backface-visibility: hidden;
margin: 5px auto;
#toggle.on #one
transform: rotate(45deg) translateX(2px) translateY(4px);
#toggle.on #two
opacity: 0;
#toggle.on #three
transform: rotate(-45deg) translateX(8px) translateY(-10px);
#resize
z-index: 1;
top: 0px;
position: absolute;
background: #000;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0;
transition: all 1s ease-out;
display: table;
#resize #menu
height: 90px;
display: table-cell;
vertical-align: center;
#resize #menu li
display: block;
text-align: center;
padding: 20px 0;
font-size: 50px;
min-height: 50px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease-out;
#resize li:nth-child(1)
margin-top:140px;
#resize #menu li a
color: #fff;
#resize.active
visibility: visible;
opacity: 0.99;
@media(max-width: 768px)
#toggle
visibility: visible;
opacity: 1;
margin-top: 6px;
nav #brand
margin-left: 18px;
#menu a
font-family: "Poppins";
font-weight: 200;
font-size: 20px;
nav #menu
display: none;
@media(min-width: 768px)
#resize
visibility: hidden !important;
/*
Hero Section
*/
.hero-wrap
background-color: #b072d4;
color:#ffffff;
height: 100vh;
#hero-icon
position: absolute;
top: 34.5rem;
opacity: 0.8;
width:100%;
right:0;
background: url('hero-icon-4.png') right bottom;;
height: 300px;
background-repeat: no-repeat;
#hero-icon button
opacity: 1;
padding: 1rem;
color:#fff;
font-weight: bold;
font-size: 1.6rem;
background-color: black;
border: none;
position: relative;
left: 30%;
top: 10%;
.hero-wrap h1
margin:0;
padding-left:4rem;
position: relative;
top: 10rem;
font-size: 3rem;
font-family: 'Courier New', Courier, monospace;
.hero-wrap h2
font-family: 'Courier New', Courier, monospace;
position: relative;
top: 12rem;
padding-left: 4rem;
font-size: 2rem;
/*
SECTION 1
*/
.section-1
display: flex;
flex-direction:column-reverse;
text-align: center;
.sec1-row
display: flex;
flex-direction:column-reverse;
margin: 2rem 0;
.section1-images
width: 50%;
.row-content
font-size: 1.6rem;
padding: 2rem 1rem;
/*
Section 2
*/
.section-2
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
margin:auto;
background-color: #00e8ff;
.section-2 .icon-img
width: 50%;
.icon-box
width: 50%;
align-self: center;
text-align: center;
margin:2rem;
padding: 1rem;
background-color: #fff;
border: 10px solid #ffd434;
<!DOCTYPE html>
<html>
<head>
<title>TweetSentiment App</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="normalize.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<nav>
<span id="brand">
<a href="index.html">Brand</a>
</span>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">FAQ</a></li>
</ul>
<div id="toggle">
<div class="span" id="one"></div>
<div class="span" id="two"></div>
<div class="span" id="three"></div>
</div>
</nav>
<div id="resize">
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</div>
<section class="hero-wrap sec">
<h1>
ANALYZE TWITTER DATA.
</h1>
<h2>
Search #hashtags and perform sentiment analysis.
</h2>
<div id="hero-icon">
<button>Learn More</button>
</div>
</section>
<section class="section-1 sec">
<div class="sec1-row">
<div class="row-content">
<h3>Sentiment Analysis.</h3>
<article>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here. <br><br>Content here', making it look like readable English.
Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</article>
</div>
<div>
<img class="section1-images" src="img1.png" alt="image">
</div>
</div>
<div class="sec1-row">
<div class="row-content">
<h3>Data Tracking.</h3>
<article>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here. <br><br> Content here', making it look like readable English.
Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</article>
</div>
<div>
<img class="section1-images" src="img2.png" alt="image">
</div>
</div>
</section>
<section class="section-2 sec">
<div class="icon-box">
<img class="icon-img" src="icons/icon2.png" alt="icon">
<h5>HASTAGS ANALYZED</h5>
</div>
<div class="icon-box">
<img class="icon-img" src="icons/icon1.png" alt="icon">
<h5>USERS SERVED</h5>
</div>
<div class="icon-box">
<img class="icon-img" src="icons/icon3.png" alt="icon">
<h5>TWEETS COMPUTED</h5>
</div>
</section>
<section class="section-3 sec">
</section>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
javascript html css layout
I am writing a basic web page template with html/css. The navigation's code is done from following a tutorial.
- At 769px the layout breaks, the page is not full width, being hidden. As follows:
Screenshot: https://imgur.com/a/QfjrbP8
Why is the layout breaking, I've looked at the navigation code? i can't find the issue, help! Please check 769px.
$("#toggle").click(function()
$(this).toggleClass('on');
$("#resize").toggleClass("active");
);
html
font-size: 10px;
font-family: 'Courier New', 'Courier', 'monospace';
body
font-size: 2.2rem;
.sec
padding: 2.2rem;
/*
Navigation
*/
*
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
body
width: 100%;
height: 100vh;
background: url(Hero.jpg) no-repeat 50% 50%;
background-size: cover;
display: table;
.content
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
.content h1
color: #fff;
font-family: "Poppins";
font-weight: 200;
font-size: 40px;
nav
width: 100%;
background: #000;
height: 70px;
position: static;
z-index: 1;
nav #brand
float: left;
display: block;
margin-left: 84px;
font-size: 30px;
line-height: 70px;
font-weight: bold;
nav #brand a
color: #fff;
transition: all 0.3s ease-out;
font-family: "Poppins";
font-weight: 300;
nav #menu
float: left;
left: 50%;
position: relative;
nav #menu li
display: inline-block;
padding: 0px 30px;
cursor: pointer;
line-height: 70px;
position: relative;
transition: all 0.3s ease-out;
nav #menu li a
color: #fff;
font-family: "Poppins";
font-weight: 200;
#toggle
position: absolute;
right: 20px;
top: 14px;
z-index: 999;
width: 40px;
height: 40px;
cursor: pointer;
float: right;
transition: all 0.3s ease-out;
visibility: hidden;
opacity: 0;
#toggle .span
height: 3px;
background: #fff;
transition: all 0.3s ease-out;
backface-visibility: hidden;
margin: 5px auto;
#toggle.on #one
transform: rotate(45deg) translateX(2px) translateY(4px);
#toggle.on #two
opacity: 0;
#toggle.on #three
transform: rotate(-45deg) translateX(8px) translateY(-10px);
#resize
z-index: 1;
top: 0px;
position: absolute;
background: #000;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0;
transition: all 1s ease-out;
display: table;
#resize #menu
height: 90px;
display: table-cell;
vertical-align: center;
#resize #menu li
display: block;
text-align: center;
padding: 20px 0;
font-size: 50px;
min-height: 50px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease-out;
#resize li:nth-child(1)
margin-top:140px;
#resize #menu li a
color: #fff;
#resize.active
visibility: visible;
opacity: 0.99;
@media(max-width: 768px)
#toggle
visibility: visible;
opacity: 1;
margin-top: 6px;
nav #brand
margin-left: 18px;
#menu a
font-family: "Poppins";
font-weight: 200;
font-size: 20px;
nav #menu
display: none;
@media(min-width: 768px)
#resize
visibility: hidden !important;
/*
Hero Section
*/
.hero-wrap
background-color: #b072d4;
color:#ffffff;
height: 100vh;
#hero-icon
position: absolute;
top: 34.5rem;
opacity: 0.8;
width:100%;
right:0;
background: url('hero-icon-4.png') right bottom;;
height: 300px;
background-repeat: no-repeat;
#hero-icon button
opacity: 1;
padding: 1rem;
color:#fff;
font-weight: bold;
font-size: 1.6rem;
background-color: black;
border: none;
position: relative;
left: 30%;
top: 10%;
.hero-wrap h1
margin:0;
padding-left:4rem;
position: relative;
top: 10rem;
font-size: 3rem;
font-family: 'Courier New', Courier, monospace;
.hero-wrap h2
font-family: 'Courier New', Courier, monospace;
position: relative;
top: 12rem;
padding-left: 4rem;
font-size: 2rem;
/*
SECTION 1
*/
.section-1
display: flex;
flex-direction:column-reverse;
text-align: center;
.sec1-row
display: flex;
flex-direction:column-reverse;
margin: 2rem 0;
.section1-images
width: 50%;
.row-content
font-size: 1.6rem;
padding: 2rem 1rem;
/*
Section 2
*/
.section-2
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
margin:auto;
background-color: #00e8ff;
.section-2 .icon-img
width: 50%;
.icon-box
width: 50%;
align-self: center;
text-align: center;
margin:2rem;
padding: 1rem;
background-color: #fff;
border: 10px solid #ffd434;
<!DOCTYPE html>
<html>
<head>
<title>TweetSentiment App</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="normalize.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<nav>
<span id="brand">
<a href="index.html">Brand</a>
</span>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">FAQ</a></li>
</ul>
<div id="toggle">
<div class="span" id="one"></div>
<div class="span" id="two"></div>
<div class="span" id="three"></div>
</div>
</nav>
<div id="resize">
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</div>
<section class="hero-wrap sec">
<h1>
ANALYZE TWITTER DATA.
</h1>
<h2>
Search #hashtags and perform sentiment analysis.
</h2>
<div id="hero-icon">
<button>Learn More</button>
</div>
</section>
<section class="section-1 sec">
<div class="sec1-row">
<div class="row-content">
<h3>Sentiment Analysis.</h3>
<article>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here. <br><br>Content here', making it look like readable English.
Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</article>
</div>
<div>
<img class="section1-images" src="img1.png" alt="image">
</div>
</div>
<div class="sec1-row">
<div class="row-content">
<h3>Data Tracking.</h3>
<article>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here. <br><br> Content here', making it look like readable English.
Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</article>
</div>
<div>
<img class="section1-images" src="img2.png" alt="image">
</div>
</div>
</section>
<section class="section-2 sec">
<div class="icon-box">
<img class="icon-img" src="icons/icon2.png" alt="icon">
<h5>HASTAGS ANALYZED</h5>
</div>
<div class="icon-box">
<img class="icon-img" src="icons/icon1.png" alt="icon">
<h5>USERS SERVED</h5>
</div>
<div class="icon-box">
<img class="icon-img" src="icons/icon3.png" alt="icon">
<h5>TWEETS COMPUTED</h5>
</div>
</section>
<section class="section-3 sec">
</section>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
$("#toggle").click(function()
$(this).toggleClass('on');
$("#resize").toggleClass("active");
);
html
font-size: 10px;
font-family: 'Courier New', 'Courier', 'monospace';
body
font-size: 2.2rem;
.sec
padding: 2.2rem;
/*
Navigation
*/
*
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
body
width: 100%;
height: 100vh;
background: url(Hero.jpg) no-repeat 50% 50%;
background-size: cover;
display: table;
.content
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
.content h1
color: #fff;
font-family: "Poppins";
font-weight: 200;
font-size: 40px;
nav
width: 100%;
background: #000;
height: 70px;
position: static;
z-index: 1;
nav #brand
float: left;
display: block;
margin-left: 84px;
font-size: 30px;
line-height: 70px;
font-weight: bold;
nav #brand a
color: #fff;
transition: all 0.3s ease-out;
font-family: "Poppins";
font-weight: 300;
nav #menu
float: left;
left: 50%;
position: relative;
nav #menu li
display: inline-block;
padding: 0px 30px;
cursor: pointer;
line-height: 70px;
position: relative;
transition: all 0.3s ease-out;
nav #menu li a
color: #fff;
font-family: "Poppins";
font-weight: 200;
#toggle
position: absolute;
right: 20px;
top: 14px;
z-index: 999;
width: 40px;
height: 40px;
cursor: pointer;
float: right;
transition: all 0.3s ease-out;
visibility: hidden;
opacity: 0;
#toggle .span
height: 3px;
background: #fff;
transition: all 0.3s ease-out;
backface-visibility: hidden;
margin: 5px auto;
#toggle.on #one
transform: rotate(45deg) translateX(2px) translateY(4px);
#toggle.on #two
opacity: 0;
#toggle.on #three
transform: rotate(-45deg) translateX(8px) translateY(-10px);
#resize
z-index: 1;
top: 0px;
position: absolute;
background: #000;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0;
transition: all 1s ease-out;
display: table;
#resize #menu
height: 90px;
display: table-cell;
vertical-align: center;
#resize #menu li
display: block;
text-align: center;
padding: 20px 0;
font-size: 50px;
min-height: 50px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease-out;
#resize li:nth-child(1)
margin-top:140px;
#resize #menu li a
color: #fff;
#resize.active
visibility: visible;
opacity: 0.99;
@media(max-width: 768px)
#toggle
visibility: visible;
opacity: 1;
margin-top: 6px;
nav #brand
margin-left: 18px;
#menu a
font-family: "Poppins";
font-weight: 200;
font-size: 20px;
nav #menu
display: none;
@media(min-width: 768px)
#resize
visibility: hidden !important;
/*
Hero Section
*/
.hero-wrap
background-color: #b072d4;
color:#ffffff;
height: 100vh;
#hero-icon
position: absolute;
top: 34.5rem;
opacity: 0.8;
width:100%;
right:0;
background: url('hero-icon-4.png') right bottom;;
height: 300px;
background-repeat: no-repeat;
#hero-icon button
opacity: 1;
padding: 1rem;
color:#fff;
font-weight: bold;
font-size: 1.6rem;
background-color: black;
border: none;
position: relative;
left: 30%;
top: 10%;
.hero-wrap h1
margin:0;
padding-left:4rem;
position: relative;
top: 10rem;
font-size: 3rem;
font-family: 'Courier New', Courier, monospace;
.hero-wrap h2
font-family: 'Courier New', Courier, monospace;
position: relative;
top: 12rem;
padding-left: 4rem;
font-size: 2rem;
/*
SECTION 1
*/
.section-1
display: flex;
flex-direction:column-reverse;
text-align: center;
.sec1-row
display: flex;
flex-direction:column-reverse;
margin: 2rem 0;
.section1-images
width: 50%;
.row-content
font-size: 1.6rem;
padding: 2rem 1rem;
/*
Section 2
*/
.section-2
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
margin:auto;
background-color: #00e8ff;
.section-2 .icon-img
width: 50%;
.icon-box
width: 50%;
align-self: center;
text-align: center;
margin:2rem;
padding: 1rem;
background-color: #fff;
border: 10px solid #ffd434;
<!DOCTYPE html>
<html>
<head>
<title>TweetSentiment App</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="normalize.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<nav>
<span id="brand">
<a href="index.html">Brand</a>
</span>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">FAQ</a></li>
</ul>
<div id="toggle">
<div class="span" id="one"></div>
<div class="span" id="two"></div>
<div class="span" id="three"></div>
</div>
</nav>
<div id="resize">
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</div>
<section class="hero-wrap sec">
<h1>
ANALYZE TWITTER DATA.
</h1>
<h2>
Search #hashtags and perform sentiment analysis.
</h2>
<div id="hero-icon">
<button>Learn More</button>
</div>
</section>
<section class="section-1 sec">
<div class="sec1-row">
<div class="row-content">
<h3>Sentiment Analysis.</h3>
<article>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here. <br><br>Content here', making it look like readable English.
Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</article>
</div>
<div>
<img class="section1-images" src="img1.png" alt="image">
</div>
</div>
<div class="sec1-row">
<div class="row-content">
<h3>Data Tracking.</h3>
<article>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here. <br><br> Content here', making it look like readable English.
Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</article>
</div>
<div>
<img class="section1-images" src="img2.png" alt="image">
</div>
</div>
</section>
<section class="section-2 sec">
<div class="icon-box">
<img class="icon-img" src="icons/icon2.png" alt="icon">
<h5>HASTAGS ANALYZED</h5>
</div>
<div class="icon-box">
<img class="icon-img" src="icons/icon1.png" alt="icon">
<h5>USERS SERVED</h5>
</div>
<div class="icon-box">
<img class="icon-img" src="icons/icon3.png" alt="icon">
<h5>TWEETS COMPUTED</h5>
</div>
</section>
<section class="section-3 sec">
</section>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
$("#toggle").click(function()
$(this).toggleClass('on');
$("#resize").toggleClass("active");
);
html
font-size: 10px;
font-family: 'Courier New', 'Courier', 'monospace';
body
font-size: 2.2rem;
.sec
padding: 2.2rem;
/*
Navigation
*/
*
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
body
width: 100%;
height: 100vh;
background: url(Hero.jpg) no-repeat 50% 50%;
background-size: cover;
display: table;
.content
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
.content h1
color: #fff;
font-family: "Poppins";
font-weight: 200;
font-size: 40px;
nav
width: 100%;
background: #000;
height: 70px;
position: static;
z-index: 1;
nav #brand
float: left;
display: block;
margin-left: 84px;
font-size: 30px;
line-height: 70px;
font-weight: bold;
nav #brand a
color: #fff;
transition: all 0.3s ease-out;
font-family: "Poppins";
font-weight: 300;
nav #menu
float: left;
left: 50%;
position: relative;
nav #menu li
display: inline-block;
padding: 0px 30px;
cursor: pointer;
line-height: 70px;
position: relative;
transition: all 0.3s ease-out;
nav #menu li a
color: #fff;
font-family: "Poppins";
font-weight: 200;
#toggle
position: absolute;
right: 20px;
top: 14px;
z-index: 999;
width: 40px;
height: 40px;
cursor: pointer;
float: right;
transition: all 0.3s ease-out;
visibility: hidden;
opacity: 0;
#toggle .span
height: 3px;
background: #fff;
transition: all 0.3s ease-out;
backface-visibility: hidden;
margin: 5px auto;
#toggle.on #one
transform: rotate(45deg) translateX(2px) translateY(4px);
#toggle.on #two
opacity: 0;
#toggle.on #three
transform: rotate(-45deg) translateX(8px) translateY(-10px);
#resize
z-index: 1;
top: 0px;
position: absolute;
background: #000;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0;
transition: all 1s ease-out;
display: table;
#resize #menu
height: 90px;
display: table-cell;
vertical-align: center;
#resize #menu li
display: block;
text-align: center;
padding: 20px 0;
font-size: 50px;
min-height: 50px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease-out;
#resize li:nth-child(1)
margin-top:140px;
#resize #menu li a
color: #fff;
#resize.active
visibility: visible;
opacity: 0.99;
@media(max-width: 768px)
#toggle
visibility: visible;
opacity: 1;
margin-top: 6px;
nav #brand
margin-left: 18px;
#menu a
font-family: "Poppins";
font-weight: 200;
font-size: 20px;
nav #menu
display: none;
@media(min-width: 768px)
#resize
visibility: hidden !important;
/*
Hero Section
*/
.hero-wrap
background-color: #b072d4;
color:#ffffff;
height: 100vh;
#hero-icon
position: absolute;
top: 34.5rem;
opacity: 0.8;
width:100%;
right:0;
background: url('hero-icon-4.png') right bottom;;
height: 300px;
background-repeat: no-repeat;
#hero-icon button
opacity: 1;
padding: 1rem;
color:#fff;
font-weight: bold;
font-size: 1.6rem;
background-color: black;
border: none;
position: relative;
left: 30%;
top: 10%;
.hero-wrap h1
margin:0;
padding-left:4rem;
position: relative;
top: 10rem;
font-size: 3rem;
font-family: 'Courier New', Courier, monospace;
.hero-wrap h2
font-family: 'Courier New', Courier, monospace;
position: relative;
top: 12rem;
padding-left: 4rem;
font-size: 2rem;
/*
SECTION 1
*/
.section-1
display: flex;
flex-direction:column-reverse;
text-align: center;
.sec1-row
display: flex;
flex-direction:column-reverse;
margin: 2rem 0;
.section1-images
width: 50%;
.row-content
font-size: 1.6rem;
padding: 2rem 1rem;
/*
Section 2
*/
.section-2
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
margin:auto;
background-color: #00e8ff;
.section-2 .icon-img
width: 50%;
.icon-box
width: 50%;
align-self: center;
text-align: center;
margin:2rem;
padding: 1rem;
background-color: #fff;
border: 10px solid #ffd434;
<!DOCTYPE html>
<html>
<head>
<title>TweetSentiment App</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="normalize.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<nav>
<span id="brand">
<a href="index.html">Brand</a>
</span>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">FAQ</a></li>
</ul>
<div id="toggle">
<div class="span" id="one"></div>
<div class="span" id="two"></div>
<div class="span" id="three"></div>
</div>
</nav>
<div id="resize">
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</div>
<section class="hero-wrap sec">
<h1>
ANALYZE TWITTER DATA.
</h1>
<h2>
Search #hashtags and perform sentiment analysis.
</h2>
<div id="hero-icon">
<button>Learn More</button>
</div>
</section>
<section class="section-1 sec">
<div class="sec1-row">
<div class="row-content">
<h3>Sentiment Analysis.</h3>
<article>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here. <br><br>Content here', making it look like readable English.
Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</article>
</div>
<div>
<img class="section1-images" src="img1.png" alt="image">
</div>
</div>
<div class="sec1-row">
<div class="row-content">
<h3>Data Tracking.</h3>
<article>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here. <br><br> Content here', making it look like readable English.
Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</article>
</div>
<div>
<img class="section1-images" src="img2.png" alt="image">
</div>
</div>
</section>
<section class="section-2 sec">
<div class="icon-box">
<img class="icon-img" src="icons/icon2.png" alt="icon">
<h5>HASTAGS ANALYZED</h5>
</div>
<div class="icon-box">
<img class="icon-img" src="icons/icon1.png" alt="icon">
<h5>USERS SERVED</h5>
</div>
<div class="icon-box">
<img class="icon-img" src="icons/icon3.png" alt="icon">
<h5>TWEETS COMPUTED</h5>
</div>
</section>
<section class="section-3 sec">
</section>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
javascript html css layout
javascript html css layout
asked Nov 12 at 6:29
Shaz
522617
522617
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
up vote
2
down vote
accepted
nav #menu
float: right;
/* float: left;
left: 50%;
position: relative; */
Updated the above code.
Please remove position: relative;
and Left: 50%
. Instead of float: left
you can use float: right
to align on the right side
$("#toggle").click(function()
$(this).toggleClass('on');
$("#resize").toggleClass("active");
);
html
font-size: 10px;
font-family: 'Courier New', 'Courier', 'monospace';
body
font-size: 2.2rem;
.sec
padding: 2.2rem;
/*
Navigation
*/
*
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
body
width: 100%;
height: 100vh;
background: url(Hero.jpg) no-repeat 50% 50%;
background-size: cover;
display: table;
.content
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
.content h1
color: #fff;
font-family: "Poppins";
font-weight: 200;
font-size: 40px;
nav
width: 100%;
background: #000;
height: 70px;
position: static;
z-index: 1;
nav #brand
float: left;
display: block;
margin-left: 84px;
font-size: 30px;
line-height: 70px;
font-weight: bold;
nav #brand a
color: #fff;
transition: all 0.3s ease-out;
font-family: "Poppins";
font-weight: 300;
nav #menu
float: right;
/* float: left;
left: 50%;
position: relative; */
nav #menu li
display: inline-block;
padding: 0px 30px;
cursor: pointer;
line-height: 70px;
position: relative;
transition: all 0.3s ease-out;
nav #menu li a
color: #fff;
font-family: "Poppins";
font-weight: 200;
#toggle
position: absolute;
right: 20px;
top: 14px;
z-index: 999;
width: 40px;
height: 40px;
cursor: pointer;
float: right;
transition: all 0.3s ease-out;
visibility: hidden;
opacity: 0;
#toggle .span
height: 3px;
background: #fff;
transition: all 0.3s ease-out;
backface-visibility: hidden;
margin: 5px auto;
#toggle.on #one
transform: rotate(45deg) translateX(2px) translateY(4px);
#toggle.on #two
opacity: 0;
#toggle.on #three
transform: rotate(-45deg) translateX(8px) translateY(-10px);
#resize
z-index: 1;
top: 0px;
position: absolute;
background: #000;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0;
transition: all 1s ease-out;
display: table;
#resize #menu
height: 90px;
display: table-cell;
vertical-align: center;
#resize #menu li
display: block;
text-align: center;
padding: 20px 0;
font-size: 50px;
min-height: 50px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease-out;
#resize li:nth-child(1)
margin-top:140px;
#resize #menu li a
color: #fff;
#resize.active
visibility: visible;
opacity: 0.99;
@media(max-width: 768px)
#toggle
visibility: visible;
opacity: 1;
margin-top: 6px;
nav #brand
margin-left: 18px;
#menu a
font-family: "Poppins";
font-weight: 200;
font-size: 20px;
nav #menu
display: none;
@media(min-width: 768px)
#resize
visibility: hidden !important;
/*
Hero Section
*/
.hero-wrap
background-color: #b072d4;
color:#ffffff;
height: 100vh;
#hero-icon
position: absolute;
top: 34.5rem;
opacity: 0.8;
width:100%;
right:0;
background: url('hero-icon-4.png') right bottom;;
height: 300px;
background-repeat: no-repeat;
#hero-icon button
opacity: 1;
padding: 1rem;
color:#fff;
font-weight: bold;
font-size: 1.6rem;
background-color: black;
border: none;
position: relative;
left: 30%;
top: 10%;
.hero-wrap h1
margin:0;
padding-left:4rem;
position: relative;
top: 10rem;
font-size: 3rem;
font-family: 'Courier New', Courier, monospace;
.hero-wrap h2
font-family: 'Courier New', Courier, monospace;
position: relative;
top: 12rem;
padding-left: 4rem;
font-size: 2rem;
/*
SECTION 1
*/
.section-1
display: flex;
flex-direction:column-reverse;
text-align: center;
.sec1-row
display: flex;
flex-direction:column-reverse;
margin: 2rem 0;
.section1-images
width: 50%;
.row-content
font-size: 1.6rem;
padding: 2rem 1rem;
/*
Section 2
*/
.section-2
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
margin:auto;
background-color: #00e8ff;
.section-2 .icon-img
width: 50%;
.icon-box
width: 50%;
align-self: center;
text-align: center;
margin:2rem;
padding: 1rem;
background-color: #fff;
border: 10px solid #ffd434;
<!DOCTYPE html>
<html>
<head>
<title>TweetSentiment App</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="normalize.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<nav>
<span id="brand">
<a href="index.html">Brand</a>
</span>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">FAQ</a></li>
</ul>
<div id="toggle">
<div class="span" id="one"></div>
<div class="span" id="two"></div>
<div class="span" id="three"></div>
</div>
</nav>
<div id="resize">
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</div>
<section class="hero-wrap sec">
<h1>
ANALYZE TWITTER DATA.
</h1>
<h2>
Search #hashtags and perform sentiment analysis.
</h2>
<div id="hero-icon">
<button>Learn More</button>
</div>
</section>
<section class="section-1 sec">
<div class="sec1-row">
<div class="row-content">
<h3>Sentiment Analysis.</h3>
<article>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here. <br><br>Content here', making it look like readable English.
Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</article>
</div>
<div>
<img class="section1-images" src="img1.png" alt="image">
</div>
</div>
<div class="sec1-row">
<div class="row-content">
<h3>Data Tracking.</h3>
<article>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here. <br><br> Content here', making it look like readable English.
Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</article>
</div>
<div>
<img class="section1-images" src="img2.png" alt="image">
</div>
</div>
</section>
<section class="section-2 sec">
<div class="icon-box">
<img class="icon-img" src="icons/icon2.png" alt="icon">
<h5>HASTAGS ANALYZED</h5>
</div>
<div class="icon-box">
<img class="icon-img" src="icons/icon1.png" alt="icon">
<h5>USERS SERVED</h5>
</div>
<div class="icon-box">
<img class="icon-img" src="icons/icon3.png" alt="icon">
<h5>TWEETS COMPUTED</h5>
</div>
</section>
<section class="section-3 sec">
</section>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53256920%2fwhy-is-html-layout-breaking-at-769px%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
2
down vote
accepted
nav #menu
float: right;
/* float: left;
left: 50%;
position: relative; */
Updated the above code.
Please remove position: relative;
and Left: 50%
. Instead of float: left
you can use float: right
to align on the right side
$("#toggle").click(function()
$(this).toggleClass('on');
$("#resize").toggleClass("active");
);
html
font-size: 10px;
font-family: 'Courier New', 'Courier', 'monospace';
body
font-size: 2.2rem;
.sec
padding: 2.2rem;
/*
Navigation
*/
*
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
body
width: 100%;
height: 100vh;
background: url(Hero.jpg) no-repeat 50% 50%;
background-size: cover;
display: table;
.content
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
.content h1
color: #fff;
font-family: "Poppins";
font-weight: 200;
font-size: 40px;
nav
width: 100%;
background: #000;
height: 70px;
position: static;
z-index: 1;
nav #brand
float: left;
display: block;
margin-left: 84px;
font-size: 30px;
line-height: 70px;
font-weight: bold;
nav #brand a
color: #fff;
transition: all 0.3s ease-out;
font-family: "Poppins";
font-weight: 300;
nav #menu
float: right;
/* float: left;
left: 50%;
position: relative; */
nav #menu li
display: inline-block;
padding: 0px 30px;
cursor: pointer;
line-height: 70px;
position: relative;
transition: all 0.3s ease-out;
nav #menu li a
color: #fff;
font-family: "Poppins";
font-weight: 200;
#toggle
position: absolute;
right: 20px;
top: 14px;
z-index: 999;
width: 40px;
height: 40px;
cursor: pointer;
float: right;
transition: all 0.3s ease-out;
visibility: hidden;
opacity: 0;
#toggle .span
height: 3px;
background: #fff;
transition: all 0.3s ease-out;
backface-visibility: hidden;
margin: 5px auto;
#toggle.on #one
transform: rotate(45deg) translateX(2px) translateY(4px);
#toggle.on #two
opacity: 0;
#toggle.on #three
transform: rotate(-45deg) translateX(8px) translateY(-10px);
#resize
z-index: 1;
top: 0px;
position: absolute;
background: #000;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0;
transition: all 1s ease-out;
display: table;
#resize #menu
height: 90px;
display: table-cell;
vertical-align: center;
#resize #menu li
display: block;
text-align: center;
padding: 20px 0;
font-size: 50px;
min-height: 50px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease-out;
#resize li:nth-child(1)
margin-top:140px;
#resize #menu li a
color: #fff;
#resize.active
visibility: visible;
opacity: 0.99;
@media(max-width: 768px)
#toggle
visibility: visible;
opacity: 1;
margin-top: 6px;
nav #brand
margin-left: 18px;
#menu a
font-family: "Poppins";
font-weight: 200;
font-size: 20px;
nav #menu
display: none;
@media(min-width: 768px)
#resize
visibility: hidden !important;
/*
Hero Section
*/
.hero-wrap
background-color: #b072d4;
color:#ffffff;
height: 100vh;
#hero-icon
position: absolute;
top: 34.5rem;
opacity: 0.8;
width:100%;
right:0;
background: url('hero-icon-4.png') right bottom;;
height: 300px;
background-repeat: no-repeat;
#hero-icon button
opacity: 1;
padding: 1rem;
color:#fff;
font-weight: bold;
font-size: 1.6rem;
background-color: black;
border: none;
position: relative;
left: 30%;
top: 10%;
.hero-wrap h1
margin:0;
padding-left:4rem;
position: relative;
top: 10rem;
font-size: 3rem;
font-family: 'Courier New', Courier, monospace;
.hero-wrap h2
font-family: 'Courier New', Courier, monospace;
position: relative;
top: 12rem;
padding-left: 4rem;
font-size: 2rem;
/*
SECTION 1
*/
.section-1
display: flex;
flex-direction:column-reverse;
text-align: center;
.sec1-row
display: flex;
flex-direction:column-reverse;
margin: 2rem 0;
.section1-images
width: 50%;
.row-content
font-size: 1.6rem;
padding: 2rem 1rem;
/*
Section 2
*/
.section-2
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
margin:auto;
background-color: #00e8ff;
.section-2 .icon-img
width: 50%;
.icon-box
width: 50%;
align-self: center;
text-align: center;
margin:2rem;
padding: 1rem;
background-color: #fff;
border: 10px solid #ffd434;
<!DOCTYPE html>
<html>
<head>
<title>TweetSentiment App</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="normalize.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<nav>
<span id="brand">
<a href="index.html">Brand</a>
</span>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">FAQ</a></li>
</ul>
<div id="toggle">
<div class="span" id="one"></div>
<div class="span" id="two"></div>
<div class="span" id="three"></div>
</div>
</nav>
<div id="resize">
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</div>
<section class="hero-wrap sec">
<h1>
ANALYZE TWITTER DATA.
</h1>
<h2>
Search #hashtags and perform sentiment analysis.
</h2>
<div id="hero-icon">
<button>Learn More</button>
</div>
</section>
<section class="section-1 sec">
<div class="sec1-row">
<div class="row-content">
<h3>Sentiment Analysis.</h3>
<article>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here. <br><br>Content here', making it look like readable English.
Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</article>
</div>
<div>
<img class="section1-images" src="img1.png" alt="image">
</div>
</div>
<div class="sec1-row">
<div class="row-content">
<h3>Data Tracking.</h3>
<article>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here. <br><br> Content here', making it look like readable English.
Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</article>
</div>
<div>
<img class="section1-images" src="img2.png" alt="image">
</div>
</div>
</section>
<section class="section-2 sec">
<div class="icon-box">
<img class="icon-img" src="icons/icon2.png" alt="icon">
<h5>HASTAGS ANALYZED</h5>
</div>
<div class="icon-box">
<img class="icon-img" src="icons/icon1.png" alt="icon">
<h5>USERS SERVED</h5>
</div>
<div class="icon-box">
<img class="icon-img" src="icons/icon3.png" alt="icon">
<h5>TWEETS COMPUTED</h5>
</div>
</section>
<section class="section-3 sec">
</section>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
add a comment |
up vote
2
down vote
accepted
nav #menu
float: right;
/* float: left;
left: 50%;
position: relative; */
Updated the above code.
Please remove position: relative;
and Left: 50%
. Instead of float: left
you can use float: right
to align on the right side
$("#toggle").click(function()
$(this).toggleClass('on');
$("#resize").toggleClass("active");
);
html
font-size: 10px;
font-family: 'Courier New', 'Courier', 'monospace';
body
font-size: 2.2rem;
.sec
padding: 2.2rem;
/*
Navigation
*/
*
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
body
width: 100%;
height: 100vh;
background: url(Hero.jpg) no-repeat 50% 50%;
background-size: cover;
display: table;
.content
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
.content h1
color: #fff;
font-family: "Poppins";
font-weight: 200;
font-size: 40px;
nav
width: 100%;
background: #000;
height: 70px;
position: static;
z-index: 1;
nav #brand
float: left;
display: block;
margin-left: 84px;
font-size: 30px;
line-height: 70px;
font-weight: bold;
nav #brand a
color: #fff;
transition: all 0.3s ease-out;
font-family: "Poppins";
font-weight: 300;
nav #menu
float: right;
/* float: left;
left: 50%;
position: relative; */
nav #menu li
display: inline-block;
padding: 0px 30px;
cursor: pointer;
line-height: 70px;
position: relative;
transition: all 0.3s ease-out;
nav #menu li a
color: #fff;
font-family: "Poppins";
font-weight: 200;
#toggle
position: absolute;
right: 20px;
top: 14px;
z-index: 999;
width: 40px;
height: 40px;
cursor: pointer;
float: right;
transition: all 0.3s ease-out;
visibility: hidden;
opacity: 0;
#toggle .span
height: 3px;
background: #fff;
transition: all 0.3s ease-out;
backface-visibility: hidden;
margin: 5px auto;
#toggle.on #one
transform: rotate(45deg) translateX(2px) translateY(4px);
#toggle.on #two
opacity: 0;
#toggle.on #three
transform: rotate(-45deg) translateX(8px) translateY(-10px);
#resize
z-index: 1;
top: 0px;
position: absolute;
background: #000;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0;
transition: all 1s ease-out;
display: table;
#resize #menu
height: 90px;
display: table-cell;
vertical-align: center;
#resize #menu li
display: block;
text-align: center;
padding: 20px 0;
font-size: 50px;
min-height: 50px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease-out;
#resize li:nth-child(1)
margin-top:140px;
#resize #menu li a
color: #fff;
#resize.active
visibility: visible;
opacity: 0.99;
@media(max-width: 768px)
#toggle
visibility: visible;
opacity: 1;
margin-top: 6px;
nav #brand
margin-left: 18px;
#menu a
font-family: "Poppins";
font-weight: 200;
font-size: 20px;
nav #menu
display: none;
@media(min-width: 768px)
#resize
visibility: hidden !important;
/*
Hero Section
*/
.hero-wrap
background-color: #b072d4;
color:#ffffff;
height: 100vh;
#hero-icon
position: absolute;
top: 34.5rem;
opacity: 0.8;
width:100%;
right:0;
background: url('hero-icon-4.png') right bottom;;
height: 300px;
background-repeat: no-repeat;
#hero-icon button
opacity: 1;
padding: 1rem;
color:#fff;
font-weight: bold;
font-size: 1.6rem;
background-color: black;
border: none;
position: relative;
left: 30%;
top: 10%;
.hero-wrap h1
margin:0;
padding-left:4rem;
position: relative;
top: 10rem;
font-size: 3rem;
font-family: 'Courier New', Courier, monospace;
.hero-wrap h2
font-family: 'Courier New', Courier, monospace;
position: relative;
top: 12rem;
padding-left: 4rem;
font-size: 2rem;
/*
SECTION 1
*/
.section-1
display: flex;
flex-direction:column-reverse;
text-align: center;
.sec1-row
display: flex;
flex-direction:column-reverse;
margin: 2rem 0;
.section1-images
width: 50%;
.row-content
font-size: 1.6rem;
padding: 2rem 1rem;
/*
Section 2
*/
.section-2
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
margin:auto;
background-color: #00e8ff;
.section-2 .icon-img
width: 50%;
.icon-box
width: 50%;
align-self: center;
text-align: center;
margin:2rem;
padding: 1rem;
background-color: #fff;
border: 10px solid #ffd434;
<!DOCTYPE html>
<html>
<head>
<title>TweetSentiment App</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="normalize.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<nav>
<span id="brand">
<a href="index.html">Brand</a>
</span>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">FAQ</a></li>
</ul>
<div id="toggle">
<div class="span" id="one"></div>
<div class="span" id="two"></div>
<div class="span" id="three"></div>
</div>
</nav>
<div id="resize">
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</div>
<section class="hero-wrap sec">
<h1>
ANALYZE TWITTER DATA.
</h1>
<h2>
Search #hashtags and perform sentiment analysis.
</h2>
<div id="hero-icon">
<button>Learn More</button>
</div>
</section>
<section class="section-1 sec">
<div class="sec1-row">
<div class="row-content">
<h3>Sentiment Analysis.</h3>
<article>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here. <br><br>Content here', making it look like readable English.
Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</article>
</div>
<div>
<img class="section1-images" src="img1.png" alt="image">
</div>
</div>
<div class="sec1-row">
<div class="row-content">
<h3>Data Tracking.</h3>
<article>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here. <br><br> Content here', making it look like readable English.
Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</article>
</div>
<div>
<img class="section1-images" src="img2.png" alt="image">
</div>
</div>
</section>
<section class="section-2 sec">
<div class="icon-box">
<img class="icon-img" src="icons/icon2.png" alt="icon">
<h5>HASTAGS ANALYZED</h5>
</div>
<div class="icon-box">
<img class="icon-img" src="icons/icon1.png" alt="icon">
<h5>USERS SERVED</h5>
</div>
<div class="icon-box">
<img class="icon-img" src="icons/icon3.png" alt="icon">
<h5>TWEETS COMPUTED</h5>
</div>
</section>
<section class="section-3 sec">
</section>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
add a comment |
up vote
2
down vote
accepted
up vote
2
down vote
accepted
nav #menu
float: right;
/* float: left;
left: 50%;
position: relative; */
Updated the above code.
Please remove position: relative;
and Left: 50%
. Instead of float: left
you can use float: right
to align on the right side
$("#toggle").click(function()
$(this).toggleClass('on');
$("#resize").toggleClass("active");
);
html
font-size: 10px;
font-family: 'Courier New', 'Courier', 'monospace';
body
font-size: 2.2rem;
.sec
padding: 2.2rem;
/*
Navigation
*/
*
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
body
width: 100%;
height: 100vh;
background: url(Hero.jpg) no-repeat 50% 50%;
background-size: cover;
display: table;
.content
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
.content h1
color: #fff;
font-family: "Poppins";
font-weight: 200;
font-size: 40px;
nav
width: 100%;
background: #000;
height: 70px;
position: static;
z-index: 1;
nav #brand
float: left;
display: block;
margin-left: 84px;
font-size: 30px;
line-height: 70px;
font-weight: bold;
nav #brand a
color: #fff;
transition: all 0.3s ease-out;
font-family: "Poppins";
font-weight: 300;
nav #menu
float: right;
/* float: left;
left: 50%;
position: relative; */
nav #menu li
display: inline-block;
padding: 0px 30px;
cursor: pointer;
line-height: 70px;
position: relative;
transition: all 0.3s ease-out;
nav #menu li a
color: #fff;
font-family: "Poppins";
font-weight: 200;
#toggle
position: absolute;
right: 20px;
top: 14px;
z-index: 999;
width: 40px;
height: 40px;
cursor: pointer;
float: right;
transition: all 0.3s ease-out;
visibility: hidden;
opacity: 0;
#toggle .span
height: 3px;
background: #fff;
transition: all 0.3s ease-out;
backface-visibility: hidden;
margin: 5px auto;
#toggle.on #one
transform: rotate(45deg) translateX(2px) translateY(4px);
#toggle.on #two
opacity: 0;
#toggle.on #three
transform: rotate(-45deg) translateX(8px) translateY(-10px);
#resize
z-index: 1;
top: 0px;
position: absolute;
background: #000;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0;
transition: all 1s ease-out;
display: table;
#resize #menu
height: 90px;
display: table-cell;
vertical-align: center;
#resize #menu li
display: block;
text-align: center;
padding: 20px 0;
font-size: 50px;
min-height: 50px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease-out;
#resize li:nth-child(1)
margin-top:140px;
#resize #menu li a
color: #fff;
#resize.active
visibility: visible;
opacity: 0.99;
@media(max-width: 768px)
#toggle
visibility: visible;
opacity: 1;
margin-top: 6px;
nav #brand
margin-left: 18px;
#menu a
font-family: "Poppins";
font-weight: 200;
font-size: 20px;
nav #menu
display: none;
@media(min-width: 768px)
#resize
visibility: hidden !important;
/*
Hero Section
*/
.hero-wrap
background-color: #b072d4;
color:#ffffff;
height: 100vh;
#hero-icon
position: absolute;
top: 34.5rem;
opacity: 0.8;
width:100%;
right:0;
background: url('hero-icon-4.png') right bottom;;
height: 300px;
background-repeat: no-repeat;
#hero-icon button
opacity: 1;
padding: 1rem;
color:#fff;
font-weight: bold;
font-size: 1.6rem;
background-color: black;
border: none;
position: relative;
left: 30%;
top: 10%;
.hero-wrap h1
margin:0;
padding-left:4rem;
position: relative;
top: 10rem;
font-size: 3rem;
font-family: 'Courier New', Courier, monospace;
.hero-wrap h2
font-family: 'Courier New', Courier, monospace;
position: relative;
top: 12rem;
padding-left: 4rem;
font-size: 2rem;
/*
SECTION 1
*/
.section-1
display: flex;
flex-direction:column-reverse;
text-align: center;
.sec1-row
display: flex;
flex-direction:column-reverse;
margin: 2rem 0;
.section1-images
width: 50%;
.row-content
font-size: 1.6rem;
padding: 2rem 1rem;
/*
Section 2
*/
.section-2
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
margin:auto;
background-color: #00e8ff;
.section-2 .icon-img
width: 50%;
.icon-box
width: 50%;
align-self: center;
text-align: center;
margin:2rem;
padding: 1rem;
background-color: #fff;
border: 10px solid #ffd434;
<!DOCTYPE html>
<html>
<head>
<title>TweetSentiment App</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="normalize.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<nav>
<span id="brand">
<a href="index.html">Brand</a>
</span>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">FAQ</a></li>
</ul>
<div id="toggle">
<div class="span" id="one"></div>
<div class="span" id="two"></div>
<div class="span" id="three"></div>
</div>
</nav>
<div id="resize">
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</div>
<section class="hero-wrap sec">
<h1>
ANALYZE TWITTER DATA.
</h1>
<h2>
Search #hashtags and perform sentiment analysis.
</h2>
<div id="hero-icon">
<button>Learn More</button>
</div>
</section>
<section class="section-1 sec">
<div class="sec1-row">
<div class="row-content">
<h3>Sentiment Analysis.</h3>
<article>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here. <br><br>Content here', making it look like readable English.
Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</article>
</div>
<div>
<img class="section1-images" src="img1.png" alt="image">
</div>
</div>
<div class="sec1-row">
<div class="row-content">
<h3>Data Tracking.</h3>
<article>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here. <br><br> Content here', making it look like readable English.
Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</article>
</div>
<div>
<img class="section1-images" src="img2.png" alt="image">
</div>
</div>
</section>
<section class="section-2 sec">
<div class="icon-box">
<img class="icon-img" src="icons/icon2.png" alt="icon">
<h5>HASTAGS ANALYZED</h5>
</div>
<div class="icon-box">
<img class="icon-img" src="icons/icon1.png" alt="icon">
<h5>USERS SERVED</h5>
</div>
<div class="icon-box">
<img class="icon-img" src="icons/icon3.png" alt="icon">
<h5>TWEETS COMPUTED</h5>
</div>
</section>
<section class="section-3 sec">
</section>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
nav #menu
float: right;
/* float: left;
left: 50%;
position: relative; */
Updated the above code.
Please remove position: relative;
and Left: 50%
. Instead of float: left
you can use float: right
to align on the right side
$("#toggle").click(function()
$(this).toggleClass('on');
$("#resize").toggleClass("active");
);
html
font-size: 10px;
font-family: 'Courier New', 'Courier', 'monospace';
body
font-size: 2.2rem;
.sec
padding: 2.2rem;
/*
Navigation
*/
*
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
body
width: 100%;
height: 100vh;
background: url(Hero.jpg) no-repeat 50% 50%;
background-size: cover;
display: table;
.content
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
.content h1
color: #fff;
font-family: "Poppins";
font-weight: 200;
font-size: 40px;
nav
width: 100%;
background: #000;
height: 70px;
position: static;
z-index: 1;
nav #brand
float: left;
display: block;
margin-left: 84px;
font-size: 30px;
line-height: 70px;
font-weight: bold;
nav #brand a
color: #fff;
transition: all 0.3s ease-out;
font-family: "Poppins";
font-weight: 300;
nav #menu
float: right;
/* float: left;
left: 50%;
position: relative; */
nav #menu li
display: inline-block;
padding: 0px 30px;
cursor: pointer;
line-height: 70px;
position: relative;
transition: all 0.3s ease-out;
nav #menu li a
color: #fff;
font-family: "Poppins";
font-weight: 200;
#toggle
position: absolute;
right: 20px;
top: 14px;
z-index: 999;
width: 40px;
height: 40px;
cursor: pointer;
float: right;
transition: all 0.3s ease-out;
visibility: hidden;
opacity: 0;
#toggle .span
height: 3px;
background: #fff;
transition: all 0.3s ease-out;
backface-visibility: hidden;
margin: 5px auto;
#toggle.on #one
transform: rotate(45deg) translateX(2px) translateY(4px);
#toggle.on #two
opacity: 0;
#toggle.on #three
transform: rotate(-45deg) translateX(8px) translateY(-10px);
#resize
z-index: 1;
top: 0px;
position: absolute;
background: #000;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0;
transition: all 1s ease-out;
display: table;
#resize #menu
height: 90px;
display: table-cell;
vertical-align: center;
#resize #menu li
display: block;
text-align: center;
padding: 20px 0;
font-size: 50px;
min-height: 50px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease-out;
#resize li:nth-child(1)
margin-top:140px;
#resize #menu li a
color: #fff;
#resize.active
visibility: visible;
opacity: 0.99;
@media(max-width: 768px)
#toggle
visibility: visible;
opacity: 1;
margin-top: 6px;
nav #brand
margin-left: 18px;
#menu a
font-family: "Poppins";
font-weight: 200;
font-size: 20px;
nav #menu
display: none;
@media(min-width: 768px)
#resize
visibility: hidden !important;
/*
Hero Section
*/
.hero-wrap
background-color: #b072d4;
color:#ffffff;
height: 100vh;
#hero-icon
position: absolute;
top: 34.5rem;
opacity: 0.8;
width:100%;
right:0;
background: url('hero-icon-4.png') right bottom;;
height: 300px;
background-repeat: no-repeat;
#hero-icon button
opacity: 1;
padding: 1rem;
color:#fff;
font-weight: bold;
font-size: 1.6rem;
background-color: black;
border: none;
position: relative;
left: 30%;
top: 10%;
.hero-wrap h1
margin:0;
padding-left:4rem;
position: relative;
top: 10rem;
font-size: 3rem;
font-family: 'Courier New', Courier, monospace;
.hero-wrap h2
font-family: 'Courier New', Courier, monospace;
position: relative;
top: 12rem;
padding-left: 4rem;
font-size: 2rem;
/*
SECTION 1
*/
.section-1
display: flex;
flex-direction:column-reverse;
text-align: center;
.sec1-row
display: flex;
flex-direction:column-reverse;
margin: 2rem 0;
.section1-images
width: 50%;
.row-content
font-size: 1.6rem;
padding: 2rem 1rem;
/*
Section 2
*/
.section-2
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
margin:auto;
background-color: #00e8ff;
.section-2 .icon-img
width: 50%;
.icon-box
width: 50%;
align-self: center;
text-align: center;
margin:2rem;
padding: 1rem;
background-color: #fff;
border: 10px solid #ffd434;
<!DOCTYPE html>
<html>
<head>
<title>TweetSentiment App</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="normalize.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<nav>
<span id="brand">
<a href="index.html">Brand</a>
</span>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">FAQ</a></li>
</ul>
<div id="toggle">
<div class="span" id="one"></div>
<div class="span" id="two"></div>
<div class="span" id="three"></div>
</div>
</nav>
<div id="resize">
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</div>
<section class="hero-wrap sec">
<h1>
ANALYZE TWITTER DATA.
</h1>
<h2>
Search #hashtags and perform sentiment analysis.
</h2>
<div id="hero-icon">
<button>Learn More</button>
</div>
</section>
<section class="section-1 sec">
<div class="sec1-row">
<div class="row-content">
<h3>Sentiment Analysis.</h3>
<article>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here. <br><br>Content here', making it look like readable English.
Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</article>
</div>
<div>
<img class="section1-images" src="img1.png" alt="image">
</div>
</div>
<div class="sec1-row">
<div class="row-content">
<h3>Data Tracking.</h3>
<article>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here. <br><br> Content here', making it look like readable English.
Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</article>
</div>
<div>
<img class="section1-images" src="img2.png" alt="image">
</div>
</div>
</section>
<section class="section-2 sec">
<div class="icon-box">
<img class="icon-img" src="icons/icon2.png" alt="icon">
<h5>HASTAGS ANALYZED</h5>
</div>
<div class="icon-box">
<img class="icon-img" src="icons/icon1.png" alt="icon">
<h5>USERS SERVED</h5>
</div>
<div class="icon-box">
<img class="icon-img" src="icons/icon3.png" alt="icon">
<h5>TWEETS COMPUTED</h5>
</div>
</section>
<section class="section-3 sec">
</section>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
$("#toggle").click(function()
$(this).toggleClass('on');
$("#resize").toggleClass("active");
);
html
font-size: 10px;
font-family: 'Courier New', 'Courier', 'monospace';
body
font-size: 2.2rem;
.sec
padding: 2.2rem;
/*
Navigation
*/
*
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
body
width: 100%;
height: 100vh;
background: url(Hero.jpg) no-repeat 50% 50%;
background-size: cover;
display: table;
.content
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
.content h1
color: #fff;
font-family: "Poppins";
font-weight: 200;
font-size: 40px;
nav
width: 100%;
background: #000;
height: 70px;
position: static;
z-index: 1;
nav #brand
float: left;
display: block;
margin-left: 84px;
font-size: 30px;
line-height: 70px;
font-weight: bold;
nav #brand a
color: #fff;
transition: all 0.3s ease-out;
font-family: "Poppins";
font-weight: 300;
nav #menu
float: right;
/* float: left;
left: 50%;
position: relative; */
nav #menu li
display: inline-block;
padding: 0px 30px;
cursor: pointer;
line-height: 70px;
position: relative;
transition: all 0.3s ease-out;
nav #menu li a
color: #fff;
font-family: "Poppins";
font-weight: 200;
#toggle
position: absolute;
right: 20px;
top: 14px;
z-index: 999;
width: 40px;
height: 40px;
cursor: pointer;
float: right;
transition: all 0.3s ease-out;
visibility: hidden;
opacity: 0;
#toggle .span
height: 3px;
background: #fff;
transition: all 0.3s ease-out;
backface-visibility: hidden;
margin: 5px auto;
#toggle.on #one
transform: rotate(45deg) translateX(2px) translateY(4px);
#toggle.on #two
opacity: 0;
#toggle.on #three
transform: rotate(-45deg) translateX(8px) translateY(-10px);
#resize
z-index: 1;
top: 0px;
position: absolute;
background: #000;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0;
transition: all 1s ease-out;
display: table;
#resize #menu
height: 90px;
display: table-cell;
vertical-align: center;
#resize #menu li
display: block;
text-align: center;
padding: 20px 0;
font-size: 50px;
min-height: 50px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease-out;
#resize li:nth-child(1)
margin-top:140px;
#resize #menu li a
color: #fff;
#resize.active
visibility: visible;
opacity: 0.99;
@media(max-width: 768px)
#toggle
visibility: visible;
opacity: 1;
margin-top: 6px;
nav #brand
margin-left: 18px;
#menu a
font-family: "Poppins";
font-weight: 200;
font-size: 20px;
nav #menu
display: none;
@media(min-width: 768px)
#resize
visibility: hidden !important;
/*
Hero Section
*/
.hero-wrap
background-color: #b072d4;
color:#ffffff;
height: 100vh;
#hero-icon
position: absolute;
top: 34.5rem;
opacity: 0.8;
width:100%;
right:0;
background: url('hero-icon-4.png') right bottom;;
height: 300px;
background-repeat: no-repeat;
#hero-icon button
opacity: 1;
padding: 1rem;
color:#fff;
font-weight: bold;
font-size: 1.6rem;
background-color: black;
border: none;
position: relative;
left: 30%;
top: 10%;
.hero-wrap h1
margin:0;
padding-left:4rem;
position: relative;
top: 10rem;
font-size: 3rem;
font-family: 'Courier New', Courier, monospace;
.hero-wrap h2
font-family: 'Courier New', Courier, monospace;
position: relative;
top: 12rem;
padding-left: 4rem;
font-size: 2rem;
/*
SECTION 1
*/
.section-1
display: flex;
flex-direction:column-reverse;
text-align: center;
.sec1-row
display: flex;
flex-direction:column-reverse;
margin: 2rem 0;
.section1-images
width: 50%;
.row-content
font-size: 1.6rem;
padding: 2rem 1rem;
/*
Section 2
*/
.section-2
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
margin:auto;
background-color: #00e8ff;
.section-2 .icon-img
width: 50%;
.icon-box
width: 50%;
align-self: center;
text-align: center;
margin:2rem;
padding: 1rem;
background-color: #fff;
border: 10px solid #ffd434;
<!DOCTYPE html>
<html>
<head>
<title>TweetSentiment App</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="normalize.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<nav>
<span id="brand">
<a href="index.html">Brand</a>
</span>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">FAQ</a></li>
</ul>
<div id="toggle">
<div class="span" id="one"></div>
<div class="span" id="two"></div>
<div class="span" id="three"></div>
</div>
</nav>
<div id="resize">
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</div>
<section class="hero-wrap sec">
<h1>
ANALYZE TWITTER DATA.
</h1>
<h2>
Search #hashtags and perform sentiment analysis.
</h2>
<div id="hero-icon">
<button>Learn More</button>
</div>
</section>
<section class="section-1 sec">
<div class="sec1-row">
<div class="row-content">
<h3>Sentiment Analysis.</h3>
<article>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here. <br><br>Content here', making it look like readable English.
Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</article>
</div>
<div>
<img class="section1-images" src="img1.png" alt="image">
</div>
</div>
<div class="sec1-row">
<div class="row-content">
<h3>Data Tracking.</h3>
<article>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here. <br><br> Content here', making it look like readable English.
Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</article>
</div>
<div>
<img class="section1-images" src="img2.png" alt="image">
</div>
</div>
</section>
<section class="section-2 sec">
<div class="icon-box">
<img class="icon-img" src="icons/icon2.png" alt="icon">
<h5>HASTAGS ANALYZED</h5>
</div>
<div class="icon-box">
<img class="icon-img" src="icons/icon1.png" alt="icon">
<h5>USERS SERVED</h5>
</div>
<div class="icon-box">
<img class="icon-img" src="icons/icon3.png" alt="icon">
<h5>TWEETS COMPUTED</h5>
</div>
</section>
<section class="section-3 sec">
</section>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
$("#toggle").click(function()
$(this).toggleClass('on');
$("#resize").toggleClass("active");
);
html
font-size: 10px;
font-family: 'Courier New', 'Courier', 'monospace';
body
font-size: 2.2rem;
.sec
padding: 2.2rem;
/*
Navigation
*/
*
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
body
width: 100%;
height: 100vh;
background: url(Hero.jpg) no-repeat 50% 50%;
background-size: cover;
display: table;
.content
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
.content h1
color: #fff;
font-family: "Poppins";
font-weight: 200;
font-size: 40px;
nav
width: 100%;
background: #000;
height: 70px;
position: static;
z-index: 1;
nav #brand
float: left;
display: block;
margin-left: 84px;
font-size: 30px;
line-height: 70px;
font-weight: bold;
nav #brand a
color: #fff;
transition: all 0.3s ease-out;
font-family: "Poppins";
font-weight: 300;
nav #menu
float: right;
/* float: left;
left: 50%;
position: relative; */
nav #menu li
display: inline-block;
padding: 0px 30px;
cursor: pointer;
line-height: 70px;
position: relative;
transition: all 0.3s ease-out;
nav #menu li a
color: #fff;
font-family: "Poppins";
font-weight: 200;
#toggle
position: absolute;
right: 20px;
top: 14px;
z-index: 999;
width: 40px;
height: 40px;
cursor: pointer;
float: right;
transition: all 0.3s ease-out;
visibility: hidden;
opacity: 0;
#toggle .span
height: 3px;
background: #fff;
transition: all 0.3s ease-out;
backface-visibility: hidden;
margin: 5px auto;
#toggle.on #one
transform: rotate(45deg) translateX(2px) translateY(4px);
#toggle.on #two
opacity: 0;
#toggle.on #three
transform: rotate(-45deg) translateX(8px) translateY(-10px);
#resize
z-index: 1;
top: 0px;
position: absolute;
background: #000;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0;
transition: all 1s ease-out;
display: table;
#resize #menu
height: 90px;
display: table-cell;
vertical-align: center;
#resize #menu li
display: block;
text-align: center;
padding: 20px 0;
font-size: 50px;
min-height: 50px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease-out;
#resize li:nth-child(1)
margin-top:140px;
#resize #menu li a
color: #fff;
#resize.active
visibility: visible;
opacity: 0.99;
@media(max-width: 768px)
#toggle
visibility: visible;
opacity: 1;
margin-top: 6px;
nav #brand
margin-left: 18px;
#menu a
font-family: "Poppins";
font-weight: 200;
font-size: 20px;
nav #menu
display: none;
@media(min-width: 768px)
#resize
visibility: hidden !important;
/*
Hero Section
*/
.hero-wrap
background-color: #b072d4;
color:#ffffff;
height: 100vh;
#hero-icon
position: absolute;
top: 34.5rem;
opacity: 0.8;
width:100%;
right:0;
background: url('hero-icon-4.png') right bottom;;
height: 300px;
background-repeat: no-repeat;
#hero-icon button
opacity: 1;
padding: 1rem;
color:#fff;
font-weight: bold;
font-size: 1.6rem;
background-color: black;
border: none;
position: relative;
left: 30%;
top: 10%;
.hero-wrap h1
margin:0;
padding-left:4rem;
position: relative;
top: 10rem;
font-size: 3rem;
font-family: 'Courier New', Courier, monospace;
.hero-wrap h2
font-family: 'Courier New', Courier, monospace;
position: relative;
top: 12rem;
padding-left: 4rem;
font-size: 2rem;
/*
SECTION 1
*/
.section-1
display: flex;
flex-direction:column-reverse;
text-align: center;
.sec1-row
display: flex;
flex-direction:column-reverse;
margin: 2rem 0;
.section1-images
width: 50%;
.row-content
font-size: 1.6rem;
padding: 2rem 1rem;
/*
Section 2
*/
.section-2
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
margin:auto;
background-color: #00e8ff;
.section-2 .icon-img
width: 50%;
.icon-box
width: 50%;
align-self: center;
text-align: center;
margin:2rem;
padding: 1rem;
background-color: #fff;
border: 10px solid #ffd434;
<!DOCTYPE html>
<html>
<head>
<title>TweetSentiment App</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="normalize.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<nav>
<span id="brand">
<a href="index.html">Brand</a>
</span>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">FAQ</a></li>
</ul>
<div id="toggle">
<div class="span" id="one"></div>
<div class="span" id="two"></div>
<div class="span" id="three"></div>
</div>
</nav>
<div id="resize">
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</div>
<section class="hero-wrap sec">
<h1>
ANALYZE TWITTER DATA.
</h1>
<h2>
Search #hashtags and perform sentiment analysis.
</h2>
<div id="hero-icon">
<button>Learn More</button>
</div>
</section>
<section class="section-1 sec">
<div class="sec1-row">
<div class="row-content">
<h3>Sentiment Analysis.</h3>
<article>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here. <br><br>Content here', making it look like readable English.
Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</article>
</div>
<div>
<img class="section1-images" src="img1.png" alt="image">
</div>
</div>
<div class="sec1-row">
<div class="row-content">
<h3>Data Tracking.</h3>
<article>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here. <br><br> Content here', making it look like readable English.
Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</article>
</div>
<div>
<img class="section1-images" src="img2.png" alt="image">
</div>
</div>
</section>
<section class="section-2 sec">
<div class="icon-box">
<img class="icon-img" src="icons/icon2.png" alt="icon">
<h5>HASTAGS ANALYZED</h5>
</div>
<div class="icon-box">
<img class="icon-img" src="icons/icon1.png" alt="icon">
<h5>USERS SERVED</h5>
</div>
<div class="icon-box">
<img class="icon-img" src="icons/icon3.png" alt="icon">
<h5>TWEETS COMPUTED</h5>
</div>
</section>
<section class="section-3 sec">
</section>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
answered Nov 12 at 6:44
George
21514
21514
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53256920%2fwhy-is-html-layout-breaking-at-769px%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown