talksik/frontend_challenge
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Arjun Patel
2019-05-23 22:44:04 -07:00
commit 23d271b23b
4 changed files with 319 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitattributes
+2
View File
@@ -0,0 +1,2 @@
# Auto detect text files and perform LF normalization
* text=auto
README.md
+1
View File
@@ -0,0 +1 @@
# frontend_challenge
index.html
+93
View File
@@ -0,0 +1,93 @@
<!DOCTYPE html>
<head>
<title>Company</title>
<link rel="stylesheet" type="text/css" href="main.css" />
<link
href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
rel="stylesheet"
/>
</head>
<body>
<div class="main-grid">
<div class="top-nav">
<div class="content-wrap">
<div class="flex-basic-row">
<p class="margin-lr-5 nav-call-now">CALL US NOW:</p>
<p class="margin-lr-5 nav-number">385.154.11.28.35</p>
</div>
<div class="flex-basic-row">
<a href="#"><p class="margin-lr-5 nav-login">LOGIN</p></a>
<a href="#"><p class="margin-lr-5 nav-signup">SIGNUP</p></a>
</div>
</div>
</div>
<div class="second-nav flex-basic-row">
<div class="content-wrap">
<div class="flex-basic-row">
<p class="logo-first">YOUR</p>
<p class="logo-second">LOGO</p>
</div>
<div class="flex-basic-row">
<a href="#"><p class="margin-lr-5 second-nav-item">TITLE 1</p></a>
<a href="#"><p class="margin-lr-5 second-nav-item">TITLE 2</p></a>
<a href="#"><p class="margin-lr-5 second-nav-item">TITLE 3</p></a>
<a href="#"><p class="margin-lr-5 second-nav-item">TITLE 4</p></a>
<a href="#"><p class="margin-lr-5 second-nav-item">TITLE 5</p></a>
<a href="#"><p class="margin-lr-5 second-nav-item">TITLE 6</p></a>
<a href="#"><p class="margin-lr-5 second-nav-item">TITLE 7</p></a>
</div>
</div>
</div>
<div class="content flex-basic-col">
<div class="nav-page">
Home / Who we are / <span class="current-page">Contact</span>
</div>
<div class="body">
<p class="content-title">Contact</p>
<p class="content-text">
Smallest directly families surprise honoured am an. Speaking replying
mistress him numerous she returned feelings may day. Evening way
luckily son exposed get general greatly. Zealously prevailed be
arranging do. Set arranging too dejection september happiness.
</p>
</div>
</div>
<div class="footer flex-basic-row">
<div class="footer-part flex-basic-col">
<p class="footer-label">CONTACT US</p>
<form class="flex-basic-col">
<input placeholder="Name"/>
<input placeholder="Phone"/>
<input placeholder="Email"/>
<textarea placeholder="Message"></textarea>
<button>SUBMIT</button>
</form>
</div>
<div class="footer-part flex-basic-col">
<p class="footer-label">REACH US</p>
<p class="special-info-row">Coalition Skills Test</p>
<p class="info-row">535 La Plata Street</p>
<p class="info-row">4200 Argentina</p>
<br></br>
<p class="info-row">Phone: 385.154.11.28.38</p>
<p class="info-row">Fax: 385.154.11.28.38/p>
</div>
</div>
</div>
</body>
main.css
+223
View File
@@ -0,0 +1,223 @@
/* main orange: rgb(202, 112, 9) */
html {
height: 100%;
width: 100%;
font-family: 'Roboto', sans-serif;
}
body {
display: flex;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.margin-lr-5 {
/* do individual as hidden <p> styling */
margin-left: 5px;
margin-right: 5px;
}
.flex-basic-col {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.flex-basic-row {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.main-grid {
flex: 1;
display: grid;
grid-template-rows: 50px 160px auto;
}
.content-wrap {
width: 970px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin: auto;
}
/* TOP NAV */
.top-nav {
background-color: rgb(202, 112, 9);
display: flex;
}
p {
margin: 0;
padding: 0;
}
.nav-call-now {
color: red;
font-size: 1.3em;
font-weight: bold;
}
.nav-number {
color: white;
font-size: 1em;
}
a {
text-decoration: none !important;
cursor: pointer;
}
.nav-login {
color: red;
font-size: 1em;
font-weight: 350;
}
.nav-signup {
color: white;
font-size: 1em;
font-weight: 350;
}
/* SECOND NAV */
.second-nav {
background-color: #fcf4ea;
display: flex;
}
.logo-first {
font-size: 3em;
color: rgb(20, 20, 20);
font-weight: 600;
}
.logo-second {
font-size: 3em;
color: rgb(202, 112, 9);
font-weight: 600;
}
.second-nav-item {
font-size: 16px;
font-weight: 150;
color: rgb(51, 49, 49);
}
.second-nav-item:hover {
font-size: 17px;
font-weight: 250;
color: black;
border-bottom: 3px solid orange;
}
/* MAIN CONTENT */
.content {
width: 970px;
margin: 0 auto;
align-self: flex-start;
padding: 2em;
display: flex;
align-items: flex-start;
}
.nav-page {
font-size: 14px;
color: rgb(136, 133, 133);
margin: 3em 0;
}
.current-page {
color: black;
font-weight: 600;
}
.content-title {
font-size: 2.5em;
font-weight: 600;
color: rgb(202, 112, 9);
margin: 0.5em 0;
}
.content-text {
font-size: 1em;
color: rgb(100, 98, 98);
}
/* FOOTER */
.footer {
width: 970px;
margin: 0 auto;
align-self: flex-start;
padding: 2em;
display: flex;
align-items: flex-start;
}
.footer-part {
flex: 1;
display: flex;
align-items: flex-start;
margin: 1em;
}
.footer-label {
width: 100%;
font-size: 1.75em;
color: rgb(202, 112, 9);
border-bottom: 5px solid rgb(88, 86, 86);
}
.special-info-row {
margin: 10px 0;
font-size: 1.1em;
color: rgb(58, 57, 57);
font-weight: 500;
}
.info-row {
font-size: 0.9em;
color: rgb(80, 79, 79);
}
form {
padding: 1em;
flex: 1;
align-self: stretch;
}
input {
flex: 1;
width: 100%;
margin: 1em;
padding: 15px;
}
textarea {
flex: 1;
width: 100%;
margin: 1em;
padding: 15px;
}
button {
background-color: rgb(202, 112, 9);
align-self: flex-start;
padding: 15px 10px;
width: 120px;
margin-top: 2em;
color: white;
font-weight: 600;
font-size: 0.85em;
}