<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Landing Page </title>
<!-- Main File style -->
<link rel="stylesheet" href="styles.css" />
<!-- font-awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
</head>
<body>
<!-- Start Header -->
<header>
<div class="container">
<a href="#" class="logo">
<img src="https://codezillaye.com/wp-content/uploads/2024/06/codezillaye-high-resolution-logo.jpg" alt="Logo" />
</a>
<nav>
<i class="fas fa-bars toggle-menu"></i>
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="form">
<i class="fas fa-search"></i>
</div>
</nav>
</div>
</header>
<!-- End Header -->
<!-- Start Landing -->
<div class="landing">
<div class="overlay"></div>
<div class="text">
<div class="content">
<h2>
Hello World!<br />
We Are CodeZillaYE Platform.
</h2>
<p>
Unlock the power of coding with CodeZillaYE! Your ultimate
resource for mastering frontend and backend development. Dive into
detailed tutorials on HTML, CSS, Bootstrap, Tailwind CSS,
JavaScript, React, PHP, Laravel, Python, and Dart. Stay ahead with
our educational articles and enhance your skills with practical
guides. Perfect for beginners and seasoned developers alike. Join
CodeZillaYE today and elevate your coding journey!.
</p>
</div>
</div>
<i class="fas fa-angle-left change-background fa-2x"></i>
<i class="fas fa-angle-right change-background fa-2x"></i>
<ul class="bullets">
<li></li>
<li class="active"></li>
<li></li>
</ul>
</div>
<!-- End Landing -->
</body>
</html>
/*Start Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Playwrite+NG+Modern:[email protected]&display=swap');
/* End Google Fonts */
/* Start Variables */
:root {
--main-color: #e3c09e47;
--transparent-color:#abaaaafe;
--section-padding: 100px;
}
/* End Variables */
/* Start Global Rules */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
html {
scroll-behavior: smooth;
}
body {
font-family: "Playwrite NG Modern", cursive;
font-optical-sizing: auto;
font-style: normal;
}
ul {
list-style: none;
}
.container {
padding-left: 15px;
padding-right: 15px;
margin-left: auto;
margin-right: auto;
}
/* Small */
@media (min-width: 768px) {
.container {
width: 750px;
}
}
/* Medium */
@media (min-width: 992px) {
.container {
width: 970px;
}
}
/* Large */
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
/* End Global Rules */
/* Start Components */
.main-heading {
text-align: center;
}
.main-heading h2 {
font-weight: normal;
font-size: 40px;
position: relative;
margin-bottom: 70px;
text-transform: uppercase;
}
.main-heading h2::before {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
height: 2px;
background-color: #cecccc;
bottom: -30px;
width: 120px;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
}
.main-heading h2::after {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 14px;
height: 14px;
border-radius: 50%;
border: 2px solid #edecec;
bottom: -38px;
background-color: #222;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
}
.main-heading p {
width: 550px;
margin: 0 auto 100px;
max-width: 100%;
line-height: 2;
color: #777;
}
/* End Components */
/* Start Header */
header {
position: absolute;
left: 0;
width: 100%;
z-index: 2;
}
header .container {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
min-height: 97px;
}
header .container::after {
/* content: "";
position: absolute;
height: 1px;
background-color: #a2a2a2;
bottom: 0;
width: calc(100% - 30px);
left: 15px; */
}
header .logo img {
height: 40px;
}
header nav {
flex: 1;
display: flex;
align-items: center;
justify-content: flex-end;
}
header nav .toggle-menu {
color: white;
font-size: 22px;
}
@media (min-width: 768px) {
header nav .toggle-menu {
display: none;
}
}
header nav ul {
display: flex;
}
@media (max-width: 767px) {
header nav ul {
display: none;
}
header nav .toggle-menu:hover + ul {
display: flex;
flex-direction: column;
position: absolute;
top: 100%;
left: 0;
width: 100%;
background-color: rgb(0 0 0 / 50%);
}
header nav ul li a {
padding: 15px !important;
}
}
header nav ul li a {
padding: 40px 10px;
display: block;
color: white;
text-decoration: none;
font-size: 14px;
transition: 0.3s;
position: relative;
z-index: 2;
-webkit-transition:;
-moz-transition:;
-ms-transition:;
-o-transition:;
}
header nav ul li a.active,
header nav ul li a:hover {
color: var(--main-color);
border-bottom: 1px solid var(--main-color);
}
header nav .form {
width: 40px;
height: 30px;
position: relative;
margin-left: 30px;
border-left: 1px solid var(--transparent-color);
}
header nav .form i {
color:var(--main-color);
position: absolute;
font-size: 20px;
top: 50%;
transform: translateY(-50%);
right: 0;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
}
/* End Header */
/* Start Landing */
.landing {
min-height: 100vh;
background-color: #333;
background-image: url("https://codezillaye.com/wp-content/uploads/2024/06/topic.jpg");
background-size: cover;
position: relative;
}
.landing .overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color:#97704ad4;
}
.landing .text h2 {
color: #edecec;
background-color: #333;
padding: .5rem;
border-radius: 12px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
-ms-border-radius: 12px;
-o-border-radius: 12px;
}
.landing .text {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 50%;
padding: 50px;
background-color: var(--transparent-color);
color:#ffeb3b;
display: flex;
justify-content: flex-end;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
}
.landing .text .content {
max-width: 500px;
}
@media (max-width: 767px) {
.landing .text {
width: 100%;
}
.landing .text .content {
max-width: 100%;
}
}
.landing .text .content h2 {
font-size: 32px;
font-weight: normal;
line-height: 1.5;
margin-bottom: 20px;
}
.landing .text .content p {
font-size: 14px;
line-height: 2;
}
.landing .change-background {
position: absolute;
top: 50%;
transform: translateY(-50%);
color: #ddd;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
}
@media (max-width: 767px) {
.landing .change-background {
display: none;
}
}
.landing .fa-angle-left {
left: 30px;
}
.landing .fa-angle-right {
right: 30px;
}
.landing .bullets {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 30px;
display: flex;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
}
.landing .bullets li {
width: 20px;
height: 20px;
border: 1px solid var(--main-color);
border-radius: 50%;
margin-right: 10px;
}
.landing .bullets li.active {
background-color: var(--transparent-color);
border-color: var(--main-color);
}
/* End Landing */