Skip to content

Commit bd44197

Browse files
Merge pull request #166 from oluwafemiomiyefa/cohort2_beginners
My week1 Assignment
2 parents deaa99e + 0435164 commit bd44197

File tree

6 files changed

+190
-1
lines changed

6 files changed

+190
-1
lines changed
Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
<!Doctype html>
2+
<html lang="en">
3+
<title>Beginners Frontend</title>
4+
5+
<head>
6+
<meta charset="UTF-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<Link rel="stylesheet" type="text/css" href="main.css">
9+
<!--External Link goes down here-->
10+
<script src="https://kit.fontawesome.com/99021df4e2.js" crossorigin="anonymous"></script>
11+
<!-- Google Font links -->
12+
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300&display=swap" rel="stylesheet">
13+
<link href="https://fonts.googleapis.com/css2?family=Alata&display=swap" rel="stylesheet">
14+
</head>
15+
16+
<body>
17+
<!--Hero section-->
18+
<div id="header">
19+
<nav>
20+
<div class="logo">Drealzeal</div>
21+
<div class="openMenu"><i class="fas fa-bars"></i></div>
22+
<ul class="mainMenu">
23+
<li><a href="#">Home</a></li>
24+
<li><a href="#">About</a></li>
25+
<li><a href="#">Gallery</a></li <li class="closeMenu">
26+
<i class="fas fa-times"></i>
27+
</li>
28+
</ul>
29+
</nav>
30+
<!--About US section-->
31+
<main id="main">
32+
<div id="about-us">
33+
<h1 class="main-head">The Journey of FrontEnd</h1>
34+
<div class="about-writeup">
35+
<h2 class="about-title">The leader in interactive VR</h2>
36+
<p class="about-info"> Founded in 2011, Loopstudios has been producing world-class virtual reality
37+
projects for some of the best companies around the globe. Our award-winning
38+
creations have transformed businesses through digital experiences that bind
39+
to their brand.</p>
40+
</div>
41+
</div>
42+
</main>
43+
<!--float right rounded image-->
44+
<div class="container" style="padding: 25px 50px 75px 100px;">
45+
<p>
46+
<h2>Phillp Bur</h2>
47+
<img src="man.jpg" alt="happy man" style="width: 42px; height: 42px; float: right; border-radius: 50%;">Founded in
48+
2011, Loopstudios has been producing world-class virtual reality
49+
projects for some of the best companies around the globe. Our award-winning
50+
creations have transformed businesses through digital experiences that bind
51+
to their brand.
52+
</p>
53+
</div>
54+
<hr>
55+
<!--float left rounded image-->
56+
<div class="container" style="padding: 25px 50px 75px 100px;">
57+
<p>
58+
<h2>Phillip Bur</h2>
59+
<img src="man.jpg" alt="happy man" style="width: 42px; height: 42px; float: left; border-radius: 50%;">Founded in
60+
2011, Loopstudios has been producing world-class virtual reality
61+
projects for some of the best companies around the globe. Our award-winning
62+
creations have transformed businesses through digital experiences that bind
63+
to their brand.
64+
</p>
65+
</div>
66+
<div class="container" style="padding: 15px 32px;">
67+
<button class="button" style="font-size: 16px;
68+
text-align: center; border-radius: 8px; background-color: #4ca543; border: none; display: inline-block; width: 64px; margin: 0;
69+
position: relative;
70+
top: 50%;
71+
left: 50%;
72+
-ms-transform: translate(-50%, -50%);
73+
transform: translate(-50%, -50%);">Next</button>
74+
</div>
75+
<div class="forms">
76+
<h2 class="form" style="text-align: center;">Fill in the form</h2>
77+
<form>
78+
<div>
79+
<form action="/action_page.php">
80+
<label for="fname">First Name</label>
81+
<input type="text" id="fname" name="firstname" placeholder="Your name..">
82+
83+
<label for="lname">Last Name</label>
84+
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
85+
86+
<label for="country">Country</label>
87+
<select id="country" name="country">
88+
<option value="australia">Australia</option>
89+
<option value="canada">Canada</option>
90+
<option value="usa">USA</option>
91+
</select>
92+
93+
<input type="submit" value="Submit">
94+
</form>
95+
</div>
96+
</div>
97+
</body>
98+
99+
</html>
Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
body {
7+
font-family: "Josefin Sans", sans-serif;
8+
}
9+
10+
#header {
11+
background-color: cadetblue;
12+
height: 650px;
13+
background-position: center;
14+
background-size: cover;
15+
background-repeat: no-repeat;
16+
}
17+
nav {
18+
background-color: transparent;
19+
color: #000000;
20+
display: flex;
21+
justify-content: space-between;
22+
margin: 0 165px;
23+
padding-top: 64px;
24+
}
25+
nav .mainmenu {
26+
display: flex;
27+
list-style-type: none;
28+
width: 380px;
29+
justify-content: space-between;
30+
align-items: center;
31+
}
32+
nav .mainMenu li a {
33+
display: inline-block;
34+
font-family: "Alata", sans-serif;
35+
text-decoration: none;
36+
color: #000000;
37+
font-size: 15px;
38+
line-height: 25px;
39+
font-weight: normal;
40+
}
41+
42+
nav .mainMenu li a:hover {
43+
text-decoration: underline;
44+
}
45+
46+
nav .openMenu {
47+
cursor: pointer;
48+
font-size: 28px;
49+
line-height: 25px;
50+
display: none;
51+
}
52+
53+
nav .mainMenu .closeMenu {
54+
cursor: pointer;
55+
font-size: 28px;
56+
line-height: 25px;
57+
display: none;
58+
}
59+
input[type=text], select {
60+
width: 100%;
61+
padding: 12px 20px;
62+
margin: 8px 0;
63+
display: inline-block;
64+
border: 1px solid #ccc;
65+
border-radius: 4px;
66+
box-sizing: border-box;
67+
}
68+
69+
input[type=submit] {
70+
width: 100%;
71+
background-color: #4CAF50;
72+
color: white;
73+
padding: 14px 20px;
74+
margin: 8px 0;
75+
border: none;
76+
border-radius: 4px;
77+
cursor: pointer;
78+
}
79+
80+
input[type=submit]:hover {
81+
background-color: #45a049;
82+
}
83+
84+
.forms {
85+
border-radius: 5px;
86+
background-color: #c25454;
87+
padding: 25px 50px 70px 100px;
88+
}
89+
195 KB
Loading
812 KB
Loading
1.49 KB
Loading

2021/BEGINNERS/WEEK1/submission.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
1-
## fullname - Assignment Folder Name - Whatsapp phone number
1+
## fullname - Assignment Folder Name - Whatsapp phone number
2+
## Omiyefa OLuwafemi - Omiyefa Femi - 08141263376

0 commit comments

Comments
 (0)