Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Updated the Landing page UI ! #41

Merged
merged 3 commits into from
Feb 20, 2023
+134 −213
Merged

Updated the Landing page UI ! #41

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d32dd29
Updated the UI of the web
itsshahinhere Feb 19, 2023
3a5d058
added background image
itsshahinhere Feb 19, 2023
963e7e6
Updated the reviewed changes
itsshahinhere Feb 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
169 changes: 65 additions & 104 deletions css_files/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,53 +1,9 @@
.body-back{
background-image:url("background.jpg");

}

/* header */
.image-border{
border-radius: 100%;
}
.navbar {
padding: 1rem 0;

}

.head{
font-size: 1.5rem;
font-weight: bold;
color:#ff1a8c;
text-align: left;
position: static;
}

.navbar-nav .nav-link {
font-size: 1.2rem;
margin-left: 1rem;
color: #000;
}

.navbar-nav .nav-link:hover {
color: #ff4532;
}

.navbar-toggler {
border: none;
.body-back {
background-color: #EFB7C7;
font-family: 'Raleway', sans-serif;
overflow: hidden;
}

.bi {
font-size: 1.5rem;
}


/* header */
.container {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}


.square {
background-color: bisque;
margin-top:150px;
Expand All @@ -56,80 +12,85 @@
border-style: double;
}

#mens{
display:flex;
font-style: bold;
font-family:Verdana, Geneva, Tahoma, sans-serif;
font-size:26px;
text-align: center;
margin-left:400px;
margin-top:50px;
}


.square:after {
content: "";
display: block;
margin-top:100px;
padding-top:100%;

}

.content {
position: absolute;
width: 100%;
height: 100%;

}


.experi{
background-color: rgb(199, 93, 109);

margin-top:25px;
font-family: 'Times New Roman', Times, serif;

}

footer{
background:rgb(231, 224, 235);
padding-bottom: 0px;
margin-top:0px;
height:150px;
.logoheading{
font-family: 'Raleway', sans-serif;
padding-top: 0.6rem;
padding-left: 0.8rem;
margin-bottom: 0;
float: right;
font-size: 35px;
font-weight: 700;
color: #EB1365;
}


#content{
text-align:center;
margin:25px;
.backgroundimage{
float: right;
height: 810px;
}

/* footer */

.bg-pink {
background-color: #FFC0CB;
}

.text-black {
color: #000000;
}
.infobox{
margin-top: 300px;
text-align: center;
}

.footer-links li {
display: inline-block;
margin-right: 20px;
}
.infobox>h2{
font-family: 'PT Serif Caption', serif;
color: #E82771;
font-weight: 800;
font-size: 50px;
}

.social-links li {
display: inline-block;
margin-right: 20px;
}
.row{
padding-top: 60px;
}
.social-links i {
font-size: 20px;
}
#btn {
background-color: white;
border: none;
color: #E82771;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
margin: 4px 2px;
cursor: pointer;
border-radius: 25px;
}

.nav-link{
color: #000;
}
#result{
font-family: 'PT Serif Caption', serif;
color: #E82771;
font-weight: 800;
font-size: 50px;
}

.footernav{
position: absolute;
bottom: 0;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
display: block;
height: 70px;
width: 100%;
background-color: white;
}

/* footer */
.footernav>h2{
color: #EB1365;
text-align: center;
padding-top: 7px;
font-size: 700;
}
Binary file added images/arrowdown.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/bg.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
0 images/Calendar1.png → images/calendar.png
View file
Open in desktop
File renamed without changes
Binary file removed images/profile_image.png
View file
Open in desktop
Binary file not shown.
0 images/Girl.png → images/woman.png
View file
Open in desktop
File renamed without changes
178 changes: 69 additions & 109 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,116 +4,76 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>FLOW-CYCLE</title>
<link rel="icon" href="icon.png" type="image/icon type">
<link rel="icon" href="images/icon.png" type="image/icon type">
<link rel="stylesheet" href="css_files/style.css">

<!-- bootstrap icon link Used in Header and footer-->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>

<!-- bootstrap icon link Used in Header and footer-->

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Dosis:400,700">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body class="body-back">

<!-- Header -->
<header class="navbar navbar-expand-xxl navbar-light bg-white">
<div class="container-fluid">
<a href="index.html"class="navbar-brand"><img class="d-inline-block align-top image-border" src="images/icon.png" width="45" height="45"/></a><span><h3 class="head">FLOW CYCLE</h3> </span>
<button type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" class="navbar-toggler" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav">

<li class="nav-item">
<a class="nav-link" href="#footer"><img class="d-inline-block align-top image-border" src="images/Calendar1.png" width="45" height="45"/></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="index.html"><img class="d-inline-block align-top image-border" src="images/Girl.png" width="45" height="45"/></a>
</li>
</ul>
</div>
</div>
</header>


<!-- header -->


<div class="container">
<div class="square">
<div id="content">
<h2>Did you Just start your periods.</h2>
<p>
<input type="button"
value="Log your periods"
id="bt"
onclick="toggle(this)">
</p>
<div style="border:solid 1px #ddd;
padding:10px;
display:none;"
id="cont"><input type=date id = "Day">

<!-- Choose a date and enter in input field -->
<button type="submit" onclick = "Calculator()"> date </button> <br><br>
<h3 style="color:32A80F" id="result" align="center"></h3> </div>


</div>
</div>
</div>

<div id="mens"><b>is the date when you will have your next periods.</b></div>

<div class="experi">
<h3></h3>
<ul class="wlist">
<li></li>
</ul>
</div>


<!-- footer -->

<footer class="bg-pink text-black" id="footer">
<div class="container-fluid ">
<div class="row align-items-sm-center" >
<div class="col-md-4">
<a href="index.html" class="text-decoration-none" style="color:#ff0080; font-family: bold; font-size: 1.5rem; font-weight: bold;">
<img class="d-inline-block align-top image-border" src="images/icon.png" alt="Company Logo" width="40" height="40"/> FLOW CYCLE</a>
</div>
<div class="col-md-4">
<ul class="nav justify-content-center text-decoration-none" >
<li class="nav-item">
<a class="nav-link" href="index.html" style="color: #000;">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: #000;">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#footer" style="color: #000;">Contact Us</a>
</li>
</ul>
</div>
<div class="col-md-4">
<ul class="social-icons list-inline d-flex align-items-center justify-content-center">
<li class="list-inline-item"><a href="#"><i class="fab fa-facebook text-black"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab fa-twitter text-black"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab fa-instagram text-black"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab fa-linkedin text-black"></i></a></li>
</ul>
</div>
</div>
</div>
</footer>

<!-- footer -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=PT+Serif+Caption&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>


<body class="body-back">

<section class="navigation-bar">
<nav class="navbar navbar-expand-sm me-0 p-0" style="background-color: white;">

<div class="container-fluid">
<a class="navbar-brand p-0"href="#"><img src="images/icon.png" height="70" alt="flow cycle logo"><p class="logoheading">FLOW CYCLE</p></a>
</div>

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#"><img src="images/calendar.png" height="70" alt=""></a>
</li>
<li class="nav-item">
<a class="nav-link mx-4" href="#"><img src="images/woman.png" height="70" alt=""></a>
</li>
</ul>
</div>
</nav>
</section>

<section>
<figure class="m-0">
<img class="backgroundimage" style="border-top-left-radius: 80px; border-bottom-left-radius: 80px;" src="images/bg.png" alt="">
</figure>
</section>

<main>
<section>
<div class="infobox">
<h2>Last Periods was on</h2>

<p>
<input type="button" value="Log The Date" id="btn" onclick="toggle(this)">
</p>

<div id="cont"><input type=date id = "Day">

<!-- Choose a date and enter in input field -->
<button id="btn" type="submit" onclick = "Calculator()"> Confirm </button>
<br><br>
<h3 id="result"></h3>
</div>
</div>
</section>
</main>

<section>
<footer>
<div class="footernav">
<h2>EXPLORE MORE <img src="images/arrowdown.png" height="75px" alt=""></h2>
</div>
</footer>
</section>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<script src="js_files/index.js"></script>
Expand Down