<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="mystyle.css">
<script src="https://use.fontawesome.com/e8c7e23cd0.js"></script>
<script src="https://kit.fontawesome.com/c701ebd72f.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Libre+Franklin&display=swap" rel="stylesheet">
<title>NEW DAWN</title>
</head>
<body>
<header>
<div id="header-icons">
<div id="icon1"><nav>
<a href="#" id="bars"><i class="fas fa-bars"></i></a>
</nav></div>
<div class="icon2">
<a href="#" id="search"><i class="fas fa-search"></i></a></div>
</div>
<div class="header-titles"><h1>NEW DAWN</h1>
<h2 id="subtitle">For people who think for themselves</h2></div>
</header>
<main>
<section id="main-section">
<nav id="menu-categories">
<div id="nav-item-1">
<ul>
<!-- <li><a href="#"><div class="two-word"><div class="word">SECRET</div><div class="word">HISTORY</div></div></a></li> -->
<li><a href="#">SECRET HISTORY</a></li>
<li><a href="#">TECHNOLOGY</a></li>
<li><a href="#">AFTERLIFE</a></li>
<li><a href="#">PARANORMAL</a></li>
<li><a href="#">NEW SCIENCE</a></li>
<li><a href="#">MORE</a></li> <!-- DROPDOWN -->
</ul></div>
<div id="nav-item-2"><button type="button" name="button" id="button1">SUBSCRIBE</button>
<a href="#" id="shopping"><i class="fas fa-shopping-bag"></i></a></div>
</nav>
<div id="SLIDESHOW"><a href="https://ibb.co/jZMVBmF"><img src="https://i.ibb.co/QjN8zLG/slideshow2.jpg" alt="slideshow2" border="0" id="SLIDESHOW-IMG"/></a>
<div id="text-block">Machine Intelligence & Human Intelligence: What is the Difference?</div>
</div>
</section>
<section id="invisible1">
<section id="seventy-left">
<div class="all-hor">
<div class="box-titles"><h2 class="main-heads">SECRET HISTORY</h2></div>
<div class="invi-hor1">
<div class="item-left"><a href="https://imgbb.com/"><img src="https://i.ibb.co/5RTx84j/secrethistory1.jpg" alt="secrethistory1" border="0" class="thumbnail-1"/></a><div class="box-image">Nicholas & Helena Roerich: The Spiritual Journey of Two Great Artists & Peacemakers.</div>
</div>
<div class="item-right"><div class="orange-tag">MOST POPULAR</div><a href="https://imgbb.com/"><img src="https://i.ibb.co/Ms5CTXk/secrethistory2.jpg" alt="secrethistory2" border="0" class="thumbnail-1"/></a><div class="box-image">Secret Teachings Reborn: The Mysterious Life of Manly P. Hall.</div>
</div>
</div>
</div>
<div class="all-hor">
<div class="box-titles"><h2 class="main-heads">TECHNOLOGY</h2></div>
<div class="invi-hor1">
<div class="item-left"><div class="orange-tag">MOST RECENT</div><a href="https://imgbb.com/"><img src="https://i.ibb.co/QXTPcYt/technology1.jpg" alt="technology1" border="0" class="thumbnail-1"/></a><div class="box-image">Free Your Mind From Mainstream Media Brainwashing</div>
</div>
<div class="item-right"><a href="https://imgbb.com/"><img src="https://i.ibb.co/HqBt54M/technology2.jpg" alt="technology2" border="0" class="thumbnail-1"/></a><div class="box-image">Control 101: Creating Consensus Reality</div>
</div>
</div>
</div>
<div class="all-hor">
<div class="box-titles"><h2 class="main-heads">AFTER LIFE</h2></div>
<div class="invi-hor">
<div class="item"><a href="https://ibb.co/xMBb1Ft"><img src="https://i.ibb.co/hK4NBYJ/afterlife.jpg" alt="afterlife" border="0" id="afterlife"/></a><div class="box-image">Will I Survive? A Look at the Afterlife</div>
</div>
</div>
</div>
<div class="all-hor">
<div class="box-titles"><h2 class="main-heads">NEW SCIENCE</h2></div>
<div class="invi-hor1">
<div class="item-left"><a href="https://imgbb.com/"><img src="https://i.ibb.co/3vSLTmY/newscience1.jpg" alt="newscience1" border="0" class="thumbnail-1"/></a><div class="box-image">A Convergence of Science & Real Magic</div>
</div>
<div class="item-right"><a href="https://imgbb.com/"><img src="https://i.ibb.co/8NDXftW/newscience2.jpg" alt="newscience2" border="0" class="thumbnail-1"/></a><div class="box-image">Cosmic Consciousness & Outer Spaces in Popular Culture</div>
</div>
</div>
</div></section>
<section id="thirty-right">
<div class="box-titles"><h2>POPULAR ARTICLES</h2></div>
<div class="invi-side-twos-1">
<div class="item2-left">
<a href="https://imgbb.com/"><img src="https://i.ibb.co/K296b1g/popular-articles-1.jpg" alt="popular-articles-1" border="0" class="thumbnail-2"/></a><div class="box-image-2">Enoch & the Watchers: The Real Story of Angels & Demons</div>
</div>
<div class="item2-right">
<a href="https://imgbb.com/"><img src="https://i.ibb.co/6P5pYsZ/popular-articles-2.png" alt="popular-articles-2" border="0" class="thumbnail-2"/></a><div class="box-image-2"> When Does the Kali Yuga End?</div>
</div>
</div>
<div class="invi-side-twos-2">
<div class="item2-left">
<a href="https://imgbb.com/"><img src="https://i.ibb.co/Ydpwk68/popular-articles-3.png" alt="popular-articles-3" border="0" class="thumbnail-2"/></a><div class="box-image-2">The Masons and the Moors</div>
</div>
<div class="item2-right">
<a href="https://imgbb.com/"><img src="https://i.ibb.co/wQsQ7gX/popular-articles-4.png" alt="popular-articles-4" border="0" class="thumbnail-2"/></a><div class="box-image-2">The Gods Are Dead! Long Live the Gods!</div>
</div>
</div>
</div>
<div class="banner1">
<a href="https://imgbb.com/"><img src="https://i.ibb.co/YkZhsTV/banner-sidebar.jpg" alt="banner-sidebar" border="0"/></a>
<div class="text-banner">LATEST ISSUE</div>
<button>SHOP</button>
</div>
</div>
<div class="box-titles"><h2>LATEST ARTICLES</h2></div>
<div class="invi-side-twos-1">
<div class="item2-left">
<a href="https://imgbb.com/"><img src="https://i.ibb.co/WWyVNn9/latest1.jpg" alt="latest1" border="0" class="thumbnail-2"/></a><div class="box-image-2">The Power of the Mind to Heal</div>
</div>
<div class="item2-right">
<a href="https://imgbb.com/"><img src="https://i.ibb.co/CBZDQhF/latest2.jpg" alt="latest2" border="0" class="thumbnail-2"/></a> <div class="box-image-2">The True Story of Archaic & Predynastic Egypt</div>
</div>
</div>
<div class="invi-side-twos-2-1">
<div class="item2-left">
<a href="https://imgbb.com/"><img src="https://i.ibb.co/j4Lv6TP/latest3.jpg" alt="latest3" border="0" class="thumbnail-2"/></a><div class="box-image-2">Sufism & The Nine Unknowns</div>
</div>
<div class="item2-right">
<a href="https://imgbb.com/"><img src="https://i.ibb.co/XYtnGVL/latest4.jpg" alt="latest4" border="0" class="thumbnail-2"/></a><div class="box-image-2">Secrets of Siberian Shamanism</div>
</div>
</div>
</div>
<div class="invi-side-twos-3">
<div class="item2-left">
<a href="https://imgbb.com/"><img src="https://i.ibb.co/DYKkD8d/latest5.jpg" alt="latest5" border="0" class="thumbnail-2" /></a><div class="box-image-2">Who Really Controls the World?</div>
</div>
<div class="item2-right">
<img src="https://i.ibb.co/kSRQxb9/latest6.jpg" alt="latest6" class="thumbnail-2"/><div class="box-image-2">The Faeries: From Folklore to Metaphysical Reality</div>
</div>
</div>
</div>
</section>
</section>
<section id="more">
<div class="box-titles-1"><h2 id="MORE-1">MORE</h2></div>
<div class="invi-hor2">
<div class="banner2">
<img src="https://i.ibb.co/nfmSmD2/banner-more.jpg" alt="banner-more">
<div class="text-banner-1">LATEST ISSUE</div>
<button>SHOP</button>
</div>
<div class="item3">
<img src="https://i.ibb.co/1fTvMkZ/more2.jpg" alt="more2" class="thumbnail-3"><div class="box-image-1">Imagine, if you will, a war in the near future.</div>
</div>
<div class="item3">
<img src="https://i.ibb.co/Nx4kpMB/more3.jpg" alt="more3" border="0" class="thumbnail-3"><div class="box-image-1">Trending to a Multipolar World: Opportunities & Challenges</div>
</div>
</div>
</section>
</main>
<footer>
<div class="footer-1">
<div class="f2">
<div class="f-item-1">ABOUT</div>
<div class="f-item-2"><div id="fitem-21">Mission</div><div id="fitem-22">Statement</div></div>
<div class="f-item-3">Stockist</div>
</div>
<div class="f2"><div class="f-item-1">COMMUNITY</div>
<div class="f-item-3">Submission</div>
<div class="f-item-3">Donate</div>
<div class="f-item-3">Authors</div>
</div>
<div class="footer-2">
<div class="Newsletter">NEWSLETTER</div>
<div class="Connect">CONNECT</div>
</div>
</footer>
</body>@font-face {
font-family: "Libre Franklin";
src: url("https://fonts.googleapis.com/css?family=Libre+Franklin&display=swap");}
header{
background: url("https://i.ibb.co/ZYFrkwS/header.jpg");
background-size: 1440px;
max-width:1440px;
width:100%;
height:400px;
display: flex;
flex-direction: column;
}
#header-icons{
display: flex;
justify-content: space-between;
flex-direction: row;
margin: 2%;
}
#icon-1{
}
#icon-2{
}
.header-titles{
display: flex;
flex-direction: column;
}
.fa-bars{
color:#FADEC1;
font-size: 1.5em;
}
.fa-shopping-bag{
color:#37263f;
font-size: 1.5em;
}
#SLIDESHOW{
position: relative;
}
#SLIDESHOW-IMG{
width: 100%;
}
#text-block{
position: absolute;
display: flex;
top:75%;
width:75%;
min-height:88px;
background-color: rgba(255, 255, 255, 0.8);
color: #37263f;
font-family: "Libre Franklin";
font-weight: bolder;
font-size: 18pt;
align-items: center;
padding-left: 2%;
padding-right: 2%;
}
#invisible1{
display:flex;
flex-direction: column;
}
h1{
color: #F9CF69;
font-size: 62pt;
font-family: "Optima", sans-serif;
font-weight: 900;
padding-left: 5%;
}
#subtitle{
padding-left: 0%;
color: #FADEC1;
font-size: 18pt;
font-family: "Libre Franklin", sans-serif;
font-weight:500;
padding-left: 5%;
align-self: flex-start;
}
.fa-search{
color: #FADEC1;
font-size: 1.5em;
}
h2{
padding-left: 10%;
}
.main-heads{
padding-left: 2%;
}
main{
display:flex;
flex-direction: column;
}
#main-section{
display: flex;
flex-direction: column;
justify-content: space-between;
}
#menu-categories{
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
height: content;
/* padding-left: 2.5%;
padding-right: 2.5%; */
}
#nav-item-1{
font-family: "Optima";
font-size: 20px;
color: #FADEC1;
font-weight: 600;
display: flex;
flex-direction: column;
flex-basis: auto;
flex-grow: 1;
}
#nav-item-2{
display: flex;
flex-direction: column;
justify-content: space-between;
width:16.9%;
}
#nav-item-1 ul{
display: flex;
flex-direction: column;
align-items: center;
list-style-type: none;
flex-basis: auto;
flex-grow: 1;
}
#nav-item-1 ul li{
/* padding-left: 1%; */
flex-basis: content;
flex-grow: 1;
}
ul a{
text-decoration: none;
color: #37263F;
}
/* ul{
list-style-type: none;
display:flex;
} */
#button1{
background-color: #f9cf69;
border-radius: 9px;
border-style: none;
height: 39px;
width: 166px;
font-weight: 600;
font-family: "Libre Franklin";
color: #37263f;
font-size: 16px;
}
#button1:hover{
background-color:#37263f;
color: #f9cf69;
}
#SLIDESHOW{
/* margin-left: 4.7%; */
/* margin-right: 3.3%; */
}
#SLIDESHOW-IMG{
width: 100%;
}
#invisible1
{display:flex;
margin-left: 3%;
margin-right: 3%;
}
#seventy-left
{display: flex;
flex-direction: column;
width:58.1%;
}
h2 {
font-family: "Optima";
font-size: 28px;
font-weight: bold;
color: #3f2b48;
/* height: 34px; */
}
.box-titles{
border-bottom: solid;
border-bottom-color: #3f2b48;
border-bottom-width: 1px;
margin-bottom: 3.6%;
}
.all-hor{
display:flex;
flex-direction: column;
margin-bottom: 4%;
}
.invi-hor1
{ display: flex;
flex-direction:column;
}
.item-left{
margin-right: 1.5%;
width: 50%; // Huan
position: relative;
}
.item-right{
margin-left: 1.5%;
width: 50%; // Huan
position: relative;
}
.orange-tag{
width:183px;
height:33px;
background-color: #e64a31;
font-family: "Optima";
font-size: 22px;
color:white;
font-weight:bold;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}
.thumbnail-1{
width: 100%;
}
.thumbnail-2{
width: 100%;
}
.thumbnail-3{
width: 100%;
}
.box-image{
display:flex;
align-items: center;
background-color: #37263f;
padding: 10px;
font-family:"Libre Franklin";
font-size: 22px;
font-weight: bold;
color: #fadec1;
margin-top:-2%;
/* height: 20%; // Huan */
min-height: 89px;
}
/* .description{
this was not needed in the end but it was designed to be a separate div of just text within the purple text box.
} */
#afterlife{
width: 100%;
}
.invi-hor
{display:flex;
flex-direction:column;
}
#thirty-right
{display:flex;
flex-direction: column;
width:26.9%;
margin-left: 9%;
}
.invi-side-twos-1
{display: flex;
flex-direction: column;
margin-top:3.6%;
}
.invi-side-twos-2
{display: flex;
flex-direction: column;
margin-top:3%;
margin-bottom:3.6%;
}
.invi-side-twos-2-1
{display: flex;
flex-direction: column;
margin-top:3%;
margin-bottom:3%;
}
.invi-side-twos-3
{display: flex;
flex-direction: column;
margin-bottom:3.6%;
}
.item2-left
/* {width: 50%; */
{margin-right: 1.5%;
width: 50%;
height: auto;
}
.item2-right
/* {width: 50%; */
{margin-left: 1.5%;
width: 50%;
}
.box-image-2
{display: flex;
align-items: flex-start;
background-color: #37263f;
padding: 10px;
font-family:"Libre Franklin";
font-size: 13.5pt;
font-weight: bold;
color: #fadec1;
margin-top:-4%;
min-height: 131px;
}
.banner1{
position:relative;
margin-top: 10%;
margin-bottom: 8%;
}
.banner1 img{
width: 100%;
}
.banner1 button{
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
width: 130px;
height: 34px;
font-family: "Libre Franklin";
font-weight: 600;
font-size:16px;
color: #37263f;
border-radius: 9px;
background-color: #f9cf69;
border: none;
}
.banner1 button:hover{
background-color:#37263f;
color: #f9cf69;
}
.text-banner{
position:absolute;
color: white;
top:37%;
left: 50%;
transform: translate(-50%, -37%);
-ms-transform: translate(-50%, -37%);
font-family: "Optima";
font-weight: 700;
font-size: 20.5px;
}
/* group text-banner and button under one dix so that everything is centered */
.subscribe
{border-style: solid;
border-color:#37263F;
border-width: 2px;
}
.banner2{
position:relative;
margin-bottom: 8%;
}
.banner2 img{
width: 100%;
max-height: 263px;
}
.banner2 button{
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
width: 130px;
height: 34px;
font-family: "Libre Franklin";
font-weight: 600;
font-size:16px;
color: #37263f;
border-radius: 9px;
background-color: #f9cf69;
border: none;
}
.banner2 button:hover{
background-color:#37263f;
color: #f9cf69;
}
.text-banner-1{
position:absolute;
color: white;
top:35%;
left: 50%;
transform: translate(-50%, -35%);
-ms-transform: translate(-50%, -35%);
font-family: "Optima";
font-weight: 700;
font-size: 20.5px;
}
#more
{display: flex;
/* width: 100%; */
flex-direction: column;
margin-left: 3%;
margin-right:3%;
margin-bottom: 2.8%;
}
.box-titles-1{
/* width: 100%;
height: 34px; */
display: flex;
justify-content: center;
border-bottom: solid;
border-bottom-color: #3f2b48;
border-bottom-width: 1px;
margin-bottom: 3.6%;
}
.invi-hor2
{display: flex;
flex-direction: column;
margin-right:3.3%;
}
.item3{
margin-left:2%;
display: flex;
flex-direction: column;
width: 32%;
max-height: 263px;
}
.box-image-1{
display:flex;
align-items: center;
background-color: #37263f;
padding: 10px;
font-family:"Libre Franklin";
font-size: 22px;
font-weight: bold;
color: #fadec1;
margin-top:-2%;
/* height: 20%; // Huan */
max-height: 93px;
}
footer{
display:flex;
background-color: #37263f;
width: 100%;
min-height: 194px;
flex-direction: column;
justify-content: space-between;
margin:-10px;
padding-top: 40px;
padding-left: 4.9%;
}
.footer-1{
display: flex;
flex-direction: column;
color:#fadec1;
font-family: "Optima";
font-weight: bold;
font-size: 20px;
}
.f2{
display: flex;
flex-direction:column;
margin-right: 40%;
align-content: space-around;
}
.f-item1{
}
.f-item-2{
color: #fadec1;
font-family: "Libre Franklin";
font-size: 12px;
font-weight: lighter;
display: flex;
flex-direction:row;
}
#fitem-21{
margin-right:8%;
}
#fitem-22{
}
.f-item-3{
color: #fadec1;
font-family: "Libre Franklin";
font-size: 12px;
font-weight: 300;
}
.footer-2{
display:flex;
flex-direction:column;
color:#fadec1;
font-family: "Optima";
font-weight: bold;
font-size: 20px;
}
@media screen and (min-width:600px) {
#menu-categories{
flex-direction: row;
}
#menu-categories ul{
flex-direction: row;
flex-wrap: nowrap;
max-height: 92px;
}
#nav-item-1{
flex-direction: row;
}
#nav-item-2{
flex-direction: row;}
#invisible1{
flex-direction: row;}
.invi-hor{
flex-direction: row;
}
.invi-hor1{
flex-direction: row;
}
#afterlife{
max-width:100%;
}
.invi-hor2{
flex-direction: row;
}
.invi-side-twos-1{
flex-direction: row;
}
.invi-side-twos-2{
flex-direction: row;
}
.invi-side-twos-2-1{
flex-direction: row;
}
.invi-side-twos-3{
flex-direction: row;
}
footer{
flex-direction:row;
}
.footer-1{
flex-direction:row;
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.