Skip to content

Commit

Permalink
Updated the Landing page UI ! (#41)
Browse files Browse the repository at this point in the history 
* Updated the UI of the web

* added background image

* Updated the reviewed changes
  • Loading branch information
@itsshahinhere
itsshahinhere authored Feb 20, 2023
1 parent 4bb7bcb commit 1ae3d48
Show file tree
Hide file tree
Showing 7 changed files with 134 additions and 213 deletions.
169 changes: 65 additions & 104 deletions css_files/style.css
View file
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
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
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
File renamed without changes
Binary file removed images/profile_image.png
View file
Binary file not shown.
0 images/Girl.png → images/woman.png
View file
File renamed without changes
178 changes: 69 additions & 109 deletions index.html
View file
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

0 comments on commit 1ae3d48

Please sign in to comment.