Blog Website Report

Project Report
Title: Blog Website
BACHELOR OF TECHNOLOGY
Computer science and Engineering
Submitted to
Ms. Nausheen Fatima
LOVELY PROFESSIONAL UNIVERSITY
PHAGWARA, PUNJAB
SUBMITTED BY :-V.Vishwanth Reddy Reg.No:-12210506 Roll No:-15

SUBMITTED BY :-S.Lokeshwar Reg.No:- 12210661 Roll No:- 16
ACKNOWLEDGEMENT
No doubt this project is only possible because of my mentor and Prof.

Nausheen Fathima and We would like to thanks him from depth of our
heart for giving us knowledge of HTML and Css and for also giving me so
many advices and various more inputs in this project. And also We want
to say thanks to my all friends and family who gave me so many
wonderful ideas in this project.
DESIGN AND SOURCE CODE:-
HTML Main page

Css Main page
Portfolio Css
Portfolio HTML
Contact us HTML
Contact us Css
Login HTML
Login Css
Res ul t pa ge/Output:
Login java script
SOURCE CODE
Main Page 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">
<link rel="stylesheet" href="/css.css">
<title>A Student Blog</title>
</head>
<body style="background-image: url(bg9.webp);
">
<div class="topnav">
<a class="active" href="/">STUDENT EDGE</a>
<a href="#Home">Home</a>
<a href="/index4.html"><button class="loginBtn">Portfolio</button></a>
<a href= "/h.html"><button class="loginBtn">Contact</button></a>
<a href= "/index5.html"><button class="loginBtn">Login</button></a>
</div>
<div class="main__page">
<div class="left__mainPage">
<div class="art">
<article>
<h2> Websites and Other Resources</h2>
By Diana Restifo
<img src="bg4.jpg" alt="">
<p>In today’s digital world, we seem to be surrounded by news. Clickbait, anyone? Yet the pervasive
and often intrusive nature
of internet news articles belies the fact that many of these sites are behind a paywall, biased, or
feature low-quality reporting.
Still, online articles are a great starting point for all kinds of learning assignments across the
curriculum.
That’s why we’ve compiled a list of the best free article websites for students. Many of these sites
offer not only high-quality
topical articles on every subject, but also ideas for lessons, such as questions, quizzes, and
discussion prompts.</p>
</article>
<div class="button"> <button>Read More</button></div>
</div>
<div class="art">
<article>
<h2>Technology and across Organizational</h2>
By Chisten James
<img src="bg5.jpg" alt="">
<p> Working a cross distance, cultures, time zones, through technology and across
organizational boundaries. Each type of virtual
team has its own specific challeng.We developed the world’s first virtual teams training more than
25 years ago and can put
together a program specific to the challenges of your virtual team, not just a “one size fits all”
solution.
Common challenges include:

Streamlining cooperation – simpler ways of working and effective virtual meetings
1. Creating a communication cadence that engages team members when communicating through
technology
2. Creating trust remotely and balancing trust, empowerment and control.</p>
</article>
<div class="button"> <button>Read More</button></div>
</div>
</div>
<div class="right__mainPage">
<div class="trendingBox">
<h3>Trending Articles</h3>
<ol>
<li>Universities in the UK have lent support to institutions in Ukraine through a
twinning campaign, creating long-term partnerships that can provide targeted support.</l>
<li>Her Majesty Queen Elizabeth II: A Tribute To Her Impact On The…
On the occasion of the death of Queen Elizabeth II, we’re reflecting on Her Majesty’s
close connections to education and paying tribute to the positive impact she had on the…</li>
<li>Students Believe Brexit Could Damage Career Prospects
Research from QS suggests students within and outside the UK believe Brexit could impact
negatively on their career prospects and education.</li>
<li>Economics Graduates Are Paid The Highest Salaries
Economics graduates earn more than any other students according to new statistics from
the UK’s Department of Education.</li>
</ol>
</div>
<div class="Becomeasupporter">
<h2>Become a supporter</h2>
<a href="#Write an article">Write an article</a>

<a href="#Donate">Donate</a>
<a href="#Create own blog">Create own blog</a>
</div>
</div>
</div>
<div class="footer"><button class="loginBtn">Previous</button><button
class="loginBtn">Next</button></div>
</body>
</html>
Main Page Css

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
body{
font-family: 'Roboto', sans-serif;
}
.topnav {
background-color: rgb(55, 54, 54);
overflow: hidden;
}
/* Style the links inside the navigation bar */

.topnav a {
float: left;
color: #ffffff;
text-align: center;
padding: 14px 40px;
text-decoration: none;
font-size: 20px;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana,
sans-serif;
text-align: center;
}
/* Change the color of links on hover */

.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */

.topnav a.active {
background-color: #4ca251;
color: rgb(4, 1, 1);
font-family:'Calibri'
;
font-size: 25px;
text-align: center;
}
.art{
border-style: solid;
background-color:rgb(224, 219, 219);
padding-bottom: 10px;
/* border:2px solid red ; */
}
.main__page{
/* border: 2px solid red ; */
/* height: 90vh; */
display: flex;
}
.left__mainPage{
/* border: 1px solid green; */
/* width: 50rem;
*/
width: 100vh;
display: grid;
/* height: fit-content; */
place-items: center;
gap: 2rem;
}
.right__mainPage{
color: rgb(229, 226, 226);
width: 85vh;
/* border: 2px solid yellow; */
display: grid;
place-items: center;
position: absolute;
}
.trendingBox{
border: 2px solid palevioletred;
height: 33rem;
width: 38rem;
background: rgb(242, 245, 246);
color: black;
margin: 0 0 280px 0;
position: relative;
left: 50rem;
top: 4rem;
}
.trendingBox > ol{
padding: 1rem;
}
.trendingBox > ol>li{
padding: 10px;
}
.trendingBox > h3{
text-align: center;
font-size: xx-large;
}
.button > button {
float:right;
}
article > img {
height: 23rem;
}
.Becomeasupporter {
overflow: hidden;
position: relative;
left: 45rem;
}
/* Style the links inside the navigation bar */

.Becomeasupporter a {
float: left;
color: #110c0c;
text-align: center;
padding: 14px 40px;
font-size: 20px;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana,
sans-serif;
text-align: center;
}
/* Change the color of links on hover */
.Becomeasupporter a:hover {
color: black;
}
/* Add a color to the active/current link */

.Becomeasupporter a.active {
background-color: #4ca251;
color: rgb(0, 0, 0);
font-family:'Calibri'
;
font-size: 25px;
text-align: center;
}
.Becomeasupporter{
border: 2px solid palevioletred;
height: 16rem;
width: 29rem;
background: rgb(218, 217, 220);
color:black;
margin: 0 0 0 18rem;
}
.Becomeasupporter > ul{
padding: 1rem;
}
.Becomeasupporter > ul>li{
padding: 10px;
}
.Becomeasupporter > h2{

text-align: center;
}
.button > button {
float:right;
}
article > img {
height: 23rem;
}
.loginBtn{
padding: 8px;
border-radius: 12px;
width: 82px;
}
.loginBtn:hover{
cursor: pointer;
}
.footer{
display: flex;
justify-content: space-between;
padding: 1rem;
}
Portfolio HTML
<!DOCTYPE html >
<html >
<hea d>
<ti tl e>Portfol i o webs i te</ti tl e>
<l i nk rel ="s tyl es heet" type="text/cs s " href="s tyl es heet.cs s ">
<l i nk rel ="preconnect" href="https ://fonts .gs ta ti c.com">

<l i nk
href="https ://fonts .googl ea pi s .com/cs s 2?fa mi l y=Jos efi n+Sa ns :i ta l,wght@ 0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1 ,
300;1,400;1,500;1,600;1,700&di s pl ay=s wa p" rel ="s tyl es heet">
<l i nk rel ="s tyl es heet" href="https ://cdnjs .cl oudfl a re.com/a ja x/libs/font-a wes ome/5.15.3/cs s /a ll.mi n.cs s" i ntegri ty="s ha 512 -
i BBXm8fW 90+nuLcSKl bmrPcLa 0OT92xO1BIs Z+ywDW ZCvqs W gccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
cros s ori gin="a nonymous " referrerpol i cy="no -referrer" />
</hea d>
<body>

<di v cl a s s="hero">
<na v>
<h2 cl a s s ="l ogo">Portfo<s pa n>l i o</s pan></h2>
<ul >
<l i ><a href="#">Home</a ></l i >
<l i ><a href="#">About Us </a ></l i >
<l i ><a href="#">Servi ces </a ></l i >
<l i ><a href="#">Ski l l s </a ></l i >
<l i ><a href="#">Conta ct Us </a ></l i >
</ul >
<a href="#" cl a s s ="btn">Subs cri be</a >
</na v>
<di v cl a s s="content">
<h4>Hel l o, my na me i s </h4>
<h1>Ta hmi d <s pa n>Ahmed</s pa n></h1>
<h3>I'a m a W eb Devel oper.</h3>
<di v cl a s s="news l a tter">
<form>
<i nput type="ema i l " na me="ema i l " i d="ma i l " pl a cehol der="Enter Your Ema i l ">
<i nput type="s ubmi t" na me="s ubmi t" va l ue="Lets Sta rt">
</form>
</di v>
</di v>
</di v>


<s ecti on cl a s s="a bout">
<di v cl a s s="ma i n">
<i mg s rc="ma i n-i mg.png">
<di v cl a s s="a bout-text">
<h2>About Me</h2>
<h5>Devel oper <s pa n>& Des i gner</s pa n></h5>
<p>I a m a front-end web devel oper. I ca n provi de cl ea n code a nd pi xel perfect des i gn. I a l s o
ma ke the webs i te more & more i ntera cti ve wi th web a ni ma ti ons .I ca n provi de cl ea n code a nd pi xel perfect des i gn. I a l s o ma ke t he
webs i te more & more i ntera cti ve wi th web a ni ma ti ons .A res pons i ve des i gn ma kes your webs i te a cces s i ble to a l l us ers , rega rdl ess of
thei r devi ce.</p>
<button type="button">Let's Ta l k</button>
</di v>
</di v>
</s ecti on>

<di v cl a s s="s ervi ce">
<di v cl a s s="ti tl e">
<h2>Our Servi ces </h2>
</di v>
<di v cl a s s="box">
<di v cl a s s="ca rd">
<i cl a s s="fa s fa -ba rs"></i >
<h5>W eb Devel opment</h5>
<di v cl a s s="pra ">
<p>Every webs i te s houl d be bui l t wi th two pri ma ry goa l s : Fi rs tly, i t needs to work a cros s
a l l devi ces . Secondl y, i t needs to be fa s t a s pos s i bl e.</p>
<p s tyl e="text-a l i gn: center;">

<a cl a s s ="button" href="#">Rea d More</a >
</p>
</di v>
</di v>

<i cl a s s="fa r fa -us er"></i >
<p>Every webs i te s houl d be bui l t wi th two pri ma ry goa l s : Fi rs tly, i t needs to work a cros s
a l l devi ces . Secondl y, i t needs to be fa s t a s pos s i bl e.</p>

</p>
</di v>
</di v>

<i cl a s s="fa r fa -bel l "></i >
<p>Every webs i te s houl d be bui l t wi th two pri ma ry goa l s : Fi rs tly, i t needs to work a cros s a l l
devi ces . Secondl y, i t needs to be fa s t a s pos s i ble.</p>

</p>
</di v>
</di v>
</di v>
</di v>

<di v cl a s s="conta ct-me">
<p>Let Me Get You A Bea uti ful W ebs i te.</p>
<a cl a s s ="button-two" href="#">Hi re Me</a >
</di v>

<footer>
<p>Ta hmi d Ahmed</p>
<p>For more HTML, CSS, a nd codi ng tutori a l - pl ea s e cl i ck on the l i nk bel ow to s ubs cri be to my cha nnel :</p>
<di v cl a s s="s ocia l">
<a href="#"><i cl a s s="fa b fa -fa cebook-f"></i ></a >
<a href="#"><i cl a s s="fa b fa -i ns tagra m"></i ></a >
<a href="#"><i cl a s s="fa b fa -dri bbble"></i ></a >
</di v>
<p cl a s s="end">CopyRi ght By Ta hmi d Ah med</p>
</footer>
</body>
</html >
Portfolio Css
*{
padding: 0;
margin: 0;
font-family: 'Josefin Sans', sans-serif;
box-sizing: border-box;
}
.hero{
height: 100vh;
width: 100%;
background-image: url(background.jpg);
background-size: cover;
background-position: center;
}
nav{
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 45px;
padding-left: 8%;
padding-right: 8%;
}
.logo{
color: white;
font-size: 35px;
letter-spacing: 1px;
cursor: pointer;
}
span{
color: #f9004d;
}
nav ul li{
list-style-type: none;
display: inline-block;
padding: 10px 25px;
}
nav ul li a{
color: white;
font-weight: bold;
text-transform: capitalize;
}
nav ul li a:hover{
color: #f9004d;
transition: .4s;
}
.btn{
background-color:#f9004d;
color: white;
border: 2px solid transparent;
font-weight: bold;
padding: 10px 25px;
transition: transform .4s;
}
.btn:hover{
transform: scale(1.2);
}
.content{
position: absolute;
top: 50%;
left:8%;
transform: translateY(-50%);
}
h1{
color: white;
margin: 20px 0px 20px;
font-size: 75px;
}
h3{
color: white;
font-size: 25px;
margin-bottom: 50px;
}
h4{
color: #fcfc;
font-size: 20px;
}
.newslatter form{
width: 380px;
max-width: 100%;
position: relative;
}
.newslatter form input:first-child{
width: 100%;
padding: 14px 130px 14px 15px;
border: 2px solid #f9004d;
outline: none;
}
.newslatter form input:last-child{
position: absolute;
outline: none;
border: none;
padding: 10px 30px;
color: white;
box-shadow: 0px 0px 5px #000, 0px 0px 15px #858585;
top: 6px;
right: 6px;
}
.about{
width: 100%;
padding: 100px 0px;
background-color: #191919;
}
.about img{
height: auto;
width: 430px;
}
.about-text{
width: 550px;
}
.main{
width: 1130px;
max-width: 95%;
margin: 0 auto;
display: flex;
justify-content: space-around;
}
.about-text h2{
color: white;
font-size: 75px;
}
.about-text h5{
color: white;
font-size: 22px;
}
.about-text p{
color: #fcfc;
line-height: 28px;
font-size: 18px;
}
button{
color: white;
font-weight: bold;
padding: 13px 30px;
transition: .4s;
}
button:hover{
background-color: transparent;
cursor: pointer;
}
.service{
background: #101010;
width: 100%;
padding: 100px 0px;
}
.title h2{
color: white;
font-size: 75px;
width: 1130px;
margin: 30px auto;
text-align: center;
}
.box{
display: flex;
justify-content: center;
min-height: 400px;
}
.card{
height: 365px;
width: 335px;
padding: 20px 35px;
margin: 15px;
position: relative;
overflow: hidden;
text-align: center;
}
.card i{
font-size: 50px;
display: block;
text-align: center;
margin: 25px 0px;
color: #f9004d;
}
h5{
color: white;
font-size: 23px;
}
.pra p{
color: #fcfc;
font-size: 16px;
line-height: 27px;
}
.card .button{
color: white;
font-weight: bold;
padding: 9px 22px;
transition: .4s;
}
.card .button:hover{
cursor: pointer;
}
.contact-me{
width: 100%;
height: 290px;
display: flex;
flex-direction: column;
}
.contact-me p{
color: white;
font-size: 30px;
font-weight: bold;
}
.contact-me .button-two{
color: white;
font-weight: bold;
padding: 13px 30px;
transition: .4s;
}
.contact-me .button-two:hover{
cursor: pointer;
}
footer{
position: relative;
width: 100%;
height: 400px;
display: flex;
flex-direction: column;
}
footer p:nth-child(1){
font-size: 30px;
color: white;
font-weight: bold;
}
footer p:nth-child(2){
color: white;
font-size: 17px;
width: 500px;
text-align: center;
line-height: 26px;
}
.social{
display: flex;
}
.social a{
width: 45px;
height: 45px;
display: flex;
background: #f9004d;
border-radius: 50%;
margin: 22px 10px;
color: white;
font-size: 20px;
}
.social a:hover{
transform: scale(1.3);
transition: .3s;
}
.end{
position: absolute;
color:#f9004d;
bottom: 35px;
font-size: 14px;
}
Contact HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>contact us</title>
<meta charset="utf-8">
<meta name = "viewport"content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<form>
<h1>Contact Us From</h1>
<input type="text" id="FirstName" placeholder="first Name" required>
<input type="text" id="LastName" placeholder="Last Name" required>
<input type="text" id="Email" placeholder="Email" required>
<input type="Text" id="Mobile" placeholder="Mobile" required>
<h4>type Your Message Here...</h4>
<textarea required></textarea>
<input type="submit" value="send" id="button">
</form>
</div>
</body>
</html>
Contact Css
@import
url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,500;0,700;0,900;1,600&display=s
wap');
*{
margin:0px;
padding: 0px;
font-family: 'Poppins', sans-serif;
}
.container{
min-height: 100hv;
background: #08071d;
display: flex;
background: url("bg3.jpg") no-repeat center center/cover;
}
.container form{
width: 670px;
height: 400px;
display: flex;
box-shadow: 20px 20px 50px rgba(0,0,0,0.5);
background: rgba(255,255,255,0.1);
backdrop-filter: blur(10px);
flex-wrap: wrap;
}
.container form h1{
color: #fff;
font-weight: 500;
margin-top: 20px;
width: 500px;
text-align: center;
}
.container form input{
width: 290px;
height: 40px;
padding-left: 10px;
outline: none;
border: none;
font-size: 15px;
background: none;
border-bottom: 2px solid #fff;
}
.container form input::placeholder{
color: #ddd;
}
.container form #lastName,
.container form #Mobile{
margin-left: 20px;
}
.container form h4{
color: #fff;
font-weight: 300;
width: 600px;
margin-top: 20px;
}
.container form textarea{
background: none;
border: none;
border-bottom: 2px solid #fff;
color: #fff;
font-weight: 200;
font-size: 15px;
padding: 10px;
outline: none;
min-width: 600px;
max-width: 600px;
min-height: 80px;
max-height: 80px;
}
textarea::-webkit-scrollbar{
width: 1em;
}
textarea::-webkit-scrollbar-thumb{
background-color: rgba(194,194,194,0.713);
}
.container form #button{
border: none;
background: #fff;
border-radius: 5px;
margin-top: 20px;
font-weight: 600;
font-size: 20px;
color: #333;
width: 100px;
padding: 0;
margin-right: 500px;
transition: 0.3s;
}
.container form #button:hover{
opacity: 0.7;
}
Login HTML
<!DOCTYPE html>
<html>
<head>
<title>How to Design Login & Registration Form Transition</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style1.css">
<link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700,800&display=swap" rel="stylesheet">
</head>
<body>
<div class="cont">
<div class="form sign-in">
<h2>Sign In</h2>
<label>
<span>Email Address</span>
<input type="email" name="email">
</label>
<label>
<span>Password</span>
<input type="password" name="password">
</label>
<button class="submit" type="button">Sign In</button>
<p class="forgot-pass">Forgot Password ?</p>
<div class="social-media">
<ul>
<li><img src="facebook.jpg"></li>
<li><img src="twitter.png"></li>
<li><img src="linkedin.png"></li>
<li><img src="instagram.jpg"></li>
</ul>
</div>
</div>
<div class="sub-cont">
<div class="img">
<div class="img-text m-up">

<h2>New here?</h2>
<p>Sign up and discover great amount of new opportunities!</p>
</div>
<div class="img-text m-in">
<h2>One of us?</h2>
<p>If you already has an account, just sign in. We've missed you!</p>
</div>
<div class="img-btn">
<span class="m-up">Sign Up</span>
<span class="m-in">Sign In</span>
</div>
</div>
<div class="form sign-up">
<h2>Sign Up</h2>
<label>
<span>Name</span>
<input type="text">
</label>
<label>
<span>Email</span>
<input type="email">
</label>
<label>
<span>Password</span>
<input type="password">
</label>
<label>
<span>Confirm Password</span>
<input type="password">
</label>
<button type="button" class="submit">Sign Up Now</button>
</div>
</div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
Login Css
*, *:before, *:after{
margin: 0;
padding: 0;
font-family: 'Nunito', sans-serif;
}
body{
width: 100%;
height: 100vh;
display: flex;
background: -webkit-linear-gradient(left, #7579ff, #b224ef);
}
input, button{
border:none;
outline: none;
background: none;
}
.cont{
overflow: hidden;
position: relative;
width: 900px;
height: 550px;
background: #fff;
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
}
.form{
position: relative;
width: 640px;
height: 100%;
padding: 50px 30px;
-webkit-transition:-webkit-transform 1.2s ease-in-out;
transition: -webkit-transform 1.2s ease-in-out;
transition: transform 1.2s ease-in-out;
transition: transform 1.2s ease-in-out, -webkit-transform 1.2s ease-in-out;
}
h2{
width: 100%;
font-size: 30px;
text-align: center;
}
label{
display: block;
width: 260px;
margin: 25px auto 0;
text-align: center;
}
label span{
font-size: 14px;
font-weight: 600;
color: #505f75;
text-transform: uppercase;
}
input{
display: block;
width: 100%;
margin-top: 5px;
font-size: 16px;
padding-bottom: 5px;
border-bottom: 1px solid rgba(109, 93, 93, 0.4);
text-align: center;
}
button{
display: block;
margin: 0 auto;
width: 260px;
height: 36px;
color: #fff;
font-size: 15px;
cursor: pointer;
}
.submit{
margin-top: 40px;
font-weight: 600;
background: -webkit-linear-gradient(left, #7579ff, #b224ef);
}
.submit:hover{
background: -webkit-linear-gradient(left, #b224ef, #7579ff);
}
.forgot-pass{
margin-top: 15px;
text-align: center;
font-size: 14px;
font-weight: 600;
color: #0c0101;
cursor: pointer;
}
.forgot-pass:hover{
color: red;
}
.social-media{
width: 100%;
text-align: center;
margin-top: 20px;
}
.social-media ul{
list-style: none;
}
.social-media ul li{
cursor: pointer;
margin: 25px 15px;
}
.social-media img{
width: 40px;
height: 40px;
}
.sub-cont{
overflow: hidden;
position: absolute;
left: 640px;
top: 0;
width: 900px;
height: 100%;
padding-left: 260px;
background: #fff;
-webkit-transition: -webkit-transform 1.2s ease-in-out;
transition: transform 1.2s ease-in-out;
}
.cont.s-signup .sub-cont{
-webkit-transform:translate3d(-640px, 0, 0);
transform:translate3d(-640px, 0, 0);
}
.img{
overflow: hidden;
z-index: 2;
position: absolute;
left: 0;
top: 0;
width: 260px;
height: 100%;
padding-top: 360px;
}
.img:before{
content: '';
position: absolute;
right: 0;
top: 0;
width: 900px;
height: 100%;
background-image: url(bg-2.jpg);
background-size: cover;
}
.img:after{
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.3);
}
.cont.s-signup .img:before{
-webkit-transform:translate3d(640px, 0, 0);
transform:translate3d(640px, 0, 0);
}
.img-text{
z-index: 2;
position: absolute;
left: 0;
top: 50px;
width: 100%;
padding: 0 20px;
text-align: center;
color: #fff;
-webkit-transition:-webkit-transform 1.2s ease-in-out;
}
.img-text h2{
font-weight: normal;
}
.img-text p{
font-size: 14px;
line-height: 1.5;
}
.cont.s-signup .img-text.m-up{
-webkit-transform:translateX(520px);
transform:translateX(520px);
}
.img-text.m-in{
-webkit-transform:translateX(-520px);
transform:translateX(-520px);
}
.cont.s-signup .img-text.m-in{
-webkit-transform:translateX(0);
transform:translateX(0);
}
.sign-in{
padding-top: 65px;
-webkit-transition-timing-function:ease-out;
transition-timing-function:ease-out;
}
.cont.s-signup .sign-in{
-webkit-transition-timing-function:ease-in-out;
transition-timing-function:ease-in-out;
-webkit-transition-duration:1.2s;
transition-duration:1.2s;
-webkit-transform:translate3d(640px, 0, 0);
transform:translate3d(640px, 0, 0);
}
.img-btn{
overflow: hidden;
z-index: 2;
position: relative;
width: 100px;
height: 36px;
margin: 0 auto;
background: transparent;
color: #fff;
font-size: 15px;
cursor: pointer;
}
.img-btn:after{
content: '';
z-index: 2;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border: 2px solid #fff;
}
.img-btn span{
position: absolute;
left: 0;
top: 0;
display: -webkit-box;
display: flex;
-webkit-box-pack:center;
width: 100%;
height: 100%;
-webkit-transition:-webkit-transform 1.2s;
transition: -webkit-transform 1.2s;
transition: transform 1.2s;
transition: transform 1.2s, -webkit-transform 1.2s;;
}
.img-btn span.m-in{
-webkit-transform:translateY(-72px);
transform:translateY(-72px);
}
.cont.s-signup .img-btn span.m-in{

-webkit-transform:translateY(0);
transform:translateY(0);
}
.cont.s-signup .img-btn span.m-up{

-webkit-transform:translateY(72px);
transform:translateY(72px);
}
.sign-up{
-webkit-transform:translate3d(-900px, 0, 0);
transform:translate3d(-900px, 0, 0);
}
.cont.s-signup .sign-up{
-webkit-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0);
}
Login java script

document.querySelector('.img-btn').addEventListener('click', function()
{
document.querySelector('.cont').classList.toggle('s-signup')
}
);
RESULT PAGE:
Home Page
Portfolio Page
Contact Page
Login Page
Conclusion
We hope and we wish that this document will help you to understand
about our minimalist but attractive project as I had tried something
different from usual. We had used HTML and Css

Blog Website Report

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Blog Website Report

Uploaded by

Copyright:

Available Formats

Project Report

Title: Blog Website

SUBMITTED BY :-V.Vishwanth Reddy Reg.No:-12210506 Roll No:-15

No doubt this project is only possible because of my mentor and Prof.

HTML Main page

Main Page HTML

Common challenges include:

<a href="#Write an article">Write an article</a>

Main Page Css

/* Style the links inside the navigation bar */

/* Change the color of links on hover */

/* Add a color to the active/current link */

/* Style the links inside the navigation bar */

/* Add a color to the active/current link */

.Becomeasupporter > h2{

<l i nk rel ="preconnect" href="https ://fonts .gs ta ti c.com">

<p s tyl e="text-a l i gn: center;">

<di v cl a s s="ca rd">

<p s tyl e="text-a l i gn: center;">

<di v cl a s s="ca rd">

<p s tyl e="text-a l i gn: center;">

<div class="img-text m-up">

.cont.s-signup .img-btn span.m-in{

.cont.s-signup .img-btn span.m-up{

Login java script

You might also like