Sujan/Rohini_Landing_Page
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

landing page change

Browse Source
This commit is contained in:
sujan 2024-10-07 17:43:19 +05:45
parent ab37422fc6
commit 4fe7fac7d1
3 changed files with 437 additions and 526 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

133
css/media.css
View File

@ -6,84 +6,61 @@
* http://www.opensource.org/licenses/mit-license.php * http://www.opensource.org/licenses/mit-license.php
* 6/20/2012 * 6/20/2012
*/ */
/* Media Queries */ /* Media Queries */
/* Smaller than standard 960 (devices and browsers) */ /* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) { @media only screen and (max-width: 959px) {}
}
/* Tablet Portrait size to standard 960 (devices and browsers) */ /* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) { @media only screen and (min-width: 768px) and (max-width: 959px) {
/* layout */ /* layout */
h1 { h1 {
font-size: 100px; font-size: 100px;
line-height: 100px; line-height: 100px;
} }
h2 { h2 {
font-size: 30px; font-size: 30px;
line-height: 30px; line-height: 30px;
} }
h3 { h3 {
font-size: 30px; font-size: 30px;
line-height: 30px; line-height: 30px;
} }
h4 { h4 {
font-size: 70px; font-size: 70px;
line-height: 70px; line-height: 70px;
} }
h5 { h5 {
font-size: 30px; font-size: 30px;
line-height: 30px; line-height: 30px;
} }
.contact-intro-bottom-title { .contact-intro-bottom-title {
font-size: 30px; font-size: 30px;
line-height: 30px; line-height: 30px;
} }
/* borders */ /* borders */
.borders { .borders {
display: none; display: none;
visibility: hidden; visibility: hidden;
} }
/* countdown */ /* countdown */
ul#countdown li { ul#countdown li {
width: 75px; width: 75px;
} }
ul#countdown li span { ul#countdown li span {
font-size: 40px; font-size: 40px;
line-height: 40px; line-height: 40px;
} }
ul#countdown li span.seconds { ul#countdown li span.seconds {
font-size: 40px; font-size: 40px;
line-height: 40px; line-height: 40px;
} }
ul#countdown li p.timeRefDays, ul#countdown li p.timeRefHours, ul#countdown li p.timeRefMinutes, ul#countdown li p.timeRefSeconds {
ul#countdown li p.timeRefDays,
ul#countdown li p.timeRefHours,
ul#countdown li p.timeRefMinutes,
ul#countdown li p.timeRefSeconds {
font-size: 20px; font-size: 20px;
} }
/* menu */ /* menu */
.menu { .menu {
display: none; display: none;
visibility: hidden; visibility: hidden;
} }
/* menu mobile */ /* menu mobile */
.menu-mobile { .menu-mobile {
position: relative; position: relative;
@ -102,28 +79,23 @@ display: inherit;
visibility: visible; visibility: visible;
z-index: 1000; z-index: 1000;
} }
/* dividers */ /* dividers */
.divider-left-top { .divider-left-top {
display: none; display: none;
visibility: hidden; visibility: hidden;
} }
.divider-right-top { .divider-right-top {
display: none; display: none;
visibility: hidden; visibility: hidden;
} }
.divider-left-bottom { .divider-left-bottom {
display: none; display: none;
visibility: hidden; visibility: hidden;
} }
.divider-right-bottom { .divider-right-bottom {
display: none; display: none;
visibility: hidden; visibility: hidden;
} }
/* box effect */ /* box effect */
.box { .box {
width: 220px; width: 220px;
@ -141,76 +113,58 @@ box-shadow: inset 0 0 0 3px #fff;
transition: background 0.4s 0.5s; transition: background 0.4s 0.5s;
margin: 20px 0 0 0; margin: 20px 0 0 0;
} }
.top, .left, .bottom, .right { .top, .left, .bottom, .right {
display: none; display: none;
visibility: hidden; visibility: hidden;
} }
} }
/* All Mobile Sizes (devices and browser) */ /* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) { @media only screen and (max-width: 767px) {}
}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) { @media only screen and (min-width: 480px) and (max-width: 767px) {
/* layout */ /* layout */
#intro-wrapper { #intro-wrapper {
position: relative; position: relative;
top: 58px; top: 58px;
} }
.lower-content { .lower-content {
padding: 10px 0 0 0; padding: 10px 0 0 0;
} }
h1 { h1 {
font-size: 80px; font-size: 80px;
line-height: 80px; line-height: 80px;
} }
h2 { h2 {
font-size: 25px; font-size: 25px;
line-height: 25px; line-height: 25px;
} }
h3 { h3 {
font-size: 25px; font-size: 25px;
line-height: 25px; line-height: 25px;
} }
h4 { h4 {
font-size: 45px; font-size: 45px;
line-height: 45px; line-height: 45px;
padding: 58px 0 0 0; padding: 58px 0 0 0;
} }
h5 { h5 {
font-size: 25px; font-size: 25px;
line-height: 25px; line-height: 25px;
} }
h6 { h6 {
font-size: 18px; font-size: 18px;
line-height: 18px; line-height: 18px;
text-align: left; text-align: left;
} }
.contact-intro-bottom-title { .contact-intro-bottom-title {
font-size: 25px; font-size: 25px;
line-height: 25px; line-height: 25px;
} }
/* borders */ /* borders */
.borders { .borders {
display: none; display: none;
visibility: hidden; visibility: hidden;
} }
/* countdown */ /* countdown */
#countdown-wrapper { #countdown-wrapper {
position: relative; position: relative;
@ -219,34 +173,25 @@ margin: 132px 0 0 10px;
padding: 0; padding: 0;
text-align: left; text-align: left;
} }
ul#countdown li { ul#countdown li {
width: 60px; width: 60px;
} }
ul#countdown li span { ul#countdown li span {
font-size: 30px; font-size: 30px;
line-height: 30px; line-height: 30px;
} }
ul#countdown li span.seconds { ul#countdown li span.seconds {
font-size: 30px; font-size: 30px;
line-height: 30px; line-height: 30px;
} }
ul#countdown li p.timeRefDays, ul#countdown li p.timeRefHours, ul#countdown li p.timeRefMinutes, ul#countdown li p.timeRefSeconds {
ul#countdown li p.timeRefDays,
ul#countdown li p.timeRefHours,
ul#countdown li p.timeRefMinutes,
ul#countdown li p.timeRefSeconds {
font-size: 20px; font-size: 20px;
} }
/* menu */ /* menu */
.menu { .menu {
display: none; display: none;
visibility: hidden; visibility: hidden;
} }
/* menu mobile */ /* menu mobile */
.menu-mobile { .menu-mobile {
position: relative; position: relative;
@ -265,146 +210,119 @@ display: inherit;
visibility: visible; visibility: visible;
z-index: 1000; z-index: 1000;
} }
/* contact form */ /* contact form */
#form-wrapper { #form-wrapper {
width: 340px; width: 340px;
} }
#form { #form {
width: 340px; width: 340px;
} }
#form div { #form div {
width: 340px; width: 340px;
} }
#form div label { #form div label {
width: 325px; width: 325px;
} }
#form input { #form input {
width: 325px; width: 325px;
} }
#form .subject { #form .subject {
width: 325px; width: 325px;
margin-bottom: 10px; margin-bottom: 10px;
} }
#form textarea { #form textarea {
width: 325px; width: 325px;
} }
#form .submit { #form .submit {
margin-right: 3px; margin-right: 3px;
} }
.success { .success {
width: 340px; width: 340px;
} }
#form .error { #form .error {
right: 5px; right: 5px;
} }
/* newsletter form */ /* newsletter form */
#subscribe-wrapper { #subscribe-wrapper {
position: relative; position: relative;
text-align: left; text-align: left;
margin: -61px 0 20px 8px; margin: -61px 0 20px 8px;
} }
.subscribesuccess { .subscribesuccess {
text-align: left; text-align: left;
margin: 0 0 0 2px; margin: 0 0 0 2px;
} }
#subscribe .subscribeerror { #subscribe .subscribeerror {
text-align: left; text-align: left;
margin: 0 0 0 2px; margin: 0 0 0 2px;
} }
/* dividers */ /* dividers */
.divider-left-top { .divider-left-top {
display: none; display: none;
visibility: hidden; visibility: hidden;
} }
.divider-right-top { .divider-right-top {
display: none; display: none;
visibility: hidden; visibility: hidden;
} }
.divider-left-bottom { .divider-left-bottom {
display: none; display: none;
visibility: hidden; visibility: hidden;
} }
.divider-right-bottom { .divider-right-bottom {
display: none; display: none;
visibility: hidden; visibility: hidden;
} }
} }
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) { @media only screen and (max-width: 479px) {
/* layout */ /* layout */
#intro-wrapper { #intro-wrapper {
position: relative; position: relative;
top: 58px; top: 250px;
}
.intro-heading h1 {
font-size: 40px;
text-align: center;
} }
.lower-content { .lower-content {
padding: 10px 0 0 0; padding: 10px 0 0 0;
} }
h1 { h1 {
font-size: 80px; font-size: 35px;
line-height: 80px; line-height: 45px;
} }
h2 { h2 {
font-size: 25px; font-size: 25px;
line-height: 25px; line-height: 25px;
} }
h3 { h3 {
font-size: 25px; font-size: 25px;
line-height: 25px; line-height: 25px;
} }
h4 { h4 {
font-size: 45px; font-size: 45px;
line-height: 45px; line-height: 45px;
padding: 58px 0 0 0; padding: 58px 0 0 0;
} }
h5 { h5 {
font-size: 25px; font-size: 25px;
line-height: 25px; line-height: 25px;
} }
h6 { h6 {
font-size: 18px; font-size: 18px;
line-height: 18px; line-height: 18px;
text-align: left; text-align: left;
} }
.contact-intro-bottom-title { .contact-intro-bottom-title {
font-size: 25px; font-size: 25px;
line-height: 25px; line-height: 25px;
} }
/* borders */ /* borders */
.borders { .borders {
display: none; display: none;
visibility: hidden; visibility: hidden;
} }
/* countdown */ /* countdown */
#countdown-wrapper { #countdown-wrapper {
position: relative; position: relative;
@ -413,34 +331,25 @@ margin: 132px 0 0 10px;
padding: 0; padding: 0;
text-align: left; text-align: left;
} }
ul#countdown li { ul#countdown li {
width: 60px; width: 60px;
} }
ul#countdown li span { ul#countdown li span {
font-size: 30px; font-size: 30px;
line-height: 30px; line-height: 30px;
} }
ul#countdown li span.seconds { ul#countdown li span.seconds {
font-size: 30px; font-size: 30px;
line-height: 30px; line-height: 30px;
} }
ul#countdown li p.timeRefDays, ul#countdown li p.timeRefHours, ul#countdown li p.timeRefMinutes, ul#countdown li p.timeRefSeconds {
ul#countdown li p.timeRefDays,
ul#countdown li p.timeRefHours,
ul#countdown li p.timeRefMinutes,
ul#countdown li p.timeRefSeconds {
font-size: 20px; font-size: 20px;
} }
/* menu */ /* menu */
.menu { .menu {
display: none; display: none;
visibility: hidden; visibility: hidden;
} }
/* menu mobile */ /* menu mobile */
.menu-mobile { .menu-mobile {
position: relative; position: relative;
@ -459,85 +368,67 @@ display: inherit;
visibility: visible; visibility: visible;
z-index: 1000; z-index: 1000;
} }
/* contact form */ /* contact form */
#form-wrapper { #form-wrapper {
width: 240px; width: 240px;
} }
#form { #form {
width: 240px; width: 240px;
} }
#form div { #form div {
width: 240px; width: 240px;
} }
#form div label { #form div label {
width: 225px; width: 225px;
} }
#form input { #form input {
width: 225px; width: 225px;
} }
#form .subject { #form .subject {
width: 225px; width: 225px;
margin-bottom: 10px; margin-bottom: 10px;
} }
#form textarea { #form textarea {
width: 225px; width: 225px;
} }
#form .submit { #form .submit {
margin-right: 3px; margin-right: 3px;
} }
.success { .success {
width: 240px; width: 240px;
} }
#form .error { #form .error {
right: 5px; right: 5px;
} }
/* newsletter form */ /* newsletter form */
#subscribe-wrapper { #subscribe-wrapper {
position: relative; position: relative;
text-align: left; text-align: left;
margin: -61px 0 20px 8px; margin: -61px 0 20px 8px;
} }
.subscribesuccess { .subscribesuccess {
text-align: left; text-align: left;
margin: 0 0 0 2px; margin: 0 0 0 2px;
} }
#subscribe .subscribeerror { #subscribe .subscribeerror {
text-align: left; text-align: left;
margin: 0 0 0 2px; margin: 0 0 0 2px;
} }
/* dividers */ /* dividers */
.divider-left-top { .divider-left-top {
display: none; display: none;
visibility: hidden; visibility: hidden;
} }
.divider-right-top { .divider-right-top {
display: none; display: none;
visibility: hidden; visibility: hidden;
} }
.divider-left-bottom { .divider-left-bottom {
display: none; display: none;
visibility: hidden; visibility: hidden;
} }
.divider-right-bottom { .divider-right-bottom {
display: none; display: none;
visibility: hidden; visibility: hidden;
} }
} }

17
css/style.css
View File

@ -95,7 +95,7 @@ body {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: auto; height: auto;
top: 138px; top: 260px;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
@ -1456,3 +1456,18 @@ width: 100%;
text-align: left; text-align: left;
color: #00bfff; color: #00bfff;
} }
.intro-heading {
position: absolute;
width: 100%;
height: auto;
top: 150px;
margin: 0;
padding: 0;
display: flex;
align-content: center;
justify-content: center;
}
.intro-heading h1 {
font-size: 80px;
color: #fff;
}

5
index.html
View File

@ -105,6 +105,10 @@
<div class="upper-content"> <div class="upper-content">
<!-- container start --> <!-- container start -->
<div class="container center"> <div class="container center">
<div class="intro-heading">
<h1 class="fade-in-1 logo">Website Under Construction</h1>
</div>
<!-- intro wrapper start --> <!-- intro wrapper start -->
<div id="intro-wrapper"> <div id="intro-wrapper">
@ -190,6 +194,7 @@
</div> </div>
<!-- intro wrapper end --> <!-- intro wrapper end -->
</div> </div>
<!-- container end --> <!-- container end -->
</div> </div>