Skip to content

Commit

Permalink
Banner text responsiveness
Browse files Browse the repository at this point in the history
  • Loading branch information
@sreetu
sreetu committed May 22, 2021
1 parent 06603aa commit e5c752f
Show file tree
Hide file tree
Showing 2 changed files with 64 additions and 53 deletions.
51 changes: 31 additions & 20 deletions static/css/landing.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,14 @@ p {

.big-heading {
font-family: "Montserrat";
font-size: 3.5rem;
/* font-size: 3.5rem; */
line-height: 1.5;
}
#bg{
font-size: 56px;
margin-top: -30px;
padding-top: -20px;
}
#intro{
color: white;
}
Expand Down Expand Up @@ -571,7 +576,7 @@ color: black;
text-align: center;
justify-content: center;
background-size: contain;

}

.img-profile
Expand Down Expand Up @@ -605,15 +610,21 @@ color: black;
}
.colored-section button
{
font-size: 3rem;
font-size: 15px;
margin-top: 0px;
padding-top: 0px;
}
#tagline
{
font-size: 3rem;
margin-top: 0px;
padding-top: 0px;
font-size: 25px;
}
#para
{
font-size: 2rem;
margin-top: -1px;
padding-top: 0px;
font-size: 10px;
}
#logo
{
Expand Down Expand Up @@ -649,7 +660,7 @@ svg {
animation: drop 5s ease infinite normal;
stroke: #4478e3;
stroke-width:0.5;
opacity:.6;
opacity:.6;
transform: translateY(80%);
}
.drop1 {
Expand Down Expand Up @@ -679,21 +690,21 @@ svg {
}
@keyframes drop {
0% {
transform: translateY(80%);
opacity:.6;
transform: translateY(80%);
opacity:.6;
}
80% {
transform: translateY(80%);
opacity:.6;
transform: translateY(80%);
opacity:.6;
}
90% {
transform: translateY(10%) ;
opacity:.6;
90% {
transform: translateY(10%) ;
opacity:.6;
}
100% {
transform: translateY(0%) scale(1.5);
100% {
transform: translateY(0%) scale(1.5);
stroke-width:0.2;
opacity:0;
opacity:0;
}
}
@keyframes wave {
Expand Down Expand Up @@ -724,7 +735,7 @@ a
position: fixed;
bottom: 10px;
right: 10px;
transition: background-color .3s,
transition: background-color .3s,
opacity .5s, visibility .5s;
opacity: 0;
visibility: hidden;
Expand Down Expand Up @@ -784,7 +795,7 @@ a
transition: 0.4s ease-in-out;
}

/*
/*
// Design of slider for light mode
*/
.slider2:before {
Expand Down Expand Up @@ -870,10 +881,10 @@ a
}
}


/* Styles for the content section */
@media (min-width: 500px) {

#button {
margin: 30px;
}
Expand Down
66 changes: 33 additions & 33 deletions templates/landing.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">

<!-- Include Simple-Notify -->
<link href="{{ url_for('static', filename='css/simple-notify.min.css') }}" rel="stylesheet">
<script src="{{ url_for('static', filename='js/simple-notify.min.js') }}"></script>
Expand All @@ -39,7 +39,7 @@
}
/* On screens that are 992px or less, set the background color to blue */
@media screen and (max-width: 992px) {

.contributorscrousel
{
width: 18vw !important;
Expand Down Expand Up @@ -72,7 +72,7 @@

<a class="navbar-brand" href=""><img src="{{ url_for('static', filename='img/favicon.png') }}" width="40px"></a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" style="margin:-10px;padding:-10px">
<span class="navbar-toggler-icon"></span>
</button>

Expand All @@ -87,7 +87,7 @@
</li>
<li class="nav-item">
<!-- dashboard link -->
<a class="nav-link" href="#about">About</a>
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact">Contact</a>
Expand All @@ -112,11 +112,11 @@
{% else %}
<li class="nav-item">
<!-- dashboard link -->
<a class="nav-link" href="/login">Login</a>
<a class="nav-link" href="/login">Login</a>
</li>
<li class="nav-item">
<!-- dashboard link -->
<a class="nav-link" href="/register">Sign Up</a>
<a class="nav-link" href="/register">Sign Up</a>
</li>
{% endif %}
<li class="nav-item">
Expand All @@ -131,23 +131,23 @@
</div>
</nav>


<!-- Title -->

<div class="row mt-5 py-3">

<div class="col-lg-6">
<h1 class="big-heading">BulkMailer</h1>
<p id="intro">Bulk Mailer is a Mail Client web application that can be used by organisations to send bulk emails for different groups of subscribers.</p>
<h1 class="big-heading" id="bg">BulkMailer</h1>
<p id="intro" style="font-size: 20px">Bulk Mailer is a Mail Client web application that can be used by organisations to send bulk emails for different groups of subscribers.</p>
<!-- link to the dashboard onclick -->

<a href="#about"> <button type="button" class="btn btn-outline-light btn-lg download-button" >Get Started</button></a>
<a href="#about"> <button type="button" class="btn btn-outline-light btn-sm download-button" >Get Started</button></a>
</div>

<div class="col-lg-6 col-sm-11">
<div class="card mb-3" style="min-width: 420px;border-radius: 50px;display: inline-block;">
<div class="row g-0">

<div class="col-md-auto">
<div class="card-body" style="position: relative;">
<h4 class="card-title" id="tagline">Open Source Events Project <br/>is associated with : <span style="color: #ef6f00;">GSSOC</span></h4>
Expand All @@ -163,7 +163,7 @@ <h4 class="card-title" id="tagline">Open Source Events Project <br/>is associate
help begineers get started <br />
with Open Source <br />
Development while <br />
encouraging diversity.
encouraging diversity.
</p>
</div>
</div>
Expand Down Expand Up @@ -227,7 +227,7 @@ <h5 class="mb-2">Shanwill Pinto</h5>
</div>
</div>
</div>

<div class="col-md-6 col-lg-3 mb-30">
<div class="team-item">
<div class="mb-30 position-relative d-flex align-items-center">
Expand Down Expand Up @@ -267,7 +267,7 @@ <h5 class="mb-2">Laureen Fernandes</h5>
</div>
</div>
</div>

<!--contributors-->
<div class="container-fluid col-lg-10 px-2 col-sm-11 py-2" id=Contributors>
<div class="row">
Expand All @@ -277,7 +277,7 @@ <h3 class="top-sep1">Contributors</h3>
</div>
</div>
</div>

<section class="contibutors-logos slider">
{% for t,d in team.items() %}
<div class="contributorscrousel">
Expand All @@ -296,7 +296,7 @@ <h5 class="mb-2">{{ d.name }}</h5>
{% endfor %}

</section>

</div>

<!-- About Section -->
Expand Down Expand Up @@ -340,41 +340,41 @@ <h2 >Technology Used</h2>

<footer>
<svg viewBox="0 0 120 20">
<defs>
<defs>
<mask id="xxx">
<circle cx="7" cy="12" r="40" fill="#fff" />
</mask>

<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="2" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="
1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 13 -9" result="goo" />
<feBlend in="SourceGraphic" in2="goo" />
</filter>
<path id="wave" d="M 0,10 C 30,10 30,15 60,15 90,15 90,10 120,10 150,10 150,15 180,15 210,15 210,10 240,10 v 28 h -240 z" />
</defs>
<use id="wave3" class="wave" xlink:href="#wave" x="0" y="-2" ></use>
</defs>

<use id="wave3" class="wave" xlink:href="#wave" x="0" y="-2" ></use>
<use id="wave2" class="wave" xlink:href="#wave" x="0" y="0" ></use>


<g class="gooeff">
<circle class="drop drop1" cx="20" cy="2" r="1.8" />
<circle class="drop drop2" cx="25" cy="2.5" r="1.5" />
<circle class="drop drop3" cx="16" cy="2.8" r="1.2" />
<use id="wave1" class="wave" xlink:href="#wave" x="0" y="1" />

<!-- g mask="url(#xxx)">
<path id="wave1" class="wave" d="M 0,10 C 30,10 30,15 60,15 90,15 90,10 120,10 150,10 150,15 180,15 210,15 210,10 240,10 v 28 h -240 z" />
</g>
</g -->

</svg>


</footer>


Expand Down Expand Up @@ -475,7 +475,7 @@ <h2 >Technology Used</h2>
console.log("ready")
$('#mypage').fadeOut(4000);
$('.outer').fadeOut(4000);

});
</script>

Expand All @@ -494,7 +494,7 @@ <h2 >Technology Used</h2>
if (willDelete) {
window.location = "/logout";
} else {

}
});
}
Expand Down Expand Up @@ -523,7 +523,7 @@ <h2 >Technology Used</h2>
text: `{{message|safe}}`,
status: 'success'
})
</script>
</script>
{% endfor %}
{% endif %}
{% endwith %}
Expand Down

0 comments on commit e5c752f

Please sign in to comment.