Scribd
Upload
5 views17 pages

Coding 1

The document is a computer project report for a registration and follow page created by a 10th-grade student, Neerav Solanki, at St. Michael’s Secondary School. It includes HTML and CSS code for a sign-up form and a social media icons page with tooltips. The project aims to demonstrate web development skills through user registration and social media integration.

Uploaded by

Neerav Solanki
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views17 pages

Coding 1

The document is a computer project report for a registration and follow page created by a 10th-grade student, Neerav Solanki, at St. Michael’s Secondary School. It includes HTML and CSS code for a sign-up form and a social media icons page with tooltips. The project aims to demonstrate web development skills through user registration and social media integration.

Uploaded by

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

Computer Project report on-

“ Register and follow page ”

YEAR – 2024-25

CLASS - 10th ‘Computer’

Submitted by- Submitted to-


Neerav Solanki MR. Rakesh Paul
(roll no. 12)

ST. MICHAEL’S SECONDARY SCHOOL, SONWARI


MAIHAR (M.P)
CODING
<!DOCTYPE html>
<html >
<head>
<title>Sign Up / Registration Form </title>
<style>

body{
margin: 0;
padding: 0;
font-family: Roboto;
background-repeat: no-repeat;
background-size: cover;
background: linear-gradient(120deg, #007bff, #d0314c);
height: 100vh;
overflow: hidden;
}

.center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 29vw;
background: white;
border-radius: 10px;
}
.center h1{
text-align: center;
padding: 0 0 20px 0;
border-bottom: 1px solid silver;
}

.center form{
padding: 0 40px;
box-sizing: border-box;
}

form .txt_field{
position: relative;
border-bottom: 2px solid #adadad;
margin: 30px 0;
}

.txt_field input{
width: 100%;
padding: 0 5px;
height: 40px;
font-size: 16px;
border: none;
background: none;
outline: none;
}
.txt_field label{
position: absolute;
top: 50%;
left: 5px;
color: #adadad;
transform: translateY(-50%);
font-size: 16px;
pointer-events: none;
}

.txt_field span::before{
content: '';
position: absolute;
top: 40px;
left: 0;
width: 0px;
height: 2px;
background: #2691d9;
transition: .5s;
}

.txt_field input:focus ~ label,


.txt_field input:valid ~ label{
top: -5px;
color: #2691d9;
}
.txt_field input:focus ~ span::before,
.txt_field input:Valid ~ span::before{
width: 100%;
}

.pass{
margin: -5px 0 20px 5px;
color: #a6a6a6;
cursor: pointer;
}

.pass:hover{
text-decoration: underline;
}

input[type="Submit"]{
width: 100%;
height: 50px;
border: 1px solid;
border-radius: 25px;
font-size: 18px;
font-weight: 700;
cursor: pointer;

}
input[type="Submit"]:hover{
background: #2691d9;
color: #e9f4fb;
transition: .5s;
}

.signup_link{
margin: 30px 0;
text-align: center;
font-size: 16px;
color: #666666;
}

.signup_link a{
color: #2691d9;
text-decoration: none;
}

.signup_link a:hover{
text-decoration: underline;
}

.HomeAbout{
width: 100vw;
height: 25vh;
}
</style>
</head>
<body>
<div class="container">
<div class="center">
<h1>Register</h1>
<form method="POST" action="mailto:p114.nnerav6@gmail.com">
<div class="txt_field">
<input type="text" name="name" required>
<span></span>
<label>Name</label>
</div>
<div class="txt_field">
<input type="email" name="email" required>
<span></span>
<label>Email</label>
</div>
<div class="txt_field">
<input type="password" name="password" required>
<span></span>
<label>Password</label>
</div>
<div class="txt_field">
<input type="password" name="cpassword" required>
<span></span>
<label>Confirm Password</label>
</div>
<input name="submit" type="Submit" value="Sign Up">
<div class="signup_link">
Have an Account ? <a href="#">Login Here</a>
<br> <a href="socialmediaicons.html"> Follow us on </a>
</div>
</form>
</div>
</div>
</body>
</html>

CODING FOR socialmediaicons.html


<html>
<head>
<meta charset="UTF-8" />
<title>Social Media Icons With Tooltip</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
<style>
{
margin: 0;
padding: 0;
box-sizing: border-box;
}

*:focus,
*:active {
outline: none !important;
-webkit-tap-highlight-color: transparent;
}

html,
body {
display: grid;
height: 100vh;
width: 100%;
font-family: "Poppins", sans-serif;
place-items: center;
background: linear-gradient(315deg, #8f3636, #d7e1ec);
}

.wrapper {
display: inline-flex;
}

.wrapper .icon {
position: relative;
background: #ffffff;
border-radius: 50%;
padding: 15px;
margin: 10px;
width: 50px;
height: 50px;
font-size: 18px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
-webkit-transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-moz-transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-ms-transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-o-transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .tooltip {
position: absolute;
top: 0;
font-size: 14px;
background: #fff;
color: #ffffff;
padding: 5px 8px;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
opacity: 0;
pointer-events: none;
border-radius: 4px;
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-webkit-transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-moz-transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-ms-transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-o-transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
}

.wrapper .tooltip::before {
position: absolute;
content: "";
height: 8px;
width: 8px;
background: #fff;
bottom: -3px;
left: 50%;
transform: translate(-50%) rotate(45deg);
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-webkit-transform: translate(-50%) rotate(45deg);
-moz-transform: translate(-50%) rotate(45deg);
-ms-transform: translate(-50%) rotate(45deg);
-o-transform: translate(-50%) rotate(45deg);
-webkit-transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-moz-transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-ms-transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-o-transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .icon:hover .tooltip {


top: -45px;
opacity: 1;
visibility: visible;
pointer-events: auto;
}

.wrapper .icon:hover span,


.wrapper .icon:hover .tooltip {
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.01);
}

.wrapper .facebook:hover,
.wrapper .facebook:hover .tooltip,
.wrapper .facebook:hover .tooltip::before {
background: #3b5999;
color: #fff;
}

.wrapper .twitter:hover,
.wrapper .twitter:hover .tooltip,
.wrapper .twitter:hover .tooltip::before {
background: #46c1f6;
color: #fff;
}

.wrapper .instagram:hover,
.wrapper .instagram:hover .tooltip,
.wrapper .instagram:hover .tooltip::before {
background: #e1306c;
color: #fff;
}

.wrapper .github:hover,
.wrapper .github:hover .tooltip,
.wrapper .github:hover .tooltip::before {
background: #333333;
color: #fff;
}

.wrapper .youtube:hover,
.wrapper .youtube:hover .tooltip,
.wrapper .youtube:hover .tooltip::before {
background: #e92828;
color: #fff;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="icon facebook">
<div class="tooltip">Facebook</div>
<span><i class="fa fa-facebook"></i></span>
</div>
<div class="icon twitter">
<div class="tooltip">Twitter</div>
<span><i class="fa fa-twitter"></i></span>
</div>
<div class="icon instagram">
<div class="tooltip">Instagram</div>
<span><i class="fa fa-instagram"></i></span>
</div>
<div class="icon github">
<div class="tooltip">Github</div>
<span><i class="fa fa-github"></i></span>
</div>
<div class="icon youtube">
<div class="tooltip">YouTube</div>
<span><i class="fa fa-youtube-play"></i></span>
</div>
</div>
</body>
</html>
OUTPUT

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy