Skip to content

Commit

Permalink
Textogram
Browse files Browse the repository at this point in the history
  • Loading branch information
@poojitha2002
poojitha2002 committed Jun 24, 2021
0 parents commit bcc5b65
Show file tree
Hide file tree
Showing 15 changed files with 2,954 additions and 0 deletions.
Binary file added Stop-512.webp
Binary file not shown.
70 changes: 70 additions & 0 deletions about.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Textogram</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="./css/style.css">
<!--
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./css/style.css">-->

<style>
.hi {
background-color: lightgrey;
width: 800px;
border: 15px solid black;
padding: 5rem;
margin: 20px;
padding-left: 5rem;
}
.hello{
padding-left: 25rem;
padding-top: 7rem;
}
</style>
</head>
<body>
<div class="header">

<div class="container">

<nav id="main-nav" class="flex items-cen justify">

<div class="left flex items-cen">
<a href="index.html" style="font-size:22px; font-weight: bold;" >Textogram</a>


<a href="index.html">Home</a>
<a href="about.html">About Us</a>
<a href="contact.html">Contact Us</a>

</div>

</div>

</div>



</nav>
</div>
<div class="hello">
<div class="hi">
Hello there, this is a webApp where you can format your text as your wish.
<br>Switch on the toggle, and click on Format. You will get your desired output.
<br>If you want to perform some more operations on your text feel free to <a href=contact.html>contact</a> me.
</div>
</div>
</body>
</html>
71 changes: 71 additions & 0 deletions contact.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Textogram</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="./css/style.css">
<!--
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./css/style.css">-->


</head>
<body>
<div class="header">

<div class="container">

<nav id="main-nav" class="flex items-cen justify">

<div class="left flex items-cen">
<a href="index.html" style="font-size:22px; font-weight: bold;" >Textogram</a>


<a href="index.html">Home</a>
<a href="about.html">About Us</a>
<a href="contact.html">Contact Us</a>

</div>

</div>

</div>



</nav>
</div>
<div class="alert alert-success alert-dismissible fade show" role="alert">
<strong>Drop me a line!!</strong> </div>
<section id="contact" class="contact">

<form action="https://formspree.io/f/xeqpvbey" method="POST">
<div class="input-wrap">
<input type="text" placeholder="Your Name *" name="name" required>
<input type="email" placeholder="Your Email *" name="email" required>
</div>
<div class="input-wrap-2">
<input type="text" placeholder="Your Subject..." name="subject" required>
<textarea name="" id="" cols="30" rows="10" placeholder="Your Message.." name="message"></textarea>
</div>
<div class="btn-wrapper">
<button class="btn btn-primary">Send Message</button>
</div>


</form>
</div>
</section>
</body>
</html>
214 changes: 214 additions & 0 deletions css/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,214 @@
@import 'utilities.css';
:root{
--primary:#3DCFD3;
--dark:#161616;
--pure:#FFFFFF;
--ternery:#898989;
--light:#F2F2F2;
--secondary:#070606
}
body{
font-family: 'Poppins',sans-serif;
margin: 0;
overflow-x: hidden;

}
.func{
padding-left: 15rem;
}
.nav{
margin: 0px;
}
html{
scroll-behavior: smooth;

}
*{
padding:0;
margin:0;
box-sizing: border-box;
-webkit-font-smotthing:antialiased;
}
.header{
background: var(--dark);

}

.container{
max-width:1152px;
padding:0 15px;
margin:0 auto;

}

.inp{
padding-top:1rem;
padding-left:15rem;
}
.header nav .left a{
color:var(--pure);
text-decoration: none;
margin-right:1rem;

transition:all .3s ease;
}
.header nav .left a:hover{
color:var(--primary);
}
.header nav{
padding:01rem 0;
}

.header nav .branding{
margin-right:3rem;
}
.header nav .branding a{
margin-right:1rem;
}

.butn1{

width: 100px;
height: 40px;
}





.i{
padding-left: 26rem;
}
.inputfile{
padding-left: 30rem;
}
.inputfile1{
padding-left: 28rem;
}
.header nav .left a{
color:var(--pure);
text-decoration: none;
margin-right:2rem;

transition:all .3s ease;
}
.header nav .left a:hover{
color:var(--primary);
}
.header nav{
padding:2rem 0;
}

.header nav .branding{
margin-right:3rem;
}
.header nav .branding a{
margin-right:3rem;
}
section{
padding:2rem 0;
}




.section-head{
color:var(--secondary);
text-align: center;
margin-bottom: 1rem;
line-height:0.5;
}
.section-head span{
color:var(--primary);
}

section.skills .card-wrapper{
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-row-gap:6rem;
grid-column-gap:2rem;
}
section.contact .card-wrapper{
display:grid;
grid-template-columns: repeat(3,1fr);
grid-gap:3rem;
padding-top: 1rem;

}
section.contact .card-wrapper .card{
text-align: center;
}
section.contact .card-wrapper .card img{
margin-bottom: 3rem;
}

section.contact .card-wrapper .card h1{
font-weight: 400;
margin-bottom: 1rem;
}
section.contact .card-wrapper .card h6{
font-size:1rem;
font-weight: 400;
color:var(--ternery);
margin-bottom: 4rem;
}
section.contact .input-wrap{
display:grid;
grid-template-columns: repeat(2,1fr);
grid-gap:2rem;
margin-bottom: 2rem;
}

section.contact .input-wrap-2{
display:flex;
flex-direction: column;
}
section.contact input{
padding:0.5rem;
border:1px solid var(--light);

}
section.contact .input-wrap-2 input{
margin-bottom:2rem;

border:1px solid var(--light);
font-size:0.9rem;
}
section.contact .input-wrap-2 textarea{
padding:0.5rem;
border:1px solid var(--light);
font-size:0.9rem;
}
section.contact .input-wrap-2 textarea:focus{
outline:none;
}
section.contact input:focus{
outline:none;
}
section.contact .btn-wrapper{
text-align: center;
}
::placeholder {
font-family: arial;
}

@media screen and (max-width:1150px){
#container{
width:100%;
}
#header{
width:70%;
}
#inp{
width:100%;
}
#i{
width:100%;
}
#inputfile{
width:100%;
}
#inputfile1{
width:100%;
}
}
Empty file added css/utilities.css
Empty file.
Binary file added icon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit bcc5b65

Please sign in to comment.