Scribd
Upload
361 views

Create A Website For Our School Using HTML and Css

The document contains code for creating multiple web pages using HTML and CSS for a school website. It includes code for a navigation bar, homepage content, responsive service boxes, login/signup forms, social media icons, a contact map, and a coming soon page template. The pages contain common elements like navigation, headers, paragraphs, buttons, and forms built with semantic HTML and styled with CSS.

Uploaded by

adityasahani109
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
361 views

Create A Website For Our School Using HTML and Css

The document contains code for creating multiple web pages using HTML and CSS for a school website. It includes code for a navigation bar, homepage content, responsive service boxes, login/signup forms, social media icons, a contact map, and a coming soon page template. The pages contain common elements like navigation, headers, paragraphs, buttons, and forms built with semantic HTML and styled with CSS.

Uploaded by

adityasahani109
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 26

Create a website for our school using html and

css
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Simple Website Design HTML CSS </title>
<link rel="stylesheet" href="style1.css" />
</head>
<body>
<nav>
<div class="menu">
<div class="logo">
<a href="#">Aditya</a>
</div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="about1.html">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="login.html">Contact</a></li>
<li><a href="index.html">Feedback</a></li>
</ul>
</div>
</nav>
<div class="img"></div>
<div class="center">
<div class="title">Create Amazing Website</div>
<div class="sub_title">Pure HTML & CSS Only</div>
<div class="btns">
<button><a href="vi.html">Learn More</a></button>
<button><a href="fun2.html">Subscribe</a></button></div>
</div></body></html>
<!DOCTYPE html>

<html lang="en" dir="ltr">


<head>
<meta charset="utf-8">
<title>Responsive Services Box </title>
<link rel="stylesheet" href="style51.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="wrapper">
<div class="box">
<div class="front-face">
<div class="icon">
<i class="fasfa-code"></i>
</div>
<span>Web Design</span>
</div>
<div class="back-face">
<span>Web Design</span>
<p>
Web designing is the process of planning, conceptualizing, and
implementing the plan for designing a website in a way that is functional and
offers a good user experience.
</p>
</div>
</div>
<div class="box">
<div class="front-face">
<div class="icon">
<i class="fasfa-chart-line"></i>
</div>
<span>Advertising</span>
</div>
<div class="back-face">
<span>Advertising</span>
<p>
Advertisements help people become aware of any product or service through the
use of commercial methods
</p>
</div>
</div>
<div class="box">
<div class="front-face">
<div class="icon">
<i class="fasfa-rocket"></i>
</div>
<span>Game Design</span>
</div>
<div class="back-face">
<span>Game Design</span>
<p>
Game designers focus on the function of a game, creating systems, rules, and
gameplay, and help with world-building
to ensure it's playable, fun, and engaging
</p>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Responsive Login and Signup Form </title>

<!-- CSS -->


<link rel="stylesheet" href="css2/style2.css">

<!--Boxicons CSS -->


<link href='https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css' rel='stylesheet'>

</head>

<body>
<section class="container forms">
<div class="form login">
<div class="form-content">
<header>Login</header>
<form action="#">
<div class="field input-field">
<input type="email" placeholder="Email" class="input">
</div>

<div class="field input-field">


<input type="password" placeholder="Password" class="password">
<i class='bxbx-hide eye-icon'></i>
</div>

<div class="form-link">
<a href="#" class="forgot-pass">Forgot password?</a>
</div>

<div class="field button-field">


<button>Login</button>
</div>
</form>

<div class="form-link">
<span>Don't have an account? <a href="#" class="link signup-link">Signup</a></span>
</div>
</div>

<div class="line"></div>

<div class="media-options">
<a href="#" class="field facebook">
<i class='bxbxl-facebookfacebook-icon'></i>
<span>Login with Facebook</span>
</a>
</div>

<div class="media-options">
<a href="#" class="field google">
<imgsrc="images/google.png" alt="" class="google-img">
<span>Login with Google</span>
</a>
</div>

</div>

<!-- Signup Form -->

<div class="form signup">


<div class="form-content">
<header>Signup</header>
<form action="#">
<div class="field input-field">
<input type="email" placeholder="Email" class="input">
</div>

<div class="field input-field">


<input type="password" placeholder="Create password" class="password">
</div>
<div class="field input-field">
<input type="password" placeholder="Confirm password" class="password">
<i class='bxbx-hide eye-icon'></i>
</div>

<div class="field button-field">


<button>Signup</button>
</div>
</form>

<div class="form-link">
<span>Already have an account? <a href="#" class="link login-link">Login</a></span>
</div>
</div>

<div class="line"></div>

<div class="media-options">
<a href="#" class="field facebook">
<i class='bxbxl-facebookfacebook-icon'></i>
<span>Login with Facebook</span>
</a>
</div>

<div class="media-options">
<a href="#" class="field google">
<imgsrc="images/google.png" alt="" class="google-img">
<span>Login with Google</span>
</a>
</div>

</div>
</section>

<!-- JavaScript -->


<scriptsrc="js1/script1.js"></script>
</body>

</html>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Glowing Social Icons</title>
<link rel="stylesheet" href="color.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<ul>
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-instagram"></i></li>
<li><i class="fab fa-linkedin-in"></i></li>
<li><i class="fab fa-youtube"></i></li>
</ul>

</body>
</html>
<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Website Coming Soon Page</title>

<!-- CSS -->


<link rel="stylesheet" href="css/style.css" />
</head>

<body>
<section class="container">
<imgsrc="image.jpg" alt="" class="image" />
<header>Comming Soon Page</header>
<p>
Our website is under construction. We're working hard to improve our website and
we'll ready to launch after.
</p>
<div class="time-content">
<div class="time days">
<span class="number"></span>
<span class="text">days</span>
</div>
<div class="time hours">
<span class="number"></span>
<span class="text">hours</span>
</div>
<div class="time minutes">
<span class="number"></span>
<span class="text">minutes</span>
</div>
<div class="time seconds">
<span class="number"></span>
<span class="text">seconds</span>
</div>
</div>

<div class="email-content">
<p>Subscribe now to get the latest updates!</p>

<div class="input-box">
<input type="email" placeholder="Enter your email" />
<button>Notify Me</button>
</div>
</div>
</section>

<!-- JavaScript -->


<scriptsrc="js/script.js"></script>
</body>

</html>
<!DOCTYPE html>

<html lang="en" dir="ltr">


<head>
<meta charset="utf-8">
<title>Glowing Social Icons</title>
<link rel="stylesheet" href="color.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<ul>
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-instagram"></i></li>
<li><i class="fab fa-linkedin-in"></i></li>
<li><i class="fab fa-youtube"></i></li>
</ul>
</body>
</html>
<html>
<head>
<title></title></head>
<body bgcolor= >
<div class="contact-centre">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!
1d26430.393553120906!2d-118.43209796322542!3d34.10028430183922!2m3!1f0!2f0!3f0!
3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c2bc35fbd217ef%3A0xcf1ef9352700d95c!
2sBeverly%20Hills%2C%20CA%2090210!5e0!3m2!1sen!2sus!4v1611702818717!5m2!1sen!
2sus
" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="yes" aria-
hidden="false" tabindex="0"></iframe>
</div>
</body>
</html>
@import url("https://fonts.googleapis.com/css2?
family=Poppins:wght@200;300;400;500;600;700&display=swap");
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
::selection {
color: #000;
background: #fff;
}
nav {
position: fixed;
background: #1b1b1b;
width: 100%;
padding: 10px 0;
z-index: 12;
}
nav .menu {
max-width: 1250px;
margin: auto;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
}
.menu .logo a {
text-decoration: none;
color: #fff;
font-size: 35px;
font-weight: 600;
}
.menu ul {
display: inline-flex;
}
.menu ul li {
list-style: none;
margin-left: 7px;
}
.menu ulli:first-child {
margin-left: 0px;
}
.menu ul li a {
text-decoration: none;
color: #fff;
font-size: 18px;
font-weight: 500;
padding: 8px 15px;
border-radius: 5px;
transition: all 0.3s ease;
}
.menu ul li a:hover {
background: #fff;
color: black;
}
.img {
background: url("img.jpg") no-repeat;
width: 100%;
height: 100vh;
background-size: cover;
background-position: center;
position: relative;
}
.img::before {
content: "";
position: absolute;
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.4);
}
.center {
position: absolute;
top: 52%;
left: 50%;
transform: translate(-50%, -50%);
padding: 5px;
}

.field button {
color: #fff;
background-color: #0171d3;
transition: all 0.3s ease;
cursor: pointer;
}

.field button:hover {
background-color: #016dcb;
}

.form-link {
text-align: center;
margin-top: 10px;
}

.form-link span,
.form-link a {
font-size: 14px;
font-weight: 400;
color: #232836;
}

.form a {
color: #0171d3;
text-decoration: none;
}

.form-content a:hover {
text-decoration: underline;
}

.line {
position: relative;
height: 1px;
width: 100%;
margin: 36px 0;
background-color: #d4d4d4;
}

.line::before {
content: 'Or';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #FFF;
color: #8b8b8b;
padding: 0 15px;
}

.media-options a {
display: flex;
align-items: center;
justify-content: center;
}

a.facebook {
color: #fff;
background-color: #4267b2;
}

a.facebook .facebook-icon {
height: 28px;
width: 28px;
color: #0171d3;
font-size: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
}

.facebook-icon,
img.google-img {
position: absolute;
top: 50%;
left: 15px;
transform: translateY(-50%);
}

img.google-img {
height: 20px;
width: 20px;
object-fit: cover;
}

a.google {
border: 1px solid #CACACA;
}

a.google span {
font-weight: 500;
opacity: 0.6;
color: #232836;
}

@media screen and (max-width: 400px) {


.form {
padding: 20px 10px;
}
}
/* Google Fonts - Poppins */

@import url("https://fonts.googleapis.com/css2?
family=Poppins:wght@300;400;500;600;700&display=swap");
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}

.container {
display: flex;
row-gap: 15px;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100vh;
width: 100%;
overflow: hidden;
}
.container .image {
position: absolute;
height: 100%;
width: 100%;
object-fit: cover;
z-index: -1;
}

.container header {
font-size: 60px;
color: #fff;
font-weight: 600;
text-align: center;
}

.container p {
font-size: 16px;
font-weight: 400;
color: #fff;
max-width: 550px;
text-align: center;
}

.container .time-content {
display: flex;
column-gap: 30px;
align-items: center;
}
.time-content .time {
display: flex;
align-items: center;
flex-direction: column;
}

.time .number,
.time .text {
font-weight: 500;
color: #fff;
}

.time .number {
font-size: 40px;
}

.time .text {
text-transform: capitalize;
font-size: 12px;
}

.email-content {
display: flex;
align-items: center;
flex-direction: column;
margin-top: 30px;
width: 100%;
}
.email-content p {
font-size: 13px;
}

.input-box {
display: flex;
align-items: center;
height: 40px;
max-width: 360px;
width: 100%;
margin-top: 20px;
column-gap: 20px;
}

.input-box input,
.input-box button {
height: 100%;
outline: none;
border: none;
border: 1px solid #fff;
border-radius: 4px;
background-color: rgba(255, 255, 255, 0.2);
font-weight: 400;
}

.input-box input {
width: 100%;
padding: 0 15px;
color: #fff;
}

input::placeholder {
color: #fff;
}

.input-box button {
cursor: pointer;
color: #fff;
white-space: nowrap;
padding: 0 20px;
transition: all 0.3s ease;
}

.input-box button:hover {
background-color: #fff;
color: #0d6a81;
}

@media screen and (max-width: 300px) {


.container header {
font-size: 50px;
}
}
@import url('https://fonts.googleapis.com/css?
family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
height: 100%;
width: 100%;
text-align: center;
background: #f2f2f2;
}
.wrapper{
display: grid;
margin: 200px 90px auto;
grid-gap: 20px;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}
@media (max-width: 700px) {
.wrapper{
margin: 200px auto;
}
}
.wrapper .box{
width: 350px;
margin: 0 auto;
position: relative;
perspective: 1000px;
}
.wrapper .box .front-face{
background: #fff;
height: 220px;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
box-shadow: 0px 5px 20px 0px rgba(0, 81, 250, 0.1);
transition: all 0.5s ease;
}
.box .front-face .icon{
height: 80px;
}
.box .front-face .icon i{
font-size: 65px;
}
.box .front-face span,
.box .back-face span{
font-size: 22px;
font-weight: 600;
text-transform: uppercase;
}
.box .front-face .icon i,
.box .front-face span{
background: linear-gradient(-135deg, #c850c0, #4158d0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.box .back-face{
position: absolute;
top: 0;
left: 0;
z-index: 1;
height: 220px;
width: 100%;
padding: 30px;
color: #fff;
opacity: 0;
transform-style: preserve-3d;
backface-visibility: hidden;
background: linear-gradient(-135deg, #c850c0, #4158d0);
transform: translateY(110px) rotateX(-90deg);
box-shadow: 0px 5px 20px 0px rgba(0, 81, 250, 0.1);
transition: all 0.5s ease;
}
.box .back-face p{
margin-top: 10px;
text-align: justify;
}
.box:hover .back-face{
opacity: 1;
transform: rotateX(0deg);
}
.box:hover .front-face{
opacity: 0;
transform: translateY(-110px) rotateX(90deg);
}
*{
margin: 0;
padding: 0;
list-style: none;
}
body{
display: flex;
height: 100vh;
text-align: center;
align-items: center;
justify-content: center;
background: #262626;
}
ul{
display: flex;
}
ul li{
position: relative;
display: block;
color: #666;
font-size: 30px;
height: 60px;
width: 60px;
background: #171515;
line-height: 60px;
border-radius: 50%;
margin: 0 15px;
cursor: pointer;
transition: .5s;
}
ulli:before{
position: absolute;

You might also like