Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
added week 4
  • Loading branch information
maa17019 committed Feb 18, 2020
1 parent 0e4f3c9 commit df65cab
Show file tree
Hide file tree
Showing 8 changed files with 165 additions and 160 deletions.
Binary file modified .DS_Store
Binary file not shown.
27 changes: 16 additions & 11 deletions css/responsive.css
Expand Up @@ -71,6 +71,7 @@ body, html {
flex: 1;
padding: 0 10px;
justify-content: flex-end;
margin-right: 5vw;


}
Expand Down Expand Up @@ -424,9 +425,7 @@ width: 100%;
}
@media (max-width: 649px){
.big-logos{
width: 80%;
margin-left: 10%;
text-align: center;
width: 100%;
margin-bottom: 10px;

}
Expand Down Expand Up @@ -456,13 +455,17 @@ width: 100%;
font-family: 'Open Sans';
font-size: 1em;
text-align: left;
margin-left: 10%;


}
.white p{
color: black;
font-family: 'Open Sans';
font-size: 0.8em;
text-align: left;
width: 90%;
margin-left: 10%;
}
}

Expand All @@ -474,7 +477,7 @@ width: 100%;
.container .logo a img {
max-width: 100%;
max-height: 90px;
margin-left: 10vw;
margin-left: 9vw;
}
.container .navbar {
margin-right: 5vw;
Expand Down Expand Up @@ -505,6 +508,7 @@ width: 100%;
margin-left: 10vw;

}

}
@media (min-width: 950px){
.container .logo a img {
Expand All @@ -530,10 +534,15 @@ width: 100%;
/*footer!*/
.big-logos img{
width: 85%;
}ano
}
.white p{
font-size: 0.7em;
width: 70%;
margin-left: 8vw;
}
.white h5{
margin-left: 8vw;
}


}
Expand Down Expand Up @@ -577,10 +586,6 @@ width: 100%;
height: 100%;
}

.column-two{
display: flex;

}
.column-one h2{
width: 600px;
}
Expand All @@ -606,15 +611,15 @@ width: 100%;
font-family: 'Open Sans';
font-size: 1em;
margin-bottom: 0px;
margin-left: 10%;
margin-left: 8vw;
margin-top: 20px;
}
.white p{
color: black;
font-family: 'Open Sans';
font-size: 0.8em;
margin-top: 5px;
margin-left: 10%;
margin-left: 8vw;
margin-bottom: 20px;
width: 70%;
}
Expand Down
60 changes: 60 additions & 0 deletions index-one.html
@@ -0,0 +1,60 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Mahnoor's Simple Website</title>
<link href="css/basic-site.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<header>
<div class="image">
<img src="img/head.jpg" alt="header image"/>
<div class="text">Mahnoor Afteb</div>
</div>
</header>
<main>
<nav>
<h2>About Me</h2>
</nav>

<div class="me">
<img src="img/me.jpg" alt="picture of author"/>
</div>
<section class="one">

<p>I’m currently an undergraduate enrolled in the Digital Media and Design program at the <em>University of Connecticut</em>. I was born and raised in Meriden, Connecticut. I have always been an artistic child growing up and throughout high school, I was eager to take every possible art and digital technology course offered to me including digital imaging, web design, video production, ceramics and advanced photography. I would describe my personal style as vibrant, bold and festive. My artistic statement for most of my work pays attention to detail as I am especially inspired by abstract art.</p>

</section>
<hr>
<section class="titles">
<h3>My Interests</h3>
</section>
<section class="two">
<ul>
<li>Photography</li>
<li>Traveling</li>
<li>Volunteering</li>
<li>Baking</li>
<li>Reading</li>
<li>Music</li>
</ul>
</section>
<h3>My Favorite Websites:</h3>
<section class="three">
<ul>
<li><a href="https://www.netflix.com " target="_blank">Netflix</a></li>
<li><a href="https://www.twitter.com" target="_blank">Twitter</a></li>
<li><a href="https://www.youtube.com" target="_blank">YouTube</a></li>
<li><a href="https://www.theverge.com" target="_blank">The Verge</a></li>
</ul>
</section>


</main>
<footer>
<h4>© Mahnoor Afteb 2020</h4>
</footer>
</body>
</html>
135 changes: 89 additions & 46 deletions index.html 100755 → 100644
Expand Up @@ -3,58 +3,101 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Mahnoor's Simple Website</title>
<link href="css/basic-site.css" type="text/css" rel="stylesheet"/>
<title>Responsive Practice</title>
<link href="css/responsive.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<header>
<div class="image">
<img src="img/head.jpg" alt="header image"/>
<div class="text">Mahnoor Afteb</div>
<div id="bg">
<div class="container">
<div class="logo">
<a href="#"><img src="img/logo.jpg" alt="logo"></a>
</div>
<div class="navbar">

<div class="icon-bar" onclick="Show()">
<i></i>
<i></i>
<i></i>
</div>
</header>
<main>
<nav>
<h2>About Me</h2>
</nav>

<div class="me">
<img src="img/me.jpg" alt="picture of author"/>

<ul id="nav-lists">
<li class="close"><span onclick="Hide()">×</span></li>
<li><a href="#">Features</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Reviews</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<main>
<div class="centered">

<!--Column 1-->
<div class="column-one">
<div class="big-logo">
<img src="img/big-logo.jpg" alt="big logo"/>
</div>
<h2>MODERN AXURE TEMPLATE<br>
FOR BEAUTIFUL PROTOTYPES</h2>
<hr><br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
euismod bibendum laoreet. Proin gravida dolor sit amet lacus
accumsan et viverra justo commodo.</p>
<button class="btn">Download</button>
</div>
<!--Column 2-->
<div class="column-two">
<form action="">
<div id="form-container">
<h3> Try Your <span style="color: orange;">FREE</span> Trial Today </h3>
<input type="text" name="Name" id="" placeholder="Name">
<input type="text" name="Email" id="" placeholder="Email">
<input type="text" name="Password" id="" placeholder="Password">

<button type="submit" name="Get Started">Get Started!</button>
</div>
</form>
</div>

</div>
</div>
</div>
</main>
<div id="footer-container">
<div id="footer-one">
<div class="white">
<h5>Social Media</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenean euismod bibendum laoreet.</p>
</div>
<div class="big-logos">
<img src="img/big-icons.jpg" alt="big logos with white background"/>
</div>
</div>

<div id="footer-two">
<div class="black">
<div class="small-logos">
<img src="img/footer-icons.jpg" alt="small logos with black background"/>
</div>
<section class="one">
<h6>© 2020 Axure Themes</h6>
</div>

<p>I’m currently an undergraduate enrolled in the Digital Media and Design program at the <em>University of Connecticut</em>. I was born and raised in Meriden, Connecticut. I have always been an artistic child growing up and throughout high school, I was eager to take every possible art and digital technology course offered to me including digital imaging, web design, video production, ceramics and advanced photography. I would describe my personal style as vibrant, bold and festive. My artistic statement for most of my work pays attention to detail as I am especially inspired by abstract art.</p>

</section>
<hr>
<section class="titles">
<h3>My Interests</h3>
</section>
<section class="two">
<ul>
<li>Photography</li>
<li>Traveling</li>
<li>Volunteering</li>
<li>Baking</li>
<li>Reading</li>
<li>Music</li>
</ul>
</section>
<h3>My Favorite Websites:</h3>
<section class="three">
<ul>
<li><a href="https://www.netflix.com " target="_blank">Netflix</a></li>
<li><a href="https://www.twitter.com" target="_blank">Twitter</a></li>
<li><a href="https://www.youtube.com" target="_blank">YouTube</a></li>
<li><a href="https://www.theverge.com" target="_blank">The Verge</a></li>
</ul>
</section>
</div>

</div>

</main>
<footer>
<h4>© Mahnoor Afteb 2020</h4>
</footer>
<!--JavaScript for navbar-->
<script>
var navList = document.getElementById("nav-lists");
function Show() {
navList.classList.add("_Menus-show");
}

function Hide(){
navList.classList.remove("_Menus-show");
}
</script>
</body>
</html>

0 comments on commit df65cab

Please sign in to comment.