<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="../css/style.css">
<title>Document</title>
<style>
*{
margin: 0;
padding:0;
box-sizing: border-box;
}
.navbar{
position: relative;
display: flex;
justify-content: space-around;
align-items: center;
background-color: darkgrey;
color: white;
}
.brand-title{
font-size: 1.5rem;
margin: 0.5rem;
}
.navbar ul{
margin: 0;
padding:0;
display: flex;
}
.navbar li{
list-style: none;
transition: all 0.5s ease-in-out;
}
.navbar li:hover{
background-color: lightgrey;
}
.navbar li a{
text-decoration: none;
display: block;
padding: 0.8rem;
color: white;
}
.toggle-btn{
display: none;
flex-direction: column;
justify-content: space-between;
height: 21px;
width: 30px;
position: absolute;
top: .75rem;
right: 1rem;
}
.toggle-btn .bar{
background-color: #fff;
border-radius: 10px;
height: 3px;
width: 100%;
}
@media screen and (max-width:800px) {
.navbar{
flex-direction: column;
align-items: flex-start;
}
.toggle-btn{
display: flex;
}
.navbar-links{
display: none;
width: 100%;
}
.navbar-links ul{
width: 100%;
flex-direction: column;
}
.navbar-links li{
text-align: center;
}
.navbar-links li a{
padding: .5rem 1rem;
}
.navbar-links.active{
display: flex;
}
.services{
flex-direction: column;
margin: 0;
}
.services .col{
margin: 1.4rem;
}
.services img{
width: 30%;
}
.cta{
width: 80% !important;
margin: 1rem auto !important;
}
.cta input[type="submit"]{
width: 100% !important;
}
}
.intro{
width: 100%;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.intro-slideshow img{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 500px;
object-fit: cover;
z-index: -1;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.services{
display: flex;
justify-content: space-around;
align-items: center;
margin: 3rem 1rem;
text-align: center;
}
/*
.about-me{
display: flex;
justify-content: space-around;
align-items: center;
margin: 2rem 1rem;
}
.about-me img{
width: 10%;
border-radius: 50%;
text-align: center;
float: left;
margin-right: .5rem;
} */
.cta{
background-color: lightgray;
padding: 20px;
border-radius: 6px;
width: 50%;
margin: 6rem auto;
clear: both;
}
.cta label{
display: flex;
margin: .5rem 0;
}
.cta input, textarea{
padding: 7px;
width: 100%;
border: none;
border-radius: 4px;
resize: none;
}
.cta input[type="submit"]{
width: 20%;
background-color: green;
color: white;
margin-top: .4rem;
}
footer{
background-color: darkgrey;
color: white;
display: flex;
justify-content: space-around;
align-items: center;
padding: 10px;
}
footer a{
text-decoration: none;
color: white;
padding-right: .6rem;
}
</style>
</head>
<body>
<nav class="navbar">
<div class="brand-title">ShanaLearnings</div>
<a href="#" class="toggle-btn">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Notes</a></li>
<li><a href="#">Video Lectures</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
<div class="intro">
<div class="intro-slideshow">
<img src="../html/images/header.jpg" alt="">
<img src="../html/images/img-2.jpg" alt="">
<img src="../html/images/img-3.jpg" alt="">
<img src="../html/images/img-1.jpg" alt="">
</div>
</div>
<div class="services">
<div class="col-1 col">
<img src="../html/images/multimedia.png" alt="" style="width:10%;">
<h2>Free audio and video</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae deleniti veniam molestias esse unde quasi in illum corrupti.</p>
</div>
<div class="col-2 col">
<img src="../html/images/copy-writing.png" alt="" style="width:10%;">
<h2>Free notes</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus, explicabo ratione excepturi aut facilis in cumque?</p>
</div>
<div class="col-3 col">
<img src="../html/images/machine-learning.png" alt="" style="width:10%;">
<h2>interactive learning</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo ipsum fugiat praesentium ducimus aliquid officiis quidem dicta veritatis fuga sunt.</p>
</div>
</div>
<!--
<div class="about-me">
<div class="founder">
<img src="../html/images/boy smiling.jpg" alt="">
<p><b>Sharifa Nazari</b>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Numquam accusantium doloremque autem voluptate corporis? Vel?</p>
<a href="#">learn more...</a>
</div>
<div class="manager">
<img src="../html/images/boy smiling.jpg" alt="">
<p><b>Sharifa Nazari</b>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Numquam accusantium doloremque autem voluptate corporis? Vel?</p>
<a href="#">learn more...</a>
</div><div class="editor">
<img src="../html/images/boy smiling.jpg" alt="">
<p><b>Sharifa Nazari</b>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Numquam accusantium doloremque autem voluptate corporis? Vel?</p>
<a href="#">learn more...</a>
</div>
</div> -->
<div class="cta">
<form action="#" name="CTA" onsubmit="return validate()">
<label for="fname">First Name</label>
<input type="text" name="fname" id="fname" placeholder="first name">
<span id="error"></span>
<label for="lname">Last Name</label>
<input type="text" name="lname" id="lname" placeholder="last name">
<span id="error1"></span>
<label for="email">Email Address</label>
<input type="email" name="email" id="email" placeholder="email address">
<span id="error2"></span>
<label for="pass">Password</label>
<input type="password" name="pass" id="pass" placeholder="first name">
<span id="error3"></span>
<label for="message">Message</label>
<textarea name="message" id="message" cols="30" rows="10" placeholder="write your feedback..."></textarea>
<input type="submit" value="Submit" class="submit">
</form>
</div>
<footer>
<p>Shana learnings | All rights reserved - 2021</p>
<div class="footer-links">
<a href="#">About</a>
<a href="#">Terms and uses</a>
<a href="#">Privacy and services</a>
</div>
</footer>
<script>
const toggleButton = document.getElementsByClassName("toggle-btn")[0]
const navbarLinks = document.getElementsByClassName("navbar-links")[0]
toggleButton.addEventListener("click", () => {
navbarLinks.classList.toggle("active")
})
const slideShowImages = document.querySelectorAll(".intro-slideshow img")
const nextImageDelay = 5000;
let currentImageCounter = 0;
slideShowImages[currentImageCounter].style.opacity = 1;
setInterval(nextImage, nextImageDelay);
function nextImage(){
slideShowImages[currentImageCounter].style.opacity = 0;
currentImageCounter = (currentImageCounter + 1) % slideShowImages.length;
slideShowImages[currentImageCounter].style.opacity = 1;
}
function validate(){
var Fname = document.forms["CTA"]["fname"]
var Span = document.getElementById("error")
if(Fname.value == ""){
Fname.style.border = "1px solid red"
Span.style.color = "red"
Span.innerHTML = "pls fill out this field!"
return false
}
}
</script>
<script src="../css/j.js"></script>
<script>
$(document).ready(function(){
$("input").blur(function(){
$(this).css("border","1px solid green");
})
})
</script>
</body>
</html>
Comments
Post a Comment