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

Update README.md #2

Open
wants to merge 15 commits into
base: master
Choose a base branch
from
Open

Update README.md #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
4e29ca1
Update README.md
HarshadaMulye Sep 8, 2020
59f669b
Mobile version for landing page adde
HarshadaMulye Sep 10, 2020
dc51679
Update README.md
HarshadaMulye Sep 10, 2020
1682561
Update README.md
HarshadaMulye Sep 10, 2020
efdebeb
Update index.html
HarshadaMulye Sep 11, 2020
4bcbbde
Update README.md
HarshadaMulye Sep 11, 2020
0b7a0e9
Update README.md
HarshadaMulye Sep 11, 2020
2fac0b9
Update index.html
HarshadaMulye Sep 11, 2020
b4dbdcd
Update README.md
HarshadaMulye Sep 11, 2020
9b040dc
Update README.md
HarshadaMulye Sep 13, 2020
6e18d56
file changes index.html
HarshadaMulye Sep 13, 2020
35f2f1e
desktop version updated
HarshadaMulye Sep 15, 2020
522a261
contact page added
HarshadaMulye Sep 16, 2020
41d1654
Update README.md
HarshadaMulye Sep 17, 2020
98d697a
updated hemsida
HarshadaMulye Sep 18, 2020
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
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,4 @@
3. Kolla på pdf-filerna i mappen `mockup` för att se hur sidan ska se ut.
4. Öppna den klonade mappen i code and start codin'!
5. Gör commits ofta med tydliga commitmeddelanden
6. Pusha dina commits till github och verifiera att de finns uppe på github.com
6. Pusha dina commits till github och verifiera att de finns uppe på github.com...
172 changes: 172 additions & 0 deletions contact1.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,172 @@
body {
background: #E5E5E5;
margin-left: 300px;
margin-right: 300px;
}

.top-header {
display: grid;
grid-template-columns: 2fr 1fr;
background: #C7DDEA;
size: 1000px;
}

.top-header h2 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
margin: auto;
font-family: Frank Ruhl Libre;
font-style: normal;
font-weight: 900;
font-size: 45px;
line-height: 100%;
/* or 45px */
letter-spacing: -0.02em;
color: #000000;
}

.top-header img {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
padding-right: 100px;
}

.container-nav {
display: inline;
background: #FFFFFF;
}

.container-nav ul {
background: #E5E5E5;
display: flex;
justify-content:space-evenly;
font-family: Fira Sans;
font-style: normal;
font-weight: 600;
font-size: 12px;
line-height: 100%;
}

.main-part {
display: grid;
grid-template-columns: 1fr 1fr;
background: #A9A19E;
}

.main-heading {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
font-family: Frank Ruhl Libre;
font-style: normal;
font-weight: 900;
font-size: 45px;
line-height: 100%;
/* or 45px */
letter-spacing: -0.02em;
color: #FFFFFF;
}

.main-input {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
justify-self: center;
}

.footer1 {
background-image: url("img/map.png");
height: 407px;
}

.main-footer {
position: absolute;
background: #FAB131;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
margin-left: 50px;
margin-top: 60px;
}

.main-footer h3 {
font-family: Frank Ruhl Libre;
font-style: normal;
font-weight: 900;
font-size: 45px;
line-height: 100%;
/* identical to box height, or 45px */
letter-spacing: -0.02em;
color: #FFFFFF;
}

.main-footer h5 {
font-family: Fira Sans;
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 24px;
/* or 171% */
color: rgba(255, 255, 255, 0.8);
}

.footer2 {
background: #777574;
height: 100px;
size: 200px;
}

@media only screen and (max-width:600px) {
body {
margin-left: 0px;
margin-right: 0px;
}
.top-header {
display: flex;
align-items: center;
width: 100%;
}
.top-header h2 {
display: flex;
align-items: center;
}
.container-nav {
display: none;
}
main {
size: 100%;
}
.main-part {
display: grid;
size: 100%;
grid-template-rows: 1fr 1fr;
background: #A9A19E;
justify-content: center;
align-content: center;
}
.main-heading {
grid-row-start: 1;
grid-row-end: 2;
grid-column-start: 1;
grid-column-end: 2;
background: #A9A19E;
align-content: center;
}
.main-input {
grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 1;
grid-column-end: 2;
background: #A9A19E;
align-self: center;
}
.main-footer {
position: absolute;
margin-top: 0px;

}
}
66 changes: 66 additions & 0 deletions contact1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
<!DOCTYPE html>
<html>

<head>
<meta charset='utf-8'>

<title>Contact Page</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='contact1.css'>

</head>

<body>
<section="wrapper">
<section>
<header>
<div class="top-header">
<h2>Oh hello there!</h2>
<img src="img/baby-adult.png" alt="baby-adult">
</div>
</header>
</section>
<section class="container-nav">
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li>Our offer </li>
<li>Why us </li>
<li>contact</li>
</ul>
</nav>
</section>
<main>
<section class="main-part">
<div class="main-heading">
<h2>Whats on your mind?</h2>
</div>
<div class="main-input">
<form>
<label for="email"> Your email:</label></br>
<input type="email" id="email" name="email" size="40"></br>
<label for="message"> Your Message:</label></br>
<textarea name="comment" id="message" rows="12" cols="43"></textarea></br>
<input type="button" value="SEND MESSAGE">
</form>
</div>
</section>
</main>
<footer>
<div class="footer1">
<div class="main-footer">
<h3>Come visit us!</h3>
<h5>2219 Griffin Street San Francisco</h5>
</div>
</div>
<div class="footer2">
</div>
</footer>

</section>



</body>

</html>
Binary file added img/adult1.jpg
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 img/adult2.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 img/baby-adult.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 img/map.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 img/old1.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.
150 changes: 150 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,150 @@
<!DOCTYPE html>
<html>

<head>
<meta charset='utf-8'>

<title>Insurance</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@1,200&family=Frank+Ruhl+Libre&display=swap"
rel="stylesheet">
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>

</head>

<body>
<section class="wrapper">

<section class="top-header">

<header>
<div class="header-box1">
<h1>We've got you Covered. </h1>
<p>Together we keep each other safe at home or at work. By paying a tiny fee a day, you are fully
insured all day long. You get it all for as little as $0.4 per pay.</p>


<button><a href="contact1.html">Join Now</a></button>

<img src="img/family.png" alt="family">
</div>
<div class="header-box2">
<h6>What do we have to offer?</h6>
<h2>Learn More</h2>
</div>
<div class="header-box3">
<h6>What are you waiting for?</h6>
<h2>Join Today</h2>
</div>
</header>
</section>

<section class="navigation">
<nav>
<ul>
<li>Home</li>
<li>Our Offer</li>
<li>why us</li>
<li><a href="contact1.html">contact</li></a>
</ul>


</nav>
</section>
<main>
<section class="container">
<div class="container-box1">
<h2> Your personal financial safety net online</h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tempor ligula vel felis cursus
egestas. Etiam consectetur finibus facilisis. Proin accumsan auctor purus, quis finibus tellus
accumsan id. Quisque tellus elit, ullamcorper sed mollis ac, interdum vel enim. Pellentesque
congue felis eget lorem tempor blandit. Mauris hendrerit ullamcorper ex quis congue donec vel
finibus libero</p>
</div>
<section class="cards-section">
<div class="container-box2">
<div class="container-box2-blue">
<img src="img/child.png" alt="adult">
</div>
<h6>Childrens</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tempor ligula vel felis cursus
egestas. Etiam consectetur finibus facilisis. Proin accumsan auctor purus, quis finibus
tellus accumsan id.</p>
</div>
<div class="container-box3">
<div class="container-box3-orange">
<img src="img/adult.png" alt="adult">
</div>
<h6>Just right</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tempor ligula vel felis cursus
egestas. Etiam consectetur finibus facilisis. Proin accumsan auctor purus, quis finibus
tellus accumsan id</p>
</div>
<div class="container-box4">
<div class="container-box4-red">
<img src="img/old.png" alt="adult">
</div>
<h6> Old fart</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tempor ligula vel felis cursus
egestas. Etiam consectetur finibus facilisis. Proin accumsan auctor purus, quis finibus
tellus accumsan id</p>
</div>
</section>
</section>

</main>
<footer>
<div class="about-us">
<h2>About us</h2>
<div class="atus">
<h2>About Us</h2>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ac ultricies massa. Donec id malesuada
magna. Pellentesque aliquet libero erat, fermentum commodo sapien congue ac. Integer a elit lorem.
Vestibulum id venenatis diam, et eleifend augue. Curabitur ex tortor, auctor lobortis augue at,
euismod bibendum neque. Aenean ullamcorper nibh vitae orci laoreet, eu dictum nisi ultrices. Sed
condimentum nibh neque, at ultricies augue facilisis non. Pellentesque a tellus mauris. Nam sodales
pretium rutrum. Aenean imperdiet, leo nec consectetur blandit, risus erat commodo tortor, sit amet
dignissim orci lorem vel felis. Ut tempus dignissim</p>
</div>
<div class="works">
<div class="works1">
<h2> How It works?</h2>
</div>
<div class="works2">
<h5>01</h5>
<h3>Answer a few questions about yourself</h3>
</div>
<div class="works3">
<h5>02</h5>
<h3> Choose a plan. Get a quote.</h3>
</div>
<div class="works4">
<h5>03</h5>
<h3> Answer some questions about your medical history</h3>
</div>
<div class="works5">
<h5>04</h5>
<h3> Wait 90 sec to get approved.</h3>
</div>
<div class="works6">
<h5>05</h5>
<h3>Done.</h3>

</div>
</div>
<div class="works8">
<h5>↑</h5><br>
<h5>Take me up again</h5>
</div>
<div class="works7">


</div>

</section>

</footer>
</body>

</html>
Loading